一、錯誤類型

任何一個框架，對于錯誤的處理都是一種必備的能力

在Vue 中，則是定義了一套對應的錯誤處理規(guī)則給到使用者，且在源代碼級別，對部分必要的過程做了一定的錯誤處理。

主要的錯誤來源包括：

• 后端接口錯誤
• 代碼中本身邏輯錯誤

二、如何處理

后端接口錯誤

通過axios的interceptor實現(xiàn)網(wǎng)絡請求的response先進行一層攔截

apiClient.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status == 401) {
      router.push({ name: "Login" });
    } else {
      message.error("出錯了");
      return Promise.reject(error);
    }
  }
);

代碼邏輯問題

全局設置錯誤處理

設置全局錯誤處理函數(shù)

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的錯誤信息，比如錯誤所在的生命周期鉤子
  // 只在 2.2.0+ 可用
}

errorHandler指定組件的渲染和觀察期間未捕獲錯誤的處理函數(shù)。這個處理函數(shù)被調用時，可獲取錯誤信息和 Vue 實例

不過值得注意的是，在不同Vue 版本中，該全局 API 作用的范圍會有所不同：

從 2.2.0 起，這個鉤子也會捕獲組件生命周期鉤子里的錯誤。同樣的，當這個鉤子是 undefined 時，被捕獲的錯誤會通過 console.error 輸出而避免應用崩

從 2.4.0 起，這個鉤子也會捕獲 Vue 自定義事件處理函數(shù)內部的錯誤了

從 2.6.0 起，這個鉤子也會捕獲 v-on DOM 監(jiān)聽器內部拋出的錯誤。另外，如果任何被覆蓋的鉤子或處理函數(shù)返回一個 Promise 鏈 (例如 async 函數(shù))，則來自其 Promise 鏈的錯誤也會被處理

生命周期鉤子

errorCaptured是 2.5.0 新增的一個生命鉤子函數(shù)，當捕獲到一個來自子孫組件的錯誤時被調用

基本類型

(err: Error, vm: Component, info: string) => ?boolean

此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播

參考官網(wǎng)，錯誤傳播規(guī)則如下：

• 默認情況下，如果全局的 config.errorHandler 被定義，所有的錯誤仍會發(fā)送它，因此這些錯誤仍然會向單一的分析服務的地方進行匯報
• 如果一個組件的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子，則它們將會被相同的錯誤逐個喚起。
• 如果此 errorCaptured 鉤子自身拋出了一個錯誤，則這個新錯誤和原本被捕獲的錯誤都會發(fā)送給全局的 config.errorHandler
• 一個 errorCaptured 鉤子能夠返回 false 以阻止錯誤繼續(xù)向上傳播。本質上是說“這個錯誤已經(jīng)被搞定了且應該被忽略”。它會阻止其它任何會被這個錯誤喚起的 errorCaptured 鉤子和全局的 config.errorHandler

下面來看個例子

定義一個父組件cat

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;
    }
});

定義一個子組件kitten，其中dontexist()并沒有定義，存在錯誤

Vue.component('kitten', {
    template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
    props:{
        name:{
            required:true,
            type:String
        }
    }
});

頁面中使用組件

<div id="app" v-cloak>
    <cat name="my cat">
        <kitten></kitten>
    </cat>
</div>

在父組件的errorCaptured則能夠捕獲到信息

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

附：Vue統(tǒng)一錯誤處理

用到Vue的全局 errorHandler

Vue.config.errorHandler = function(err) {
  console.log("global", err);
  message.error("出錯了");
};

// ...此處省略其他配置

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

總結一下

• handleError在需要捕獲異常的地方調用，首先獲取到報錯的組件，之后遞歸查找當前組件的父組件，依次調用errorCaptured 方法，在遍歷調用完所有 errorCaptured 方法或 errorCaptured 方法有報錯時，調用 globalHandleError 方法
• globalHandleError調用全局的 errorHandler 方法，再通過logError判斷環(huán)境輸出錯誤信息
• invokeWithErrorHandling更好的處理異步錯誤信息
• logError判斷環(huán)境，選擇不同的拋錯方式。非生產(chǎn)環(huán)境下，調用warn方法處理錯誤

到此這篇關于手拉手教你如何處理vue項目中錯誤的文章就介紹到這了,更多相關vue項目錯誤處理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論