- 原文: Handling Errors in Vue.js
- 譯者: Fundebug
本文采用意譯，版權歸原作者所有
去年一整年，我都在使用最愛的—Vue.js— 來做項目。最近突然意識到，我竟然從來沒有認真去處理異常。我可以自戀地說："我寫的代碼是完美的，沒有 BUG。" 我相信大家都明白這是迷之自信。最近，我花了不少時間研究了 Vue 中處理異常的各種技巧，在此想把我學到的分享給大家。
錯誤大全
為了測試各種異常處理技巧，我故意觸發三種類型的錯誤。
- 第一種：引用一個不存在的變量：
<div id="app" v-cloak>
Hello, {{name}}
</div> 上述代碼運作後不會抛出錯誤，但是在控制台會有
[Vue warn]
消息。
你可以在 Codepen 檢視例子
完整代碼:
- 第二種：将變量綁定到一個被計算出來的屬性，計算的時候會抛出異常。
<div id="app" v-cloak>
Hello, {{name2}}
</div>
<script>
const app = new Vue({
el: "#app",
computed: {
name2() {
return x;
}
}
});
</script> 運作上述代碼會在控制台抛出一個
[Vue warn]
和一個正常的錯誤，網頁白屏。
- 第三種：執行一個會抛出異常的方法
<div id="app" v-cloak>
<button @click="doIt">Do It</button>
</div>
<script>
const app = new Vue({
el: "#app",
methods: {
doIt() {
return x;
}
}
});
</script> 這個錯誤在控制台也
[Vue warn]
和正常報錯。和上一個錯誤的差別在于，隻有你點選了按鈕才會觸發函數調用，才會報錯。
在繼續之前，我想聲明上面 3 個例子并不代表所有類型的錯誤。這 3 種是比較常見的錯誤。
好了，我們該怎麼處理異常呢？我很驚訝在 Vue 的
文檔中竟然沒有介紹異常處理的章節。
是的，文檔中是有一個，但是介紹極其簡短。
如果在元件渲染時出現運作錯誤，錯誤将會被傳遞至全局 Vue.config.errorHandler
P.S. 國産 BUG 監控服務
也為 Vue 提供了
我個人建議官方應該有詳細的介紹。總的來說，Vue 中異常處理包含以下幾個方面的技巧：
- errorHandler
- warnHandler
- renderError
- errorCaptured
- window.onerror (不僅僅針對 Vue)
技巧 1：errorHandler
我們要學習的第一個技巧是
。你也許知道，這是 Vue 中最廣泛使用的異常處理方式。
Vue.config.errorHandler = function(err, vm, info) {}; err
指代 error 對象，
info
是一個 Vue 特有的字元串，
vm
指代 Vue 應用本身。記住在一個頁面你可以有多個 Vue 應用。這個 error handler 作用到所有的應用。
Vue.config.errorHandler = function(err, vm, info) {
console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}; 第一種錯誤不會觸發 errorHandler，它隻是一個 warning。
第二種錯誤會抛出錯誤被 errorHandler 捕獲：
Error: ReferenceError: x is not defined
Info: render 第三種錯誤也會被捕獲：
Error: ReferenceError: x is not defined
Info: v-on handler 記住
info
裡面的資訊也是非常有用的。
技巧 2: warnHandler
用來捕獲 Vue warning。記住在生産環境是不起作用的。
Vue.config.warnHandler = function(msg, vm, trace) {}; msg
和
vm
都容易了解，
trace
代表了元件樹。請看下面的例子：
Vue.config.warnHandler = function(msg, vm, trace) {
console.log(`Warn: ${msg}\nTrace: ${trace}`);
}; 第一個錯誤被
warnHandler
捕獲：
Warn: Property or method 'name' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Trace:
(found in <Root>) 你可以檢視三個例子的實際運作情況:
第一個:
例子1第二個:
例子2第三個:
例子3技巧 3: renderError
和前面兩個不同，這個技巧不适用于全局，群組件相關。并且隻适用于非生産環境。
下面是一個簡單的例子：
const app = new Vue({
el: "#app",
renderError(h, err) {
return h("pre", { style: { color: "red" } }, err.stack);
}
}); 第一個例子是沒有效果的，因為隻是一個warning。第二個例子就會在網頁上顯示具體的錯誤資訊:
示例代碼老實說，我沒覺得這個比直接看控制台好多少。但是，如果你們的 QA 團隊或則測試對浏覽器控制台不熟悉的話，這個還是蠻有用的。
技巧 4: errorCaptured
是最後一個和 Vue 相關的技巧，這個技巧讓我很迷惑，現在還是有點搞不明白。文檔是這麼介紹的：
當捕獲一個來自子孫元件的錯誤時被調用。此鈎子會收到三個參數：錯誤對象、發生錯誤的元件執行個體以及一個包含錯誤來源資訊的字元串。此鈎子可以傳回 false
基于我的一些分析，這個 error Handler 隻能在父元件中處理子元件的錯誤。據我所知，我們沒法直接在 Vue 的主執行個體(main instance)中使用它。
為了測試，我構造了下面的例子：
Vue.component("cat", {
template: `
<div><h1>Cat: </h1>
<slot></slot>
</div>`,
props: {
name: {
required: true,
type: String
}
},
errorCaptured(err, vm, info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
return false;
}
});
Vue.component("kitten", {
template: "<div><h1>Kitten: {{ dontexist() }}</h1></div>",
props: {
name: {
required: true,
type: String
}
}
}); 注意
kitten
元件的代碼是有 BUG 的。
<div id="app" v-cloak>
<cat name="my cat">
<kitten></kitten>
</cat>
</div> 捕獲的資訊如下:
cat EC: TypeError: dontexist is not a function
info: render 下面是運作
執行個體errorCaptured
是個很有趣的特性，我想那些建構元件庫的開發者應該會用到吧。這個特性更像是面向元件開發者而不是一般開發者。
終極技巧: window.onerror
最後也是最重要的一個候選項
window.onerror。它是一個全局的異常處理函數，可以抓取所有的 JavaScript 異常。
window.onerror = function(message, source, line, column, error) {}; 我想函數的參數中隻有
source
難以從字面上了解吧，它代表了目前的 URL。
接下來事情就比較好玩了。如果你定義了
onerror
，但是沒有啟用
Vue.config.errorHandler
，那麼有很多異常都抓不到。Vue 希望你定義它，否則異常不會抛出去的。這到底有沒有意義？我不是很懂，我覺得沒必要，甚至有點奇怪。
如果定義
errorHandler
的代碼有 BUG，那麼運作起來也不會被
onerror
抓到。下面的例子中，如果将
oopsIDidItAgain()
解注釋，你就會發現這個問題。隻有第二個按鈕沒有和 Vue 綁定，是以報錯無論如何都會被抓到。
運作執行個體)
總結
正如開篇提到，這是我第一次寫關于這個主題的文章。我也希望從大家獲得回報，包括評論、建議以及修訂意見。我希望大家可以分享自己如何使用的具體事例。
關于Fundebug
專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、荔枝FM、掌門1對1、核桃程式設計、微脈等衆多品牌企業。歡迎免費試用！
版權聲明
轉載時請注明作者
以及本文位址：
https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs