Vben Admin 源码学习:状态管理-错误日志

0x00 前言

本文将对 Vue-Vben-Admin 的状态管理实现源码进行分析解读，耐心读完，相信您一定会有所收获!

0x01 errorLog.ts 错误日志

文件 src\store\modules\errorLog.ts 声明导出一个store实例 useErrorLogStore 、一个方法 useErrorLogStoreWithOut()用于没有使用 setup 组件时使用。

// 错误日志存储实例
export const useAppStore = defineStore({
  id: 'app-error-log',  
  state: {},
  getters: {}
  actions：{}   
});

export function useErrorLogStoreWithOut() {
  return useErrorLogStore(store);
}

State / Getter

状态对象定义了错误日志信息数组、错误日志信息总数。

state: (): ErrorLogState => ({
  errorLogInfoList: null, // Nullable<ErrorLogInfo[]>
  errorLogListCount: 0,
}), 
getters: {
  // 获取错误日志  默认空数组
  getErrorLogInfoList(): ErrorLogInfo[] {
    return this.errorLogInfoList || [];
  },
  // 获取错误日志总数量
  getErrorLogListCount(): number {
    return this.errorLogListCount;
  },
},

errorLogInfoList 是一个名为 ErrorLogInfo 对象数组，记录了错误详细信息，包含错误类型、错误产生错文件信息、错误名称、错误信息、调用堆栈信息、错误详情、页面url、错误发生时间。

export interface ErrorLogInfo { 
  type: ErrorTypeEnum; // 错误类型
  file: string;  // 产生错误文件
  name?: string; // 错误名称
  message: string; // 错误信息
  stack?: string; // 调用堆栈信息
  detail: string; // 错误详情
  url: string; // 页面url
  time?: string; // 发生时间
}

错误类型有4种，分别为 Vue异常、 脚本错误、 静态资源异常、 promise异常。

// 错误类型
export enum ErrorTypeEnum {
  VUE = 'vue',
  SCRIPT = 'script',
  RESOURCE = 'resource',
  AJAX = 'ajax',
  PROMISE = 'promise',
}

Actions

addErrorLogInfo 方法用于添加错误日志，接受类型为ErrorLogInfo 的参数，使用 展开语法(Spread syntax) 简洁的构造方式进行数组和对象构造。

1. 更新错误日志时间属性。
2. 将日志信息加入名为 errorLogInfoList 的数组中。
3. 同时更新错误日志总数(errorLogListCount) +1。

addErrorLogInfo(info: ErrorLogInfo) {
  const item = {
    ...info,
    time: formatToDateTime(new Date()),
  };
  this.errorLogInfoList = [item, ...(this.errorLogInfoList || [])];
  this.errorLogListCount += 1;
},

setErrorLogListCount 方法用于重置错误日志总数数值。

setErrorLogListCount(count: number): void {
  this.errorLogListCount = count;
},

addAjaxErrorInfo 方法用于在ajax请求错误后触发，将返回的错误信息格式化后，调用 addErrorLogInfo方法将其添加至系统全局数组中。

addAjaxErrorInfo(error) {
  const { useErrorHandle } = projectSetting;
  if (!useErrorHandle) {
    return;
  }
  const errInfo: Partial<ErrorLogInfo> = {
    message: error.message,
    type: ErrorTypeEnum.AJAX,
  };
  if (error.response) {
    ...
  }
  this.addErrorLogInfo(errInfo as ErrorLogInfo);
},

需要在项目配置 src/settings/projectSetting.ts中开启,将useErrorHandle属性值设置 true ，默认不开启。

// src/settings/projectSetting.ts

// 是否使用全局错误捕获
useErrorHandle: true, 

使用 Partial 将类型定义的所有属性都修改为可选。

声明了一个错误日志对象，仅定义了类型和消息两个属性值。
其余的属性值通过对 error.response 对象内容进行解构,然后进行对象属性赋值。

  const errInfo: Partial<ErrorLogInfo> = {
    message: error.message,
    type: ErrorTypeEnum.AJAX,
  };
  if (error.response) {
    const {
      config: { url = '', data: params = '', method = 'get', headers = {} } = {},
      data = {},
    } = error.response;
    errInfo.url = url;
    errInfo.name = 'Ajax Error!';
    errInfo.file = '-';
    errInfo.stack = JSON.stringify(data);
    errInfo.detail = JSON.stringify({ params, method, headers });
  }

最后调用addErrorLogInfo方法，添加错误日志信息。

this.addErrorLogInfo(errInfo as ErrorLogInfo);

0x02 📚参考

"展开语法(Spread syntax)",MDN