refactor: close connections when the ws is not ready

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -21,6 +21,7 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	useEffect(() => {
 		if (!open || !logPath) return;
 
+		setData("");
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
 		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}${serverId ? `&serverId=${serverId}` : ""}`;
@@ -61,13 +62,14 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 			open={open}
 			onOpenChange={(e) => {
 				onClose();
-				if (!e) setData("");
+				if (!e) {
+					setData("");
+				}
 
-				if (!e && wsRef.current) {
+				if (wsRef.current) {
 					if (wsRef.current.readyState === WebSocket.OPEN) {
 						wsRef.current.close();
 					}
-					setData("");
 				}
 			}}
 		>

apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx

@@ -21,20 +21,38 @@ export const ShowDeploymentCompose = ({
 }: Props) => {
 	const [data, setData] = useState("");
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
 	useEffect(() => {
 		if (!open || !logPath) return;
 
+		setData("");
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
 		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}&serverId=${serverId}`;
 		const ws = new WebSocket(wsUrl);
 
+		wsRef.current = ws; // Store WebSocket instance in ref
+
 		ws.onmessage = (e) => {
 			setData((currentData) => currentData + e.data);
 		};
 
-		return () => ws.close();
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
+		ws.onclose = () => {
+			console.log("WebSocket connection closed");
+			wsRef.current = null;
+		};
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
+		};
 	}, [logPath, open]);
 
 	const scrollToBottom = () => {
@@ -50,7 +68,15 @@ export const ShowDeploymentCompose = ({
 			open={open}
 			onOpenChange={(e) => {
 				onClose();
-				if (!e) setData("");
+				if (!e) {
+					setData("");
+				}
+
+				if (wsRef.current) {
+					if (wsRef.current.readyState === WebSocket.OPEN) {
+						wsRef.current.close();
+					}
+				}
 			}}
 		>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -1,7 +1,7 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Terminal } from "@xterm/xterm";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 
@@ -18,8 +18,12 @@ export const DockerLogsId: React.FC<Props> = ({
 }) => {
 	const [term, setTerm] = React.useState<Terminal>();
 	const [lines, setLines] = React.useState<number>(40);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
 	const createTerminal = (): Terminal => {
+		if (containerId === "select-a-containe") {
+			return new Terminal();
+		}
 		const container = document.getElementById(id);
 		if (container) {
 			container.innerHTML = "";
@@ -45,7 +49,7 @@ export const DockerLogsId: React.FC<Props> = ({
 
 		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
 		const ws = new WebSocket(wsUrl);
-
+		wsRef.current = ws;
 		const fitAddon = new FitAddon();
 		termi.loadAddon(fitAddon);
 		// @ts-ignore
@@ -54,6 +58,10 @@ export const DockerLogsId: React.FC<Props> = ({
 		termi.focus();
 		setTerm(termi);
 
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
 		ws.onmessage = (e) => {
 			termi.write(e.data);
 		};
@@ -62,12 +70,21 @@ export const DockerLogsId: React.FC<Props> = ({
 			console.log(e.reason);
 
 			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
+			wsRef.current = null;
 		};
+
 		return termi;
 	};
 
 	useEffect(() => {
 		createTerminal();
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				wsRef.current.close();
+				wsRef.current = null;
+			}
+		};
 	}, [lines, containerId]);
 
 	useEffect(() => {

apps/dokploy/server/wss/docker-container-logs.ts

@@ -49,39 +49,45 @@ export const setupDockerContainerLogsWebSocketServer = (
 
 				if (!server.sshKeyId) return;
 				const client = new Client();
-				new Promise<void>((resolve, reject) => {
+				client
-					client
+					.once("ready", () => {
-						.once("ready", () => {
+						const command = `
-							const command = `
 						bash -c "docker container logs --tail ${tail} --follow ${containerId}"
 					`;
-							client.exec(command, (err, stream) => {
+						client.exec(command, (err, stream) => {
-								if (err) {
+							if (err) {
-									console.error("Execution error:", err);
+								console.error("Execution error:", err);
-									reject(err);
+								ws.close();
-									return;
+								return;
-								}
+							}
-								stream
+							stream
-									.on("close", () => {
+								.on("close", () => {
-										console.log("Connection closed ✅");
+									console.log("Connection closed ✅");
-										client.end();
+									client.end();
-										resolve();
+									ws.close();
-									})
+								})
-									.on("data", (data: string) => {
+								.on("data", (data: string) => {
-										ws.send(data.toString());
+									ws.send(data.toString());
-									})
+								})
-									.stderr.on("data", (data) => {
+								.stderr.on("data", (data) => {
-										ws.send(data.toString());
+									ws.send(data.toString());
-									});
+								});
-							});
-						})
-						.connect({
-							host: server.ipAddress,
-							port: server.port,
-							username: server.username,
-							privateKey: server.sshKey?.privateKey,
-							timeout: 99999,
 						});
+					})
+					.on("error", (err) => {
+						console.error("SSH connection error:", err);
+						ws.send(`SSH error: ${err.message}`);
+						ws.close(); // Cierra el WebSocket si hay un error con SSH
+					})
+					.connect({
+						host: server.ipAddress,
+						port: server.port,
+						username: server.username,
+						privateKey: server.sshKey?.privateKey,
+					});
+				ws.on("close", () => {
+					console.log("Connection closed ✅, From WS");
+					client.end();
 				});
 			} else {
 				const shell = getShell();