1、 組件中的處理：使用 errorCaptured 鉤子

作用：可以捕獲來自后代組件的錯(cuò)誤

父組件(errorCaptured) -> 子組件 (errorCaptured) -> 當(dāng)孫子組件出錯(cuò)時(shí)，錯(cuò)誤會(huì)一直向上拋，也就是先觸發(fā)子組件的 errorCaptured，然后觸發(fā)父組件的 errorCaptured。如果 errorCaptured 中返回 false 則會(huì)阻斷傳播。?

原理：Vue底層源碼會(huì)在很多地方都做了錯(cuò)誤處理，例如在渲染的時(shí)候出錯(cuò)或者數(shù)據(jù)初始化的時(shí)候出錯(cuò)都會(huì)觸發(fā)handleError方法，傳入錯(cuò)誤信息和實(shí)例等；再判斷父組件上是否有?errorCaptured 屬性，有的話拿到這個(gè)鉤子便執(zhí)行；判斷當(dāng)前鉤子的返回值是否為false，為false的話就終止向上傳播；

如果全局的 config.errorHandler 被定義，所有的錯(cuò)誤仍會(huì)發(fā)送它，因此這些錯(cuò)誤仍然會(huì)向單一的分析服務(wù)的地方進(jìn)行匯報(bào)。

?

2、全局處理：設(shè)置錯(cuò)誤處理 errorHandler

如果在組件渲染時(shí)出現(xiàn)運(yùn)行錯(cuò)誤，錯(cuò)誤將會(huì)被傳遞至全局 Vue.config.errorHandler 配置函數(shù)。

Vue.config.errorHandler = (err, vm, info) => {console.log(err, vm, info);
}

底層原理：每次捕獲到錯(cuò)誤之后，除了調(diào)用上級(jí)組件的??errorCaptured ?之外呢，還會(huì)命中 globalHandleError方法，這個(gè)就是全局錯(cuò)誤處理方法。將錯(cuò)誤傳到全局錯(cuò)誤處理這里。

如果子組件返回了false，這里的全局設(shè)置也會(huì)捕獲不到錯(cuò)誤。?

?

3、接口異常處理：響應(yīng)攔截

在攔截器中對(duì)狀態(tài)碼進(jìn)行攔截；?

instance.interceptors.response.use((res) => {return res.data;},(err) => {let res = err.response;if (res.status >= 400) {handleError(response); // 統(tǒng)一處理接口異常}return Promise.reject(error);}
);

收集到錯(cuò)誤后，提交到前端監(jiān)控系統(tǒng)中，這樣我們可以分析前端代碼的異常信息啦~~