1. window.onerror
可以监听当前页面所有的 JS 报错，
jQuery时代经常用。
注意，全局只绑定一次即可。不要放在多次渲染的组件中，这样容易绑定多次。
一般在App.vue的mounted生命周期中使用。
window.onerror = function(msg, source, line, column, error) {
console.log('window.onerror---------', msg, source, line, column, error)
}
// 注意，如果用 window.addEventListener('error', event => {}) 参数不一样！
2. errorCaptured 生命周期
会监听所有下级组件的错误。可以返回
false阻止向上传播，因为可能会有多个上级节点都监听错误。
如果设置了false，那么在 window.onerror 中就不会再报错。
一般在App.vue中使用。
errorCaptured(error, instance, info) {
console.log('errorCaptured--------', error, instance, info)
}
3. errorHandler
全局的错误监听，所有组件的报错都会汇总到这里来。
如果errorCaptured返回false则不会到这里。errorHandler会阻止错误走向window.onerror。
一般在main.js中使用。
const app = createApp(App)
app.config.errorHandler = (error, instance, info) => {
console.log('errorHandler--------', error, instance, info)
}
4. 异步错误
组件内的异步错误
errorHandler监听不到，还是需要window.onerror。
Promise 监听报错要使用window.onunhandledrejection
mounted() {
setTimeout(() => {
throw new Error('setTimeout 报错')
}, 1000)
},
总结
-
errorCaptured监听下级组件的错误，可返回false阻止向上传播。 -
errorHandler监听 Vue 全局错误。 -
window.onerror监听其他的 JS 错误，如异步。
建议：结合使用 - 一些重要的、复杂的、有运行风险的组件，可使用
errorCaptured重点监听。 - 然后用
errorHandlerwindow.onerror候补全局监听，避免意外情况。
