Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹

更新時間：2022年10月20日 11:42:59 作者：DDDHL_

在做完一個項目后，之后的維護尤為重要。這時，如果項目配置了錯誤日志記錄，這樣能大大減少維護難度。雖然不一定能捕獲到全部的錯誤，但是一般的錯誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復現(xiàn)bug了

一、準備工作

（1）規(guī)定錯誤碼

像是請求碼（404、500）一樣，我覺得錯誤都應該規(guī)定好對應的錯誤碼。個人喜好。

// 錯誤代碼
const errCode = new Map([
  // 本地系統(tǒng)錯誤
  ['E1001', '系統(tǒng)未知錯誤'],
  ['E1002', 'vue邏輯錯誤'],
  ['E1003', 'JavaScript錯誤'],
  ['E1004', '靜態(tài)資源加載錯誤'],
  ['E1005', '請求錯誤'],
  ['E1006', 'Promise錯誤']
])

（2）設置錯誤處理函數

每個項目對于錯誤的處理不一樣，我這邊就不寫邏輯了。只做了保存日志。

這里導出處理函數是為了手動處理請求錯誤以及Promise.catch()中的錯誤

// 錯誤處理函數
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	  				// 錯誤內容
  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邏輯錯誤、請求錯誤。其他的錯誤一般在編寫階段已經提示了?；旧现槐O(jiān)聽這四種就能包含項目上線后可能出現(xiàn)的錯誤了。

（1）JS錯誤與靜態(tài)資源加載錯誤

例子：數組或者對象不存在某個值等等。這里我統(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)聽函數，所以只需要在監(jiān)聽到錯誤后調用之前導出的錯誤處理函數即可。

請求錯誤：在響應攔截器中(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}`)

監(jiān)聽函數：

// 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)
}
// 錯誤處理函數
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	  				// 錯誤內容
  router: string				// 錯誤路由地址（根據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
  })
}

到此這篇關于Vue全局監(jiān)測錯誤并生成錯誤日志實現(xiàn)方法介紹的文章就介紹到這了,更多相關Vue錯誤日志內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

使用vue.js?為基礎的仿QQ聊天室
這篇文章主要為大家介紹了基于vue.js的QQ聊天室，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vue中的keep-alive用法指南
keep-alive是Vue中的一個內置組件,用于緩存非活動組件實例,避免重復渲染,優(yōu)化性能,本文給大家介紹vue中的keep-alive用法指南,感興趣的朋友一起看看吧
2024-10-10
vant中的Cascader級聯(lián)選擇異步加載地區(qū)數據方式
這篇文章主要介紹了vant中的Cascader級聯(lián)選擇異步加載地區(qū)數據方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
詳解vue項目打包后通過百度的BAE發(fā)布到網上的流程
這篇文章主要介紹了將vue的項目打包后通過百度的BAE發(fā)布到網上的流程,主要運用的技術是vue+express+git+百度的應用引擎BAE。需要的朋友可以參考下
2018-03-03
Vue 2源碼解析HTMLParserOptions.start函數方法
這篇文章主要為大家介紹了Vue 2源碼解析HTMLParserOptions.start函數方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
vue實現(xiàn)ajax滾動下拉加載，同時具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實現(xiàn)ajax滾動下拉加載，同時具有l(wèi)oading效果的實現(xiàn)代碼，文章包括難點說明，介紹的非常詳細，感興趣的朋友參考下
2017-01-01
在vue.js渲染完界面之后如何再調用函數
這篇文章主要介紹了在vue.js渲染完界面之后如何再調用函數的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue-video-player實現(xiàn)實時視頻播放方式(監(jiān)控設備-rtmp流)
這篇文章主要介紹了vue-video-player實現(xiàn)實時視頻播放方式(監(jiān)控設備-rtmp流)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue實現(xiàn)伸縮菜單功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)伸縮菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
詳解Vue路由自動注入實踐
這篇文章主要介紹了詳解Vue路由自動注入實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04