前端全局捕获错误 Vue3、Promise、Js

前言

虽然在开发当中都会处理好错误，但就怕有遗漏或者某些特别的、奇奇怪怪的bug，这些错误就难以捕捉，所以研究了一下全局捕获错误的三种方法。

1.window.onerror

MDN文档：window.onerror
当资源加载失败或无法使用时又或者script执行错误时会被这个api捕获到

/** 
 * @return
 * message：错误消息（字符串）
 * source：引发错误的脚本的URL（字符串）
 * lineno：发生错误的行号（数值）
 * colno：发生错误的行的列号（数值）
 * error：错误对象（对象）
 *
 * 特点:
 * 识别所有的js的错误
 * 识别到Vue监听不到的错误,例如异步错误
 */ 
window.onerror = (message, source, lineno, colno, error) => {
    console.log(message, source, lineno, colno, error);
}

2.unhandledrejection

MDN文档：unhandledrejection
用于捕获全局的、未被Promise.reject处理的Promise错误

// 全局Promise错误捕获
/** 
 * @return
 * reason：异常处理方法中的错误原因
 *
 * 特点:
 * 捕获所有未被Promise.reject处理的错误
 */ 
window.addEventListener('unhandledrejection', (event) => {
    console.error(event.reason);
})

3.app.config.errorHandler

该api属于Vue.js,用于为应用内抛出的未捕获错误指定一个全局处理函数。
Vue3文档：Vue3 app.config.errorHandler
Vue2文档：Vue2 app.config.errorHandler

const app = createApp(App)
app.use(router)
app.mount('#app')

/** 
 * @params
 * err：错误对象
 * instance：触发该错误的组件实例
 * info：一个指出错误来源类型信息的字符串
 * 
 * 特点:
 * 组件渲染器
 * 事件处理器
 * 生命周期钩子
 * setup() 函数
 * 侦听器
 * 自定义指令钩子
 * 过渡 (Transition) 钩子
 */ 
app.config.errorHandler = (err: any, instance: any, info: any) => {
    console.error(err);
}