快捷導(dǎo)航

Vue中的errorHandler異常捕獲問題

更新時間：2023年05月20日 14:39:26 作者：初升晨光

這篇文章主要介紹了Vue中的errorHandler異常捕獲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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實際應(yīng)用

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

1.在main.js中注冊

//因為接口報錯需要手動捕獲 創(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請求中進行錯誤響應(yīng)捕獲，將錯誤信息交給 errorHadaler 函數(shù)進行處理

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)
	}
}

vue.config.errorHandler 錯誤處理調(diào)研

在 vue2.6.x 及之后版本中（僅限于此API未被毀滅性更新前）使用全局 errorHandler 鉤子來進行 vue 組件中所拋錯誤的捕捉與處理。

現(xiàn)狀

vue2.6 之前，errorHandler 只能捕捉同步函數(shù)拋出的錯誤，而在實際開發(fā)中我們關(guān)心得更多的是調(diào)用接口時可能拋出的錯誤，ES7之后通常使用 async await 的方式進行接口調(diào)用，對于async函數(shù)中拋出的錯誤errorHandler并不能捕捉到。

因此我們使用了裝飾器（Decorator）進行錯誤捕捉，方法可行，癢點在于需要在很多個組件中引入裝飾器，然后放置在每一個需要的位置（還有個近乎絕癥的“痛點”是 vetur 插件對“不規(guī)范使用decorator”的紅色警告）。

當前使用示例(盡可能簡化版)

// errorConfigs.js
import { debounce } from 'lodash';
const DEBOUNCE_TIME = 500;
const errorProcessorConfigs = [{
  assert (error) {
    return ErrorAssert.isUserInfoNotExist(error); // ErrorAssert為內(nèi)部Error斷言庫，使用了webpack的ProvidePlugin聲明
  },
  processor: debounce(() => alert('用戶信息不存在'), DEBOUNCE_TIME)
}, {
  assert (error) {
    return ErrorAssert.isAppInfoNotExist(error);
  },
  processor: debounce(() => alert('應(yīng)用信息不存在'), DEBOUNCE_TIME)
}]
// errorProcessor.js
import errorProcessorConfigs from '@src/configs/errorConfigs';
function errorProcessor(error) {
  let errorProcessorConfig = errorProcessorConfigs.find(config => config.assert(error));
  if (errorProcessorConfig !== undefined) {
    errorProcessorConfig.processor(error);
  }
  throw error; // 處理完之后繼續(xù)將錯誤拋出以中斷程序流程
};
export default errorProcessor;
// errorCatcher.js
import errorProcessor from './errorProcessor';
function errorCatcher(target, name, descriptor) {
  const originFunc = descriptor.value;
  descriptor.value = async function () {
    try {
      return await originFunc.apply(this, arguments);
    } catch (error) {
      return errorProcessor(error);
    }
  };
  return descriptor;
};
export default errorCatcher;
// xxx.vue
/* template */
<script>
import errorCatcher from '@services/errorCatcher';
import checkLogin from '@services/checkLogin';
import resources from '@services/resources';
export default {
  @errorCatcher
  async created () {
    await checkLogin();
    this.fetchUserInfo();
  },
  methods: {
    @errorCatcher
    async fetchUserInfo () {
        const userInfo = await resources.user.fetch();
        // ...
    },
  }
};
</script>
/* style */

console:

應(yīng)用

// main.js
import Vue from 'vue';
import errorProcessor from '@services/errorProcessor';
Vue.config.errorHandler = errorProcessor;
/* ... */
// xxx.vue
/* template */
<script>
import checkLogin from '@services/checkLogin';
import resources from '@services/resources';
export default {
  async created () {
    await checkLogin();
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo () {
        const userInfo = await resources.user.fetch();
        // ...
    },
  }
};
</script>
/* style */

對比

	裝飾器	errorHandler
優(yōu)勢	1.使用靈活，可多個裝飾器組裝使用；2.裝飾器可以接收參數(shù)，進行更高階的應(yīng)用；	1.全局設(shè)置，一處設(shè)置處處受益，使用較為簡潔；2. 可以直接拿到 this，獲取更多信息，進行更多操作；3. info 可輔助定位錯誤源；
劣勢	1.在每一個需要的函數(shù)處都需要使用裝飾器進行包裝，組件中也需要引入裝飾器模塊；2.裝飾器被babel編譯后細微的增加文件體積；3.編譯期生效，因此如果 errorProcessorConfigs想引入 router 就需要進行一些特殊處理（如將routes 配置放在 main.js 中添加，或者通過變量方式傳入）	1.無法向錯誤處理中傳入?yún)?shù)；2.全局只能有一個，如果想針對不同場景下拋出的同一類 error 進行不同處理，則需要加入判斷邏輯，影響函數(shù)純粹性。3.捕捉錯誤條件限制于同步函數(shù)或函數(shù)返回promise鏈。4.watch中調(diào)用的異步函數(shù)暫時無法被捕捉

心得

裝飾器錯誤處理方式略顯繁重，但并不會被errorHandler完全取締，如果想讓errorHandler盡可能的捕捉到出現(xiàn)的錯誤，則可能需要對代碼進行一些更為嚴格的調(diào)整（構(gòu)建promise鏈），可以根據(jù)實際的場景，將二者結(jié)合使用，以產(chǎn)生更大的受益（舉個例子：某些場景下的錯誤可以使用裝飾器處理并吞掉，不走全局處理）。