window.onerror

• 全域性監聽所有JS錯誤
• 但它是JS級別的，識別不了Vue元件資訊
• 捕捉一些Vue監聽不到的錯誤
• 可以捕捉到非同步錯誤

 mounted() {
   window.onerror = function(msg, source, line, column, error) {
     console.info(msg, source, line, column, error)
   }
 }

errorCaptured生命週期

• 監聽所有下級元件的錯誤
• 返回false會阻止錯誤向上的傳播
• 無法捕獲到非同步的錯誤，需要靠window.error處理

errorCaptured(err, vm, info) => {
  console.info('errorCaptured----', err, vm, info)
  return false
}
 

errorHandler配置

• Vue全域性錯誤監聽，所有元件錯誤都會彙總到這裡
• 但errorCaptured返回false，不會傳播到這裡

const app = createApp(App)

app.config.errorHandler = (error, vm, info) => {
  console.info('errorHandler---', error, vm, info)
}
app.use(router).mount('#app')

onunhandledrejection

• 監聽promise catch的錯誤

window.onunhandledrejection = function(e) {
  console.log(e.reason);
}
 

總結

• errprCaptured監聽下級元件錯誤，返回false阻止向上傳播
• errorHandler監聽全域性Vue元件的錯誤
• window.onerror監聽其它JS錯誤，如非同步