fix react native ios reconnect

Author: stevensJourney

.changeset/cyan-penguins-smell.md

@@ -0,0 +1,5 @@
+---
+'@powersync/react-native': minor
+---
+
+Fixed issue where iOS WebSockets could fail to reconnect after a connection issue.

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

@@ -4,12 +4,12 @@ import ndjsonStream from 'can-ndjson-stream';
 import { type fetch } from 'cross-fetch';
 import Logger, { ILogger } from 'js-logger';
 import { RSocket, RSocketConnector, Requestable } from 'rsocket-core';
-import { WebsocketClientTransport } from 'rsocket-websocket-client';
 import PACKAGE from '../../../../package.json' with { type: 'json' };
 import { AbortOperation } from '../../../utils/AbortOperation.js';
 import { DataStream } from '../../../utils/DataStream.js';
 import { PowerSyncCredentials } from '../../connection/PowerSyncCredentials.js';
 import { StreamingSyncLine, StreamingSyncRequest } from './streaming-sync-types.js';
+import { WebsocketClientTransport } from './WebsocketClientTransport.js';
 
 export type BSONImplementation = typeof BSON;
 

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

@@ -0,0 +1,70 @@
+/**
+ * Adapted from rsocket-websocket-client
+ * https://github.com/rsocket/rsocket-js/blob/e224cf379e747c4f1ddc4f2fa111854626cc8575/packages/rsocket-websocket-client/src/WebsocketClientTransport.ts#L17
+ * This adds additional error handling for React Native iOS.
+ * This particularly adds a close listener to handle cases where the WebSocket
+ * connection closes immediately after opening without emitting an error.
+ */
+import {
+  ClientTransport,
+  Closeable,
+  Demultiplexer,
+  Deserializer,
+  DuplexConnection,
+  FrameHandler,
+  Multiplexer,
+  Outbound
+} from 'rsocket-core';
+import { ClientOptions } from 'rsocket-websocket-client';
+import { WebsocketDuplexConnection } from 'rsocket-websocket-client/dist/WebsocketDuplexConnection.js';
+
+export class WebsocketClientTransport implements ClientTransport {
+  private readonly url: string;
+  private readonly factory: (url: string) => WebSocket;
+
+  constructor(options: ClientOptions) {
+    this.url = options.url;
+    this.factory = options.wsCreator ?? ((url: string) => new WebSocket(url));
+  }
+
+  connect(
+    multiplexerDemultiplexerFactory: (outbound: Outbound & Closeable) => Multiplexer & Demultiplexer & FrameHandler
+  ): Promise<DuplexConnection> {
+    return new Promise((resolve, reject) => {
+      const websocket = this.factory(this.url);
+
+      websocket.binaryType = 'arraybuffer';
+
+      let removeListeners: () => void;
+
+      const openListener = () => {
+        removeListeners();
+        resolve(new WebsocketDuplexConnection(websocket, new Deserializer(), multiplexerDemultiplexerFactory));
+      };
+
+      const errorListener = (ev: ErrorEvent) => {
+        removeListeners();
+        reject(ev.error);
+      };
+
+      /**
+       * In some cases, such as React Native iOS, the WebSocket connection may close immediately after opening
+       * without and error. In such cases, we need to handle the close event to reject the promise.
+       */
+      const closeListener = () => {
+        removeListeners();
+        reject(new Error('WebSocket connection closed while opening'));
+      };
+
+      removeListeners = () => {
+        websocket.removeEventListener('open', openListener);
+        websocket.removeEventListener('error', errorListener);
+        websocket.removeEventListener('close', closeListener);
+      };
+
+      websocket.addEventListener('open', openListener);
+      websocket.addEventListener('error', errorListener);
+      websocket.addEventListener('close', closeListener);
+    });
+  }
+}

packages/react-native/rollup.config.mjs

@@ -54,7 +54,7 @@ export default (commandLineArgs) => {
           }
         ]
       }),
-      terser()
+      terser({ sourceMap: sourcemap })
     ],
     external: [
       '@journeyapps/react-native-quick-sqlite',