[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.

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

@@ -11,7 +11,7 @@ import {
   type ILogger
 } from '@powersync/common';
 import { getNavigatorLocks } from '../..//shared/navigator';
-import { AsyncDatabaseConnection } from './AsyncDatabaseConnection';
+import { AsyncDatabaseConnection, ConnectionClosedError } from './AsyncDatabaseConnection';
 import { SharedConnectionWorker, WebDBAdapter } from './WebDBAdapter';
 import { WorkerWrappedAsyncDatabaseConnection } from './WorkerWrappedAsyncDatabaseConnection';
 import { WASQLiteVFS } from './wa-sqlite/WASQLiteConnection';
@@ -26,10 +26,16 @@ export interface LockedAsyncDatabaseAdapterOptions {
   openConnection: () => Promise<AsyncDatabaseConnection>;
   debugMode?: boolean;
   logger?: ILogger;
+  defaultLockTimeoutMs?: number;
+  reOpenOnConnectionClosed?: boolean;
 }
 
 export type LockedAsyncDatabaseAdapterListener = DBAdapterListener & {
   initialized?: () => void;
+  /**
+   * Fired when the database is re-opened after being closed.
+   */
+  databaseReOpened?: () => void;
 };
 
 /**
@@ -51,6 +57,7 @@ export class LockedAsyncDatabaseAdapter
   private _config: ResolvedWebSQLOpenOptions | null = null;
   protected pendingAbortControllers: Set<AbortController>;
   protected requiresHolds: boolean | null;
+  protected databaseOpenPromise: Promise<void> | null = null;
 
   closing: boolean;
   closed: boolean;
@@ -105,18 +112,52 @@ export class LockedAsyncDatabaseAdapter
     return this.initPromise;
   }
 
-  protected async _init() {
+  protected async openInternalDB() {
+    // Dispose any previous table change listener.
+    this._disposeTableChangeListener?.();
+    this._disposeTableChangeListener = null;
+
+    const isReOpen = !!this._db;
+
     this._db = await this.options.openConnection();
     await this._db.init();
     this._config = await this._db.getConfig();
     await this.registerOnChangeListener(this._db);
-    this.iterateListeners((cb) => cb.initialized?.());
+    if (isReOpen) {
+      this.iterateListeners((cb) => cb.databaseReOpened?.());
+    }
     /**
      * This is only required for the long-lived shared IndexedDB connections.
      */
     this.requiresHolds = (this._config as ResolvedWASQLiteOpenFactoryOptions).vfs == WASQLiteVFS.IDBBatchAtomicVFS;
   }
 
+  protected _reOpen() {
+    this.databaseOpenPromise = this.openInternalDB().finally(() => {
+      this.databaseOpenPromise = null;
+    });
+    return this.databaseOpenPromise;
+  }
+
+  /**
+   * Re-opens the underlying database.
+   * Returns a pending operation if one is already in progress.
+   */
+  async reOpenInternalDB(): Promise<void> {
+    if (!this.options.reOpenOnConnectionClosed) {
+      throw new Error(`Cannot re-open underlying database, reOpenOnConnectionClosed is not enabled`);
+    }
+    if (this.databaseOpenPromise) {
+      return this.databaseOpenPromise;
+    }
+    return this._reOpen();
+  }
+
+  protected async _init() {
+    await this.openInternalDB();
+    this.iterateListeners((cb) => cb.initialized?.());
+  }
+
   getConfiguration(): ResolvedWebSQLOpenOptions {
     if (!this._config) {
       throw new Error(`Cannot get config before initialization is completed`);
@@ -196,7 +237,7 @@ export class LockedAsyncDatabaseAdapter
     return this.acquireLock(
       async () => fn(this.generateDBHelpers({ execute: this._execute, executeRaw: this._executeRaw })),
       {
-        timeoutMs: options?.timeoutMs
+        timeoutMs: options?.timeoutMs ?? this.options.defaultLockTimeoutMs
       }
     );
   }
@@ -206,7 +247,7 @@ export class LockedAsyncDatabaseAdapter
     return this.acquireLock(
       async () => fn(this.generateDBHelpers({ execute: this._execute, executeRaw: this._executeRaw })),
       {
-        timeoutMs: options?.timeoutMs
+        timeoutMs: options?.timeoutMs ?? this.options.defaultLockTimeoutMs
       }
     );
   }
@@ -222,7 +263,7 @@ export class LockedAsyncDatabaseAdapter
     this.pendingAbortControllers.add(abortController);
     const { timeoutMs } = options ?? {};
 
-    const timoutId = timeoutMs
+    const timeoutId = timeoutMs
       ? setTimeout(() => {
           abortController.abort(`Timeout after ${timeoutMs}ms`);
           this.pendingAbortControllers.delete(abortController);
@@ -234,12 +275,32 @@ export class LockedAsyncDatabaseAdapter
       { signal: abortController.signal },
       async () => {
         this.pendingAbortControllers.delete(abortController);
-        if (timoutId) {
-          clearTimeout(timoutId);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
         }
-        const holdId = this.requiresHolds ? await this.baseDB.markHold() : null;
+        let holdId: string | null = null;
         try {
+          // The database is being opened in the background. Wait for it here.
+          if (this.databaseOpenPromise) {
+            /**
+             * We can't await this since it uses the same lock as we're in now.
+             */
+            throw new ConnectionClosedError('Connection is busy re-opening');
+          }
+
+          holdId = this.requiresHolds ? await this.baseDB.markHold() : null;
           return await callback();
+        } catch (ex) {
+          if (
+            ex instanceof ConnectionClosedError ||
+            (ex instanceof Error && ex.name === 'NoModificationAllowedError')
+          ) {
+            if (this.options.reOpenOnConnectionClosed && !this.databaseOpenPromise && !this.closing) {
+              // Immediately re-open the database. We need to miss as little table updates as possible.
+              this.reOpenInternalDB();
+            }
+          }
+          throw ex;
         } finally {
           if (holdId) {
             await this.baseDB.releaseHold(holdId);