Vercelで"pino-pretty"を実行して"Application error: ..."になる場合の解決策

問題

Next.jsでWEBアプリケーションを開発しており、loggerとしてpinoを使用していた。
https://github.com/pinojs/pino/tree/main

ログを見やすくしようと、pino-prettyを導入し、Vercelにデプロイを行うと、ビルドは成功するがURLを開くとエラーが発生してしまう。

logger.ts

export const logger = pino({
  transport: {
    target: 'pino-pretty',
    options: { colorize: true }
  },
  browser: {
    asObject: true,
  },
  timestamp: pino.stdTimeFunctions.isoTime,
});

解決

1. Vercelのシステム環境変数を使用して、Vercelにデプロイされているかを判断を行う。
2. Vercelにデプロイされている場合はpino-prettyを使用しないようにする。

Vercelの環境変数はSystem Environment Variables Overviewを参照しました。

コード

logger.ts

export const logger = pino({
  // Vercelの環境変数によってログの出力先を変更
  transport: process.env.VERCEL ? undefined : {
    target: 'pino-pretty',
    options: { colorize: true }
  },
  browser: {
    asObject: true,
  },
  timestamp: pino.stdTimeFunctions.isoTime,
});