Add withTimeout for opening db connections

Author: stevensJourney

packages/web/src/worker/sync/SharedSyncImplementation.ts

@@ -510,10 +510,18 @@ export class SharedSyncImplementation extends BaseObserver<SharedSyncImplementat
       // Should not really happen in practice
       throw new Error(`Could not open DB connection since no client is connected.`);
     }
-    const workerPort = await lastClient.clientProvider.getDBWorkerPort();
+    const workerPort = await withTimeout(() => lastClient.clientProvider.getDBWorkerPort(), 5_000);
     const remote = Comlink.wrap<OpenAsyncDatabaseConnection>(workerPort);
     const identifier = this.syncParams!.dbParams.dbFilename;
-    const db = await remote(this.syncParams!.dbParams);
+
+    /**
+     * The open could fail if the tab is closed while we're busy opening the database.
+     * This operation is typically executed inside an exclusive portMutex lock.
+     * We typically execute the closeListeners using the portMutex in a different context.
+     * We can't rely on the closeListeners to abort the operation if the tab is closed.
+     */
+    const db = await withTimeout(() => remote(this.syncParams!.dbParams), 5_000);
+
     const locked = new LockedAsyncDatabaseAdapter({
       name: identifier,
       defaultLockTimeoutMs: 20_000, // Max wait time for a lock request (we will retry failed attempts)
@@ -567,3 +575,18 @@ export class SharedSyncImplementation extends BaseObserver<SharedSyncImplementat
     this.updateAllStatuses(status);
   }
 }
+
+/**
+ * Runs the action with a timeout. If the action takes longer than the timeout, the promise will be rejected.
+ */
+function withTimeout<T>(action: () => Promise<T>, timeoutMs: number): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error('Timeout waiting for action'));
+    }, timeoutMs);
+    action()
+      .then(resolve)
+      .catch(reject)
+      .finally(() => clearTimeout(timeout));
+  });
+}

packages/web/tests/multiple_tabs_iframe.test.ts

@@ -247,11 +247,11 @@ async function createIframeWithPowerSyncClient(
  */
 function createMultipleTabsTest(vfs?: WASQLiteVFS) {
   const vfsName = vfs || 'IndexedDB';
-  describe(`Multiple Tabs with Iframes (${vfsName})`, { sequential: true, timeout: 120000 }, () => {
+  describe(`Multiple Tabs with Iframes (${vfsName})`, { sequential: true, timeout: 20_000 }, () => {
     const dbFilename = `test-multi-tab-${uuid()}.db`;
 
     // Configurable number of tabs to create (excluding the long-lived tab)
-    const NUM_TABS = 10;
+    const NUM_TABS = 50;
 
     it('should handle simultaneous close and reopen of tabs', async () => {
       // Step 1: Open a long-lived reference tab that stays open throughout the test
@@ -299,13 +299,20 @@ function createMultipleTabsTest(vfs?: WASQLiteVFS) {
       }
       expect(longLivedTab.iframe.isConnected).toBe(true);
 
-      // Step 3: Simultaneously close half of the tabs (simulating abrupt closure)
-      const halfCount = Math.floor(NUM_TABS / 2);
-      // Close the latest opened tabs since we usually use the last connected tabs for operations.
-      const tabsToClose = tabs.slice(halfCount);
-      const tabsToKeep = tabs.slice(0, halfCount);
+      // Step 3: Simultaneously close the first and last quarters of the tabs (simulating abrupt closure)
+      const quarterCount = Math.floor(NUM_TABS / 4);
+      const firstQuarterEnd = quarterCount;
+      const lastQuarterStart = NUM_TABS - quarterCount;
 
-      // Close half the tabs simultaneously (without proper cleanup)
+      // Close the first quarter and last quarter of tabs
+      const firstQuarter = tabs.slice(0, firstQuarterEnd);
+      const lastQuarter = tabs.slice(lastQuarterStart);
+      const tabsToClose = [...firstQuarter, ...lastQuarter];
+
+      // Keep the middle two quarters
+      const tabsToKeep = tabs.slice(firstQuarterEnd, lastQuarterStart);
+
+      // Close the first and last quarters of tabs simultaneously (without proper cleanup)
       // Do this in reverse order to ensure the last connected tab is closed first.
       const closePromises = tabsToClose.reverse().map((tab) => tab.cleanup());
       await Promise.all(closePromises);
@@ -324,8 +331,13 @@ function createMultipleTabsTest(vfs?: WASQLiteVFS) {
 
       // Step 4: Reopen the closed tabs
       const reopenedTabs: IframeClient[] = [];
-      const reopenPromises = tabsToClose.map(async (_, index) => {
-        const identifier = tabIdentifiers[index];
+      // Get the identifiers for the closed tabs by finding their indices in the original tabs array
+      const closedTabIdentifiers = tabsToClose.map((closedTab) => {
+        const index = tabs.indexOf(closedTab);
+        return tabIdentifiers[index];
+      });
+
+      const reopenPromises = closedTabIdentifiers.map(async (identifier) => {
         const result = await createIframeWithPowerSyncClient(dbFilename, identifier, vfs);
         reopenedTabs.push(result);
 
@@ -367,6 +379,11 @@ function createMultipleTabsTest(vfs?: WASQLiteVFS) {
       expect(queryResult.length).toBe(1);
       expect((queryResult[0] as { value: number }).value).toBe(1);
 
+      /**
+       * Wait a little for the state to settle.
+       */
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
       // Step 6: Create a new tab which should trigger a connect. The shared sync worker should reconnect.
       // This ensures the shared sync worker is not stuck and is properly handling new connections
       const newTabIdentifier = `new-tab-${Date.now()}`;

packages/web/tests/utils/iframeInitializer.ts

@@ -49,8 +49,8 @@ export async function setupPowerSyncInIframe(dbFilename: string, identifier: str
       logger
     });
 
-    // Connect to PowerSync
-    await db.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });
+    // Connect to PowerSync (don't await this since we want to create multiple tabs)
+    db.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });
 
     // Store reference for cleanup
     (window as any).powersyncClient = db;