Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹
更新時間：2022年10月20日 11:42:59 作者：DDDHL_
在做完一個項目后，之后的維護(hù)尤為重要。這時，如果項目配置了錯誤日志記錄，這樣能大大減少維護(hù)難度。雖然不一定能捕獲到全部的錯誤，但是一般的錯誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復(fù)現(xiàn)bug了
一、準(zhǔn)備工作
（1）規(guī)定錯誤碼
像是請求碼（404、500）一樣，我覺得錯誤都應(yīng)該規(guī)定好對應(yīng)的錯誤碼。個人喜好。
// 錯誤代碼 const errCode = new Map([ // 本地系統(tǒng)錯誤 ['E1001', '系統(tǒng)未知錯誤'], ['E1002', 'vue邏輯錯誤'], ['E1003', 'JavaScript錯誤'], ['E1004', '靜態(tài)資源加載錯誤'], ['E1005', '請求錯誤'], ['E1006', 'Promise錯誤'] ])
（2）設(shè)置錯誤處理函數(shù)
每個項目對于錯誤的處理不一樣，我這邊就不寫邏輯了。只做了保存日志。
這里導(dǎo)出處理函數(shù)是為了手動處理請求錯誤以及Promise.catch()中的錯誤
// 錯誤處理函數(shù)
export const errorHandler = (code: string, msg: string, file = 'null') => {
// 這里處理監(jiān)聽到的錯誤
// 保存錯誤信息
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 // 錯誤內(nèi)容
router: string // 錯誤路由地址
file?: string // 錯誤的文件（不一定有）
createTime: string // 發(fā)現(xiàn)錯誤的時間
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]))
}
}
二、監(jiān)聽錯誤
項目上線后出現(xiàn)的錯誤一般有四種，JS錯誤、靜態(tài)資源錯誤、vue邏輯錯誤、請求錯誤。其他的錯誤一般在編寫階段已經(jīng)提示了?；旧现槐O(jiān)聽這四種就能包含項目上線后可能出現(xiàn)的錯誤了。
（1）JS錯誤與靜態(tài)資源加載錯誤
例子：數(shù)組或者對象不存在某個值等等。這里我統(tǒng)稱JS錯誤了。監(jiān)聽方法如下：
window.addEventListener('error', (error: any) => {
// 區(qū)分是否是js錯誤
if (error.message) {
console.error('監(jiān)測到E1003錯誤');
errorHandler('E1003', error.message, error.filename)
} else {
console.error('監(jiān)測到E1004錯誤');
errorHandler('E1004', error.target.currentSrc, error.filename)
}
}, true)
（2）Vue邏輯錯誤
vue官方提供了一個能監(jiān)測組件渲染方法執(zhí)行期間及偵 聽 器拋出的未捕獲錯誤的方法 app.config.errorHandler，app是main.ts中的app。
// vue渲染或者vue處理錯誤
app.config.errorHandler = (err: any) => {
console.error('監(jiān)測到E1002錯誤');
console.error(err);
errorHandler('E1002', err.name + ':' + err.message)
}
（3）請求錯誤與Promise錯誤
這兩種錯誤本身有自己的監(jiān)聽函數(shù)，所以只需要在監(jiān)聽到錯誤后調(diào)用之前導(dǎo)出的錯誤處理函數(shù)即可。
請求錯誤：在響應(yīng)攔截器中(axios.interceptors.response) 中寫邏輯調(diào)用錯誤處理函數(shù)即可
Promise：在catch中調(diào)用錯誤處理函數(shù)即可
三、效果演示
隨便寫了個表格
四、完整代碼
使用方法：
// 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()與請求響應(yīng)器直接使用errorHandler
import { errorHandler } from '../utils/watchError'
errorHandler('E1006', '測試Promise錯誤')
errorHandler('E1005', `請求地址：${error.config.method}：${error.config.baseURL}/${error.config.url}`)監(jiān)聽函數(shù)：
// src/utils/watchError.ts
import router from '@/router/index'
// 錯誤代碼
const errCode = new Map([
// 本地系統(tǒng)錯誤
['E1001', '系統(tǒng)未知錯誤'],
['E1002', 'vue邏輯錯誤'],
['E1003', 'JavaScript錯誤'],
['E1004', '靜態(tài)資源加載錯誤'],
['E1005', '請求錯誤'],
['E1006', 'Promise錯誤']
])
// 開啟監(jiān)聽
export const watchError = (app: any) => {
// vue渲染或者vue處理錯誤
app.config.errorHandler = (err: any) => {
console.error('監(jiān)測到E1002錯誤');
console.error(err.filename);
errorHandler('E1002', err.name + ':' + err.message)
}
// 靜態(tài)資源加載錯誤 或者 JS錯誤
window.addEventListener('error', (error: any) => {
// 區(qū)分是否是js錯誤
if (error.message) {
console.error('監(jiān)測到E1003錯誤');
errorHandler('E1003', error.message, error.filename)
} else {
console.error('監(jiān)測到E1004錯誤');
errorHandler('E1004', error.target.currentSrc, error.filename)
}
}, true)
}
// 錯誤處理函數(shù)
export const errorHandler = (code: string, msg: string, file = 'null') => {
// 這里處理監(jiān)聽到的錯誤
// 保存錯誤信息
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 // 錯誤內(nèi)容
router: string // 錯誤路由地址（根據(jù)hash地址‘/#/'切割而來，具體看需求）
file?: string // 錯誤的文件（不一定有）
createTime: string // 發(fā)現(xiàn)錯誤的時間
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
})
}到此這篇關(guān)于Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)Vue錯誤日志內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue 中,組件是構(gòu)建用戶界面的基礎(chǔ),而動態(tài)組件的引入,更是讓開發(fā)者能夠在應(yīng)用中實現(xiàn)靈活、可重用的視圖邏輯,本文將探討 Vue 3 中的動態(tài)組件,分享其使用場景,并通過示例代碼來說明其操作方法,需要的朋友可以參考下2025-01-01
Vue項目如何根據(jù)不同運(yùn)行環(huán)境打包項目
這篇文章主要介紹了Vue項目如何根據(jù)不同運(yùn)行環(huán)境打包項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題
這篇文章主要介紹了解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題，具有很好的參考2020-10-10
今天小編就為大家分享一篇vue實現(xiàn)點(diǎn)擊追加選中樣式效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue?serve及其與vue-cli-service?serve之間的關(guān)系解讀
這篇文章主要介紹了vue?serve及其與vue-cli-service?serve之間的關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue里如何主動銷毀keep-alive緩存的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue路由傳參方式的方式總結(jié)及獲取參數(shù)詳解
vue 路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue路由傳參方式的方式總結(jié)及獲取參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue 實現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā)
今天小編就為大家分享一篇vue 實現(xiàn)cli3.0中使用proxy進(jìn)行代理轉(zhuǎn)發(fā)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10