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

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

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

語法

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

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

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

示例：

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

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

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

局錯(cuò)誤處理函數(shù)errorHandler常見的使用場(chǎng)景

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

Vue errorHandler異常捕獲

異常捕獲介紹

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

	window.onerror = function(message, source, lineno, colno, error) {
	 	// message：錯(cuò)誤信息（字符串）
		// source：發(fā)生錯(cuò)誤的腳本URL
		// lineno：發(fā)生錯(cuò)誤的行號(hào)
		// colno：發(fā)生錯(cuò)誤的列號(hào)
		// error：Error對(duì)象
	}
	//或者
	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: 具體錯(cuò)誤信息
	  // vm: 當(dāng)前錯(cuò)誤所在的Vue實(shí)例
	  // info: 錯(cuò)誤所在的生命周期鉤子
	}

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

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

1.在main.js中注冊(cè)

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

2.axios錯(cuò)誤捕獲

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

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

對(duì)于error信息的解析

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

const errorHandler = (err, vm, info) => {
	if(err.isAxiosError){
		//axios請(qǐng)求錯(cuò)誤為手動(dòng)捕獲 不需要進(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請(qǐng)求錯(cuò)誤為手動(dòng)捕獲 不需要進(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é)

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

最新評(píng)論