fix: Incorrect error shown to user when connection limit is reached (#5695)

app/components/ConnectionStatus.tsx

@@ -14,15 +14,48 @@ function ConnectionStatus() {
   const theme = useTheme();
   const { t } = useTranslation();
 
+  const codeToMessage = {
+    1009: {
+      title: t("Document is too large"),
+      body: t(
+        "This document has reached the maximum size and can no longer be edited"
+      ),
+    },
+    4401: {
+      title: t("Authentication failed"),
+      body: t("Please try logging out and back in again"),
+    },
+    4403: {
+      title: t("Authorization failed"),
+      body: t("You may have lost access to this document, try reloading"),
+    },
+    4503: {
+      title: t("Too many users connected to document"),
+      body: t("Your edits will sync once other users leave the document"),
+    },
+  };
+
+  const message = ui.multiplayerErrorCode
+    ? codeToMessage[ui.multiplayerErrorCode]
+    : undefined;
+
   return ui.multiplayerStatus === "connecting" ||
     ui.multiplayerStatus === "disconnected" ? (
     <Tooltip
       tooltip={
-        <Centered>
-          <strong>{t("Server connection lost")}</strong>
-          <br />
-          {t("Edits you make will sync once you’re online")}
-        </Centered>
+        message ? (
+          <Centered>
+            <strong>{message.title}</strong>
+            <br />
+            {message.body}
+          </Centered>
+        ) : (
+          <Centered>
+            <strong>{t("Server connection lost")}</strong>
+            <br />
+            {t("Edits you make will sync once you’re online")}
+          </Centered>
+        )
       }
       placement="bottom"
     >

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -135,13 +135,10 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     });
 
     provider.on("close", (ev: MessageEvent) => {
-      if ("code" in ev.event && ev.event.code === 1009) {
-        provider.shouldConnect = false;
-        showToast(
-          t(
-            "Sorry, this document is too large - edits will no longer be persisted."
-          )
-        );
+      if ("code" in ev.event) {
+        provider.shouldConnect =
+          ev.event.code !== 1009 && ev.event.code !== 4401;
+        ui.setMultiplayerStatus("disconnected", ev.event.code);
       }
     });
 
@@ -164,9 +161,11 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
       );
     }
 
-    provider.on("status", (ev: ConnectionStatusEvent) =>
-      ui.setMultiplayerStatus(ev.status)
-    );
+    provider.on("status", (ev: ConnectionStatusEvent) => {
+      if (ui.multiplayerStatus !== ev.status) {
+        ui.setMultiplayerStatus(ev.status, undefined);
+      }
+    });
 
     setRemoteProvider(provider);
 
@@ -177,7 +176,7 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
       provider?.destroy();
       void localProvider?.destroy();
       setRemoteProvider(null);
-      ui.setMultiplayerStatus(undefined);
+      ui.setMultiplayerStatus(undefined, undefined);
     };
   }, [
     history,

app/stores/UiStore.ts

@@ -69,6 +69,9 @@ class UiStore {
   @observable
   multiplayerStatus: ConnectionStatus;
 
+  @observable
+  multiplayerErrorCode?: number;
+
   constructor() {
     // Rehydrate
     const data: Partial<UiStore> = Storage.get(UI_STORE) || {};
@@ -133,8 +136,12 @@ class UiStore {
   };
 
   @action
-  setMultiplayerStatus = (status: ConnectionStatus): void => {
+  setMultiplayerStatus = (
+    status: ConnectionStatus,
+    errorCode?: number
+  ): void => {
     this.multiplayerStatus = status;
+    this.multiplayerErrorCode = errorCode;
   };
 
   @action