[Fix] OPFS Multitab issue

.changeset/rare-windows-argue.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': patch
+---
+
+No longer awaiting when aborting connection on tab closure. Fixes some edge cases where multiple tabs with OPFS/Safari can cause deadlocks.

.changeset/witty-steaks-worry.md

@@ -0,0 +1,5 @@
+---
+'@powersync/common': minor
+---
+
+Serializing upload and download errors for SyncStatus events. Small changes to how delay values are passed to the sync implementation internally.

demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx

@@ -3,7 +3,14 @@ import { AppSchema, ListRecord, LISTS_TABLE, TODOS_TABLE } from '@/library/power
 import { SupabaseConnector } from '@/library/powersync/SupabaseConnector';
 import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
-import { createBaseLogger, DifferentialWatchedQuery, LogLevel, PowerSyncDatabase } from '@powersync/web';
+import {
+  createBaseLogger,
+  DifferentialWatchedQuery,
+  LogLevel,
+  PowerSyncDatabase,
+  WASQLiteOpenFactory,
+  WASQLiteVFS
+} from '@powersync/web';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
 
@@ -12,8 +19,15 @@ export const useSupabase = () => React.useContext(SupabaseContext);
 
 export const db = new PowerSyncDatabase({
   schema: AppSchema,
-  database: {
-    dbFilename: 'example.db'
+  database: new WASQLiteOpenFactory({
+    dbFilename: 'example.db',
+    vfs: WASQLiteVFS.OPFSCoopSyncVFS,
+    flags: {
+      enableMultiTabs: typeof SharedWorker !== 'undefined'
+    }
+  }),
+  flags: {
+    enableMultiTabs: typeof SharedWorker !== 'undefined'
   }
 });
 

package.json

@@ -49,5 +49,10 @@
     "rollup-plugin-dts": "^6.2.1",
     "typescript": "^5.7.2",
     "vitest": "^3.2.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "@journeyapps/wa-sqlite": "0.0.0-dev-20251201120934"
+    }
   }
 }

packages/common/src/client/ConnectionManager.ts

@@ -1,4 +1,5 @@
 import { ILogger } from 'js-logger';
+import { SyncStatus } from '../db/crud/SyncStatus.js';
 import { BaseListener, BaseObserver } from '../utils/BaseObserver.js';
 import { PowerSyncBackendConnector } from './connection/PowerSyncBackendConnector.js';
 import {
@@ -13,7 +14,6 @@ import {
   SyncStreamSubscribeOptions,
   SyncStreamSubscription
 } from './sync/sync-streams.js';
-import { SyncStatus } from '../db/crud/SyncStatus.js';
 
 /**
  * @internal

packages/common/src/client/sync/stream/AbstractStreamingSyncImplementation.ts

@@ -16,7 +16,7 @@ import {
 import { CrudEntry } from '../bucket/CrudEntry.js';
 import { SyncDataBucket } from '../bucket/SyncDataBucket.js';
 import { AbstractRemote, FetchStrategy, SyncStreamOptions } from './AbstractRemote.js';
-import { coreStatusToJs, EstablishSyncStream, Instruction, SyncPriorityStatus } from './core-instruction.js';
+import { EstablishSyncStream, Instruction, coreStatusToJs } from './core-instruction.js';
 import {
   BucketRequest,
   CrudUploadNotification,
@@ -429,7 +429,7 @@ The next upload iteration will be delayed.`);
                 uploadError: ex
               }
             });
-            await this.delayRetry(controller.signal);
+            await this.delayRetry(controller.signal, this.options.crudUploadThrottleMs);
             if (!this.isConnected) {
               // Exit the upload loop if the sync stream is no longer connected
               break;
@@ -1216,15 +1216,14 @@ The next upload iteration will be delayed.`);
     this.iterateListeners((cb) => cb.statusUpdated?.(options));
   }
 
-  private async delayRetry(signal?: AbortSignal): Promise<void> {
+  private async delayRetry(signal?: AbortSignal, delayMs?: number): Promise<void> {
     return new Promise((resolve) => {
       if (signal?.aborted) {
         // If the signal is already aborted, resolve immediately
         resolve();
         return;
       }
-
-      const { retryDelayMs } = this.options;
+      const delay = delayMs ?? this.options.retryDelayMs;
 
       let timeoutId: ReturnType<typeof setTimeout> | undefined;
 
@@ -1238,7 +1237,7 @@ The next upload iteration will be delayed.`);
       };
 
       signal?.addEventListener('abort', endDelay, { once: true });
-      timeoutId = setTimeout(endDelay, retryDelayMs);
+      timeoutId = setTimeout(endDelay, delay);
     });
   }
 

packages/common/src/db/crud/SyncStatus.ts

@@ -1,7 +1,7 @@
-import { CoreStreamSubscription } from '../../client/sync/stream/core-instruction.js';
 import { SyncClientImplementation } from '../../client/sync/stream/AbstractStreamingSyncImplementation.js';
-import { InternalProgressInformation, ProgressWithOperations, SyncProgress } from './SyncProgress.js';
+import { CoreStreamSubscription } from '../../client/sync/stream/core-instruction.js';
 import { SyncStreamDescription, SyncSubscriptionDescription } from '../../client/sync/sync-streams.js';
+import { InternalProgressInformation, ProgressWithOperations, SyncProgress } from './SyncProgress.js';
 
 export type SyncDataFlowStatus = Partial<{
   downloading: boolean;
@@ -250,13 +250,28 @@ export class SyncStatus {
     return {
       connected: this.connected,
       connecting: this.connecting,
-      dataFlow: this.dataFlowStatus,
+      dataFlow: {
+        ...this.dataFlowStatus,
+        uploadError: this.serializeError(this.dataFlowStatus.uploadError),
+        downloadError: this.serializeError(this.dataFlowStatus.downloadError)
+      },
       lastSyncedAt: this.lastSyncedAt,
       hasSynced: this.hasSynced,
       priorityStatusEntries: this.priorityStatusEntries
     };
   }
 
+  protected serializeError(error?: Error) {
+    if (typeof error == 'undefined') {
+      return undefined;
+    }
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack
+    };
+  }
+
   private static comparePriorities(a: SyncPriorityStatus, b: SyncPriorityStatus) {
     return b.priority - a.priority; // Reverse because higher priorities have lower numbers
   }

packages/web/src/db/PowerSyncDatabase.ts

@@ -1,32 +1,31 @@
 import {
-  type BucketStorageAdapter,
-  type PowerSyncBackendConnector,
-  type PowerSyncCloseOptions,
-  type RequiredAdditionalConnectionOptions,
   AbstractPowerSyncDatabase,
   DBAdapter,
-  DEFAULT_POWERSYNC_CLOSE_OPTIONS,
-  isDBAdapter,
-  isSQLOpenFactory,
   PowerSyncDatabaseOptions,
   PowerSyncDatabaseOptionsWithDBAdapter,
   PowerSyncDatabaseOptionsWithOpenFactory,
   PowerSyncDatabaseOptionsWithSettings,
   SqliteBucketStorage,
-  StreamingSyncImplementation
+  StreamingSyncImplementation,
+  isDBAdapter,
+  isSQLOpenFactory,
+  type BucketStorageAdapter,
+  type PowerSyncBackendConnector,
+  type PowerSyncCloseOptions,
+  type RequiredAdditionalConnectionOptions
 } from '@powersync/common';
 import { Mutex } from 'async-mutex';
 import { getNavigatorLocks } from '../shared/navigator';
+import { WebDBAdapter } from './adapters/WebDBAdapter';
 import { WASQLiteOpenFactory } from './adapters/wa-sqlite/WASQLiteOpenFactory';
 import {
   DEFAULT_WEB_SQL_FLAGS,
   ResolvedWebSQLOpenOptions,
-  resolveWebSQLFlags,
-  WebSQLFlags
+  WebSQLFlags,
+  resolveWebSQLFlags
 } from './adapters/web-sql-flags';
-import { WebDBAdapter } from './adapters/WebDBAdapter';
-import { SharedWebStreamingSyncImplementation } from './sync/SharedWebStreamingSyncImplementation';
 import { SSRStreamingSyncImplementation } from './sync/SSRWebStreamingSyncImplementation';
+import { SharedWebStreamingSyncImplementation } from './sync/SharedWebStreamingSyncImplementation';
 import { WebRemote } from './sync/WebRemote';
 import {
   WebStreamingSyncImplementation,
@@ -160,14 +159,13 @@ export class PowerSyncDatabase extends AbstractPowerSyncDatabase {
    * By default the sync stream client is only disconnected if
    * multiple tabs are not enabled.
    */
-  close(options: PowerSyncCloseOptions = DEFAULT_POWERSYNC_CLOSE_OPTIONS): Promise<void> {
+  close(options?: PowerSyncCloseOptions): Promise<void> {
     if (this.unloadListener) {
       window.removeEventListener('unload', this.unloadListener);
     }
-
     return super.close({
       // Don't disconnect by default if multiple tabs are enabled
-      disconnect: options.disconnect ?? !this.resolvedFlags.enableMultiTabs
+      disconnect: options?.disconnect ?? !this.resolvedFlags.enableMultiTabs
     });
   }
 

packages/web/src/db/adapters/AsyncDatabaseConnection.ts

@@ -17,6 +17,18 @@ export type ProxiedQueryResult = Omit<QueryResult, 'rows'> & {
  */
 export type OnTableChangeCallback = (event: BatchedUpdateNotification) => void;
 
+/**
+ * Thrown when an underlying database connection is closed.
+ * This is particularly relevant when worker connections are marked as closed while
+ * operations are still in progress.
+ */
+export class ConnectionClosedError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'ConnectionClosedError';
+  }
+}
+
 /**
  * @internal
  * An async Database connection which provides basic async SQL methods.