鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ Vue 添加異步錯誤捕獲機制是否必要、可行？怎么 Hack？

Vue 添加異步錯誤捕獲機制是否必要、可行？怎么 Hack？

對于前端的錯誤處理，Vue 提供了 Vue.config.errorHandler 的錯誤全局收集機制，我們可以寫一個全局錯誤處理器 GlobalHandler，在業(yè)務(wù)內(nèi)處理業(yè)務(wù)內(nèi)錯誤，其他錯誤直接拋出，由全局處理器處理，十分便利。

但 Vue.config.errorHandler 不支持捕獲異步錯誤，于是對于網(wǎng)絡(luò)請求等異步邏輯的錯誤我們只能主動將錯誤送到 GlobalHandler:

GlobalHandler

這種實現(xiàn)是沒有問題的：

HandleAsyncError

但不夠優(yōu)雅，因為業(yè)務(wù)中大部分內(nèi)容是沒有特殊處理邏輯的，有錯直接拋到全局，也就是說，有大量沒必要的 try catch：

UselessTryCatch

UselessTryCatchs

如果 Vue 能捕獲異步錯誤，編寫 async / await 異步函數(shù)的代碼將能夠更加簡練，讀寫效率都能有所提升。

解決方案方面，想到了一種：在 Vue 實例初始化的時候，判斷函數(shù)是否異步函數(shù)，將所有異步函數(shù)再封裝一層，調(diào)用后劫持 Promise：

PromiseHijack

能力有限，無法判斷這個改動會帶來多大的影響，是否可行？有什么更優(yōu)雅的實現(xiàn)方式？

如果用插件實現(xiàn)該從什么地方入手 hack 到實例初始化函數(shù)？

請各傾陸海

回答
編輯回答
尐懶貓

在Vue 中，我使用window.onerror進行捕獲異常，但是所有的捕獲信息都為Script Error,但在jquery的代碼能正常，不知道為啥

2018年4月10日 09:18
編輯回答
負我心

我感覺你的方法已經(jīng)很高端了，異步的異常一般都只能自己try-catch，這和promise的機制有關(guān)

2017年1月20日 05:10
編輯回答
墨染殤

我覺得你的處理方法挺好。如果擔心引起一些不可預(yù)料的問題，可以考慮采用主動封裝的方式，比如

Vue.prototype.$await = async function(action) {
    try {
        await action();
    } catch (err) {
        // 這里是你處理錯誤的邏輯
        console.log("Cought Error: ", err);
    }
};

然后在 methods 中定義方法時：

doSomething(...args) {
    this.$await(async () => {
        await asyncDealWith(...args);
    });
}
2018年2月7日 13:50