로거 링크

loggerLink는 tRPC 클라이언트에 로거를 구현할 수 있도록 하는 링크입니다. 이를 통해 쿼리, 뮤테이션, 구독과 같은 작업 유형, 요청 및 응답을 더 명확하게 확인할 수 있습니다. 기본적으로 이 링크는 브라우저 콘솔에 포맷된 로그를 출력합니다. 그러나 사용자 정의 구현을 통해 로깅 동작 및 콘솔 출력 방식을 커스터마이징할 수 있습니다.

사용법

다음과 같이 loggerLink를 가져와 links 배열에 추가할 수 있습니다:

client/index.ts
ts
import { createTRPCClient, httpBatchLink, loggerLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    /**
     * The function passed to enabled is an example in case you want to the link to
     * log to your console in development and only log errors in production
     */
    loggerLink({
      enabled: (opts) =>
        (process.env.NODE_ENV === 'development' &&
          typeof window !== 'undefined') ||
        (opts.direction === 'down' && opts.result instanceof Error),
    }),
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});

client/index.ts
ts
import { createTRPCClient, httpBatchLink, loggerLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    /**
     * The function passed to enabled is an example in case you want to the link to
     * log to your console in development and only log errors in production
     */
    loggerLink({
      enabled: (opts) =>
        (process.env.NODE_ENV === 'development' &&
          typeof window !== 'undefined') ||
        (opts.direction === 'down' && opts.result instanceof Error),
    }),
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});

loggerLink 옵션

loggerLink 함수는 LoggerLinkOptions 구조를 가진 옵션 객체를 인수로 받습니다:

ts
type LoggerLinkOptions<TRouter extends AnyRouter> = {
  logger?: LogFn<TRouter>;
  /**
   * It is a function that returns a condition that determines whether to enable the logger.
   * It is true by default.
   */
  enabled?: EnabledFn<TRouter>;
  /**
   * Used in the built-in defaultLogger
   */
  console?: ConsoleEsque;
  /**
   * Color mode used in the default logger.
   * @default typeof window === 'undefined' ? 'ansi' : 'css'
   */
  colorMode?: 'ansi' | 'css' | 'none';
  /**
   * Include context in the log - defaults to false unless colorMode is 'css'
   */
  withContext?: boolean;
};

ts
type LoggerLinkOptions<TRouter extends AnyRouter> = {
  logger?: LogFn<TRouter>;
  /**
   * It is a function that returns a condition that determines whether to enable the logger.
   * It is true by default.
   */
  enabled?: EnabledFn<TRouter>;
  /**
   * Used in the built-in defaultLogger
   */
  console?: ConsoleEsque;
  /**
   * Color mode used in the default logger.
   * @default typeof window === 'undefined' ? 'ansi' : 'css'
   */
  colorMode?: 'ansi' | 'css' | 'none';
  /**
   * Include context in the log - defaults to false unless colorMode is 'css'
   */
  withContext?: boolean;
};

참조

이 링크의 소스 코드는 GitHub.에서 확인할 수 있습니다.