@trpc/client 10.33.0 → 10.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "10.33.0",
+  "version": "10.34.0",
   "description": "The tRPC client library",
   "author": "KATT",
   "license": "MIT",
@@ -76,11 +76,11 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@trpc/server": "10.33.0"
+    "@trpc/server": "10.34.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.0.0",
-    "@trpc/server": "10.33.0",
+    "@trpc/server": "10.34.0",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/node": "^18.16.16",
     "eslint": "^8.40.0",
@@ -98,5 +98,5 @@
   "funding": [
     "https://trpc.io/sponsor"
   ],
-  "gitHead": "b92f34aacd300402f4c41e3f4a5b1f236f490672"
+  "gitHead": "4b4bb80470b0f03626b6861c2b4cdfc8bb3afd81"
 }

package/src/TRPCClientError.ts

@@ -24,6 +24,17 @@ export interface TRPCClientErrorBase<TShape extends DefaultErrorShape> {
 export type TRPCClientErrorLike<TRouterOrProcedure extends ErrorInferrable> =
   TRPCClientErrorBase<inferErrorShape<TRouterOrProcedure>>;
 
+function isTRPCClientError(cause: Error): cause is TRPCClientError<any> {
+  return (
+    cause instanceof TRPCClientError ||
+    /**
+     * @deprecated
+     * Delete in next major
+     */
+    cause.name === 'TRPCClientError'
+  );
+}
+
 export class TRPCClientError<TRouterOrProcedure extends ErrorInferrable>
   extends Error
   implements TRPCClientErrorBase<inferErrorShape<TRouterOrProcedure>>
@@ -31,7 +42,12 @@ export class TRPCClientError<TRouterOrProcedure extends ErrorInferrable>
   public readonly cause;
   public readonly shape: Maybe<inferErrorShape<TRouterOrProcedure>>;
   public readonly data: Maybe<inferErrorShape<TRouterOrProcedure>['data']>;
-  public readonly meta;
+
+  /**
+   * Additional meta data about the error
+   * In the case of HTTP-errors, we'll have `response` and potentially `responseJSON` here
+   */
+  public meta;
 
   constructor(
     message: string,
@@ -71,8 +87,15 @@ export class TRPCClientError<TRouterOrProcedure extends ErrorInferrable>
         },
       );
     }
-    if (cause.name === 'TRPCClientError') {
-      return cause as TRPCClientError<any>;
+    if (isTRPCClientError(cause)) {
+      if (opts.meta) {
+        // Decorate with meta error data
+        cause.meta = {
+          ...cause.meta,
+          ...opts.meta,
+        };
+      }
+      return cause;
     }
 
     return new TRPCClientError<TRouterOrProcedure>(cause.message, {

package/src/getFetch.ts

@@ -4,11 +4,6 @@ type AnyFn = (...args: any[]) => unknown;
 
 const isFunction = (fn: unknown): fn is AnyFn => typeof fn === 'function';
 
-function _bind(fn: AnyFn, thisArg: unknown): AnyFn {
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  return isFunction(fn.bind) ? fn.bind(thisArg) : fn;
-}
-
 export function getFetch(
   customFetchImpl?: FetchEsque | NativeFetchEsque,
 ): FetchEsque {
@@ -17,11 +12,11 @@ export function getFetch(
   }
 
   if (typeof window !== 'undefined' && isFunction(window.fetch)) {
-    return _bind(window.fetch, window) as FetchEsque;
+    return window.fetch as FetchEsque;
   }
 
   if (typeof globalThis !== 'undefined' && isFunction(globalThis.fetch)) {
-    return _bind(globalThis.fetch, globalThis) as FetchEsque;
+    return globalThis.fetch as FetchEsque;
   }
 
   throw new Error('No fetch implementation found');

package/src/links/httpLink.ts

@@ -4,6 +4,7 @@ import { transformResult } from '../shared/transformResult';
 import { TRPCClientError } from '../TRPCClientError';
 import {
   HTTPLinkBaseOptions,
+  HTTPResult,
   jsonHttpRequester,
   Requester,
   resolveHTTPLinkOptions,
@@ -48,14 +49,16 @@ export function httpLinkFactory(factoryOpts: { requester: Requester }) {
               return opts.headers;
             },
           });
+          let meta: HTTPResult['meta'] | undefined = undefined;
           promise
             .then((res) => {
+              meta = res.meta;
               const transformed = transformResult(res.json, runtime);
 
               if (!transformed.ok) {
                 observer.error(
                   TRPCClientError.from(transformed.error, {
-                    meta: res.meta,
+                    meta,
                   }),
                 );
                 return;
@@ -67,7 +70,7 @@ export function httpLinkFactory(factoryOpts: { requester: Requester }) {
               observer.complete();
             })
             .catch((cause) => {
-              observer.error(TRPCClientError.from(cause));
+              observer.error(TRPCClientError.from(cause, { meta }));
             });
 
           return () => {

package/src/links/internals/createHTTPBatchLink.ts

@@ -87,8 +87,10 @@ export function createHTTPBatchLink<TOptions extends HTTPBatchLinkOptions>(
           const loader = loaders[op.type];
           const { promise, cancel } = loader.load(op);
 
+          let _res = undefined as HTTPResult | undefined;
           promise
             .then((res) => {
+              _res = res;
               const transformed = transformResult(res.json, runtime);
 
               if (!transformed.ok) {
@@ -106,7 +108,11 @@ export function createHTTPBatchLink<TOptions extends HTTPBatchLinkOptions>(
               observer.complete();
             })
             .catch((err) => {
-              observer.error(TRPCClientError.from(err));
+              observer.error(
+                TRPCClientError.from(err, {
+                  meta: _res?.meta,
+                }),
+              );
             });
 
           return () => {

package/src/links/internals/httpUtils.ts

@@ -9,6 +9,7 @@ import {
   RequestInitEsque,
   ResponseEsque,
 } from '../../internals/types';
+import { TRPCClientError } from '../../TRPCClientError';
 import { TextDecoderEsque } from '../internals/streamingUtils';
 import { HTTPHeaders, PromiseAndCancel, TRPCClientRuntime } from '../types';
 
@@ -29,7 +30,7 @@ export interface HTTPLinkBaseOptions {
 
 export interface ResolvedHTTPLinkOptions {
   url: string;
-  fetch: FetchEsque;
+  fetch?: FetchEsque;
   AbortController: AbortControllerEsque | null;
 }
 
@@ -38,7 +39,7 @@ export function resolveHTTPLinkOptions(
 ): ResolvedHTTPLinkOptions {
   return {
     url: opts.url,
-    fetch: getFetch(opts.fetch),
+    fetch: opts.fetch,
     AbortController: getAbortController(opts.AbortController),
   };
 }
@@ -62,6 +63,7 @@ export interface HTTPResult {
   json: TRPCResponse;
   meta: {
     response: ResponseEsque;
+    responseJSON?: unknown;
   };
 }
 
@@ -164,7 +166,7 @@ export async function fetchHTTPResponse(
     ...resolvedHeaders,
   };
 
-  return opts.fetch(url, {
+  return getFetch(opts.fetch)(url, {
     method: METHOD[type],
     signal: ac?.signal,
     body: body,
@@ -185,12 +187,15 @@ export function httpRequest(
         return _res.json();
       })
       .then((json) => {
+        meta.responseJSON = json;
         resolve({
           json: json as TRPCResponse,
           meta,
         });
       })
-      .catch(reject);
+      .catch((err) => {
+        reject(TRPCClientError.from(err, { meta }));
+      });
   });
   const cancel = () => {
     ac?.abort();

package/src/links/loggerLink.ts

@@ -49,11 +49,6 @@ type LoggerLinkFn<TRouter extends AnyRouter> = (
   opts: LoggerLinkFnOptions<TRouter>,
 ) => void;
 
-const palette = {
-  query: ['72e3ff', '3fb0d8'],
-  mutation: ['c5a3fc', '904dfc'],
-  subscription: ['ff49e1', 'd83fbe'],
-};
 export interface LoggerLinkOptions<TRouter extends AnyRouter> {
   logger?: LoggerLinkFn<TRouter>;
   enabled?: EnabledFn<TRouter>;
@@ -61,6 +56,11 @@ export interface LoggerLinkOptions<TRouter extends AnyRouter> {
    * Used in the built-in defaultLogger
    */
   console?: ConsoleEsque;
+  /**
+   * Color mode
+   * @default typeof window === 'undefined' ? 'ansi' : 'css'
+   */
+  colorMode?: 'ansi' | 'css';
 }
 
 function isFormData(value: unknown): value is FormData {
@@ -71,50 +71,120 @@ function isFormData(value: unknown): value is FormData {
   return value instanceof FormData;
 }
 
+const palettes = {
+  css: {
+    query: ['72e3ff', '3fb0d8'],
+    mutation: ['c5a3fc', '904dfc'],
+    subscription: ['ff49e1', 'd83fbe'],
+  },
+  ansi: {
+    regular: {
+      // Cyan background, black and white text respectively
+      query: ['\x1b[30;46m', '\x1b[97;46m'],
+      // Magenta background, black and white text respectively
+      mutation: ['\x1b[30;45m', '\x1b[97;45m'],
+      // Green background, black and white text respectively
+      subscription: ['\x1b[30;42m', '\x1b[97;42m'],
+    },
+    bold: {
+      query: ['\x1b[1;30;46m', '\x1b[1;97;46m'],
+      mutation: ['\x1b[1;30;45m', '\x1b[1;97;45m'],
+      subscription: ['\x1b[1;30;42m', '\x1b[1;97;42m'],
+    },
+  },
+} as const;
+
+function constructPartsAndArgs(
+  opts: LoggerLinkFnOptions<any> & {
+    colorMode: 'ansi' | 'css';
+  },
+) {
+  const { direction, type, path, id, input } = opts;
+
+  const parts: string[] = [];
+  const args: any[] = [];
+
+  if (opts.colorMode === 'ansi') {
+    const [lightRegular, darkRegular] = palettes.ansi.regular[type];
+    const [lightBold, darkBold] = palettes.ansi.bold[type];
+    const reset = '\x1b[0m';
+
+    parts.push(
+      direction === 'up' ? lightRegular : darkRegular,
+      direction === 'up' ? '>>' : '<<',
+      type,
+      direction === 'up' ? lightBold : darkBold,
+      `#${id}`,
+      path,
+      reset,
+    );
+
+    if (direction === 'up') {
+      args.push({ input: opts.input });
+    } else {
+      args.push({
+        input: opts.input,
+        // strip context from result cause it's too noisy in terminal wihtout collapse mode
+        result: 'result' in opts.result ? opts.result.result : opts.result,
+        elapsedMs: opts.elapsedMs,
+      });
+    }
+
+    return { parts, args };
+  }
+
+  const [light, dark] = palettes.css[type];
+  const css = `
+    background-color: #${direction === 'up' ? light : dark}; 
+    color: ${direction === 'up' ? 'black' : 'white'};
+    padding: 2px;
+  `;
+
+  parts.push(
+    '%c',
+    direction === 'up' ? '>>' : '<<',
+    type,
+    `#${id}`,
+    `%c${path}%c`,
+    '%O',
+  );
+  args.push(css, `${css}; font-weight: bold;`, `${css}; font-weight: normal;`);
+
+  if (direction === 'up') {
+    args.push({ input, context: opts.context });
+  } else {
+    args.push({
+      input,
+      result: opts.result,
+      elapsedMs: opts.elapsedMs,
+      context: opts.context,
+    });
+  }
+
+  return { parts, args };
+}
+
 // maybe this should be moved to it's own package
 const defaultLogger =
-  <TRouter extends AnyRouter>(
-    c: ConsoleEsque = console,
-  ): LoggerLinkFn<TRouter> =>
+  <TRouter extends AnyRouter>({
+    c = console,
+    colorMode = 'css',
+  }: {
+    c?: ConsoleEsque;
+    colorMode?: 'ansi' | 'css';
+  }): LoggerLinkFn<TRouter> =>
   (props) => {
-    const { direction, type, path, context, id } = props;
-    const [light, dark] = palette[type];
-
     const rawInput = props.input;
-
     const input = isFormData(rawInput)
       ? Object.fromEntries(rawInput)
       : rawInput;
 
-    const css = `
-    background-color: #${direction === 'up' ? light : dark}; 
-    color: ${direction === 'up' ? 'black' : 'white'};
-    padding: 2px;
-  `;
+    const { parts, args } = constructPartsAndArgs({
+      ...props,
+      colorMode,
+      input,
+    });
 
-    const parts = [
-      '%c',
-      direction === 'up' ? '>>' : '<<',
-      type,
-      `#${id}`,
-      `%c${path}%c`,
-      '%O',
-    ];
-    const args: any[] = [
-      css,
-      `${css}; font-weight: bold;`,
-      `${css}; font-weight: normal;`,
-    ];
-    if (props.direction === 'up') {
-      args.push({ input, context: context });
-    } else {
-      args.push({
-        input,
-        result: props.result,
-        elapsedMs: props.elapsedMs,
-        context,
-      });
-    }
     const fn: 'error' | 'log' =
       props.direction === 'down' &&
       props.result &&
@@ -124,12 +194,15 @@ const defaultLogger =
 
     c[fn].apply(null, [parts.join(' ')].concat(args));
   };
+
 export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
   opts: LoggerLinkOptions<TRouter> = {},
 ): TRPCLink<TRouter> {
   const { enabled = () => true } = opts;
 
-  const { logger = defaultLogger(opts.console) } = opts;
+  const colorMode =
+    opts.colorMode ?? (typeof window === 'undefined' ? 'ansi' : 'css');
+  const { logger = defaultLogger({ c: opts.console, colorMode }) } = opts;
 
   return () => {
     return ({ op, next }) => {

package/src/shared/transformResult.ts

@@ -6,7 +6,6 @@ import type {
 } from '@trpc/server/rpc';
 import type { TRPCClientRuntime } from '../links';
 import { isObject } from '../links/internals/isObject';
-import { TRPCClientError } from '../TRPCClientError';
 
 // FIXME:
 // - the generics here are probably unnecessary
@@ -41,6 +40,12 @@ function transformResultInner<TRouter extends AnyRouter, TOutput>(
   return { ok: true, result } as const;
 }
 
+class TransformResultError extends Error {
+  constructor() {
+    super('Unable to transform response from server');
+  }
+}
+
 /**
  * Transforms and validates that the result is a valid TRPCResponse
  * @internal
@@ -56,7 +61,7 @@ export function transformResult<TRouter extends AnyRouter, TOutput>(
     // Use the data transformers on the JSON-response
     result = transformResultInner(response, runtime);
   } catch (err) {
-    throw new TRPCClientError('Unable to transform response from server');
+    throw new TransformResultError();
   }
 
   // check that output of the transformers is a valid TRPCResponse
@@ -65,10 +70,10 @@ export function transformResult<TRouter extends AnyRouter, TOutput>(
     (!isObject(result.error.error) ||
       typeof result.error.error.code !== 'number')
   ) {
-    throw new TRPCClientError('Badly formatted response from server');
+    throw new TransformResultError();
   }
   if (result.ok && !isObject(result.result)) {
-    throw new TRPCClientError('Badly formatted response from server');
+    throw new TransformResultError();
   }
   return result;
 }