廢話不多說了，直接上程式碼。

方法一：errorHandler

這是 Vue 中最廣泛使用的異常處理方式。

用法：

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

err指代 error 物件，info是一個 Vue 特有的字串，vm指代 Vue 應用本身。記住在一個頁面你可以有多個 Vue 應用。這個 error handler 作用到所有的應用。

方法二：warnHandler

warnHandler用來捕獲 Vue warning。記住在生產環境是不起作用的。也就是說需要把productionTip設定為false時候才能生效。

用法：

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

msg和vm都容易理解，trace代表了元件樹。

方法三：renderError

和前面兩個不同，這個技巧不適用於全域性，和元件相關。並且只適用於非生產環境。也就是說需要把productionTip設定為false時候才能生效。

用法：

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

方法四：errorCaptured

errorCaptured是最後一個和 Vue 相關的技巧，這個技巧讓我很迷惑，現在還是有點搞不明白。文件是這麼介紹的：當捕獲一個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數：錯誤物件、發生錯誤的元件例項以及一個包含錯誤來源資訊的字串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

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

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

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

注意 kitten 元件裡的dontexist是沒定義的

捕獲到的資訊如下:

cat EC: TypeError: dontexist is not a functioninfo: render

errorCaptured是個很有趣的特性，我想那些構建元件庫的開發者應該會用到吧。這個特性更像是面向元件開發者而不是一般開發者。

方法五：window.onerror

最後也是最重要的一個候選項 window.onerror。它是一個全域性的異常處理函式，可以抓取所有的 JavaScript 異常。

用法：

window.onerror = function(message, source, lineno, colno, error) {// message：錯誤資訊（字串）。// source：發生錯誤的指令碼URL（字串）// lineno：發生錯誤的行號（數字）// colno：發生錯誤的列號（數字）// error：Error物件（物件）console.log('捕獲到異常：',{message, source, lineno, colno, error});}test();

總結

今天主要介紹了五種捕獲異常的方法，當然也可能不全，大夥也可以自己學習研究研究，有更好的做法可以私信或者評論裡留言，跟我們一起分享分享。