主題

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

現(xiàn)狀

vue2.6 之前，errorHandler 只能捕捉同步函數(shù)拋出的錯(cuò)誤，而在實(shí)際開發(fā)中我們關(guān)心得更多的是調(diào)用接口時(shí)可能拋出的錯(cuò)誤，ES7之后通常使用 async await 的方式進(jìn)行接口調(diào)用，對于async函數(shù)中拋出的錯(cuò)誤errorHandler并不能捕捉到。因此我們使用了裝飾器（Decorator）進(jìn)行錯(cuò)誤捕捉，方法可行，癢點(diǎn)在于需要在很多個(gè)組件中引入裝飾器，然后放置在每一個(gè)需要的位置（還有個(gè)近乎絕癥的“痛點(diǎn)”是 vetur 插件對“不規(guī)范使用decorator”的紅色警告）。

當(dāng)前使用示例(盡可能簡化版)：

// 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ù)將錯(cuò)誤拋出以中斷程序流程
};
 
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 */

可行性

官網(wǎng)說明:
從 2.6.0 起，這個(gè)鉤子也會(huì)捕獲 v-on DOM 監(jiān)聽器內(nèi)部拋出的錯(cuò)誤。另外，如果任何被覆蓋的鉤子或處理函數(shù)返回一個(gè) Promise 鏈 (例如 async 函數(shù))，則來自其 Promise 鏈的錯(cuò)誤也會(huì)被處理。
測試：

// main.js
/* ... */
Vue.config.errorHandler = function (err, vm, info) {
  console.error('error---', err)
  console.info('vm---', vm)
  console.info('info---', info)
}
/* ... */
 
 
// Home.vue
/* template */
<script>
export default {
  async created () {
    const error = new Error('test error');
    error.code = -1;
    throw error;
  }
}
</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 */

對比

總結(jié)

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

期待提建議和補(bǔ)充·～·