Vue实现全局异常处理的几种方案
在开发组件库或者插件,经常会需要进行全局异常处理,从而实现:
- 全局统一处理异常;
- 为开发者提示错误信息;
- 方案降级处理等等。
那么如何实现上面功能呢?本文先简单实现一个异常处理方法,然后结合 Vue3 源码中的实现详细介绍,最后总结实现异常处理的几个核心。
本文 Vue3 版本为 3.0.11
一、前端常见异常
对于前端来说,常见的异常比较多,比如:
- JS 语法异常;
- Ajax 请求异常;
- 静态资源加载异常;
- Promise 异常;
- iframe 异常;
等等
最常用的比如:
- window.onerror
通过 window.onerror文档[2]可知,当 JS 运行时发生错误(包括语法错误),触发 window.onerror():
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常:',{
message, source, lineno, colno, error});
}
函数参数:
- message:错误信息(字符串)。可用于HTML οnerrοr=""处理程序中的 event。
- source:发生错误的脚本URL(字符串)
- lineno:发生错误的行号(数字)
- colno:发生错误的列号(数字)
- error:Error对象(对象)
若该函数返回true,则阻止执行默认事件处理函数。
- try…catch****异常处理
另外,我们也经常会使用 try…catch 语句处理异常:
try {
// do something
} catch (error) {
console.error(error);
}
更多处理方式,可以阅读前面推荐的文章。
- 思考
大家可以思考下,自己在业务开发过程中,是否也是经常要处理这些错误情况?那么像 Vue3 这样复杂的库,是否也是到处通过 try…catch来处理异常呢?接下来一起看看。
二、实现简单的全局异常处理
在开发插件或库时,我们可以通过 try…catch封装一个全局异常处理方法,将需要执行的方法作为参数传入,调用方只要关心调用结果,而无需知道该全局异常处理方法内部逻辑。大致使用方法如下: