簡單學習5種處理Vue.js異常的方法

錯誤大全

為了測試各種異常處理技巧，我故意觸發三種類型的錯誤。

第一種：引用一個不能存在的變量：

<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]和一個常規的錯誤，網頁白屏。

你可以在Codepen查看例子完整代碼。

第三種：執行一個會拋出異常的方法

<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]和常規報錯。和上一個錯誤的區別在于，只有你點擊了按鈕才會觸發函數調用，才會報錯。

你可以在Codepen查看例子完整代碼。

在繼續之前，我想聲明上面3個例子并不代表所有類型的錯誤。這3種是比較常見的錯誤。

好了，我們該怎么處理異常呢？我很驚訝在Vue的文檔中竟然沒有介紹異常處理的章節。

是的，文檔中是有一個，但是介紹極其簡短。

如果在組件渲染時出現運行錯誤，錯誤將會被傳遞至全局 Vue.config.errorHandler 配置函數 (如果已設置)。利用這個鉤子函數來配合錯誤跟蹤服務是個不錯的主意。比如 Sentry，它為 Vue 提供了官方集成。

P.S. 國產BUG監控服務Fundebug也為Vue提供了官方集成。
我個人建議官方應該有詳細的介紹。總的來說，Vue中異常處理包含以下幾個方面的技巧：

• errorHandler
• warnHandler
• renderError
• errorCaptured
• window.onerror (不僅僅針對Vue)

技巧1：errorHandler

我們要學習的第一個技巧是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

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

errorCaptured是最后一個和Vue相關的技巧，這個技巧讓我很迷惑，現在還是有點搞不明白。文檔是這么介紹的：

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

基于我的一些分析，這個error Handler只能在父組件中處理子組件的錯誤。據我所知，我們沒法直接在Vue的主實例(main instance)中使用它。

為了測試，我構造了下面的例子：

Vue.component('cat', {
template:`
<div><h2>Cat: </h2>
<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><h2>Kitten: {{ dontexist() }}</h2></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綁定，所以報錯無論如何都會被抓到。運行實例

總結

正如開篇提到，這是我第一次寫關于這個主題的文章。我也希望從大家獲得反饋，包括評論、建議以及修訂意見。我希望大家可以分享自己如何使用的具體事例。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。