chore: bump socket.io-client to 4.5.4

src/excalidraw-app/collab/Collab.tsx

@@ -414,7 +414,27 @@ class Collab extends PureComponent<Props, CollabState> {
         roomKey,
       );
 
-      this.portal.socket.once("connect_error", fallbackInitializationHandler);
+      this.portal.socket.on("disconnect", (reason) => {
+        // reason `io server disconnect` probably means CORS issue
+        console.warn(
+          `${
+            this.portal.socketInitialized ? "initialized" : "uninitialized"
+          } socket disconnected from server: ${reason}`,
+        );
+        this.setState({
+          errorMessage: this.portal.socketInitialized
+            ? t("errors.socketDisconnected")
+            : t("errors.socketConnectionError"),
+        });
+        fallbackInitializationHandler();
+      });
+
+      this.portal.socket.once("connect_error", (err: any) => {
+        this.setState({
+          errorMessage: t("errors.socketConnectionError"),
+        });
+        fallbackInitializationHandler();
+      });
     } catch (error: any) {
       console.error(error);
       this.setState({ errorMessage: error.message });

src/excalidraw-app/collab/Portal.tsx

@@ -19,10 +19,11 @@ import { newElementWith } from "../../element/mutateElement";
 import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../data/encryption";
 import { PRECEDING_ELEMENT_KEY } from "../../constants";
+import { Socket } from "socket.io-client";
 
 class Portal {
   collab: TCollabClass;
-  socket: SocketIOClient.Socket | null = null;
+  socket: Socket | null = null;
   socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
   roomId: string | null = null;
   roomKey: string | null = null;
@@ -32,7 +33,7 @@ class Portal {
     this.collab = collab;
   }
 
-  open(socket: SocketIOClient.Socket, id: string, key: string) {
+  open(socket: Socket, id: string, key: string) {
     this.socket = socket;
     this.roomId = id;
     this.roomKey = key;

src/excalidraw-app/data/firebase.ts

@@ -14,6 +14,7 @@ import { encryptData, decryptData } from "../../data/encryption";
 import { MIME_TYPES } from "../../constants";
 import { reconcileElements } from "../collab/reconciliation";
 import { getSyncableElements, SyncableExcalidrawElement } from ".";
+import { Socket } from "socket.io-client";
 
 // private
 // -----------------------------------------------------------------------------
@@ -129,12 +130,12 @@ const decryptElements = async (
 };
 
 class FirebaseSceneVersionCache {
-  private static cache = new WeakMap<SocketIOClient.Socket, number>();
-  static get = (socket: SocketIOClient.Socket) => {
+  private static cache = new WeakMap<Socket, number>();
+  static get = (socket: Socket) => {
     return FirebaseSceneVersionCache.cache.get(socket);
   };
   static set = (
-    socket: SocketIOClient.Socket,
+    socket: Socket,
     elements: readonly SyncableExcalidrawElement[],
   ) => {
     FirebaseSceneVersionCache.cache.set(socket, getSceneVersion(elements));
@@ -276,7 +277,7 @@ export const saveToFirebase = async (
 export const loadFromFirebase = async (
   roomId: string,
   roomKey: string,
-  socket: SocketIOClient.Socket | null,
+  socket: Socket | null,
 ): Promise<readonly ExcalidrawElement[] | null> => {
   const firebase = await loadFirestore();
   const db = firebase.firestore();

src/locales/en.json

@@ -202,7 +202,9 @@
     "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
     "invalidSVGString": "Invalid SVG.",
     "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
-    "importLibraryError": "Couldn't load library"
+    "importLibraryError": "Couldn't load library",
+    "socketDisconnected": "We've been disconnected from the server",
+    "socketConnectionError": "Couldn't connect to the server"
   },
   "toolBar": {
     "selection": "Selection",