Vue实现全局异常处理的几种方案

Vue实现全局异常处理的几种方案

在开发组件库或者插件，经常会需要进行全局异常处理，从而实现：

• 全局统一处理异常；
• 为开发者提示错误信息；
• 方案降级处理等等。

那么如何实现上面功能呢？本文先简单实现一个异常处理方法，然后结合 Vue3 源码中的实现详细介绍，最后总结实现异常处理的几个核心。

本文 Vue3 版本为 3.0.11

一、前端常见异常

对于前端来说，常见的异常比较多，比如：

• JS 语法异常；
• Ajax 请求异常；
• 静态资源加载异常；
• Promise 异常；
• iframe 异常；

等等

最常用的比如：

1. 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，则阻止执行默认事件处理函数。

1. try…catch****异常处理

另外，我们也经常会使用 try…catch 语句处理异常：

try {
  // do something
} catch (error) {
  console.error(error);
}

更多处理方式，可以阅读前面推荐的文章。

1. 思考

大家可以思考下，自己在业务开发过程中，是否也是经常要处理这些错误情况？那么像 Vue3 这样复杂的库，是否也是到处通过 try…catch来处理异常呢？接下来一起看看。

二、实现简单的全局异常处理

在开发插件或库时，我们可以通过 try…catch封装一个全局异常处理方法，将需要执行的方法作为参数传入，调用方只要关心调用结果，而无需知道该全局异常处理方法内部逻辑。大致使用方法如下：