Vue.js全局錯誤處理函數(shù)errorHandler

在 Vue.js 中，errorHandler 函數(shù)是全局錯誤處理函數(shù)，用于捕獲應(yīng)用程序中未被捕獲的錯誤。

你可以通過定義 errorHandler 函數(shù)來自定義全局錯誤處理邏輯。

語法

Vue.config.errorHandler = function (err, vm, info) {
  // 錯誤處理邏輯
};

errorHandler 函數(shù)接收三個參數(shù)：

• err：表示錯誤對象，包含有關(guān)錯誤的詳細(xì)信息，如錯誤消息、堆棧跟蹤等。
• vm：表示引發(fā)錯誤的 Vue 組件實(shí)例。通過訪問該實(shí)例，你可以獲取組件的狀態(tài)、數(shù)據(jù)和方法。
• info：提供有關(guān)錯誤的額外信息，通常是一個字符串，描述了錯誤發(fā)生的位置或上下文。

示例：

Vue.config.errorHandler = function (err, vm, info) {
  // 錯誤處理邏輯
  console.error('全局錯誤處理:', err, vm, info);
};

在上述示例中，errorHandler 函數(shù)被定義為一個全局錯誤處理函數(shù)。當(dāng)應(yīng)用程序中的任何組件拋出未被捕獲的錯誤時，該函數(shù)將被調(diào)用。你可以在該函數(shù)中編寫邏輯來處理錯誤，如記錄錯誤、顯示錯誤提示、進(jìn)行錯誤恢復(fù)等。

需要注意的是，如果你在組件中定義了 errorCaptured 鉤子函數(shù)來捕獲錯誤，那么該組件的 errorCaptured 鉤子函數(shù)將優(yōu)先于全局的 errorHandler 函數(shù)被調(diào)用。

局錯誤處理函數(shù)errorHandler常見的使用場景

• 捕獲和記錄錯誤：你可以使用 errorHandler 來捕獲應(yīng)用程序中未被捕獲的錯誤，并將其記錄到日志中或發(fā)送給遠(yuǎn)程錯誤跟蹤服務(wù)。這樣可以幫助你及時發(fā)現(xiàn)和解決潛在的問題。
• 顯示錯誤提示：當(dāng)應(yīng)用程序中出現(xiàn)錯誤時，你可以使用 errorHandler 來顯示用戶友好的錯誤提示。例如，你可以通過通知、彈窗或類似的方式向用戶展示錯誤信息，以提供更好的用戶體驗(yàn)。
• 錯誤恢復(fù)和回退：在某些情況下，當(dāng)應(yīng)用程序遇到錯誤時，你可能希望進(jìn)行錯誤恢復(fù)或回退操作。通過在 errorHandler 中執(zhí)行相應(yīng)的邏輯，你可以嘗試修復(fù)錯誤或回到應(yīng)用程序的先前狀態(tài)。
• 上報錯誤統(tǒng)計(jì)：除了記錄錯誤，你還可以使用 errorHandler 來進(jìn)行錯誤統(tǒng)計(jì)和分析。通過收集和匯總應(yīng)用程序中的錯誤信息，你可以了解常見錯誤類型、發(fā)生頻率等信息，從而進(jìn)行性能優(yōu)化和錯誤預(yù)防。
• 處理異步錯誤：在異步操作中，錯誤通常需要手動捕獲和處理。在 errorHandler 中，你可以統(tǒng)一處理異步操作中出現(xiàn)的錯誤，避免它們被靜默丟失。

Vue errorHandler異常捕獲

異常捕獲介紹

1.在日常前端開發(fā)中對于異常監(jiān)控的方式可以采用 window.onerror 方式進(jìn)行監(jiān)聽

	window.onerror = function(message, source, lineno, colno, error) {
	 	// message：錯誤信息（字符串）
		// source：發(fā)生錯誤的腳本URL
		// lineno：發(fā)生錯誤的行號
		// colno：發(fā)生錯誤的列號
		// error：Error對象
	}
	//或者
	window.addEventListener('error', function(e) { 
	  console.log(e)
	  console.log(e.target)
	})

2.在vue中需要使用errorHandler方法

onerror方法無法捕獲Vue組件信息

	Vue.config.errorHandler = function (err, vm, info) {
	  // err: 具體錯誤信息
	  // vm: 當(dāng)前錯誤所在的Vue實(shí)例
	  // info: 錯誤所在的生命周期鉤子
	}

errorHandler實(shí)際應(yīng)用

針對項(xiàng)目中錯誤的js語法和接口請求報錯進(jìn)行捕獲，需要注意的是接口捕獲需要手動捕獲 

1.在main.js中注冊

//因?yàn)榻涌趫箦e需要手動捕獲 創(chuàng)建公用方法
const errorHandler = (err, vm, info) => {
	if(err.isAxiosError){
		//axios請求錯誤
	}else{
		//js語法錯誤
		console.log('err:'err.toString())
	}
}
//調(diào)用
Vue.config.errorHandler = errorHandler
//axios手動捕獲使用 綁定 prototype
Vue.prototype.$throw = (error) => errorHandler(error, this)

2.axios錯誤捕獲

在封裝好的axios請求中進(jìn)行錯誤響應(yīng)捕獲，將錯誤信息交給 errorHadaler 函數(shù)進(jìn)行處理

Vue.$throw(error)
//或 
Vue.prototype.$throw(error)

對于error信息的解析

1.通過Json.stringify()對err進(jìn)行序列化

const errorHandler = (err, vm, info) => {
	if(err.isAxiosError){
		//axios請求錯誤為手動捕獲 不需要進(jìn)行解析處理 
	}else{
		const errJson = JSON.stringify(err, Object.getOwnPropertyNames(err), 2)
		console.log(JSON.parse(errJson ))
	}
}

2.通過error-stack-parser解析error堆棧

安裝方式：

npm install error-stack-parser

yarn add error-stack-parser

//引入error-stack-parser
import ErrorStackParser from 'error-stack-parser'
const errorHandler = (err, vm, info) => {
	if(err.isAxiosError){
		//axios請求錯誤為手動捕獲 不需要進(jìn)行解析處理 
	}else{
		const errJson = ErrorStackParser.parse(err)[0]
		console.log(errJson)
		//通過fileName截取頁面名稱
		const fileName = stackInfo.fileName.match(/src.*?.vue/g)[0]
		console.log(fileName)
	}
}

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論