5種處理Vue異常的方法

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

本文采用意譯，版權歸原做者全部

去年一全年，我都在使用最愛的—Vue.js— 來作項目。最近忽然意識到，我居然歷來沒有認真去處理異常。我能夠自戀地說："我寫的代碼是完美的，沒有BUG。" 我相信你們都明白這是迷之自信。最近，我花了很多時間研究了Vue中處理異常的各類技巧，在此想把我學到的分享給你們。

錯誤大全

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

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

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

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

你能夠在Codepen查看例子完整代碼。

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

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

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

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

你能夠在Codepen查看例子完整代碼。

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

<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對一、核桃編程、微脈等衆多品牌企業。歡迎免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址：

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