如何统一监听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 的官方文档。