feat(ui): do not try connect the socket if not session exists

Author: fiftin

web/src/App.vue

@@ -1344,11 +1344,14 @@ export default {
     },
 
     async loadData() {
+      await this.loadUserInfo();
+
+      // Activate session and start socket only after confirming user is authenticated
+      socket.setSessionActive(true);
       if (!socket.isRunning()) {
         socket.start();
       }
 
-      await this.loadUserInfo();
       await this.loadProjects();
 
       // try to find project and switch to it if URL not pointing to any project
@@ -1510,6 +1513,7 @@ export default {
           responseType: 'json',
         }));
 
+        socket.setSessionActive(false);
         socket.stop();
 
         if (this.$route.path !== '/auth/login') {

web/src/lib/Socket.js

@@ -1,14 +1,59 @@
 import Listenable from '@/lib/Listenable';
 
+/**
+ * A fake WebSocket that mimics the WebSocket interface but does nothing.
+ * Used when there's no active user session to prevent console errors.
+ */
+class FakeWebSocket {
+  constructor() {
+    this.readyState = WebSocket.OPEN;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  close() {
+    // Do nothing
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  send() {
+    // Do nothing
+  }
+}
+
 export default class Socket extends Listenable {
   constructor(websocketCreator) {
     super();
     this.websocketCreator = websocketCreator;
+    this.sessionActive = false;
+    this.wantStart = false;
   }
 
-  start() {
+  /**
+   * Sets whether the user session is active.
+   * If session becomes active and start() was previously called, creates real WebSocket.
+   * If session becomes inactive, stops real WebSocket and switches to fake one.
+   * @param {boolean} isActive - Whether the user session is active
+   */
+  setSessionActive(isActive) {
+    const wasActive = this.sessionActive;
+    this.sessionActive = isActive;
+
+    if (isActive && !wasActive && this.wantStart) {
+      // Session became active and we wanted to start - create real socket
+      this.startRealSocket();
+    } else if (!isActive && wasActive && this.ws) {
+      // Session became inactive - stop real socket
+      this.stop();
+    }
+  }
+
+  /**
+   * Internal method to start a real WebSocket connection.
+   * Only called when session is active.
+   */
+  startRealSocket() {
     if (this.ws != null) {
-      throw new Error('Websocket already started. Please stop it before starting.');
+      return;
     }
     this.ws = this.websocketCreator();
     this.ws.onclose = () => {
@@ -17,19 +62,38 @@ export default class Socket extends Listenable {
       }
       this.ws = null;
       setTimeout(() => {
-        this.start();
+        if (this.sessionActive) {
+          this.startRealSocket();
+        }
       }, 2000);
     };
     this.ws.onmessage = ({ data }) => {
       this.callListeners(JSON.parse(data));
     };
   }
 
+  start() {
+    this.wantStart = true;
+
+    if (this.ws != null) {
+      return; // Already running (real or fake)
+    }
+
+    if (this.sessionActive) {
+      // Session is active, create real WebSocket
+      this.startRealSocket();
+    } else {
+      // No session, create fake WebSocket to avoid errors
+      this.ws = new FakeWebSocket();
+    }
+  }
+
   isRunning() {
     return this.ws != null;
   }
 
   stop() {
+    this.wantStart = false;
     if (!this.ws) {
       return;
     }