@electric-sql/client 1.1.1 → 1.1.3

package/README.md

@@ -99,26 +99,84 @@ shape.subscribe(({ rows }) => {
 
 ### Error Handling
 
-The ShapeStream provides two ways to handle errors:
+The ShapeStream provides robust error handling with automatic retry support:
 
-1. Using the `onError` handler:
+#### 1. Stream-level error handler with retry control
+
+The `onError` handler gives you full control over error recovery:
 
 ```typescript
 const stream = new ShapeStream({
   url: `${BASE_URL}/v1/shape`,
-  params: {
-    table: `foo`,
-  },
+  params: { table: `foo` },
   onError: (error) => {
-    // Handle all stream errors here
     console.error('Stream error:', error)
+
+    // IMPORTANT: Return an object to keep syncing!
+    // Return void/undefined to stop syncing permanently.
+
+    // Note: 5xx errors and network errors are automatically retried,
+    // so onError is mainly for handling client errors (4xx)
+
+    if (error instanceof FetchError) {
+      if (error.status === 401) {
+        // Unauthorized - refresh token and retry
+        const newToken = getRefreshedToken()
+        return {
+          headers: {
+            Authorization: `Bearer ${newToken}`,
+          },
+        }
+      }
+
+      if (error.status === 403) {
+        // Forbidden - maybe change user context
+        return {
+          params: {
+            table: `foo`,
+            where: `user_id = $1`,
+            params: [fallbackUserId],
+          },
+        }
+      }
+    }
+
+    // Stop syncing for other errors (return void)
   },
 })
 ```
 
-If no `onError` handler is provided, the ShapeStream will throw errors that occur during streaming.
+**Critical**: The `onError` callback's return value controls whether syncing continues:
 
-2. Individual subscribers can optionally handle errors specific to their subscription:
+- **Return an object** (even empty `{}`) to retry syncing:
+  - `{}` - Retry with same params and headers
+  - `{ params }` - Retry with modified params
+  - `{ headers }` - Retry with modified headers
+  - `{ params, headers }` - Retry with both modified
+- **Return void/undefined** to stop the stream permanently
+
+The handler supports async operations:
+
+```typescript
+onError: async (error) => {
+  if (error instanceof FetchError && error.status === 401) {
+    // Perform async token refresh
+    const newToken = await refreshAuthToken()
+    return {
+      headers: { Authorization: `Bearer ${newToken}` },
+    }
+  }
+  return {} // Retry other errors
+}
+```
+
+**Automatic retries**: The client automatically retries 5xx server errors, network errors, and 429 rate limits with exponential backoff. The `onError` callback is only invoked after these retries are exhausted, or for non-retryable errors like 4xx client errors.
+
+**Without `onError`**: If no `onError` handler is provided, non-retryable errors (like 4xx client errors) will be thrown and the stream will stop.
+
+#### 2. Subscription-level error callbacks
+
+Individual subscribers can handle errors specific to their subscription:
 
 ```typescript
 stream.subscribe(
@@ -132,7 +190,11 @@ stream.subscribe(
 )
 ```
 
-Common error types include:
+Note: Subscription error callbacks cannot control retry behavior - use the stream-level `onError` for that.
+
+#### Common Error Types
+
+Setup errors:
 
 - `MissingShapeUrlError`: Missing required URL parameter
 - `InvalidSignalError`: Invalid AbortSignal instance
@@ -140,12 +202,12 @@ Common error types include:
 
 Runtime errors:
 
-- `FetchError`: HTTP errors during shape fetching
+- `FetchError`: HTTP errors during shape fetching (includes `status`, `url`, `headers`)
 - `FetchBackoffAbortError`: Fetch aborted using AbortSignal
 - `MissingShapeHandleError`: Missing required shape handle
-- `ParserNullValueError`: Parser encountered NULL value in a column that doesn't allow NULL values
+- `ParserNullValueError`: NULL value in a non-nullable column
 
-See the [typescript client docs on the website](https://electric-sql.com/docs/api/clients/typescript#error-handling) for more details on error handling.
+See the [TypeScript client docs](https://electric-sql.com/docs/api/clients/typescript#error-handling) for more details.
 
 And in general, see the [docs website](https://electric-sql.com) and [examples](https://electric-sql.com/demos) for more information.
 

package/dist/cjs/index.cjs

@@ -353,6 +353,7 @@ var SUBSET_PARAM_ORDER_BY = `subset__order_by`;
 var SUBSET_PARAM_WHERE_PARAMS = `subset__params`;
 var ELECTRIC_PROTOCOL_QUERY_PARAMS = [
   LIVE_QUERY_PARAM,
+  LIVE_SSE_QUERY_PARAM,
   SHAPE_HANDLE_QUERY_PARAM,
   OFFSET_QUERY_PARAM,
   LIVE_CACHE_BUSTER_QUERY_PARAM,
@@ -372,11 +373,22 @@ var BackoffDefaults = {
   maxDelay: 6e4,
   // Cap at 60s - reasonable for long-lived connections
   multiplier: 1.3,
-  maxRetries: Infinity,
+  maxRetries: Infinity
   // Retry forever - clients may go offline and come back
-  retryBudgetPercent: 0.1
-  // 10% retry budget prevents amplification
 };
+function parseRetryAfterHeader(retryAfter) {
+  if (!retryAfter) return 0;
+  const retryAfterSec = Number(retryAfter);
+  if (Number.isFinite(retryAfterSec) && retryAfterSec > 0) {
+    return retryAfterSec * 1e3;
+  }
+  const retryDate = Date.parse(retryAfter);
+  if (!isNaN(retryDate)) {
+    const deltaMs = retryDate - Date.now();
+    return Math.max(0, Math.min(deltaMs, 36e5));
+  }
+  return 0;
+}
 function createFetchWithBackoff(fetchClient, backoffOptions = BackoffDefaults) {
   const {
     initialDelay,
@@ -384,28 +396,8 @@ function createFetchWithBackoff(fetchClient, backoffOptions = BackoffDefaults) {
     multiplier,
     debug = false,
     onFailedAttempt,
-    maxRetries = Infinity,
-    retryBudgetPercent = 0.1
+    maxRetries = Infinity
   } = backoffOptions;
-  let totalRequests = 0;
-  let totalRetries = 0;
-  let budgetResetTime = Date.now() + 6e4;
-  function checkRetryBudget(percent) {
-    const now = Date.now();
-    if (now > budgetResetTime) {
-      totalRequests = 0;
-      totalRetries = 0;
-      budgetResetTime = now + 6e4;
-    }
-    totalRequests++;
-    if (totalRequests < 10) return true;
-    const currentRetryRate = totalRetries / totalRequests;
-    const hasCapacity = currentRetryRate < percent;
-    if (hasCapacity) {
-      totalRetries++;
-    }
-    return hasCapacity;
-  }
   return (...args) => __async(this, null, function* () {
     var _a;
     const url = args[0];
@@ -416,7 +408,6 @@ function createFetchWithBackoff(fetchClient, backoffOptions = BackoffDefaults) {
       try {
         const result = yield fetchClient(...args);
         if (result.ok) {
-          delay = initialDelay;
           return result;
         }
         const err = yield FetchError.fromResponse(result, url.toString());
@@ -429,7 +420,7 @@ function createFetchWithBackoff(fetchClient, backoffOptions = BackoffDefaults) {
           throw e;
         } else {
           attempt++;
-          if (attempt >= maxRetries) {
+          if (attempt > maxRetries) {
             if (debug) {
               console.log(
                 `Max retries reached (${attempt}/${maxRetries}), giving up`
@@ -437,31 +428,7 @@ function createFetchWithBackoff(fetchClient, backoffOptions = BackoffDefaults) {
             }
             throw e;
           }
-          if (!checkRetryBudget(retryBudgetPercent)) {
-            if (debug) {
-              console.log(
-                `Retry budget exhausted (attempt ${attempt}), backing off`
-              );
-            }
-            yield new Promise((resolve) => setTimeout(resolve, maxDelay));
-            continue;
-          }
-          let serverMinimumMs = 0;
-          if (e instanceof FetchError && e.headers) {
-            const retryAfter = e.headers[`retry-after`];
-            if (retryAfter) {
-              const retryAfterSec = Number(retryAfter);
-              if (Number.isFinite(retryAfterSec) && retryAfterSec > 0) {
-                serverMinimumMs = retryAfterSec * 1e3;
-              } else {
-                const retryDate = Date.parse(retryAfter);
-                if (!isNaN(retryDate)) {
-                  const deltaMs = retryDate - Date.now();
-                  serverMinimumMs = Math.max(0, Math.min(deltaMs, 36e5));
-                }
-              }
-            }
-          }
+          const serverMinimumMs = e instanceof FetchError && e.headers ? parseRetryAfterHeader(e.headers[`retry-after`]) : 0;
           const jitter = Math.random() * delay;
           const clientBackoffMs = Math.min(jitter, maxDelay);
           const waitMs = Math.max(serverMinimumMs, clientBackoffMs);
@@ -843,8 +810,9 @@ function canonicalShapeKey(url) {
   cleanUrl.searchParams.sort();
   return cleanUrl.toString();
 }
-var _error, _fetchClient2, _sseFetchClient, _messageParser, _subscribers, _started, _state, _lastOffset, _liveCacheBuster, _lastSyncedAt, _isUpToDate, _isMidStream, _connected, _shapeHandle, _mode, _schema, _onError, _requestAbortController, _isRefreshing, _tickPromise, _tickPromiseResolver, _tickPromiseRejecter, _messageChain, _snapshotTracker, _activeSnapshotRequests, _midStreamPromise, _midStreamPromiseResolver, _ShapeStream_instances, start_fn, requestShape_fn, constructUrl_fn, createAbortListener_fn, onInitialResponse_fn, onMessages_fn, fetchShape_fn, requestShapeLongPoll_fn, requestShapeSSE_fn, pause_fn, resume_fn, nextTick_fn, waitForStreamEnd_fn, publish_fn, sendErrorToSubscribers_fn, subscribeToVisibilityChanges_fn, reset_fn, fetchSnapshot_fn;
+var _error, _fetchClient2, _sseFetchClient, _messageParser, _subscribers, _started, _state, _lastOffset, _liveCacheBuster, _lastSyncedAt, _isUpToDate, _isMidStream, _connected, _shapeHandle, _mode, _schema, _onError, _requestAbortController, _isRefreshing, _tickPromise, _tickPromiseResolver, _tickPromiseRejecter, _messageChain, _snapshotTracker, _activeSnapshotRequests, _midStreamPromise, _midStreamPromiseResolver, _lastSseConnectionStartTime, _minSseConnectionDuration, _consecutiveShortSseConnections, _maxShortSseConnections, _sseFallbackToLongPolling, _sseBackoffBaseDelay, _sseBackoffMaxDelay, _ShapeStream_instances, start_fn, requestShape_fn, constructUrl_fn, createAbortListener_fn, onInitialResponse_fn, onMessages_fn, fetchShape_fn, requestShapeLongPoll_fn, requestShapeSSE_fn, pause_fn, resume_fn, nextTick_fn, waitForStreamEnd_fn, publish_fn, sendErrorToSubscribers_fn, subscribeToVisibilityChanges_fn, reset_fn, fetchSnapshot_fn;
 var ShapeStream = class {
+  // Maximum delay cap (ms)
   constructor(options) {
     __privateAdd(this, _ShapeStream_instances);
     __privateAdd(this, _error, null);
@@ -878,6 +846,16 @@ var ShapeStream = class {
     // counter for concurrent snapshot requests
     __privateAdd(this, _midStreamPromise);
     __privateAdd(this, _midStreamPromiseResolver);
+    __privateAdd(this, _lastSseConnectionStartTime);
+    __privateAdd(this, _minSseConnectionDuration, 1e3);
+    // Minimum expected SSE connection duration (1 second)
+    __privateAdd(this, _consecutiveShortSseConnections, 0);
+    __privateAdd(this, _maxShortSseConnections, 3);
+    // Fall back to long polling after this many short connections
+    __privateAdd(this, _sseFallbackToLongPolling, false);
+    __privateAdd(this, _sseBackoffBaseDelay, 100);
+    // Base delay for exponential backoff (ms)
+    __privateAdd(this, _sseBackoffMaxDelay, 5e3);
     var _a, _b, _c, _d;
     this.options = __spreadValues({ subscribe: true }, options);
     validateOptions(this.options);
@@ -1053,10 +1031,17 @@ _snapshotTracker = new WeakMap();
 _activeSnapshotRequests = new WeakMap();
 _midStreamPromise = new WeakMap();
 _midStreamPromiseResolver = new WeakMap();
+_lastSseConnectionStartTime = new WeakMap();
+_minSseConnectionDuration = new WeakMap();
+_consecutiveShortSseConnections = new WeakMap();
+_maxShortSseConnections = new WeakMap();
+_sseFallbackToLongPolling = new WeakMap();
+_sseBackoffBaseDelay = new WeakMap();
+_sseBackoffMaxDelay = new WeakMap();
 _ShapeStream_instances = new WeakSet();
 start_fn = function() {
   return __async(this, null, function* () {
-    var _a;
+    var _a, _b, _c, _d, _e;
     __privateSet(this, _started, true);
     try {
       yield __privateMethod(this, _ShapeStream_instances, requestShape_fn).call(this);
@@ -1064,24 +1049,34 @@ start_fn = function() {
       __privateSet(this, _error, err);
       if (__privateGet(this, _onError)) {
         const retryOpts = yield __privateGet(this, _onError).call(this, err);
-        if (typeof retryOpts === `object`) {
-          __privateMethod(this, _ShapeStream_instances, reset_fn).call(this);
-          if (`params` in retryOpts) {
-            this.options.params = retryOpts.params;
+        if (retryOpts && typeof retryOpts === `object`) {
+          if (retryOpts.params) {
+            this.options.params = __spreadValues(__spreadValues({}, (_a = this.options.params) != null ? _a : {}), retryOpts.params);
           }
-          if (`headers` in retryOpts) {
-            this.options.headers = retryOpts.headers;
+          if (retryOpts.headers) {
+            this.options.headers = __spreadValues(__spreadValues({}, (_b = this.options.headers) != null ? _b : {}), retryOpts.headers);
           }
+          __privateSet(this, _error, null);
           __privateSet(this, _started, false);
-          __privateMethod(this, _ShapeStream_instances, start_fn).call(this);
+          yield __privateMethod(this, _ShapeStream_instances, start_fn).call(this);
+          return;
+        }
+        if (err instanceof Error) {
+          __privateMethod(this, _ShapeStream_instances, sendErrorToSubscribers_fn).call(this, err);
         }
+        __privateSet(this, _connected, false);
+        (_c = __privateGet(this, _tickPromiseRejecter)) == null ? void 0 : _c.call(this);
         return;
       }
-      throw err;
-    } finally {
+      if (err instanceof Error) {
+        __privateMethod(this, _ShapeStream_instances, sendErrorToSubscribers_fn).call(this, err);
+      }
       __privateSet(this, _connected, false);
-      (_a = __privateGet(this, _tickPromiseRejecter)) == null ? void 0 : _a.call(this);
+      (_d = __privateGet(this, _tickPromiseRejecter)) == null ? void 0 : _d.call(this);
+      throw err;
     }
+    __privateSet(this, _connected, false);
+    (_e = __privateGet(this, _tickPromiseRejecter)) == null ? void 0 : _e.call(this);
   });
 };
 requestShape_fn = function() {
@@ -1128,7 +1123,6 @@ requestShape_fn = function() {
         yield __privateMethod(this, _ShapeStream_instances, publish_fn).call(this, Array.isArray(e.json) ? e.json : [e.json]);
         return __privateMethod(this, _ShapeStream_instances, requestShape_fn).call(this);
       } else {
-        __privateMethod(this, _ShapeStream_instances, sendErrorToSubscribers_fn).call(this, e);
         throw e;
       }
     } finally {
@@ -1280,7 +1274,7 @@ fetchShape_fn = function(opts) {
   return __async(this, null, function* () {
     var _a;
     const useSse = (_a = this.options.liveSse) != null ? _a : this.options.experimentalLiveSse;
-    if (__privateGet(this, _isUpToDate) && useSse && !__privateGet(this, _isRefreshing) && !opts.resumingFromPause) {
+    if (__privateGet(this, _isUpToDate) && useSse && !__privateGet(this, _isRefreshing) && !opts.resumingFromPause && !__privateGet(this, _sseFallbackToLongPolling)) {
       opts.fetchUrl.searchParams.set(EXPERIMENTAL_LIVE_SSE_QUERY_PARAM, `true`);
       opts.fetchUrl.searchParams.set(LIVE_SSE_QUERY_PARAM, `true`);
       return __privateMethod(this, _ShapeStream_instances, requestShapeSSE_fn).call(this, opts);
@@ -1308,6 +1302,7 @@ requestShapeSSE_fn = function(opts) {
   return __async(this, null, function* () {
     const { fetchUrl, requestAbortController, headers } = opts;
     const fetch2 = __privateGet(this, _sseFetchClient);
+    __privateSet(this, _lastSseConnectionStartTime, Date.now());
     try {
       let buffer = [];
       yield (0, import_fetch_event_source.fetchEventSource)(fetchUrl.toString(), {
@@ -1341,6 +1336,27 @@ requestShapeSSE_fn = function(opts) {
         throw new FetchBackoffAbortError();
       }
       throw error;
+    } finally {
+      const connectionDuration = Date.now() - __privateGet(this, _lastSseConnectionStartTime);
+      const wasAborted = requestAbortController.signal.aborted;
+      if (connectionDuration < __privateGet(this, _minSseConnectionDuration) && !wasAborted) {
+        __privateWrapper(this, _consecutiveShortSseConnections)._++;
+        if (__privateGet(this, _consecutiveShortSseConnections) >= __privateGet(this, _maxShortSseConnections)) {
+          __privateSet(this, _sseFallbackToLongPolling, true);
+          console.warn(
+            `[Electric] SSE connections are closing immediately (possibly due to proxy buffering or misconfiguration). Falling back to long polling. Your proxy must support streaming SSE responses (not buffer the complete response). Configuration: Nginx add 'X-Accel-Buffering: no', Caddy add 'flush_interval -1' to reverse_proxy. Note: Do NOT disable caching entirely - Electric uses cache headers to enable request collapsing for efficiency.`
+          );
+        } else {
+          const maxDelay = Math.min(
+            __privateGet(this, _sseBackoffMaxDelay),
+            __privateGet(this, _sseBackoffBaseDelay) * Math.pow(2, __privateGet(this, _consecutiveShortSseConnections))
+          );
+          const delayMs = Math.floor(Math.random() * maxDelay);
+          yield new Promise((resolve) => setTimeout(resolve, delayMs));
+        }
+      } else if (connectionDuration >= __privateGet(this, _minSseConnectionDuration)) {
+        __privateSet(this, _consecutiveShortSseConnections, 0);
+      }
     }
   });
 };
@@ -1439,6 +1455,8 @@ reset_fn = function(handle) {
   __privateSet(this, _connected, false);
   __privateSet(this, _schema, void 0);
   __privateSet(this, _activeSnapshotRequests, 0);
+  __privateSet(this, _consecutiveShortSseConnections, 0);
+  __privateSet(this, _sseFallbackToLongPolling, false);
 };
 fetchSnapshot_fn = function(url, headers) {
   return __async(this, null, function* () {