如何统一监听Vue组件报错

• window.onerror

  • 全局监听所有JS错误，包括异步错误
  • 但是它是JS级别的，识别不了Vue组件信息，Vue内部的错误还是用Vue来监听
  • 捕捉一些Vue监听不到的错误

• errorCaptured生命周期

  • 监听所有下级组件的错误
  • 返回false会阻止向上传播到window.onerror

• errorHandler配置

  • Vue全局错误监听，所有组件错误都会汇总到这里
  • 但errorCaptured返回false，不会传播到这里
  • window.onerror和errorHandler互斥，window.onerror不会在被触发，这里都是全局错误监听了

• 异步错误

  • 异步回调里的错误，errorHandler监听不到
  • 需要使用window.onerror

• 总结

  • 实际工作中，三者结合使用
  • promise（promise没有被catch的报错，使用onunhandledrejection监听）和setTimeout异步，vue里面监听不了

  window.addEventListener("unhandledrejection", event => {
    // 捕获 Promise 没有 catch 的错误
    console.info('unhandledrejection----', event)
  })
  Promise.reject('错误信息')
  // .catch(e => console.info(e)) // catch 住了，就不会被 unhandledrejection 捕获
  

  • errorCaptured监听一些重要的、有风险组件的错误
  • window.onerror和errorCaptured候补全局监听

// main.js
const app = createApp(App)

// 所有组件错误都会汇总到这里
// window.onerror和errorHandler互斥，window.onerror不会在被触发，这里都是全局错误监听了
// 阻止向window.onerror传播
app.config.errorHandler = (error, vm, info) => {
  console.info('errorHandler----', error, vm, info)
}

// 在app.vue最上层中监控全局组件
export default {
  mounted() {
    /**
     * msg:错误的信息
     * source:哪个文件
     * line:行
     * column:列
     * error:错误的对象
     */
    // 可以监听一切js的报错， try...catch 捕获的 error ，无法被 window.onerror 监听到
    window.onerror = function (msg, source, line, column, error) {
      console.info('window.onerror----', msg, source, line, column, error)
    }
    // 用addEventListener跟window.onerror效果一样，参数不一样
    // window.addEventListener('error', event => {
    //   console.info('window error', event)
    // })
  },
  errorCaptured: (errInfo, vm, info) => {
    console.info('errorCaptured----', errInfo, vm, info)
    // 返回false会阻止向上传播到window.onerror
    // 返回false会阻止传播到errorHandler
    // return false
  },
}

// ErrorDemo.vue
export default {
  name: 'ErrorDemo',
  data() {
    return {
      num: 100
    }
  },
  methods: {
    clickHandler() {
      try {
        this.num() // 报错
      } catch (ex) {
        console.error('catch.....', ex)
        // try...catch 捕获的 error ，无法被 window.onerror 监听到
      }

      this.num() // 报错
    }
  },
  mounted() {
    // 被errorCaptured捕获
    // throw new Error('mounted 报错')

    // 异步报错，errorHandler、errorCaptured监听不到，vue对异步报错监听不了，需要使用window.onerror来做
    // setTimeout(() => {
    //     throw new Error('setTimeout 报错')
    // }, 1000)
  },
}

要统一监听 Vue 组件的报错，可以使用 Vue 的全局错误处理机制。Vue 提供了 errorHandler 钩子函数，可以在组件发生错误时捕获并处理错误信息。

在你的 Vue 应用的入口文件（通常是 main.js）中，可以使用 Vue.config.errorHandler 方法来设置全局的错误处理函数，如下所示：

Vue.config.errorHandler = function (err, vm, info) {
  // 在这里可以处理错误，比如发送错误日志等
  console.error('Vue Error:', err);
  console.error('Component:', vm);
  console.error('Error Info:', info);
}

在这个错误处理函数中，err 参数表示捕获到的错误对象，vm 参数表示发生错误的 Vue 组件实例，info 参数包含有关错误的更多信息，比如错误发生的位置等。

通过设置全局的错误处理函数，你可以在组件发生错误时捕获错误并进行统一处理，比如发送错误日志给服务器、展示错误提示等。

需要注意的是，在开发环境下，Vue 会默认将错误打印到浏览器的控制台中，但在生产环境下，默认不会输出错误信息，因此建议在生产环境下设置一个错误处理函数来捕获和处理错误。

另外，如果你使用的是 Vue 3，全局错误处理的设置方式略有不同。你可以使用 app.config.errorHandler 方法来设置全局的错误处理函数，具体的代码示例可以参考 Vue 3 的官方文档。