Vue全局监测错误并生成错误日志实现方法介绍
一、准备工作
(1)规定错误码
像是请求码(404、500)一样,我觉得错误都应该规定好对应的错误码。个人喜好。
// 错误代码 const errCode = new Map([ // 本地系统错误 ['E1001', '系统未知错误'], ['E1002', 'vue逻辑错误'], ['E1003', 'JavaScript错误'], ['E1004', '静态资源加载错误'], ['E1005', '请求错误'], ['E1006', 'Promise错误'] ])
(2)设置错误处理函数
每个项目对于错误的处理不一样,我这边就不写逻辑了。只做了保存日志。
这里导出处理函数是为了手动处理请求错误以及Promise.catch()
中的错误
// 错误处理函数 export const errorHandler = (code: string, msg: string, file = 'null') => { // 这里处理监听到的错误 // 保存错误信息 saveLog({ code: code, type: errCode.get(`$[code]`), msg: msg, router: router.currentRoute.value.fullPath, file: file, createTime: new Date().toLocaleString() }) }
(3)保存错误日志
演示保存到 localStorage
中,并且只存50条,超过则把最旧的删除
type errorParams = { code: string // 错误代码 msg: string // 错误内容 router: string // 错误路由地址 file?: string // 错误的文件(不一定有) createTime: string // 发现错误的时间 type?: string // 错误的类型 } // localstorage 保存错误信息 最多50条避免爆满 const saveLog = (data: errorParams): void => { const nowData = localStorage.getItem('ERROR') if (nowData) { const allData = JSON.parse(nowData) sortArray(allData) // 只存50条错误信息 if (allData.length > 50) { // 已存50条 allData[0] = data sortArray(allData) } else { allData.push(data) } localStorage.setItem('ERROR', JSON.stringify(allData)) } else { localStorage.setItem('ERROR', JSON.stringify([data])) } }
二、监听错误
项目上线后出现的错误一般有四种,JS错误、静态资源错误、vue逻辑错误、请求错误。其他的错误一般在编写阶段已经提示了。基本上只监听这四种就能包含项目上线后可能出现的错误了。
(1)JS错误与静态资源加载错误
例子:数组或者对象不存在某个值等等。这里我统称JS错误了。监听方法如下:
window.addEventListener('error', (error: any) => { // 区分是否是js错误 if (error.message) { console.error('监测到E1003错误'); errorHandler('E1003', error.message, error.filename) } else { console.error('监测到E1004错误'); errorHandler('E1004', error.target.currentSrc, error.filename) } }, true)
(2)Vue逻辑错误
vue官方提供了一个能监测组件渲染方法执行期间及侦 听 器抛出的未捕获错误的方法 app.config.errorHandler
,app是main.ts中的app。
// vue渲染或者vue处理错误 app.config.errorHandler = (err: any) => { console.error('监测到E1002错误'); console.error(err); errorHandler('E1002', err.name + ':' + err.message) }
(3)请求错误与Promise错误
这两种错误本身有自己的监听函数,所以只需要在监听到错误后调用之前导出的错误处理函数即可。
请求错误:在响应拦截器中(axios.interceptors.response
) 中写逻辑调用错误处理函数即可
Promise:在catch中调用错误处理函数即可
三、效果演示
随便写了个表格
四、完整代码
使用方法:
// main.ts import { createApp } from 'vue' import { createPinia } from 'pinia' import { watchError } from './utils/watchError' import App from './App.vue' import router from './router' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app') // 如果没有app,自己用个变量等于createApp即可 watchError(app)
Promise.catch()与请求响应器直接使用errorHandler
import { errorHandler } from '../utils/watchError' errorHandler('E1006', '测试Promise错误') errorHandler('E1005', `请求地址:${error.config.method}:${error.config.baseURL}/${error.config.url}`)
监听函数:
// src/utils/watchError.ts import router from '@/router/index' // 错误代码 const errCode = new Map([ // 本地系统错误 ['E1001', '系统未知错误'], ['E1002', 'vue逻辑错误'], ['E1003', 'JavaScript错误'], ['E1004', '静态资源加载错误'], ['E1005', '请求错误'], ['E1006', 'Promise错误'] ]) // 开启监听 export const watchError = (app: any) => { // vue渲染或者vue处理错误 app.config.errorHandler = (err: any) => { console.error('监测到E1002错误'); console.error(err.filename); errorHandler('E1002', err.name + ':' + err.message) } // 静态资源加载错误 或者 JS错误 window.addEventListener('error', (error: any) => { // 区分是否是js错误 if (error.message) { console.error('监测到E1003错误'); errorHandler('E1003', error.message, error.filename) } else { console.error('监测到E1004错误'); errorHandler('E1004', error.target.currentSrc, error.filename) } }, true) } // 错误处理函数 export const errorHandler = (code: string, msg: string, file = 'null') => { // 这里处理监听到的错误 // 保存错误信息 saveLog({ code: code, type: errCode.get(`$[code]`), msg: msg, router: router.currentRoute.value.fullPath, file: file, createTime: new Date().toLocaleString() }) } type errorParams = { code: string // 错误代码 msg: string // 错误内容 router: string // 错误路由地址(根据hash地址‘/#/'切割而来,具体看需求) file?: string // 错误的文件(不一定有) createTime: string // 发现错误的时间 type?: string // 错误的类型 } // localstorage 保存错误信息 最多50条避免爆满 const saveLog = (data: errorParams): void => { const nowData = localStorage.getItem('ERROR') if (nowData) { const allData = JSON.parse(nowData) sortArray(allData) // 只存50条错误信息 if (allData.length > 50) { // 已存50条 allData[0] = data sortArray(allData) } else { allData.push(data) } localStorage.setItem('ERROR', JSON.stringify(allData)) } else { localStorage.setItem('ERROR', JSON.stringify([data])) } } // 错误日志排序 const sortArray = (allData: string[]) => { allData.sort((a: any, b: any) => { if (a.createTime > b.createTime) { return 1 } return -1 }) }
到此这篇关于Vue全局监测错误并生成错误日志实现方法介绍的文章就介绍到这了,更多相关Vue错误日志内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/DDDHL_/article/details/127351542
相关文章
Ecshop提示Only variables should be passed by reference in错误
在安装好ecshop软件之后我们打开首页时提示Only variables should be passed by reference in错误了,碰到这个问题是什么原因呢?下面我们就一起来看看解决办法吧。...2016-11-25- 409错误是什么?http 409错误怎么解决呢?不少站长在遇到这个错误代码之后都一筹莫展,本次一聚教程网为大家带来了详细的说明,快来看看吧。 409错误是什么: HTTP 40...2017-01-22
- 414错误是HTTP协议状态码中的一种,很多都还不知道414错误是什么,以及不知道怎么解决414错误,那么就来看看小编带来的介绍吧。 414错误是什么: HTTP 414错误,(Requ...2017-01-22
- http 405错误是什么?http 405错误怎么解决?相信很多站长都在找这两个问题的答案,本次小编为大家带来了详细的教程,快来看看吧。 405错误是什么: HTTP 405错误是H...2017-01-22
- 401是HTTP状态码的一种,属于“请示错误”,表示请求可能出错,已妨碍了服务器对请求的处理。具体的401错误是指:未授权,请求要求进行身份验证。登录后,服务器可能会返回对页面...2017-01-22
- http 402错误是什么?402错误较为少见,一般不轻易出现,下面小编就来告诉大家402错误是什么吧。 HTTP 402错误是HTTP状态码的一种,表示“要求付费”; 所求的...2017-01-22
- 411错误是HTTP协议状态码的一种,很多人都还不知道411错误是什么,本次一聚教程网将为大家进行解答,并且告诉大家411错误怎么解决。 411错误是什么: HTTP 411错误,(Lengt...2017-01-22
- Apache status 503 的原因大致有如下几种情况 : 1、 CPU 负载过高,服务器响应不过来,返回503 2、 系统连接数超限,超过MaxVhostClients的上限,返回503 3、 单IP连接数超限,超过M...2016-01-28
- 403错误是网站访问过程中,常见的错误提示。资源不可用,服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致,比如IIS或者apache设置了访问权限...2017-01-22
- 403错误是HTTP状态码的一种,属于“请示错误”,表示服务器拒绝请求。如果在搜索引擎尝试抓取您网站上的有效网页时显示此状态代码,那么,这可能是您的服务器或主机拒绝搜索...2017-01-22
- 412错误是什么?412错误怎么解决?本次一聚教程网将为大家带来详细的介绍,帮助大家全面了解412错误的意思以及解决412错误的方法。 412错误是什么: HTTP 412错误,(Precond...2017-01-22
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 相信很多站长都遇到过这样一个问题,访问页面时出现408错误,下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因: HTT...2017-01-22
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 407错误是什么?407错误怎么解决?不少站长都遇到过407错误,下面小编将告诉大家如何处理407错误。 407错误是什么: HTTP 407错误是HTTP协议状态码的一种,表示需要代...2017-01-22
- HTTP 406错误是HTTP协议状态码的一种,表示无法使用请求的内容特性来响应请求的网页。一般是指客户端浏览器不接受所请求页面的 MIME 类型。 而MIME类型是在把输出...2017-01-22
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 410错误是HTTP协议状态码的一种,本次一聚教程网将为大家详细介绍HTTP 410错误是什么,以及410错误的解决办法。 410错误是什么: HTTP 410错误是HTTP协议状态码的...2017-01-22
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28