关于javascript:前端全局捕获错误-Vue3PromiseJs

前言

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