Fix auto-reconnection & slider value sync

excalidraw-app/App.tsx

@@ -865,6 +865,8 @@ const ExcalidrawWrapper = () => {
     currentVersion.current = value;
   }, 0);
 
+  const latestVersion = acknowledgedIncrements.length - 1;
+
   return (
     <div
       style={{ height: "100%" }}
@@ -882,8 +884,12 @@ const ExcalidrawWrapper = () => {
         }}
         step={1}
         min={0}
-        max={acknowledgedIncrements.length}
+        max={latestVersion}
-        value={nextVersion === -1 ? acknowledgedIncrements.length : nextVersion}
+        value={
+          nextVersion === -1 || nextVersion === latestVersion
+            ? latestVersion
+            : nextVersion
+        }
         onChange={(value) => {
           // CFDO: should be disabled when offline! (later we could have speculative changes in the versioning log as well)
           // CFDO: in safari the whole canvas gets selected when dragging

packages/excalidraw/cloudflare/repository.ts

@@ -37,7 +37,7 @@ export class DurableIncrementsRepository implements IncrementsRepository {
       try {
         const payload = JSON.stringify(increment);
         const payloadSize = new TextEncoder().encode(payload).byteLength;
-        const chunkVersion = this.getLastVersion() + 1;
+        const nextVersion = this.getLastVersion() + 1;
         const chunksCount = Math.ceil(
           payloadSize / DurableIncrementsRepository.MAX_PAYLOAD_SIZE,
         );
@@ -51,7 +51,7 @@ export class DurableIncrementsRepository implements IncrementsRepository {
           this.storage.sql.exec(
             `INSERT INTO increments (id, version, position, payload) VALUES (?, ?, ?, ?);`,
             increment.id,
-            chunkVersion,
+            nextVersion,
             position,
             chunkedPayload,
           );

packages/excalidraw/sync/client.ts

@@ -1,9 +1,6 @@
 /* eslint-disable no-console */
 import throttle from "lodash.throttle";
-import ReconnectingWebSocket, {
+import ReconnectingWebSocket, { type Event } from "reconnecting-websocket";
-  type Event,
-  type CloseEvent,
-} from "reconnecting-websocket";
 import { Utils } from "./utils";
 import {
   SyncQueue,
@@ -42,8 +39,6 @@ class SocketClient {
   // Chrome throws "Uncaught InvalidAccessError" with message:
   //   "The close code must be either 1000, or between 3000 and 4999. 1009 is neither."
   // therefore using custom codes instead.
-  private static readonly NO_STATUS_RECEIVED_ERROR_CODE = 3005;
-  private static readonly ABNORMAL_CLOSURE_ERROR_CODE = 3006;
   private static readonly MESSAGE_IS_TOO_LARGE_ERROR_CODE = 3009;
 
   private isOffline = true;
@@ -100,8 +95,6 @@ class SocketClient {
       );
       this.socket.addEventListener("message", this.onMessage);
       this.socket.addEventListener("open", this.onOpen);
-      this.socket.addEventListener("close", this.onClose);
-      this.socket.addEventListener("error", this.onError);
     },
     1000,
     { leading: true, trailing: false },
@@ -127,8 +120,6 @@ class SocketClient {
       );
       this.socket?.removeEventListener("message", this.onMessage);
       this.socket?.removeEventListener("open", this.onOpen);
-      this.socket?.removeEventListener("close", this.onClose);
-      this.socket?.removeEventListener("error", this.onError);
 
       let remappedCode = code;
 
@@ -198,24 +189,6 @@ class SocketClient {
     this.isOffline = false;
     this.handlers.onOpen(event);
   };
-
-  private onClose = (event: CloseEvent) => {
-    this.disconnect(
-      event.code || SocketClient.NO_STATUS_RECEIVED_ERROR_CODE,
-      event.reason || "Connection closed without a reason",
-    );
-    this.connect();
-  };
-
-  private onError = (event: Event) => {
-    this.disconnect(
-      event.type === "error"
-        ? SocketClient.ABNORMAL_CLOSURE_ERROR_CODE
-        : SocketClient.NO_STATUS_RECEIVED_ERROR_CODE,
-      `Received "${event.type}" on the sync connection`,
-    );
-    this.connect();
-  };
 }
 
 interface AcknowledgedIncrement {
@@ -288,6 +261,7 @@ export class SyncClient {
     return new SyncClient(api, repository, queue, {
       host: SyncClient.HOST_URL,
       roomId: SyncClient.ROOM_ID,
+      // CFDO: temporary, so that all increments are loaded and applied on init
       lastAcknowledgedVersion: 0,
     });
   }

packages/excalidraw/sync/server.ts

@@ -196,7 +196,7 @@ export class ExcalidrawSyncServer {
       return this.send(client, {
         type: "rejected",
         payload: {
-          message: error ? error.message : "Coudn't persist the increment",
+          message: error ? error.message : "Coudn't persist the increment.",
           increments: [increment],
         },
       });