@trpc/client 11.0.0-rc.592 → 11.0.0-rc.599

package/dist/links/wsLink.mjs

@@ -1,4 +1,4 @@
-import { observable } from '@trpc/server/observable';
+import { behaviorSubject, observable } from '@trpc/server/observable';
 import { transformResult } from '@trpc/server/unstable-core-do-not-import';
 import { TRPCClientError } from '../TRPCClientError.mjs';
 import { getTransformer } from '../internals/transformer.mjs';
@@ -10,7 +10,12 @@ const lazyDefaults = {
     enabled: false,
     closeMs: 0
 };
-function createWSClient(opts) {
+/**
+ * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
+ */ function createWSClient(opts) {
     const { WebSocket: WebSocketImpl = WebSocket , retryDelayMs: retryDelayFn = exponentialBackoff ,  } = opts;
     const lazyOpts = {
         ...lazyDefaults,
@@ -28,11 +33,21 @@ function createWSClient(opts) {
     let connectionIndex = 0;
     let lazyDisconnectTimer = undefined;
     let activeConnection = lazyOpts.enabled ? null : createConnection();
+    const initState = activeConnection ? {
+        type: 'state',
+        state: 'connecting',
+        error: null
+    } : {
+        type: 'state',
+        state: 'idle',
+        error: null
+    };
+    const connectionState = behaviorSubject(initState);
     /**
    * tries to send the list of messages
    */ function dispatch() {
         if (!activeConnection) {
-            activeConnection = createConnection();
+            reconnect(null);
             return;
         }
         // using a timeout to batch messages
@@ -57,12 +72,12 @@ function createWSClient(opts) {
             startLazyDisconnectTimer();
         });
     }
-    function tryReconnect() {
+    function tryReconnect(cause) {
         if (!!connectTimer) {
             return;
         }
         const timeout = retryDelayFn(connectAttempt++);
-        reconnectInMs(timeout);
+        reconnectInMs(timeout, cause);
     }
     function hasPendingRequests(conn) {
         const requests = Object.values(pendingRequests);
@@ -71,20 +86,30 @@ function createWSClient(opts) {
         }
         return requests.some((req)=>req.connection === conn);
     }
-    function reconnect() {
+    function reconnect(cause) {
         if (lazyOpts.enabled && !hasPendingRequests()) {
-            // Skip reconnecting if there are pending requests and we're in lazy mode
+            // Skip reconnecting if there aren't pending requests and we're in lazy mode
             return;
         }
         const oldConnection = activeConnection;
         activeConnection = createConnection();
         oldConnection && closeIfNoPending(oldConnection);
+        const currentState = connectionState.get();
+        if (currentState.state !== 'connecting') {
+            connectionState.next({
+                type: 'state',
+                state: 'connecting',
+                error: cause ? TRPCClientError.from(cause) : null
+            });
+        }
     }
-    function reconnectInMs(ms) {
+    function reconnectInMs(ms, cause) {
         if (connectTimer) {
             return;
         }
-        connectTimer = setTimeout(reconnect, ms);
+        connectTimer = setTimeout(()=>{
+            reconnect(cause);
+        }, ms);
     }
     function closeIfNoPending(conn) {
         // disconnect as soon as there are are no pending requests
@@ -111,9 +136,14 @@ function createWSClient(opts) {
             if (!activeConnection) {
                 return;
             }
-            if (!hasPendingRequests(activeConnection)) {
+            if (!hasPendingRequests()) {
                 activeConnection.ws?.close();
                 activeConnection = null;
+                connectionState.next({
+                    type: 'state',
+                    state: 'idle',
+                    error: null
+                });
             }
         }, lazyOpts.closeMs);
     };
@@ -125,16 +155,27 @@ function createWSClient(opts) {
             state: 'connecting'
         };
         clearTimeout(lazyDisconnectTimer);
-        const onCloseOrError = ()=>{
+        function destroy() {
+            const noop = ()=>{
+            // no-op
+            };
+            const { ws  } = self;
+            if (ws) {
+                ws.onclose = noop;
+                ws.onerror = noop;
+                ws.onmessage = noop;
+                ws.onopen = noop;
+                ws.close();
+            }
+            self.state = 'closed';
+        }
+        const onCloseOrError = (cause)=>{
             clearTimeout(pingTimeout);
             clearTimeout(pongTimeout);
-            if (self.state === 'closed') {
-                return;
-            }
             self.state = 'closed';
             if (activeConnection === self) {
                 // connection might have been replaced already
-                tryReconnect();
+                tryReconnect(cause);
             }
             for (const [key, req] of Object.entries(pendingRequests)){
                 if (req.connection !== self) {
@@ -147,25 +188,17 @@ function createWSClient(opts) {
                 } else {
                     // Queries and mutations will error if interrupted
                     delete pendingRequests[key];
-                    req.callbacks.error?.(TRPCClientError.from(new TRPCWebSocketClosedError('WebSocket closed prematurely')));
+                    req.callbacks.error?.(TRPCClientError.from(cause ?? new TRPCWebSocketClosedError()));
                 }
             }
         };
-        const onClose = (code)=>{
-            const wasOpen = self.state === 'open';
-            onCloseOrError();
-            if (wasOpen) {
-                opts.onClose?.({
-                    code
-                });
-            }
-        };
         const onError = (evt)=>{
-            onCloseOrError();
+            onCloseOrError(new TRPCWebSocketClosedError({
+                cause: evt
+            }));
             opts.onError?.(evt);
         };
-        run(async ()=>{
-            let url = await resultOf(opts.url);
+        function connect(url) {
             if (opts.connectionParams) {
                 // append `?connectionParams=1` when connection params are used
                 const prefix = url.includes('?') ? '&' : '?';
@@ -175,7 +208,7 @@ function createWSClient(opts) {
             self.ws = ws;
             clearTimeout(connectTimer);
             connectTimer = undefined;
-            ws.addEventListener('open', ()=>{
+            ws.onopen = ()=>{
                 async function sendConnectionParams() {
                     if (!opts.connectionParams) {
                         return;
@@ -194,8 +227,11 @@ function createWSClient(opts) {
                     const schedulePing = ()=>{
                         const schedulePongTimeout = ()=>{
                             pongTimeout = setTimeout(()=>{
-                                ws.close(3001);
-                                onClose(3001);
+                                const wasOpen = self.state === 'open';
+                                destroy();
+                                if (wasOpen) {
+                                    opts.onClose?.();
+                                }
                             }, pongTimeoutMs);
                         };
                         pingTimeout = setTimeout(()=>{
@@ -218,21 +254,32 @@ function createWSClient(opts) {
                     await sendConnectionParams();
                     connectAttempt = 0;
                     self.state = 'open';
+                    // Update connection state
+                    connectionState.next({
+                        type: 'state',
+                        state: 'pending',
+                        error: null
+                    });
                     opts.onOpen?.();
                     dispatch();
                 }).catch((cause)=>{
                     ws.close(// "Status codes in the range 3000-3999 are reserved for use by libraries, frameworks, and applications"
-                    3000, cause);
-                    onError();
+                    3000);
+                    onCloseOrError(new TRPCWebSocketClosedError({
+                        message: 'Initialization error',
+                        cause
+                    }));
                 });
-            });
-            ws.addEventListener('error', onError);
+            };
+            ws.onerror = onError;
             const handleIncomingRequest = (req)=>{
                 if (self !== activeConnection) {
                     return;
                 }
                 if (req.method === 'reconnect') {
-                    reconnect();
+                    reconnect(new TRPCWebSocketClosedError({
+                        message: 'Server requested reconnect'
+                    }));
                     // notify subscribers
                     for (const pendingReq of Object.values(pendingRequests)){
                         if (pendingReq.type === 'subscription') {
@@ -263,7 +310,8 @@ function createWSClient(opts) {
                     req.callbacks.complete();
                 }
             };
-            ws.addEventListener('message', ({ data  })=>{
+            ws.onmessage = (event)=>{
+                const { data  } = event;
                 if (data === 'PONG') {
                     return;
                 }
@@ -282,17 +330,21 @@ function createWSClient(opts) {
                     // when receiving a message, we close old connection that has no pending requests
                     closeIfNoPending(self);
                 }
-            });
-            ws.addEventListener('close', ({ code  })=>{
+            };
+            ws.onclose = (event)=>{
                 const wasOpen = self.state === 'open';
-                onCloseOrError();
+                destroy();
+                onCloseOrError(new TRPCWebSocketClosedError({
+                    cause: event
+                }));
                 if (wasOpen) {
-                    opts.onClose?.({
-                        code
-                    });
+                    opts.onClose?.(event);
                 }
-            });
-        }).catch(onError);
+            };
+        }
+        Promise.resolve(resultOf(opts.url)).then(connect).catch(()=>{
+            onCloseOrError(new Error('Failed to resolve url'));
+        });
         return self;
     }
     function request(opts) {
@@ -340,7 +392,9 @@ function createWSClient(opts) {
                     req.callbacks.complete();
                 } else if (!req.connection) {
                     // close pending requests that aren't attached to a connection yet
-                    req.callbacks.error(TRPCClientError.from(new Error('Closed before connection was established')));
+                    req.callbacks.error(TRPCClientError.from(new TRPCWebSocketClosedError({
+                        message: 'Closed before connection was established'
+                    })));
                 }
             }
             activeConnection && closeIfNoPending(activeConnection);
@@ -354,18 +408,26 @@ function createWSClient(opts) {
         },
         /**
      * Reconnect to the WebSocket server
-     */ reconnect
+     */ reconnect,
+        connectionState: connectionState
     };
 }
 class TRPCWebSocketClosedError extends Error {
-    constructor(message){
-        super(message);
+    constructor(opts){
+        super(opts?.message ?? 'WebSocket closed', // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore https://github.com/tc39/proposal-error-cause
+        {
+            cause: opts?.cause
+        });
         this.name = 'TRPCWebSocketClosedError';
         Object.setPrototypeOf(this, TRPCWebSocketClosedError.prototype);
     }
 }
 /**
  * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
  */ function wsLink(opts) {
     const transformer = getTransformer(opts.transformer);
     return ()=>{
@@ -374,7 +436,15 @@ class TRPCWebSocketClosedError extends Error {
             return observable((observer)=>{
                 const { type , path , id , context  } = op;
                 const input = transformer.input.serialize(op.input);
-                const unsub = client.request({
+                const connState = type === 'subscription' ? client.connectionState.subscribe({
+                    next (result) {
+                        observer.next({
+                            result,
+                            context
+                        });
+                    }
+                }) : null;
+                const unsubscribeRequest = client.request({
                     op: {
                         type,
                         path,
@@ -386,13 +456,13 @@ class TRPCWebSocketClosedError extends Error {
                     callbacks: {
                         error (err) {
                             observer.error(err);
-                            unsub();
+                            unsubscribeRequest();
                         },
                         complete () {
                             observer.complete();
                         },
-                        next (message) {
-                            const transformed = transformResult(message, transformer.output);
+                        next (event) {
+                            const transformed = transformResult(event, transformer.output);
                             if (!transformed.ok) {
                                 observer.error(TRPCClientError.from(transformed.error));
                                 return;
@@ -402,7 +472,7 @@ class TRPCWebSocketClosedError extends Error {
                             });
                             if (op.type !== 'subscription') {
                                 // if it isn't a subscription we don't care about next response
-                                unsub();
+                                unsubscribeRequest();
                                 observer.complete();
                             }
                         }
@@ -410,7 +480,8 @@ class TRPCWebSocketClosedError extends Error {
                     lastEventId: undefined
                 });
                 return ()=>{
-                    unsub();
+                    unsubscribeRequest();
+                    connState?.unsubscribe();
                 };
             });
         };

package/dist/links.d.ts

@@ -7,4 +7,5 @@ export * from './links/loggerLink';
 export * from './links/splitLink';
 export * from './links/wsLink';
 export * from './links/httpSubscriptionLink';
+export * from './links/internals/retryLink';
 //# sourceMappingURL=links.d.ts.map

package/dist/links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../src/links.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../src/links.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAE9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC"}

package/dist/unstable-internals.d.ts

@@ -1,2 +1,3 @@
 export * from './internals/transformer';
+export * from './links/internals/subscriptions';
 //# sourceMappingURL=unstable-internals.d.ts.map

package/dist/unstable-internals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unstable-internals.d.ts","sourceRoot":"","sources":["../src/unstable-internals.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"unstable-internals.d.ts","sourceRoot":"","sources":["../src/unstable-internals.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "11.0.0-rc.592+4744c0612",
+  "version": "11.0.0-rc.599+e16cd8d7c",
   "description": "The tRPC client library",
   "author": "KATT",
   "license": "MIT",
@@ -76,10 +76,10 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@trpc/server": "11.0.0-rc.592+4744c0612"
+    "@trpc/server": "11.0.0-rc.599+e16cd8d7c"
   },
   "devDependencies": {
-    "@trpc/server": "11.0.0-rc.592+4744c0612",
+    "@trpc/server": "11.0.0-rc.599+e16cd8d7c",
     "@types/isomorphic-fetch": "^0.0.39",
     "@types/node": "^20.10.0",
     "eslint": "^8.57.0",
@@ -96,5 +96,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "4744c0612c2e6dcf6d9fd3a30fd57621962ac439"
+  "gitHead": "e16cd8d7cee12eaf1545273858407f0947ca97fc"
 }

package/src/TRPCClientError.ts

@@ -90,7 +90,7 @@ export class TRPCClientError<TRouterOrProcedure extends InferrableClientTypes>
   }
 
   public static from<TRouterOrProcedure extends InferrableClientTypes>(
-    _cause: Error | TRPCErrorResponse<any>,
+    _cause: Error | TRPCErrorResponse<any> | object,
     opts: { meta?: Record<string, unknown> } = {},
   ): TRPCClientError<TRouterOrProcedure> {
     const cause = _cause as unknown;

package/src/internals/TRPCUntypedClient.ts

@@ -5,11 +5,13 @@ import type {
 import { observableToPromise, share } from '@trpc/server/observable';
 import type {
   AnyRouter,
+  inferAsyncIterableYield,
   InferrableClientTypes,
   Maybe,
   TypeError,
 } from '@trpc/server/unstable-core-do-not-import';
 import { createChain } from '../links/internals/createChain';
+import type { TRPCConnectionState } from '../links/internals/subscriptions';
 import type {
   OperationContext,
   OperationLink,
@@ -27,14 +29,13 @@ export interface TRPCRequestOptions {
   signal?: AbortSignal;
 }
 
-type inferAsyncIterableYield<T> = T extends AsyncIterable<infer U> ? U : T;
-
 export interface TRPCSubscriptionObserver<TValue, TError> {
   onStarted: (opts: { context: OperationContext | undefined }) => void;
   onData: (value: inferAsyncIterableYield<TValue>) => void;
   onError: (err: TError) => void;
   onStopped: () => void;
   onComplete: () => void;
+  onConnectionStateChange: (state: TRPCConnectionState<TError>) => void;
 }
 
 /** @internal */
@@ -139,14 +140,26 @@ export class TRPCUntypedClient<TRouter extends AnyRouter> {
     });
     return observable$.subscribe({
       next(envelope) {
-        if (envelope.result.type === 'started') {
-          opts.onStarted?.({
-            context: envelope.context,
-          });
-        } else if (envelope.result.type === 'stopped') {
-          opts.onStopped?.();
-        } else {
-          opts.onData?.(envelope.result.data);
+        switch (envelope.result.type) {
+          case 'state': {
+            opts.onConnectionStateChange?.(envelope.result);
+            break;
+          }
+          case 'started': {
+            opts.onStarted?.({
+              context: envelope.context,
+            });
+            break;
+          }
+          case 'stopped': {
+            opts.onStopped?.();
+            break;
+          }
+          case 'data':
+          case undefined: {
+            opts.onData?.(envelope.result.data);
+            break;
+          }
         }
       },
       error(err) {

package/src/links/httpSubscriptionLink.ts

@@ -1,9 +1,11 @@
-import { observable } from '@trpc/server/observable';
+import { behaviorSubject, observable } from '@trpc/server/observable';
+import type { TRPC_ERROR_CODE_NUMBER, TRPCErrorShape } from '@trpc/server/rpc';
+import { TRPC_ERROR_CODES_BY_KEY } from '@trpc/server/rpc';
 import type {
   AnyClientTypes,
+  EventSourceLike,
   inferClientTypes,
   InferrableClientTypes,
-  SSEStreamConsumerOptions,
 } from '@trpc/server/unstable-core-do-not-import';
 import {
   run,
@@ -11,14 +13,14 @@ import {
 } from '@trpc/server/unstable-core-do-not-import';
 import { raceAbortSignals } from '../internals/signals';
 import { TRPCClientError } from '../TRPCClientError';
+import type { TRPCConnectionState } from '../unstable-internals';
 import { getTransformer, type TransformerOptions } from '../unstable-internals';
 import { getUrl } from './internals/httpUtils';
-import type { CallbackOrValue } from './internals/urlWithConnectionParams';
 import {
   resultOf,
   type UrlOptionsWithConnectionParams,
 } from './internals/urlWithConnectionParams';
-import type { TRPCLink } from './types';
+import type { Operation, TRPCLink } from './types';
 
 async function urlWithConnectionParams(
   opts: UrlOptionsWithConnectionParams,
@@ -35,25 +37,49 @@ async function urlWithConnectionParams(
   return url;
 }
 
-type HTTPSubscriptionLinkOptions<TRoot extends AnyClientTypes> = {
+type HTTPSubscriptionLinkOptions<
+  TRoot extends AnyClientTypes,
+  TEventSource extends EventSourceLike.AnyConstructor = typeof EventSource,
+> = {
   /**
-   * EventSource options or a callback that returns them
+   * EventSource ponyfill
    */
-  eventSourceOptions?: CallbackOrValue<EventSourceInit>;
+  EventSource?: TEventSource;
   /**
-   * @see https://trpc.io/docs/client/links/httpSubscriptionLink#updatingConfig
+   * EventSource options or a callback that returns them
    */
-  experimental_shouldRecreateOnError?: SSEStreamConsumerOptions['shouldRecreateOnError'];
+  eventSourceOptions?:
+    | EventSourceLike.InitDictOf<TEventSource>
+    | ((opts: {
+        op: Operation;
+      }) =>
+        | EventSourceLike.InitDictOf<TEventSource>
+        | Promise<EventSourceLike.InitDictOf<TEventSource>>);
 } & TransformerOptions<TRoot> &
   UrlOptionsWithConnectionParams;
 
+/**
+ * tRPC error codes that are considered retryable
+ * With out of the box SSE, the client will reconnect when these errors are encountered
+ */
+const codes5xx: TRPC_ERROR_CODE_NUMBER[] = [
+  TRPC_ERROR_CODES_BY_KEY.BAD_GATEWAY,
+  TRPC_ERROR_CODES_BY_KEY.SERVICE_UNAVAILABLE,
+  TRPC_ERROR_CODES_BY_KEY.GATEWAY_TIMEOUT,
+  TRPC_ERROR_CODES_BY_KEY.INTERNAL_SERVER_ERROR,
+];
+
 /**
  * @see https://trpc.io/docs/client/links/httpSubscriptionLink
  */
 export function unstable_httpSubscriptionLink<
   TInferrable extends InferrableClientTypes,
+  TEventSource extends EventSourceLike.AnyConstructor,
 >(
-  opts: HTTPSubscriptionLinkOptions<inferClientTypes<TInferrable>>,
+  opts: HTTPSubscriptionLinkOptions<
+    inferClientTypes<TInferrable>,
+    TEventSource
+  >,
 ): TRPCLink<TInferrable> {
   const transformer = getTransformer(opts.transformer);
 
@@ -69,12 +95,14 @@ export function unstable_httpSubscriptionLink<
 
         const ac = new AbortController();
         const signal = raceAbortSignals(op.signal, ac.signal);
-        const eventSourceStream = sseStreamConsumer<
-          Partial<{
+        const eventSourceStream = sseStreamConsumer<{
+          EventSource: TEventSource;
+          data: Partial<{
             id?: string;
             data: unknown;
-          }>
-        >({
+          }>;
+          error: TRPCErrorShape;
+        }>({
           url: async () =>
             getUrl({
               transformer,
@@ -84,12 +112,29 @@ export function unstable_httpSubscriptionLink<
               type,
               signal: null,
             }),
-          init: () => resultOf(opts.eventSourceOptions),
+          init: () => resultOf(opts.eventSourceOptions, { op }),
           signal,
           deserialize: transformer.output.deserialize,
-          shouldRecreateOnError: opts.experimental_shouldRecreateOnError,
+          EventSource:
+            opts.EventSource ??
+            (globalThis.EventSource as never as TEventSource),
+        });
+
+        const connectionState = behaviorSubject<
+          TRPCConnectionState<TRPCClientError<any>>
+        >({
+          type: 'state',
+          state: 'connecting',
+          error: null,
         });
 
+        const connectionSub = connectionState.subscribe({
+          next(state) {
+            observer.next({
+              result: state,
+            });
+          },
+        });
         run(async () => {
           for await (const chunk of eventSourceStream) {
             switch (chunk.type) {
@@ -117,14 +162,42 @@ export function unstable_httpSubscriptionLink<
                     eventSource: chunk.eventSource,
                   },
                 });
+                connectionState.next({
+                  type: 'state',
+                  state: 'pending',
+                  error: null,
+                });
                 break;
               }
-              case 'error': {
-                // TODO: handle in https://github.com/trpc/trpc/issues/5871
-                break;
+              case 'serialized-error': {
+                const error = TRPCClientError.from({ error: chunk.error });
+
+                if (codes5xx.includes(chunk.error.code)) {
+                  //
+                  connectionState.next({
+                    type: 'state',
+                    state: 'connecting',
+                    error,
+                  });
+                  break;
+                }
+                //
+                // non-retryable error, cancel the subscription
+                throw error;
               }
               case 'connecting': {
-                // TODO: handle in https://github.com/trpc/trpc/issues/5871
+                const lastState = connectionState.get();
+
+                const error = chunk.event && TRPCClientError.from(chunk.event);
+                if (!error && lastState.state === 'connecting') {
+                  break;
+                }
+
+                connectionState.next({
+                  type: 'state',
+                  state: 'connecting',
+                  error,
+                });
                 break;
               }
             }
@@ -143,6 +216,7 @@ export function unstable_httpSubscriptionLink<
         return () => {
           observer.complete();
           ac.abort();
+          connectionSub.unsubscribe();
         };
       });
     };