Merge remote-tracking branch 'origin/main' into watches

Author: stevensJourney

.changeset/cool-yaks-allow.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': minor
+---
+
+To support the upstream credentials management changes from `@powersync/common`, the sync worker now communicates credentials invalidation to tabs.

.changeset/green-buckets-talk.md

@@ -0,0 +1,5 @@
+---
+'@powersync/op-sqlite': patch
+---
+
+Promoting package to Beta release.

.changeset/honest-melons-laugh.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': patch
+---
+
+Fixed issue where broadcast logger wasn't being passed to WebRemote, causing worker remote logs not to be broadcasted to the tab's logs.

.changeset/shiny-rules-invent.md

@@ -0,0 +1,5 @@
+---
+'@powersync/common': minor
+---
+
+Improved credentials management and error handling. Credentials are invalidated when they expire or become invalid based on responses from the PowerSync service. The frequency of credential fetching has been reduced as a result of this work.

demos/react-native-barebones-opsqlite/README.md

@@ -1,8 +1,8 @@
-# PowerSync React Native Barebones OPSQlite
+# PowerSync React Native Barebones OP-SQlite
 
 ## Overview
 
-This is a minimal example demonstrating a barebones react native project using OPSQLite . It shows an update to the local SQLite DB on app launch.
+This is a minimal example demonstrating a barebones React Native project using OP-SQLite. It shows an update to the local SQLite DB on app launch.
 
 
 ## Getting Started

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

@@ -15,13 +15,12 @@ export type BSONImplementation = typeof BSON;
 
 export type RemoteConnector = {
   fetchCredentials: () => Promise<PowerSyncCredentials | null>;
+  invalidateCredentials?: () => void;
 };
 
 const POWERSYNC_TRAILING_SLASH_MATCH = /\/+$/;
 const POWERSYNC_JS_VERSION = PACKAGE.version;
 
-// Refresh at least 30 sec before it expires
-const REFRESH_CREDENTIALS_SAFETY_PERIOD_MS = 30_000;
 const SYNC_QUEUE_REQUEST_LOW_WATER = 5;
 
 // Keep alive message is sent every period
@@ -130,18 +129,59 @@ export abstract class AbstractRemote {
       : fetchImplementation;
   }
 
+  /**
+   * Get credentials currently cached, or fetch new credentials if none are
+   * available.
+   *
+   * These credentials may have expired already.
+   */
   async getCredentials(): Promise<PowerSyncCredentials | null> {
-    const { expiresAt } = this.credentials ?? {};
-    if (expiresAt && expiresAt > new Date(new Date().valueOf() + REFRESH_CREDENTIALS_SAFETY_PERIOD_MS)) {
-      return this.credentials!;
+    if (this.credentials) {
+      return this.credentials;
     }
-    this.credentials = await this.connector.fetchCredentials();
-    if (this.credentials?.endpoint.match(POWERSYNC_TRAILING_SLASH_MATCH)) {
+
+    return this.prefetchCredentials();
+  }
+
+  /**
+   * Fetch a new set of credentials and cache it.
+   *
+   * Until this call succeeds, `getCredentials` will still return the
+   * old credentials.
+   *
+   * This may be called before the current credentials have expired.
+   */
+  async prefetchCredentials() {
+    this.credentials = await this.fetchCredentials();
+
+    return this.credentials;
+  }
+
+  /**
+   * Get credentials for PowerSync.
+   *
+   * This should always fetch a fresh set of credentials - don't use cached
+   * values.
+   */
+  async fetchCredentials() {
+    const credentials = await this.connector.fetchCredentials();
+    if (credentials?.endpoint.match(POWERSYNC_TRAILING_SLASH_MATCH)) {
       throw new Error(
-        `A trailing forward slash "/" was found in the fetchCredentials endpoint: "${this.credentials.endpoint}". Remove the trailing forward slash "/" to fix this error.`
+        `A trailing forward slash "/" was found in the fetchCredentials endpoint: "${credentials.endpoint}". Remove the trailing forward slash "/" to fix this error.`
       );
     }
-    return this.credentials;
+
+    return credentials;
+  }
+
+  /***
+   * Immediately invalidate credentials.
+   *
+   * This may be called when the current credentials have expired.
+   */
+  invalidateCredentials() {
+    this.credentials = null;
+    this.connector.invalidateCredentials?.();
   }
 
   getUserAgent() {
@@ -181,6 +221,10 @@ export abstract class AbstractRemote {
       body: JSON.stringify(data)
     });
 
+    if (res.status === 401) {
+      this.invalidateCredentials();
+    }
+
     if (!res.ok) {
       throw new Error(`Received ${res.status} - ${res.statusText} when posting to ${path}: ${await res.text()}}`);
     }
@@ -198,6 +242,10 @@ export abstract class AbstractRemote {
       }
     });
 
+    if (res.status === 401) {
+      this.invalidateCredentials();
+    }
+
     if (!res.ok) {
       throw new Error(`Received ${res.status} - ${res.statusText} when getting from ${path}: ${await res.text()}}`);
     }
@@ -224,6 +272,10 @@ export abstract class AbstractRemote {
       throw ex;
     });
 
+    if (res.status === 401) {
+      this.invalidateCredentials();
+    }
+
     if (!res.ok) {
       const text = await res.text();
       this.logger.error(`Could not POST streaming to ${path} - ${res.status} - ${res.statusText}: ${text}`);
@@ -260,22 +312,17 @@ export abstract class AbstractRemote {
     // automatically as a header.
     const userAgent = this.getUserAgent();
 
-    let r: (value: Error | null) => void;
-    let socketError: Promise<Error | null> = new Promise((resolve) => {
-      r = resolve;
-    });
+    let socketCreationError: Error | undefined;
 
     const connector = new RSocketConnector({
       transport: new WebsocketClientTransport({
         url: this.options.socketUrlTransformer(request.url),
         wsCreator: (url) => {
           const s = this.createSocket(url);
-          s.addEventListener('error', (e) => {
-            // This is a workaround for the fact that the socket error event
-            // does not provide the error message
-            r(new Error(`WebSocket error: ${JSON.stringify(e)}`));
+          s.addEventListener('error', (e: Event) => {
+            socketCreationError = new Error('Failed to create connection to websocket: ', (e.target as any).url ?? '');
+            this.logger.warn('Socket error', e);
           });
-          s.addEventListener('open', () => r(null));
           return s;
         }
       }),
@@ -304,8 +351,7 @@ export abstract class AbstractRemote {
        * On React native the connection exception can be `undefined` this causes issues
        * with detecting the exception inside async-mutex
        */
-      const e = await socketError;
-      throw new Error(`Could not connect to PowerSync instance: ${JSON.stringify(ex)} ${e?.message}`);
+      throw new Error(`Could not connect to PowerSync instance: ${JSON.stringify(ex ?? socketCreationError)}`);
     }
 
     const stream = new DataStream({
@@ -350,6 +396,17 @@ export abstract class AbstractRemote {
         syncQueueRequestSize, // The initial N amount
         {
           onError: (e) => {
+            if (e.message.includes('PSYNC_')) {
+              if (e.message.includes('PSYNC_S21')) {
+                this.invalidateCredentials();
+              }
+            } else {
+              // Possible that connection is with an older service, always invalidate to be safe
+              if (e.message !== 'Closed. ') {
+                this.invalidateCredentials();
+              }
+            }
+
             // Don't log closed as an error
             if (e.message !== 'Closed. ') {
               this.logger.error(e);

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

@@ -683,12 +683,19 @@ The next upload iteration will be delayed.`);
             if (remaining_seconds == 0) {
               // Connection would be closed automatically right after this
               this.logger.debug('Token expiring; reconnect');
+              this.options.remote.invalidateCredentials();
+
               /**
                * For a rare case where the backend connector does not update the token
                * (uses the same one), this should have some delay.
                */
               await this.delayRetry();
               return;
+            } else if (remaining_seconds < 30) {
+              this.logger.debug('Token will expire soon; reconnect');
+              // Pre-emptively refresh the token
+              this.options.remote.invalidateCredentials();
+              return;
             }
             this.triggerCrudUpload();
           } else {

packages/powersync-op-sqlite/README.md

@@ -6,9 +6,9 @@ This package (`packages/powersync-op-sqlite`) enables using [OP-SQLite](https://
 
 If you are not yet familiar with PowerSync, please see the [PowerSync React Native SDK README](https://github.com/powersync-ja/powersync-js/tree/main/packages/react-native) for more information.
 
-### Alpha release
+## Beta Release
 
-This package is currently in an alpha release. If you find a bug or issue, please open a [GitHub issue](https://github.com/powersync-ja/powersync-js/issues). Questions or feedback can be posted on our [community Discord](https://discord.gg/powersync) - we'd love to hear from you.
+This package is currently in a beta release.
 
 ## Installation
 

packages/react-native/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @powersync/react-native
 
+## 1.20.2
+
+### Patch Changes
+
+- 84cdd9d: Fixed issue where CRUD uploads could fail with the error
+
+  ```
+  Exception: require(_dependencyMap[11], "rea(...)/BlobManager").createFromOptions is not a function (it is undefined)
+  ```
+
 ## 1.20.1
 
 ### Patch Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powersync/react-native",
-  "version": "1.20.1",
+  "version": "1.20.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"