0x00 前言

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

0x01 errorLog.ts 错误日志

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

  1. // 错误日志存储实例
  2. export const useAppStore = defineStore({
  3. id: 'app-error-log',
  4. state: {},
  5. getters: {}
  6. actions:{}
  7. });
  8. export function useErrorLogStoreWithOut() {
  9. return useErrorLogStore(store);
  10. }

State / Getter

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

  1. state: (): ErrorLogState => ({
  2. errorLogInfoList: null, // Nullable<ErrorLogInfo[]>
  3. errorLogListCount: 0,
  4. }),
  5. getters: {
  6. // 获取错误日志 默认空数组
  7. getErrorLogInfoList(): ErrorLogInfo[] {
  8. return this.errorLogInfoList || [];
  9. },
  10. // 获取错误日志总数量
  11. getErrorLogListCount(): number {
  12. return this.errorLogListCount;
  13. },
  14. },

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

  1. export interface ErrorLogInfo {
  2. type: ErrorTypeEnum; // 错误类型
  3. file: string; // 产生错误文件
  4. name?: string; // 错误名称
  5. message: string; // 错误信息
  6. stack?: string; // 调用堆栈信息
  7. detail: string; // 错误详情
  8. url: string; // 页面url
  9. time?: string; // 发生时间
  10. }

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

  1. // 错误类型
  2. export enum ErrorTypeEnum {
  3. VUE = 'vue',
  4. SCRIPT = 'script',
  5. RESOURCE = 'resource',
  6. AJAX = 'ajax',
  7. PROMISE = 'promise',
  8. }

Actions

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

  1. 更新错误日志时间属性。
  2. 将日志信息加入名为 errorLogInfoList 的数组中。
  3. 同时更新错误日志总数(errorLogListCount) +1
  1. addErrorLogInfo(info: ErrorLogInfo) {
  2. const item = {
  3. ...info,
  4. time: formatToDateTime(new Date()),
  5. };
  6. this.errorLogInfoList = [item, ...(this.errorLogInfoList || [])];
  7. this.errorLogListCount += 1;
  8. },

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

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

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

  1. addAjaxErrorInfo(error) {
  2. const { useErrorHandle } = projectSetting;
  3. if (!useErrorHandle) {
  4. return;
  5. }
  6. const errInfo: Partial<ErrorLogInfo> = {
  7. message: error.message,
  8. type: ErrorTypeEnum.AJAX,
  9. };
  10. if (error.response) {
  11. ...
  12. }
  13. this.addErrorLogInfo(errInfo as ErrorLogInfo);
  14. },

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

  1. // src/settings/projectSetting.ts
  2. // 是否使用全局错误捕获
  3. useErrorHandle: true,

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

声明了一个错误日志对象,仅定义了类型和消息两个属性值。

其余的属性值通过对 error.response 对象内容进行解构,然后进行对象属性赋值。

  1. const errInfo: Partial<ErrorLogInfo> = {
  2. message: error.message,
  3. type: ErrorTypeEnum.AJAX,
  4. };
  5. if (error.response) {
  6. const {
  7. config: { url = '', data: params = '', method = 'get', headers = {} } = {},
  8. data = {},
  9. } = error.response;
  10. errInfo.url = url;
  11. errInfo.name = 'Ajax Error!';
  12. errInfo.file = '-';
  13. errInfo.stack = JSON.stringify(data);
  14. errInfo.detail = JSON.stringify({ params, method, headers });
  15. }

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

  1. this.addErrorLogInfo(errInfo as ErrorLogInfo);

0x02 参考

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

Vben Admin 源码学习:状态管理-错误日志的更多相关文章

  1. Vben Admin 源码学习:状态管理-角色权限

    前言 本文将对 Vue-Vben-Admin 角色权限的状态管理进行源码解读,耐心读完,相信您一定会有所收获! 更多系列文章详见专栏   Vben Admin 项目分析&实践 . 本文涉及到角 ...

  2. Vben Admin 源码学习:项目初始化

    0x00 前言 Vue-Vben-Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案考. 本系列本着学习参考的目 ...

  3. Linux 2.6 源码学习-内存管理-buddy算法

    核心数据结构 linux 2.6 的内存管理支持NUMA(Non Uniform Memory Access Achitecture),即非一致内存访问体系,在该体系中存在多个CPU,并且拥有分离的存 ...

  4. ThinkPHP5.0源码学习之注册错误和异常处理机制

    在base.php文件中,用一句代码\think\Error::register();实现错误和异常处理机制的注册. // 注册错误和异常处理机制 \think\Error::register(); ...

  5. 框架源码系列十一:事务管理(Spring事务管理的特点、事务概念学习、Spring事务使用学习、Spring事务管理API学习、Spring事务源码学习)

    一.Spring事务管理的特点 Spring框架为事务管理提供一套统一的抽象,带来的好处有:1. 跨不同事务API的统一的编程模型,无论你使用的是jdbc.jta.jpa.hibernate.2. 支 ...

  6. Spring5.0源码学习系列之事务管理概述

    Spring5.0源码学习系列之事务管理概述(十一),在学习事务管理的源码之前,需要对事务的基本理论比较熟悉,所以本章节会对事务管理的基本理论进行描述 1.什么是事务? 事务就是一组原子性的SQL操作 ...

  7. Qt Creator 源码学习笔记03,大型项目如何管理工程

    阅读本文大概需要 6 分钟 一个项目随着功能开发越来越多,项目必然越来越大,工程管理成本也越来越高,后期维护成本更高.如何更好的组织管理工程,是非常重要的 今天我们来学习下 Qt Creator 是如 ...

  8. 【Spark2.0源码学习】-1.概述

          Spark作为当前主流的分布式计算框架,其高效性.通用性.易用性使其得到广泛的关注,本系列博客不会介绍其原理.安装与使用相关知识,将会从源码角度进行深度分析,理解其背后的设计精髓,以便后续 ...

  9. Mybatis源码学习之整体架构(一)

    简述 关于ORM的定义,我们引用了一下百度百科给出的定义,总体来说ORM就是提供给开发人员API,方便操作关系型数据库的,封装了对数据库操作的过程,同时提供对象与数据之间的映射功能,解放了开发人员对访 ...

随机推荐

  1. 我的python学习记04

    列表,元组,字典的使用一.列表列表的格式:list[元素1,元素2,--]列表也是一个有序集合,下标索引从0开始与字符串类似1.在列表中添加数据append:list.append(添加元素) (在最 ...

  2. prometheus之查询语言

    PromQL(Prometheus Query Language)是 Prometheus 自己开发的表达式语言,语言表现力很丰富,内置函数也很多.使用它可以对时序数据进行筛选和聚合. 一.PromQ ...

  3. 文件上传——IIS6.0解析漏洞

    介绍 IIS6.0漏洞可分为目录漏洞和文件漏洞 目录漏洞 访问*.asp格式命令的文件夹下的文件,都会被当成asp文件执行 文件漏洞 畸形文件命名 123.asp -> 123.asp;.txt ...

  4. Python入门-深入了解数据类型以及方法

    写在开始:每一种数据类型,有对应一种功能,面对不同的问题,使用不同类型. 1.全部数据类型 1.2数值型:解决数字的计算问题 #基础的计算,求除结果,求商,求余数 print(10 / 3) prin ...

  5. 面试官:说一说Zookeeper中Leader选举机制

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 今天又是一个阳光明媚的一天,我又 ...

  6. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  7. 新手小白入门C语言第四章:变量与常量

    C 变量 变量其实只不过是程序可操作的存储区的名称. C 中每个变量都有特定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上. 变量的名称可以由字母.数字和 ...

  8. ionic系列教程 2 ---- 安装

    开发平台注意点首先,我们需要注意构建Ionic App需要的最低配置:Ionic只支持iOS6 +和Android 4.0 + ,(虽然2.3可以工作,但会有点卡).但是,Android设备众多,可能 ...

  9. 2021.07.02 UVa1197 多路归并模板

    2021.07.02 UVa1197 多路归并模板 UVA11997 K Smallest Sums - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 分析: 题解 UVA11997 ...

  10. 手把手教会将 Windows 窗体桌面应用从.NET Framework迁移到 .NET SDK/.NET 6 格式

    接上篇:手把手教会 VS2022 设计 Winform 高DPI兼容程序 (net461 net6.0 双出) https://www.cnblogs.com/densen2014/p/1614293 ...