5種處理Vue異常的方法

• 原文: Handling Errors in Vue.js
• 譯者: Fundebug

本文采用意譯，版權歸原作者所有

去年一整年，我都在使用最愛的—Vue.js— 來做項目。最近突然意識到，我竟然從來沒有認真去處理異常。我可以自戀地說："我寫的代碼是完美的，沒有BUG。" 我相信大家都明白這是迷之自信。最近，我花了不少時間研究了Vue中處理異常的各種技巧，在此想把我學到的分享給大家。

錯誤大全

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

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

<div id="app" v-cloak>
  Hello, {{name}}
</div>

上述代碼運行后不會拋出錯誤，但是在控制台會有[Vue warn]消息。

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

2. 第二種：將變量綁定到一個被計算出來的屬性，計算的時候會拋出異常。

<div id="app" v-cloak>
  Hello, {{name2}}
</div>

<script>
const app = new Vue({
  el:'#app',
  computed:{
    name2() {
      return x;
    }
  }
})
</script>

運行上述代碼會在控制台拋出一個[Vue warn]和一個常規的錯誤，網頁白屏。

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

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

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

Fundebug專注於JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、荔枝FM、掌門1對1、核桃編程、微脈等眾多品牌企業。歡迎免費試用！

版權聲明

轉載時請注明作者Fundebug以及本文地址：

https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs