Display error message when socket.io is failed to initialize

frontend/src/@redux/actions/site.ts

@@ -16,10 +16,11 @@ import { systemUpdateLanguagesAll, systemUpdateSettings } from "./system";
 export const bootstrap = createCallbackAction(
   () => [systemUpdateLanguagesAll(), systemUpdateSettings(), badgeUpdateAll()],
   () => siteInitialized(),
-  () => siteInitializeFailed()
+  () => siteInitializationFailed()
 );
 
-const siteInitializeFailed = createAction(SITE_INITIALIZE_FAILED);
+// TODO: Override error message
+export const siteInitializationFailed = createAction(SITE_INITIALIZE_FAILED);
 
 const siteInitialized = createAction(SITE_INITIALIZED);
 

frontend/src/@socketio/index.ts

@@ -23,7 +23,7 @@ class SocketIOClient {
 
     this.socket.on("connect", this.onConnect.bind(this));
     this.socket.on("disconnect", this.onDisconnect.bind(this));
-    this.socket.on("connect_error", this.onDisconnect.bind(this));
+    this.socket.on("connect_error", this.onConnectError.bind(this));
     this.socket.on("data", this.onEvent.bind(this));
 
     this.events = [];
@@ -108,6 +108,11 @@ class SocketIOClient {
     this.onEvent({ type: "connect", action: "update", payload: null });
   }
 
+  private onConnectError() {
+    log("warning", "Socket.IO has error connecting backend");
+    this.onEvent({ type: "connect_error", action: "update", payload: null });
+  }
+
   private onDisconnect() {
     log("warning", "Socket.IO has disconnected");
     this.onEvent({ type: "disconnect", action: "update", payload: null });

frontend/src/@socketio/reducer.ts

@@ -6,6 +6,7 @@ import {
   seriesDeleteItems,
   seriesUpdateList,
   siteAddNotifications,
+  siteInitializationFailed,
   siteRemoveNotifications,
   siteUpdateOffline,
   systemUpdateLanguagesAll,
@@ -27,6 +28,17 @@ export function createDefaultReducer(): SocketIO.Reducer[] {
       key: "connect",
       any: () => reduxStore.dispatch<any>(bootstrap()),
     },
+    {
+      key: "connect_error",
+      any: () => {
+        const initialized = reduxStore.getState().site.initialized;
+        if (initialized === true) {
+          reduxStore.dispatch(siteUpdateOffline(true));
+        } else {
+          reduxStore.dispatch(siteInitializationFailed());
+        }
+      },
+    },
     {
       key: "disconnect",
       any: () => reduxStore.dispatch(siteUpdateOffline(true)),

frontend/src/@types/socket.d.ts

@@ -1,6 +1,7 @@
 namespace SocketIO {
   type EventType =
     | "connect"
+    | "connect_error"
     | "disconnect"
     | "movie"
     | "series"