摘要：最近突然意識(shí)到，我竟然從來沒有認(rèn)真去處理異常。第三種執(zhí)行一個(gè)會(huì)拋出異常的方法這個(gè)錯(cuò)誤在控制臺(tái)也和常規(guī)報(bào)錯(cuò)。這種是比較常見的錯(cuò)誤。它是一個(gè)全局的異常處理函數(shù)，可以抓取所有的異常。

原文: Handling Errors in Vue.js

譯者: Fundebug

本文采用意譯，版權(quán)歸原作者所有

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

為了測(cè)試各種異常處理技巧，我故意觸發(fā)三種類型的錯(cuò)誤。

第一種：引用一個(gè)不能存在的變量：

  Hello, {{name}}

上述代碼運(yùn)行后不會(huì)拋出錯(cuò)誤，但是在控制臺(tái)會(huì)有[Vue warn]消息。

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

第二種：將變量綁定到一個(gè)被計(jì)算出來的屬性，計(jì)算的時(shí)候會(huì)拋出異常。

  Hello, {{name2}}

運(yùn)行上述代碼會(huì)在控制臺(tái)拋出一個(gè)[Vue warn]和一個(gè)常規(guī)的錯(cuò)誤，網(wǎng)頁白屏。

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

第三種：執(zhí)行一個(gè)會(huì)拋出異常的方法

    Do It

這個(gè)錯(cuò)誤在控制臺(tái)也[Vue warn]和常規(guī)報(bào)錯(cuò)。和上一個(gè)錯(cuò)誤的區(qū)別在于，只有你點(diǎn)擊了按鈕才會(huì)觸發(fā)函數(shù)調(diào)用，才會(huì)報(bào)錯(cuò)。

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

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

好了，我們?cè)撛趺刺幚懋惓Ｄ兀课液荏@訝在Vue的文檔中竟然沒有介紹異常處理的章節(jié)。

是的，文檔中是有一個(gè)，但是介紹極其簡(jiǎn)短。

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

P.S. 國(guó)產(chǎn)BUG監(jiān)控服務(wù)Fundebug也為Vue提供了官方集成。

我個(gè)人建議官方應(yīng)該有詳細(xì)的介紹?？偟膩碚f，Vue中異常處理包含以下幾個(gè)方面的技巧：

errorHandler

warnHandler

renderError

errorCaptured

window.onerror (不僅僅針對(duì)Vue)

我們要學(xué)習(xí)的第一個(gè)技巧是errorHandler。你也許知道，這是Vue中最廣泛使用的異常處理方式。

Vue.config.errorHandler = function(err, vm, info) {

}

err指代error對(duì)象，info是一個(gè)Vue特有的字符串，vm指代Vue應(yīng)用本身。記住在一個(gè)頁面你可以有多個(gè)Vue應(yīng)用。這個(gè)error handler作用到所有的應(yīng)用。

Vue.config.errorHandler = function(err, vm, info) {
  console.log(`Error: ${err.toString()}
Info: ${info}`);
}

第一種錯(cuò)誤不會(huì)觸發(fā)errorHandler，它只是一個(gè)warning。

第二種錯(cuò)誤會(huì)拋出錯(cuò)誤被errorHandler捕獲：

Error: ReferenceError: x is not defined
Info: render

第三種錯(cuò)誤也會(huì)被捕獲：

Error: ReferenceError: x is not defined
Info: v-on handler

記住info里面的信息也是非常有用的。

warnHandler用來捕獲Vue warning。記住在生產(chǎn)環(huán)境是不起作用的。

Vue.config.warnHandler = function(msg, vm, trace) {

}

msg和vm都容易理解，trace代表了組件樹。請(qǐng)看下面的例子：

Vue.config.warnHandler = function(msg, vm, trace) {
  console.log(`Warn: ${msg}
Trace: ${trace}`);
}

第一個(gè)錯(cuò)誤被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 )

你可以查看三個(gè)例子的實(shí)際運(yùn)行情況:
第一個(gè): 例子1
第二個(gè): 例子2
第三個(gè): 例子3

和前面兩個(gè)不同，這個(gè)技巧不適用于全局，和組件相關(guān)。并且只適用于非生產(chǎn)環(huán)境。

下面是一個(gè)簡(jiǎn)單的例子：

const app = new Vue({
  el:"#app",
  renderError (h, err) {
    return h("pre", { style: { color: "red" }}, err.stack)
  }
})

第一個(gè)例子是沒有效果的，因?yàn)橹皇且粋€(gè)warning。第二個(gè)例子就會(huì)在網(wǎng)頁上顯示具體的錯(cuò)誤信息: 示例代碼

老實(shí)說，我沒覺得這個(gè)比直接看控制臺(tái)好多少。但是，如果你們的QA團(tuán)隊(duì)或則測(cè)試對(duì)瀏覽器控制臺(tái)不熟悉的話，這個(gè)還是蠻有用的。

errorCaptured是最后一個(gè)和Vue相關(guān)的技巧，這個(gè)技巧讓我很迷惑，現(xiàn)在還是有點(diǎn)搞不明白。文檔是這么介紹的：

當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。

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

為了測(cè)試，我構(gòu)造了下面的例子：

Vue.component("cat", {
  template:`
Cat: 
  
`,
  props:{
    name:{
      required:true,
      type:String
    }
  },
   errorCaptured(err,vm,info) {
    console.log(`cat EC: ${err.toString()}
info: ${info}`); 
     return false;
  }

});

Vue.component("kitten", {
  template:"
Kitten: {{ dontexist() }}
",
  props:{
    name:{
      required:true,
      type:String
    }
  }
});

注意 kitten 組件的代碼是有BUG的。

捕獲的信息如下:

cat EC: TypeError: dontexist is not a function
info: render

下面是運(yùn)行實(shí)例。

errorCaptured是個(gè)很有趣的特性，我想哪些構(gòu)建組件庫(kù)的開發(fā)者應(yīng)該會(huì)用到吧。這個(gè)特性更像是一個(gè)面向組件開發(fā)者而不是一般開發(fā)者。

最后也是最重要的一個(gè)候選項(xiàng) window.onerror。它是一個(gè)全局的異常處理函數(shù)，可以抓取所有的JavaScript異常。

window.onerror = function(message, source, line, column, error) {

}

我想函數(shù)的參數(shù)中只有source難以從字面上理解吧，它代表了當(dāng)前的URL。

接下來事情就比較好玩了。如果你定義了onerror，但是沒有啟用Vue.config.errorHandler，那么有很多異常都抓不到。Vue希望你要定義它，否則異常不會(huì)拋出去的。這到底有沒有意義？我不是很懂，我覺得沒必要，甚至有點(diǎn)奇怪。

如果定義errorHandler的代碼有BUG，那么運(yùn)行起來也不會(huì)被onerror抓到。下面的例子中，如果將oopsIDidItAgain()解注釋，你就會(huì)發(fā)現(xiàn)這個(gè)問題。只有第二個(gè)按鈕沒有和Vue綁定，所以報(bào)錯(cuò)無論如何都會(huì)被抓到。運(yùn)行實(shí)例

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

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶有陽光保險(xiǎn)、荔枝FM、掌門1對(duì)1、核桃編程、微脈等眾多品牌企業(yè)。歡迎免費(fèi)試用！

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：

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