1、JavaScript 脚本错误(同步任务及除了 new Image() 之外的资源加载错误):
当 JavaScript 脚本运行错误的时候或者资源 < img /> < script > 加载失败时,会触发 Event 接口的 error 事件,也能被 window.addEventListener 捕获到
window.addEventListener('error', (err) => { // 或者 window.onerror = function(err){}
// 错误收集处理
console.log(err)
// 调用接口,进行错误上报
...
})
2、Promise 实例或者 async 错误
当 Promise 实例从 pending 状态到 reject 状态后并没有进行 catch 或者使用 reject 处理器处理时的错误,会触发 unhandledrejection 事件
// 错误收集
window.addEventListener('unhandledrejection', (event) => {
// 错误收集处理
console.log(event.reason)
// 调用接口,进行错误上报
...
})
3、vue 语法或者规则的错误:
当你的工程项目是 vue 构建时,可以使用 vue.config.errorHandler 进行捕获关于 vue 语法或者规则的错误
vue2
import Vue from 'vue'
import App from './App.vue'
Vue.config.errorHandler = function(err, vm, info) {
console.log(err, vm, info)
}
new Vue({
render: h => h(App),
}).$mount('#app')
vue3
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.errorHandler = (err, vm, info) => {
// 错误收集处理
console.log(err, vm, info)
// 调用接口,进行错误上报
...
}
app.mount('#app')