1. window.onerror
可以監(jiān)聽當前頁面所有的 JS 報錯，
jQuery時代經(jīng)常用。
注意舶胀，全局只綁定一次即可。不要放在多次渲染的組件中碧注，這樣容易綁定多次嚣伐。
一般在App.vue的mounted生命周期中使用。
window.onerror = function(msg, source, line, column, error) {
console.log('window.onerror---------', msg, source, line, column, error)
}
// 注意萍丐，如果用 window.addEventListener('error', event => {}) 參數(shù)不一樣轩端！
2. errorCaptured 生命周期
會監(jiān)聽所有下級組件的錯誤∈疟洌可以返回
false阻止向上傳播基茵，因為可能會有多個上級節(jié)點都監(jiān)聽錯誤。
如果設置了false壳影，那么在 window.onerror 中就不會再報錯拱层。
一般在App.vue中使用。
errorCaptured(error, instance, info) {
console.log('errorCaptured--------', error, instance, info)
}
3. errorHandler
全局的錯誤監(jiān)聽宴咧，所有組件的報錯都會匯總到這里來根灯。
如果errorCaptured返回false則不會到這里。errorHandler會阻止錯誤走向window.onerror掺栅。
一般在main.js中使用烙肺。
const app = createApp(App)
app.config.errorHandler = (error, instance, info) => {
console.log('errorHandler--------', error, instance, info)
}
4. 異步錯誤
組件內(nèi)的異步錯誤
errorHandler監(jiān)聽不到，還是需要window.onerror氧卧。
Promise 監(jiān)聽報錯要使用window.onunhandledrejection
mounted() {
setTimeout(() => {
throw new Error('setTimeout 報錯')
}, 1000)
},
總結(jié)
-
errorCaptured監(jiān)聽下級組件的錯誤茬高，可返回false阻止向上傳播。 -
errorHandler監(jiān)聽 Vue 全局錯誤假抄。 -
window.onerror監(jiān)聽其他的 JS 錯誤，如異步丽猬。
建議：結(jié)合使用 - 一些重要的宿饱、復雜的、有運行風險的組件脚祟，可使用
errorCaptured重點監(jiān)聽谬以。 - 然后用
errorHandlerwindow.onerror候補全局監(jiān)聽，避免意外情況由桌。
