[Fix] OPFS Multitab Deadlocks

.changeset/rare-windows-argue.md

@@ -0,0 +1,7 @@
+---
+'@powersync/web': minor
+---
+
+- Fixed some edge cases where multiple tabs with OPFS can cause sync deadlocks.
+- Fixed issue where calling `powerSync.close()` would cause a disconnect if using multiple tabs (the default should not be to disconnect if using multiple tabs)
+- Improved shared sync implementation database delegation and opening strategy.

.changeset/witty-steaks-worry.md

@@ -0,0 +1,5 @@
+---
+'@powersync/common': minor
+---
+
+- Improved serializing of upload and download errors for SyncStatus events. Some JS `Error`s are not cloneable, the JSON representation of a SyncStatus should now always be cloneable.

demos/angular-supabase-todolist/package.json

@@ -23,7 +23,7 @@
     "@angular/platform-browser-dynamic": "^19.2.4",
     "@angular/router": "^19.2.4",
     "@angular/service-worker": "^19.2.4",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/web": "workspace:*",
     "@supabase/supabase-js": "^2.44.4",
     "rxjs": "~7.8.1",

demos/example-capacitor/package.json

@@ -25,7 +25,7 @@
     "@capacitor/core": "latest",
     "@capacitor/ios": "^7.4.3",
     "@capacitor/splash-screen": "latest",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/capacitor": "workspace:*",
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",

demos/example-electron/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
     "@mui/x-data-grid": "^6.19.11",

demos/example-nextjs/package.json

@@ -14,7 +14,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@lexical/react": "^0.15.0",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",

demos/react-multi-client/package.json

@@ -10,7 +10,7 @@
     "test:build": "pnpm build"
   },
   "dependencies": {
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",
     "@supabase/supabase-js": "^2.43.1",

demos/react-native-web-supabase-todolist/package.json

@@ -14,7 +14,7 @@
     "@expo/metro-runtime": "^4.0.1",
     "@expo/vector-icons": "^14.0.2",
     "@journeyapps/react-native-quick-sqlite": "^2.5.0",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/attachments": "workspace:*",
     "@powersync/react": "workspace:*",
     "@powersync/react-native": "workspace:*",

demos/react-supabase-todolist-optional-sync/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",

demos/react-supabase-todolist-sync-streams/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",

demos/react-supabase-todolist-tanstackdb/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",

demos/react-supabase-todolist/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",

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'
   }
 });
 

demos/yjs-react-supabase-text-collab/package.json

@@ -9,7 +9,7 @@
     "start": "pnpm build && pnpm preview"
   },
   "dependencies": {
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@mui/material": "^5.15.12",
     "@mui/x-data-grid": "^6.19.6",
     "@powersync/react": "workspace:*",

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,
@@ -1223,7 +1223,6 @@ The next upload iteration will be delayed.`);
         resolve();
         return;
       }
-
       const { retryDelayMs } = this.options;
 
       let timeoutId: ReturnType<typeof setTimeout> | undefined;

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/drizzle-driver/package.json

@@ -47,12 +47,12 @@
     "drizzle-orm": "<1.0.0"
   },
   "devDependencies": {
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/web": "workspace:*",
     "@types/node": "^20.17.6",
     "drizzle-orm": "^0.44.7",
     "vite": "^6.1.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0"
   }
-}
+}

packages/kysely-driver/package.json

@@ -49,7 +49,7 @@
     "kysely": "^0.28.0"
   },
   "devDependencies": {
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/web": "workspace:*",
     "@types/node": "^20.17.6",
     "vite": "^6.1.0",

packages/web/package.json

@@ -61,7 +61,7 @@
   "author": "JOURNEYAPPS",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@powersync/common": "workspace:^1.43.1"
   },
   "dependencies": {
@@ -72,7 +72,7 @@
     "commander": "^12.1.0"
   },
   "devDependencies": {
-    "@journeyapps/wa-sqlite": "^1.4.0",
+    "@journeyapps/wa-sqlite": "^1.4.1",
     "@types/uuid": "^9.0.6",
     "crypto-browserify": "^3.12.0",
     "p-defer": "^4.0.1",

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.