refactor: improve messaging about websocket errors

ui/app/layouts/default.vue

@@ -154,13 +154,19 @@
       <div>
         <NuxtLoadingIndicator />
         <NuxtPage v-if="config.is_loaded" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
-        <Message v-if="!config.is_loaded" class="has-background-info-90 has-text-dark mt-5"
+        <Message v-if="!config.is_loaded" class="mt-5" :newStyle="true"
           title="Loading Configuration" icon="fas fa-spinner fa-spin">
           <p>Loading application configuration. This usually takes less than a second.</p>
           <p v-if="!socket.isConnected" class="mt-2">
             If this is taking too long, please check that the backend server is running and that the WebSocket
             connection is functional.
           </p>
+          <p v-if="socket.error" class="has-text-danger">
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-triangle-exclamation" /></span>
+              {{ socket.error }}
+            </span>
+          </p>
         </Message>
         <Markdown @closeModel="() => doc.file = ''" :file="doc.file" v-if="doc.file" />
         <ClientOnly>
@@ -182,8 +188,8 @@
             - <NuxtLink @click="doc.file = '/api/docs/README.md'">README</NuxtLink>
             - <NuxtLink @click="doc.file = '/api/docs/API.md'">API</NuxtLink>
             - <NuxtLink @click="scrollToTop">
-                <span class="icon"><i class="fas fa-arrow-up" /></span>
-                <span>Top</span>
+              <span class="icon"><i class="fas fa-arrow-up" /></span>
+              <span>Top</span>
             </NuxtLink>
           </div>
         </div>

ui/app/stores/SocketStore.ts

@@ -13,6 +13,7 @@ export const useSocketStore = defineStore('socket', () => {
   const socket = ref<IOSocket | null>(null)
   const isConnected = ref<boolean>(false)
   const connectionStatus = ref<connectionStatus>('disconnected')
+  const error = ref<string | null>(null)
 
   const emit = (event: string, data?: any): any => socket.value?.emit(event, data)
   const on = (event: string | string[], callback: (...args: any[]) => void, withEvent: boolean = false) => {
@@ -72,16 +73,26 @@ export const useSocketStore = defineStore('socket', () => {
     connectionStatus.value = 'connecting';
     socket.value = io(url, opts)
 
-    on("connect_error", (e: any) => console.error("Socket connection error:", e));
+    on("connect_error", (e: any) => {
+      isConnected.value = false
+      if (null === e || undefined === e) {
+        error.value = 'Connection error: Unknown error';
+        return;
+      }
+      error.value = `Connection error: ${e.type || 'Unknown'}: ${e.message || 'Unknown error'}`;
+    });
+
 
     on('connect', () => {
       isConnected.value = true
       connectionStatus.value = 'connected';
+      error.value = null;
     });
 
     on('disconnect', () => {
       isConnected.value = false
       connectionStatus.value = 'disconnected';
+      error.value = 'Disconnected from server.';
     });
 
     on('configuration', stream => {
@@ -100,6 +111,7 @@ export const useSocketStore = defineStore('socket', () => {
       config.add('folders', json.data.folders)
       stateStore.addAll('queue', json.data.queue || {})
       stateStore.addAll('history', json.data.done || {})
+      error.value = null;
     })
 
     on('item_added', stream => {
@@ -215,5 +227,6 @@ export const useSocketStore = defineStore('socket', () => {
     socket, isConnected,
     getSessionId,
     connectionStatus: readonly(connectionStatus) as Readonly<Ref<connectionStatus>>,
+    error: readonly(error) as Readonly<Ref<string | null>>,
   };
 });