Vue.js全局錯誤處理函數errorHandler

在 Vue.js 中，errorHandler 函數是全局錯誤處理函數，用于捕獲應用程序中未被捕獲的錯誤。

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

語法

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

errorHandler 函數接收三個參數：

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

示例：

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

在上述示例中，errorHandler 函數被定義為一個全局錯誤處理函數。當應用程序中的任何組件拋出未被捕獲的錯誤時，該函數將被調用。你可以在該函數中編寫邏輯來處理錯誤，如記錄錯誤、顯示錯誤提示、進行錯誤恢復等。

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

局錯誤處理函數errorHandler常見的使用場景

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

Vue errorHandler異常捕獲

異常捕獲介紹

1.在日常前端開發(fā)中對于異常監(jiān)控的方式可以采用 window.onerror 方式進行監(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: 當前錯誤所在的Vue實例
	  // info: 錯誤所在的生命周期鉤子
	}

errorHandler實際應用

針對項目中錯誤的js語法和接口請求報錯進行捕獲，需要注意的是接口捕獲需要手動捕獲 

1.在main.js中注冊

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

2.axios錯誤捕獲

在封裝好的axios請求中進行錯誤響應捕獲，將錯誤信息交給 errorHadaler 函數進行處理

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

對于error信息的解析

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

const errorHandler = (err, vm, info) => {
	if(err.isAxiosError){
		//axios請求錯誤為手動捕獲 不需要進行解析處理 
	}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請求錯誤為手動捕獲 不需要進行解析處理 
	}else{
		const errJson = ErrorStackParser.parse(err)[0]
		console.log(errJson)
		//通過fileName截取頁面名稱
		const fileName = stackInfo.fileName.match(/src.*?.vue/g)[0]
		console.log(fileName)
	}
}

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論