錯(cuò)誤大全

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元定陶做網(wǎng)站,已為上家服務(wù),為定陶各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

為了測試各種異常處理技巧，我故意觸發(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è)，但是介紹極其簡短。

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

P.S. 國產(chǎn)BUG監(jiān)控服務(wù)Fundebug也為Vue提供了官方集成。
我個(gè)人建議官方應(yīng)該有詳細(xì)的介紹?？偟膩碚f，Vue中異常處理包含以下幾個(gè)方面的技巧：

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

技巧1：errorHandler

我們要學(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()}\nInfo: ${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里面的信息也是非常有用的。

技巧2: warnHandler

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}\nTrace: ${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

技巧3: renderError

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

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

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ì)或則測試對(duì)瀏覽器控制臺(tái)不熟悉的話，這個(gè)還是蠻有用的。

技巧4: errorCaptured

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)中使用它。

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

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 組件的代碼是有BUG的。

捕獲的信息如下:

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

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

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

終極技巧: window.onerror

最后也是最重要的一個(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í)例

總結(jié)

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。