@trpc/client 11.0.0-alpha-tmp-issues-5851-take-two.496 → 11.0.0-alpha-tmp-subscription-connection-state.485

package/src/links/httpSubscriptionLink.ts

@@ -12,6 +12,7 @@ import {
 import { TRPCClientError } from '../TRPCClientError';
 import { getTransformer, type TransformerOptions } from '../unstable-internals';
 import { getUrl } from './internals/httpUtils';
+import type { CallbackOrValue } from './internals/urlWithConnectionParams';
 import {
   resultOf,
   type UrlOptionsWithConnectionParams,
@@ -35,9 +36,9 @@ async function urlWithConnectionParams(
 
 type HTTPSubscriptionLinkOptions<TRoot extends AnyClientTypes> = {
   /**
-   * EventSource options
+   * EventSource options or a callback that returns them
    */
-  eventSourceOptions?: EventSourceInit;
+  eventSourceOptions?: CallbackOrValue<EventSourceInit>;
 } & TransformerOptions<TRoot> &
   UrlOptionsWithConnectionParams;
 
@@ -50,6 +51,7 @@ export function unstable_httpSubscriptionLink<
   opts: HTTPSubscriptionLinkOptions<inferClientTypes<TInferrable>>,
 ): TRPCLink<TInferrable> {
   const transformer = getTransformer(opts.transformer);
+
   return () => {
     return ({ op }) => {
       return observable((observer) => {
@@ -72,12 +74,21 @@ export function unstable_httpSubscriptionLink<
             signal: null,
           });
 
+          const eventSourceOptions = await resultOf(opts.eventSourceOptions);
           /* istanbul ignore if -- @preserve */
           if (unsubscribed) {
             // already unsubscribed - rare race condition
             return;
           }
-          eventSource = new EventSource(url, opts.eventSourceOptions);
+          eventSource = new EventSource(url, eventSourceOptions);
+          observer.next({
+            result: {
+              type: 'state',
+              state: 'connecting',
+              data: null,
+            },
+          });
+
           const onStarted = () => {
             observer.next({
               result: {
@@ -93,9 +104,39 @@ export function unstable_httpSubscriptionLink<
           };
           // console.log('starting', new Date());
           eventSource.addEventListener('open', onStarted);
+
+          eventSource.addEventListener('open', () => {
+            observer.next({
+              result: {
+                type: 'state',
+                state: 'pending',
+              },
+            });
+          });
+
+          eventSource.addEventListener('error', (event) => {
+            // sseStreamConsumer handles this already
+            if (eventSource?.readyState === EventSource.CLOSED) {
+              return;
+            }
+
+            const error =
+              event instanceof ErrorEvent
+                ? TRPCClientError.from(event.error)
+                : TRPCClientError.from(new Error(`Unknown EventSource error`));
+
+            observer.next({
+              result: {
+                type: 'state',
+                state: 'connecting',
+                data: error,
+              },
+            });
+          });
+
           const iterable = sseStreamConsumer<Partial<SSEMessage>>({
             from: eventSource,
-            deserialize: transformer.input.deserialize,
+            deserialize: transformer.output.deserialize,
           });
 
           for await (const chunk of iterable) {
@@ -114,12 +155,36 @@ export function unstable_httpSubscriptionLink<
             },
           });
           observer.complete();
+
+          observer.next({
+            result: {
+              type: 'state',
+              state: 'idle',
+            },
+          });
         }).catch((error) => {
-          observer.error(TRPCClientError.from(error));
+          const trpcError = TRPCClientError.from(error);
+
+          observer.error(trpcError);
+          observer.next({
+            result: {
+              type: 'state',
+              state: 'error',
+              data: TRPCClientError.from(trpcError),
+            },
+          });
         });
 
         return () => {
           observer.complete();
+
+          observer.next({
+            result: {
+              type: 'state',
+              state: 'idle',
+            },
+          });
+
           eventSource?.close();
           unsubscribed = true;
         };

package/src/links/internals/httpUtils.ts

@@ -154,13 +154,47 @@ export const jsonHttpRequester: Requester = (opts) => {
   });
 };
 
+/**
+ * Polyfill for DOMException with AbortError name
+ */
+class AbortError extends Error {
+  constructor() {
+    const name = 'AbortError';
+    super(name);
+    this.name = name;
+    this.message = name;
+  }
+}
+
 export type HTTPRequestOptions = ContentOptions &
   HTTPBaseRequestOptions & {
     headers: () => HTTPHeaders | Promise<HTTPHeaders>;
   };
 
+/**
+ * Polyfill for `signal.throwIfAborted()`
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/throwIfAborted
+ */
+const throwIfAborted = (signal: Maybe<AbortSignal>) => {
+  if (!signal?.aborted) {
+    return;
+  }
+  // If available, use the native implementation
+  signal.throwIfAborted?.();
+
+  // If we have `DOMException`, use it
+  if (typeof DOMException !== 'undefined') {
+    throw new DOMException('AbortError', 'AbortError');
+  }
+
+  // Otherwise, use our own implementation
+  throw new AbortError();
+};
+
 export async function fetchHTTPResponse(opts: HTTPRequestOptions) {
-  opts.signal?.throwIfAborted();
+  throwIfAborted(opts.signal);
+
   const url = opts.getUrl(opts);
   const body = opts.getBody(opts);
   const { type } = opts;

package/src/links/internals/urlWithConnectionParams.ts

@@ -10,7 +10,7 @@ export const resultOf = <T>(value: T | (() => T)): T => {
 /**
  * A value that can be wrapped in callback
  */
-type CallbackOrValue<T> = T | (() => T | Promise<T>);
+export type CallbackOrValue<T> = T | (() => T | Promise<T>);
 
 export interface UrlOptionsWithConnectionParams {
   /**

package/src/links/types.ts

@@ -55,11 +55,54 @@ export interface TRPCClientRuntime {
   // nothing here anymore
 }
 
+export type ConnectionState = 'idle' | 'connecting' | 'pending' | 'error';
+
+export interface ConnectionStateMessageBase {
+  type: 'state';
+}
+
+export interface IdleStateMessage extends ConnectionStateMessageBase {
+  state: 'idle';
+}
+
+export interface ConnectingStateMessage<TError>
+  extends ConnectionStateMessageBase {
+  state: 'connecting';
+  data: TError | null;
+}
+
+export interface PendingStateMessage extends ConnectionStateMessageBase {
+  state: 'pending';
+}
+
+export interface ErrorStateMessage<TError> extends ConnectionStateMessageBase {
+  state: 'error';
+  data: TError;
+}
+
+export type TRPCConnectionStateMessage<TError> =
+  | IdleStateMessage
+  | ConnectingStateMessage<TError>
+  | PendingStateMessage
+  | ErrorStateMessage<TError>;
+
+export const isConnectionStateMessage = <TError>(
+  msg: unknown,
+): msg is TRPCConnectionStateMessage<TError> => {
+  return (
+    typeof msg === 'object' &&
+    msg !== null &&
+    'type' in msg &&
+    msg.type === 'state'
+  );
+};
+
 /**
  * @internal
  */
-export interface OperationResultEnvelope<TOutput> {
+export interface OperationResultEnvelope<TOutput, TError = unknown> {
   result:
+    | TRPCConnectionStateMessage<TError>
     | TRPCResultMessage<TOutput>['result']
     | TRPCSuccessResponse<TOutput>['result'];
   context?: OperationContext;
@@ -71,7 +114,10 @@ export interface OperationResultEnvelope<TOutput> {
 export type OperationResultObservable<
   TInferrable extends InferrableClientTypes,
   TOutput,
-> = Observable<OperationResultEnvelope<TOutput>, TRPCClientError<TInferrable>>;
+> = Observable<
+  OperationResultEnvelope<TOutput, TRPCClientError<TInferrable>>,
+  TRPCClientError<TInferrable>
+>;
 
 /**
  * @internal

package/src/links/wsLink.ts

@@ -20,14 +20,18 @@ import {
   resultOf,
   type UrlOptionsWithConnectionParams,
 } from './internals/urlWithConnectionParams';
-import type { Operation, TRPCLink } from './types';
+import {
+  isConnectionStateMessage,
+  type Operation,
+  type TRPCConnectionStateMessage,
+  type TRPCLink,
+} from './types';
 
 const run = <TResult>(fn: () => TResult): TResult => fn();
 
-type WSCallbackResult<TRouter extends AnyRouter, TOutput> = TRPCResponseMessage<
-  TOutput,
-  inferRouterError<TRouter>
->;
+type WSCallbackResult<TRouter extends AnyRouter, TOutput> =
+  | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>
+  | { result: TRPCConnectionStateMessage<inferRouterError<TRouter>> };
 
 type WSCallbackObserver<TRouter extends AnyRouter, TOutput> = Observer<
   WSCallbackResult<TRouter, TOutput>,
@@ -121,7 +125,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
     undefined;
   let activeConnection: null | Connection = lazyOpts.enabled
     ? null
-    : createConnection();
+    : createConnection(null);
 
   type Connection = {
     id: number;
@@ -145,7 +149,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
    */
   function dispatch() {
     if (!activeConnection) {
-      activeConnection = createConnection();
+      activeConnection = createConnection(null);
       return;
     }
     // using a timeout to batch messages
@@ -171,14 +175,14 @@ export function createWSClient(opts: WebSocketClientOptions) {
       startLazyDisconnectTimer();
     });
   }
-  function tryReconnect(conn: Connection) {
+  function tryReconnect(conn: Connection, cause: Error | null) {
     if (!!connectTimer) {
       return;
     }
 
     conn.state = 'connecting';
     const timeout = retryDelayFn(connectAttempt++);
-    reconnectInMs(timeout);
+    reconnectInMs(timeout, cause);
   }
   function hasPendingRequests(conn?: Connection) {
     const requests = Object.values(pendingRequests);
@@ -188,20 +192,20 @@ export function createWSClient(opts: WebSocketClientOptions) {
     return requests.some((req) => req.connection === conn);
   }
 
-  function reconnect() {
+  function reconnect(cause: Error | null) {
     if (lazyOpts.enabled && !hasPendingRequests()) {
       // Skip reconnecting if there are pending requests and we're in lazy mode
       return;
     }
     const oldConnection = activeConnection;
-    activeConnection = createConnection();
+    activeConnection = createConnection(cause);
     oldConnection && closeIfNoPending(oldConnection);
   }
-  function reconnectInMs(ms: number) {
+  function reconnectInMs(ms: number, cause: Error | null) {
     if (connectTimer) {
       return;
     }
-    connectTimer = setTimeout(reconnect, ms);
+    connectTimer = setTimeout(reconnect, ms, cause);
   }
 
   function closeIfNoPending(conn: Connection) {
@@ -235,18 +239,30 @@ export function createWSClient(opts: WebSocketClientOptions) {
     }, lazyOpts.closeMs);
   };
 
-  function createConnection(): Connection {
+  function createConnection(cause: Error | null): Connection {
     const self: Connection = {
       id: ++connectionIndex,
       state: 'connecting',
     } as Connection;
 
+    for (const req of Object.values(pendingRequests)) {
+      if (req.type === 'subscription') {
+        req.callbacks.next?.({
+          result: {
+            type: 'state',
+            state: 'connecting',
+            data: cause ?? null,
+          },
+        });
+      }
+    }
+
     clearTimeout(lazyDisconnectTimer);
 
-    const onError = () => {
+    const onError = (cause: Error | null) => {
       self.state = 'closed';
       if (self === activeConnection) {
-        tryReconnect(self);
+        tryReconnect(self, cause);
       }
     };
     run(async () => {
@@ -281,6 +297,17 @@ export function createWSClient(opts: WebSocketClientOptions) {
           connectAttempt = 0;
           self.state = 'open';
 
+          for (const req of Object.values(pendingRequests)) {
+            if (req.type === 'subscription') {
+              req.callbacks.next?.({
+                result: {
+                  type: 'state',
+                  state: 'pending',
+                },
+              });
+            }
+          }
+
           onOpen?.();
           dispatch();
         }).catch((cause) => {
@@ -289,17 +316,23 @@ export function createWSClient(opts: WebSocketClientOptions) {
             3000,
             cause,
           );
-          onError();
+          onError(cause);
         });
       });
-      ws.addEventListener('error', onError);
+      ws.addEventListener('error', (event) => {
+        if (event instanceof ErrorEvent) {
+          onError(event.error);
+        } else {
+          onError(new Error('Unknown WebSocket error'));
+        }
+      });
       const handleIncomingRequest = (req: TRPCClientIncomingRequest) => {
         if (self !== activeConnection) {
           return;
         }
 
         if (req.method === 'reconnect') {
-          reconnect();
+          reconnect(new Error('Server requested reconnect'));
           // notify subscribers
           for (const pendingReq of Object.values(pendingRequests)) {
             if (pendingReq.type === 'subscription') {
@@ -347,7 +380,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
         }
       });
 
-      ws.addEventListener('close', ({ code }) => {
+      ws.addEventListener('close', ({ code, reason }) => {
         if (self.state === 'open') {
           onClose?.({ code });
         }
@@ -355,7 +388,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
         if (activeConnection === self) {
           // connection might have been replaced already
-          tryReconnect(self);
+          tryReconnect(self, new Error(reason));
         }
 
         for (const [key, req] of Object.entries(pendingRequests)) {
@@ -490,20 +523,67 @@ export function wsLink<TRouter extends AnyRouter>(
           {
             error(err) {
               observer.error(err as TRPCClientError<any>);
+
+              observer.next({
+                result: {
+                  type: 'state',
+                  state: 'error',
+                  data: err,
+                },
+                context: context,
+              });
+
               unsub();
             },
             complete() {
               observer.complete();
+
+              observer.next({
+                result: {
+                  type: 'state',
+                  state: 'idle',
+                },
+                context: context,
+              });
             },
             next(message) {
+              if (
+                'result' in message &&
+                isConnectionStateMessage<TRPCClientError<TRouter>>(
+                  message.result,
+                )
+              ) {
+                message.result;
+
+                observer.next({
+                  result: message.result,
+                  context: context,
+                });
+
+                return;
+              }
+
+              if (!('id' in message)) return;
+
               const transformed = transformResult(message, transformer.output);
 
               if (!transformed.ok) {
+                const error = TRPCClientError.from(transformed.error);
+
+                observer.next({
+                  result: {
+                    type: 'state',
+                    state: 'error',
+                    data: error,
+                  },
+                  context: context,
+                });
                 observer.error(TRPCClientError.from(transformed.error));
                 return;
               }
               observer.next({
                 result: transformed.result,
+                context: context,
               });
 
               if (op.type !== 'subscription') {
@@ -517,6 +597,13 @@ export function wsLink<TRouter extends AnyRouter>(
         );
         return () => {
           unsub();
+          observer.next({
+            result: {
+              type: 'state',
+              state: 'idle',
+            },
+            context: context,
+          });
         };
       });
     };