如何在Nuxt.js生产环境下查看详细错误日志

1. 直接查看运行时输出日志 #

• Nuxt 2 生产环境启动命令默认会将服务端错误、控制台输出打印到当前终端，如果你是后台运行服务，可以启动时将日志重定向到本地文件：

  nuxt start > nuxt-prod-log.txt 2>&1
  

  后续直接打开nuxt-prod-log.txt即可查看完整的服务端报错栈、接口请求等运行日志。
• Nuxt 3 生产构建后启动时同样可以重定向日志：

  node .output/server/index.mjs > nuxt3-prod-log.txt 2>&1
  

2. 临时开启生产环境调试配置（仅排查问题时使用，不要长期对外开启） #

如果默认输出的错误信息太模糊，你可以修改配置开启详细错误展示、源码映射：

Nuxt 2 配置 #

修改nuxt.config.js：

export default {
  // 生产环境临时开启debug，错误会直接在页面展示完整栈信息
  debug: process.env.NODE_ENV === 'production',
  build: {
    terser: {
      terserOptions: {
        compress: {
          // 保留console输出，关闭自动删除debugger
          drop_console: false,
          drop_debugger: false
        }
      }
    },
    // 开启sourcemap，方便定位混淆后代码对应的源码位置
    productionSourceMap: true
  }
}

修改配置后重新执行nuxt build打包再启动服务即可。

Nuxt 3 配置 #

修改nuxt.config.ts：

export default defineNuxtConfig({
  // 开启生产环境debug
  debug: true,
  // 开启服务端和客户端的sourcemap
  sourcemap: {
    server: true,
    client: true
  },
  vite: {
    build: {
      // 临时关闭代码压缩，报错信息更容易读
      minify: false
    }
  }
})

修改配置后重新执行nuxt build打包再启动服务即可。

3. 自定义全局错误收集 #

如果需要长期收集生产环境的全量错误，你可以添加全局错误捕获插件：

Nuxt 2 插件配置 #

新建plugins/error-logger.js：

export default function (ctx) {
  // 捕获服务端渲染全局错误
  ctx.app.errorHandler = (err) => {
    console.error('[服务端全局错误]', err.stack || err.message, err)
  }
  if (process.client) {
    // 捕获客户端同步错误
    window.addEventListener('error', (event) => {
      console.error('[客户端全局错误]', event.error?.stack || event.message, event)
    })
    // 捕获未处理的Promise异步错误
    window.addEventListener('unhandledrejection', (event) => {
      console.error('[Promise未捕获错误]', event.reason?.stack || event.reason, event)
    })
  }
}

然后在nuxt.config.js中注册插件：

export default {
  plugins: [
    '~/plugins/error-logger.js'
  ]
}

Nuxt 3 插件配置 #

新建plugins/error-logger.ts：

export default defineNuxtPlugin((nuxtApp) => {
  // 捕获全局应用错误
  nuxtApp.hook('app:error', (err) => {
    console.error('[全局应用错误]', err.stack || err.message, err)
  })
  if (process.client) {
    window.addEventListener('error', (event) => {
      console.error('[客户端全局错误]', event.error?.stack || event.message, event)
    })
    window.addEventListener('unhandledrejection', (event) => {
      console.error('[Promise未捕获错误]', event.reason?.stack || event.reason, event)
    })
  }
})

插件会自动生效，无需额外注册。

内容的提问来源于stack exchange，提问作者S.M_Emamian