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

0x00 前言

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

0x01 errorLog.ts 错误日志

文件 srcstoremoduleserrorLog.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

发表评论

相关文章