BC-11049 automatic reload page when websocket is gone (#207)

---------

Co-authored-by: Phillip Wirth <phillip.wirth@dataport.de>

Author: SevenWaysDP

package-lock.json

@@ -40,6 +40,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "^4.17.20",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.46.4",
@@ -59,4 +60,4 @@
     "vite-plugin-top-level-await": "^1.6.0",
     "vitest": "^4.0.8"
   }
-}
+}

package.json

@@ -4,6 +4,7 @@ import { WebsocketProvider } from "y-websocket";
 import { Doc, Map, UndoManager } from "yjs";
 import { UserPresence } from "../types/UserPresence";
 import { handleWsClose } from "../utils/closeHandler";
+import { showConnectionErrorAndReload } from "../utils/connectionErrorHandler";
 import { getEnvs } from "../utils/envConfig";
 import { clearErrorData } from "../utils/errorData";
 import {
@@ -55,6 +56,15 @@ provider.on("connection-close", (event: CloseEvent | null) => {
   handleWsClose(event, provider);
 });
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+provider.on("connection-error", (_event: Event) => {
+  // Disconnect to prevent automatic reconnection attempts
+  provider.disconnect();
+  showConnectionErrorAndReload(
+    "Failed to connect to server. The page will reload in 10 seconds...",
+  );
+});
+
 const room = new Room<UserPresence>(provider.awareness, {});
 const yShapes: Map<TDShape> = doc.getMap("shapes");
 const yBindings: Map<TDBinding> = doc.getMap("bindings");

src/stores/setup.ts

@@ -1,10 +1,12 @@
 import { WebsocketProvider } from "y-websocket";
 import { handleWsClose } from "./closeHandler";
+import { showConnectionErrorAndReload } from "./connectionErrorHandler";
 import { setErrorData } from "./errorData";
 import { redirectToErrorPage } from "./redirectUtils";
 
 describe("closeHandler", () => {
   beforeAll(() => {
+    vi.mock("./connectionErrorHandler", { spy: true });
     vi.mock("./errorData", { spy: true });
     vi.mock("./redirectUtils", { spy: true });
   });
@@ -27,14 +29,17 @@ describe("closeHandler", () => {
         return { event, providerMock };
       };
 
-      it("should not call setErrorData or redirectToErrorPage nor disconnect", () => {
+      it("should disconnect and call showConnectionErrorAndReload but not setErrorData or redirectToErrorPage", () => {
         const { event, providerMock } = setup();
 
         handleWsClose(event, providerMock);
 
+        expect(providerMock.disconnect).toHaveBeenCalled();
+        expect(showConnectionErrorAndReload).toHaveBeenCalledWith(
+          "Connection to server lost. The page will reload in 10 seconds...",
+        );
         expect(setErrorData).not.toHaveBeenCalled();
         expect(redirectToErrorPage).not.toHaveBeenCalled();
-        expect(providerMock.disconnect).not.toHaveBeenCalled();
       });
     });
 

src/utils/closeHandler.test.ts

@@ -1,5 +1,6 @@
 import { WebsocketProvider } from "y-websocket";
 import { HttpStatusCode, WebsocketCloseCode } from "../types/StatusCodeEnums";
+import { showConnectionErrorAndReload } from "./connectionErrorHandler";
 import { setErrorData } from "./errorData";
 import { redirectToErrorPage } from "./redirectUtils";
 
@@ -30,11 +31,17 @@ export const handleWsClose = (
     (element) => element.websocketCode === event.code,
   );
 
-  // Any error that is not specified above should lead to a reconnection attempt.
-  if (!specifiedError) return;
-
-  setErrorData(specifiedError.httpCode, specifiedError.translationMessageKey);
-  redirectToErrorPage();
-
+  // Disconnect provider to prevent automatic reconnection.
   provider.disconnect();
+
+  if (specifiedError) {
+    // For specified errors, use the original error page redirection
+    setErrorData(specifiedError.httpCode, specifiedError.translationMessageKey);
+    redirectToErrorPage();
+  } else {
+    // For any other connection failure, show error message and force reload
+    showConnectionErrorAndReload(
+      "Connection to server lost. The page will reload in 10 seconds...",
+    );
+  }
 };

src/utils/closeHandler.ts

@@ -0,0 +1,34 @@
+import { toast } from "react-toastify";
+
+let reloadTimeoutId: number | null = null;
+
+export const showConnectionErrorAndReload = (
+  message: string = "Connection lost. The page will reload in 10 seconds...",
+) => {
+  // Clear any existing reload timeout
+  if (reloadTimeoutId) {
+    window.clearTimeout(reloadTimeoutId);
+  }
+
+  // Show error toast
+  toast.error(message, {
+    position: "top-center",
+    autoClose: false,
+    hideProgressBar: false,
+    closeOnClick: false,
+    pauseOnHover: false,
+    draggable: false,
+  });
+
+  // Force reload after 10 seconds
+  reloadTimeoutId = window.setTimeout(() => {
+    window.location.reload();
+  }, 10000);
+};
+
+export const clearConnectionErrorTimeout = () => {
+  if (reloadTimeoutId) {
+    window.clearTimeout(reloadTimeoutId);
+    reloadTimeoutId = null;
+  }
+};