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) 简洁的构造方式进行数组和对象构造。
- 更新错误日志时间属性。
- 将日志信息加入名为
errorLogInfoList
的数组中。 - 同时更新错误日志总数(
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 参考
Vben Admin 源码学习:状态管理-错误日志的更多相关文章
- Vben Admin 源码学习:状态管理-角色权限
前言 本文将对 Vue-Vben-Admin 角色权限的状态管理进行源码解读,耐心读完,相信您一定会有所收获! 更多系列文章详见专栏 Vben Admin 项目分析&实践 . 本文涉及到角 ...
- Vben Admin 源码学习:项目初始化
0x00 前言 Vue-Vben-Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案考. 本系列本着学习参考的目 ...
- Linux 2.6 源码学习-内存管理-buddy算法
核心数据结构 linux 2.6 的内存管理支持NUMA(Non Uniform Memory Access Achitecture),即非一致内存访问体系,在该体系中存在多个CPU,并且拥有分离的存 ...
- ThinkPHP5.0源码学习之注册错误和异常处理机制
在base.php文件中,用一句代码\think\Error::register();实现错误和异常处理机制的注册. // 注册错误和异常处理机制 \think\Error::register(); ...
- 框架源码系列十一:事务管理(Spring事务管理的特点、事务概念学习、Spring事务使用学习、Spring事务管理API学习、Spring事务源码学习)
一.Spring事务管理的特点 Spring框架为事务管理提供一套统一的抽象,带来的好处有:1. 跨不同事务API的统一的编程模型,无论你使用的是jdbc.jta.jpa.hibernate.2. 支 ...
- Spring5.0源码学习系列之事务管理概述
Spring5.0源码学习系列之事务管理概述(十一),在学习事务管理的源码之前,需要对事务的基本理论比较熟悉,所以本章节会对事务管理的基本理论进行描述 1.什么是事务? 事务就是一组原子性的SQL操作 ...
- Qt Creator 源码学习笔记03,大型项目如何管理工程
阅读本文大概需要 6 分钟 一个项目随着功能开发越来越多,项目必然越来越大,工程管理成本也越来越高,后期维护成本更高.如何更好的组织管理工程,是非常重要的 今天我们来学习下 Qt Creator 是如 ...
- 【Spark2.0源码学习】-1.概述
Spark作为当前主流的分布式计算框架,其高效性.通用性.易用性使其得到广泛的关注,本系列博客不会介绍其原理.安装与使用相关知识,将会从源码角度进行深度分析,理解其背后的设计精髓,以便后续 ...
- Mybatis源码学习之整体架构(一)
简述 关于ORM的定义,我们引用了一下百度百科给出的定义,总体来说ORM就是提供给开发人员API,方便操作关系型数据库的,封装了对数据库操作的过程,同时提供对象与数据之间的映射功能,解放了开发人员对访 ...
随机推荐
- 我的python学习记04
列表,元组,字典的使用一.列表列表的格式:list[元素1,元素2,--]列表也是一个有序集合,下标索引从0开始与字符串类似1.在列表中添加数据append:list.append(添加元素) (在最 ...
- prometheus之查询语言
PromQL(Prometheus Query Language)是 Prometheus 自己开发的表达式语言,语言表现力很丰富,内置函数也很多.使用它可以对时序数据进行筛选和聚合. 一.PromQ ...
- 文件上传——IIS6.0解析漏洞
介绍 IIS6.0漏洞可分为目录漏洞和文件漏洞 目录漏洞 访问*.asp格式命令的文件夹下的文件,都会被当成asp文件执行 文件漏洞 畸形文件命名 123.asp -> 123.asp;.txt ...
- Python入门-深入了解数据类型以及方法
写在开始:每一种数据类型,有对应一种功能,面对不同的问题,使用不同类型. 1.全部数据类型 1.2数值型:解决数字的计算问题 #基础的计算,求除结果,求商,求余数 print(10 / 3) prin ...
- 面试官:说一说Zookeeper中Leader选举机制
哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 今天又是一个阳光明媚的一天,我又 ...
- 微信小程序循环列表点击每一个单独添加动画
首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...
- 新手小白入门C语言第四章:变量与常量
C 变量 变量其实只不过是程序可操作的存储区的名称. C 中每个变量都有特定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上. 变量的名称可以由字母.数字和 ...
- ionic系列教程 2 ---- 安装
开发平台注意点首先,我们需要注意构建Ionic App需要的最低配置:Ionic只支持iOS6 +和Android 4.0 + ,(虽然2.3可以工作,但会有点卡).但是,Android设备众多,可能 ...
- 2021.07.02 UVa1197 多路归并模板
2021.07.02 UVa1197 多路归并模板 UVA11997 K Smallest Sums - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 分析: 题解 UVA11997 ...
- 手把手教会将 Windows 窗体桌面应用从.NET Framework迁移到 .NET SDK/.NET 6 格式
接上篇:手把手教会 VS2022 设计 Winform 高DPI兼容程序 (net461 net6.0 双出) https://www.cnblogs.com/densen2014/p/1614293 ...