improve the connection error msg

src/layouts/Layout.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
         <div class="container-fluid">
-            Lost connection to the socket server. Reconnecting...
+            {{ $root.connectionErrorMsg }}
         </div>
     </div>
 

src/mixins/socket.js

@@ -29,6 +29,7 @@ export default {
             notificationList: [],
             windowWidth: window.innerWidth,
             showListMobile: false,
+            connectionErrorMsg: "Cannot connect to the socket server. Reconnecting..."
         }
     },
 
@@ -47,10 +48,6 @@ export default {
             transports: ["websocket"],
         });
 
-        socket.on("connect_error", (err) => {
-            console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
-        });
-
         socket.on("info", (info) => {
             this.info = info;
         });
@@ -136,8 +133,16 @@ export default {
             }
         });
 
+        socket.on("connect_error", (err) => {
+            console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
+            this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
+            this.socket.connected = false;
+            this.socket.firstConnect = false;
+        });
+
         socket.on("disconnect", () => {
             console.log("disconnect")
+            this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
             this.socket.connected = false;
         });