vue3中的错误处理方案

vue3中的错误处理方案

概述

在设计一个框架时，如何处理错误是必不可少的环节。错误在程序开发中避无可避，那么出现错误时，至少要保证程序不会崩溃。合理的错误处理方案会大大增强框架的健壮性，覆盖异常场景，提高系统的可用性。

本文将探讨vue3中的错误处理设计。

错误处理设计

vue3中的错误处理逻辑集中在程序运行时，源码部分位于runtime-core\src\errorHandling.ts。其内部封装了两个工具函数：callWithErrorHandling和callWithAsyncErrorHandling,用于处理函数调用中的错误，它们在vue3的响应式系统和组件生命周期中扮演着重要角色，通常情况下只是vue3内部调用。

ErrorCodes和ErrorTypeStrings 类型

vue3的错误处理定义了错误码和错误类型，用来标识错误，方便排查问题。

callWithErrorHandling 方法

callWithErrorHandling函数用于同步函数调用时捕获错误，会在函数执行期间捕获并处理可能出现的异常情况或同步错误
其实现如下：

function callWithErrorHandling(fn, instance, type, args) {
   
  try {
   
    return args ? fn(...args) : fn();
  } catch (err) {
   
    handleError(err, instance, type);
  }
}

上述示例很好理解，就是用到try、catch取执行fn函数，并返回fn函数执行的结果；在catch中捕获错误，调用handleError函数

callWithAsyncErrorHandling 方法

callWithAsyncErrorHandling函数用于处理异步函数调用中的错误，它能够捕捉和处理Promise的reject错误。
其实现如下

function callWithAsyncErrorHandling(fn, instance, type, args) {
   
  //fn：函数 instance:vue实例 type：类型 args：传递给fn的参数，下同