window.onerror
try...catch捕获的 error无法被window.onerror监听到,catch错误不再向上抛出 js执行错误监听- 可以监听异步错误
1
2
3
4
5
6
7
8
9
window.onerror = function(msg, source, line, column, error) {
console.log('onerror', msg, source, line, column, error)
}
// or 同样的错误监听两种写法
window.addEventListener('error', event => {
console.log(event)
})
errorCaptured 生命周期
- 监听所有下级组件的错误
- 返回
false会阻止向上传播
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// App.vue
<script>
export default {
mounted() {
},
// err - 错误提示；vm - 组件实例；info - 信息
errorCaptured: (err, vm, info) => {
console.log('errorCaptured', err, vn, info)
// 阻止向上传播
return false
}
}
</script>
errorHandler 全局错误监听
Vue全局错误监听， 所有组件错误都会汇总到这里- 如果
errorCaptured返回false不会传播到这里 - 与
window.onerror监听互斥，全局erroHandler监听到的错误不会再window.onerror出现 - 异步回调里的错误，
errorHandler监听不到（vue 监听不到异步错误）, 需要使用window.onerror
1
2
3
4
5
6
7
8
9
10
11
12
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
const app = createApp(App)
app.use(router)
app.config. errorHandler = (error, vm, info) => {
console.log('errorHandler', err, vn, info)
}
app.mount('#app')
错误捕获总结
errorCaptured监听下级组件错误，返回 false 阻止向上传播errorHandler监听全局 Vue 组件的错误window.onerror监听其他JS 错误，如异步Promise为处理的catch需要onunhandledrejection
实际工作中，三者要结合使用
errorCaptured监听一些重要、有风险组件的错误window.onerror和errorHandler候补全局监听