1. JavaScript script errors (synchronization tasks and resource loading errors other than new Image()):
When the JavaScript script runs incorrectly or the resource < img /> < script > fails to load, the error event of the Event interface will be triggered. Can also be captured by window.addEventListener
window.addEventListener('error', (err) => {
// 或者 window.onerror = function(err){
}
// 错误收集处理
console.log(err)
// 调用接口，进行错误上报
...
})
2. Promise instance or async error.
When the Promise instance goes from the pending state to the reject state without catching or using the reject processor to handle the error, the unhandledrejection event will be triggered.
// 错误收集
window.addEventListener('unhandledrejection', (event) => {
// 错误收集处理
console.log(event.reason)
// 调用接口，进行错误上报
...
})
3. Vue syntax or rule errors:
When your project is built with Vue, you can use vue.config.errorHandler to capture errors about Vue syntax or rules.
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')