13518219792
本篇内容主要讲解“Vue3如何进行全局异常处理”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3如何进行全局异常处理”吧!
陆河网站建设公司创新互联建站,陆河网站设计制作，有大型网站制作公司丰富经验。已为陆河数千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的陆河做网站的公司定做！
在开发组件库或者插件，经常会需要进行全局异常处理，从而实现：
全局统一处理异常；
为开发者提示错误信息；
方案降级处理等等。
那么如何实现上面功能呢？ 本文先简单实现一个异常处理方法，然后结合 Vue3 源码中的实现详细介绍，最后总结实现异常处理的几个核心。
本文 Vue3 版本为 3.0.11
对于前端来说，常见的异常比较多，比如：
JS 语法异常；
Ajax 请求异常；
静态资源加载异常；
Promise 异常；
iframe 异常；
等等
最常用的比如：
通过 window.onerror文档可知，当 JS 运行时发生错误（包括语法错误），触发 window.onerror()：
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常：',{message, source, lineno, colno, error});
}函数参数：
message：错误信息（字符串）。可用于HTML onerror=""处理程序中的 event。
source：发生错误的脚本URL（字符串）
lineno：发生错误的行号（数字）
colno：发生错误的列号（数字）
error：Error对象（对象）
若该函数返回true，则阻止执行默认事件处理函数。
另外，我们也经常会使用 try...catch 语句处理异常：
try {
// do something
} catch (error) {
console.error(error);
}更多处理方式，可以阅读前面推荐的文章。
大家可以思考下，自己在业务开发过程中，是否也是经常要处理这些错误情况？
那么像 Vue3 这样复杂的库，是否也是到处通过 try...catch来处理异常呢？
接下来一起看看。
在开发插件或库时，我们可以通过 try...catch封装一个全局异常处理方法，将需要执行的方法作为参数传入，调用方只要关心调用结果，而无需知道该全局异常处理方法内部逻辑。
大致使用方法如下：
const errorHandling = (fn, args) => {
let result;
try{
result = args ? fn(...args) : fn();
} catch (error){
console.error(error)
}
return result;
}测试一下：
const f1 = () => {
console.log('[f1 running]')
throw new Error('[f1 error!]')
}
errorHandling(f1);
/*
输出：
[f1 running]
Error: [f1 error!]
at f1 (/Users/wangpingan/leo/www/node/www/a.js:14:11)
at errorHandling (/Users/wangpingan/leo/www/node/www/a.js:4:39)
at Object. (/Users/wangpingan/leo/www/node/www/a.js:17:1)
at Module._compile (node:internal/modules/cjs/loader:1095:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
*/ 可以看到，当需要为方法做异常处理时，只要将该方法作为参数传入即可。 但是上面示例跟实际业务开发的逻辑差得有点多，实际业务中，我们经常会遇到方法的嵌套调用，那么我们试一下：
const f1 = () => {
console.log('[f1]')
f2();
}
const f2 = () => {
console.log('[f2]')
f3();
}
const f3 = () => {
console.log('[f3]')
throw new Error('[f3 error!]')
}
errorHandling(f1)
/*
输出：
[f1 running]
[f2 running]
[f3 running]
Error: [f3 error!]
at f3 (/Users/wangpingan/leo/www/node/www/a.js:24:11)
at f2 (/Users/wangpingan/leo/www/node/www/a.js:19:5)
at f1 (/Users/wangpingan/leo/www/node/www/a.js:14:5)
at errorHandling (/Users/wangpingan/leo/www/node/www/a.js:4:39)
at Object. (/Users/wangpingan/leo/www/node/www/a.js:27:1)
at Module._compile (node:internal/modules/cjs/loader:1095:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
*/ 这样也是没问题的。那么接下来就是在 errorHandling方法的 catch分支实现对应异常处理即可。
接下来看看 Vue3 源码中是如何处理的？
理解完上面示例，接下来看看在 Vue3 源码中是如何实现异常处理的，其实现起来也是很简单。
在 errorHandling.ts 文件中定义了 callWithErrorHandling和 callWithAsyncErrorHandling两个处理全局异常的方法。
顾名思义，这两个方法分别处理：
callWithErrorHandling：处理同步方法的异常；
callWithAsyncErrorHandling：处理异步方法的异常。
使用方式如下：
callWithAsyncErrorHandling( handler, instance, ErrorCodes.COMPONENT_EVENT_HANDLER, args )
代码实现大致如下：
// packages/runtime-core/src/errorHandling.ts
// 处理同步方法的异常
export function callWithErrorHandling(
fn: Function,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
args?: unknown[]
) {
let res
try {
res = args ? fn(...args) : fn(); // 调用原方法
} catch (err) {
handleError(err, instance, type)
}
return res
}
// 处理异步方法的异常
export function callWithAsyncErrorHandling(
fn: Function | Function[],
instance: ComponentInternalInstance | null,
type: ErrorTypes,
args?: unknown[]
): any[] {
// 省略其他代码
const res = callWithErrorHandling(fn, instance, type, args)
if (res && isPromise(res)) {
res.catch(err => {
handleError(err, instance, type)
})
}
// 省略其他代码
}callWithErrorHandling方法处理的逻辑比较简单，通过简单的 try...catch 做一层封装。
而 callWithAsyncErrorHandling 方法就比较巧妙，通过将需要执行的方法传入 callWithErrorHandling方法处理，并将其结果通过 .catch方法进行处理。
在上面代码中，遇到报错的情况，都会通过 handleError()处理异常。其实现大致如下：
// packages/runtime-core/src/errorHandling.ts
// 异常处理方法
export function handleError(
err: unknown,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
throwInDev = true
) {
// 省略其他代码
logError(err, type, contextVNode, throwInDev)
}
function logError(
err: unknown,
type: ErrorTypes,
contextVNode: VNode | null,
throwInDev = true
) {
// 省略其他代码
console.error(err)
}保留核心处理逻辑之后，可以看到这边处理也是相当简单，直接通过 console.error(err)输出错误内容。
在使用 Vue3 时，也支持指定自定义异常处理函数，来处理组件渲染函数和侦听器执行期间抛出的未捕获错误。这个处理函数被调用时，可获取错误信息和相应的应用实例。
文档参考：《errorHandler》
使用方法如下，在项目 main.js文件中配置：
// src/main.js
app.config.errorHandler = (err, vm, info) => {
// 处理错误
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
}那么 errorHandler()是何时执行的呢？我们继续看看源码中 handleError() 的内容，可以发现：
// packages/runtime-core/src/errorHandling.ts
export function handleError(
err: unknown,
instance: ComponentInternalInstance | null,
type: ErrorTypes,
throwInDev = true
) {
const contextVNode = instance ? instance.vnode : null
if (instance) {
// 省略其他代码
// 读取 errorHandler 配置项
const appErrorHandler = instance.appContext.config.errorHandler
if (appErrorHandler) {
callWithErrorHandling(
appErrorHandler,
null,
ErrorCodes.APP_ERROR_HANDLER,
[err, exposedInstance, errorInfo]
)
return
}
}
logError(err, type, contextVNode, throwInDev)
}通过 instance.appContext.config.errorHandler取到全局配置的自定义错误处理函数，存在时则执行，当然，这边也是通过前面定义的 callWithErrorHandling来调用。
在使用 Vue3 的时候，也可以通过 errorCaptured生命周期钩子来捕获来自后代组件的错误。 如下：
(err: Error, instance: Component, info: string) => ?boolean
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
此钩子可以返回 false以阻止该错误继续向上传播。有兴趣的同学可以通过文档，查看具体的错误传播规则。
使用方法如下，父组件监听 onErrorCaptured生命周期（示例代码使用 Vue3 setup 语法）：
