前言

尽管在开发当中都会解决好谬误,但就怕有脱漏或者某些特地的、奇奇怪怪的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);}