如何在Next.js中配置Pino日志以实现浏览器控制台格式化输出？

你的问题核心在于pino-pretty是仅支持Node.js环境的传输工具，浏览器无法识别该配置，导致客户端日志没有格式化效果。Pino在浏览器环境下不会自动添加时间戳和级别格式化，需要单独配置浏览器端的日志处理逻辑。

解决方案 #

通过区分服务端/客户端环境，为浏览器端自定义日志写入函数，手动添加时间戳、级别标识和样式，实现和服务端一致的格式化效果。

修改后的配置代码 #

import pino from "pino"
import { Logger } from "pino"

// 自定义浏览器日志格式化输出函数
const browserLogWriter = (logEvent) => {
  const { level, time, msg, group } = logEvent
  // 映射Pino日志级别到控制台方法和样式颜色
  const levelConfig = {
    10: { method: 'trace', color: '#808080' }, // trace
    20: { method: 'debug', color: '#0000FF' }, // debug
    30: { method: 'info', color: '#008000' },  // info
    40: { method: 'warn', color: '#FFA500' },  // warn
    50: { method: 'error', color: '#FF0000' }, // error
    60: { method: 'error', color: '#8B0000' }  // fatal
  }
  const { method, color } = levelConfig[level] || levelConfig[30]
  
  // 格式化时间戳为本地可读格式
  const timestamp = new Date(time).toLocaleString()
  // 利用控制台样式输出格式化日志
  console[method](
    `%c[${timestamp}] %c[${group}] %c[${pino.levels.labels[level]}] %c${msg}`,
    'color: #808080;', // 时间戳颜色
    'color: #9333EA; font-weight: 500;', // 分组颜色
    `color: ${color}; font-weight: bold;`, // 级别颜色
    'color: inherit;' // 日志内容颜色
  )
}

const baseLogger: Logger = pino({
  level: process.env.PINO_LOG_LEVEL || "info",
  browser: {
    serialize: false, // 禁用默认序列化，改用自定义逻辑
    write: browserLogWriter // 指定浏览器端日志写入函数
  },
  // 仅在服务端启用pino-pretty
  ...(typeof window === 'undefined' ? {
    transport: {
      target: "pino-pretty",
      options: {
        colorize: true,
        messageFormat: "[{group}] {msg}",
      },
    }
  } : {})
})

export default baseLogger.child({ group: "app" })
export const authLogger = baseLogger.child({ group: "auth" })

代码要点说明 #

• 用typeof window === 'undefined'区分Next.js的服务端和客户端环境，服务端保留pino-pretty配置，客户端跳过该无效配置。
• 自定义browserLogWriter函数解析Pino的日志事件对象，提取时间戳、级别、分组和日志内容。
• 通过console[method]调用对应级别的控制台方法（如console.info、console.error），并利用%c占位符添加样式，实现不同字段的颜色区分。
• 时间戳通过new Date(time).toLocaleString()格式化为本地可读的日期时间格式。

内容的提问来源于stack exchange，提问作者Undistraction