前端錯(cuò)誤日志監(jiān)控可以解決什么問(wèn)題
我們知道當(dāng)前端項(xiàng)目的js發(fā)生錯(cuò)誤時(shí)每篷，可能會(huì)導(dǎo)致頁(yè)面阻塞，操作不流暢端圈，或者白屏等異常焦读。但是由于我們的頁(yè)面是在用戶的瀏覽器打開的，這使的復(fù)現(xiàn)和查詢問(wèn)題的流程變的繁瑣舱权。這就使得我們需要將發(fā)生在瀏覽器的錯(cuò)誤進(jìn)行收集以便于生產(chǎn)問(wèn)題處理矗晃。
如何進(jìn)行錯(cuò)誤捕獲
javascript的錯(cuò)誤分為以下這么幾類：
1.語(yǔ)法錯(cuò)誤（不能通過(guò)解析器解析）
2.運(yùn)行時(shí)錯(cuò)誤（解析器執(zhí)行時(shí)拋出錯(cuò)誤）
3.網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤
收集錯(cuò)誤：
1.try-catch
使用try-catch我們可以收集到語(yǔ)法錯(cuò)誤和運(yùn)行時(shí)錯(cuò)誤，但需要注意的是宴倍，當(dāng)我們捕獲的代碼塊內(nèi)部存在異步代碼時(shí)就沒(méi)法捕捉到error了（這個(gè)原因我覺(jué)得是和eventloop機(jī)制有關(guān)）
2.window.onerror
window.onerror就比較厲害了张症，它可以捕獲同步和異步error仓技，同時(shí)window.addEventListener('error',() => {}, true）的時(shí)候還可以監(jiān)聽資源請(qǐng)求錯(cuò)誤
3.promise錯(cuò)誤，?async/await錯(cuò)誤捕獲
對(duì)于promise的錯(cuò)誤我們一般是采用.catch的方式去監(jiān)測(cè)俗他，但是每個(gè)promise都要處理catch就很繁瑣脖捻，有沒(méi)有能統(tǒng)一處理的的方式呢？當(dāng)然是有的兆衅，window.addEventListener("unhandledrejection", e=> {})
4.vue錯(cuò)誤捕獲
我們可以采用vue的全局錯(cuò)誤捕獲函數(shù)Vue.config.errorHandler郭变，這樣可以對(duì)vue拋出的錯(cuò)誤全局捕獲
工欲善其事必先利其器，有了以上的這些東西涯保，讓我們愉快的寫代碼吧
在我們的vue項(xiàng)目里面新建一個(gè)文件叫error.js
然后對(duì)我們上面監(jiān)聽我們上面說(shuō)到的這些方法
獲取到錯(cuò)誤信息之后，我們需要對(duì)錯(cuò)誤進(jìn)行一個(gè)格式化處理周伦，這里我們使用error-stack-parser這個(gè)庫(kù)對(duì)error進(jìn)行格式化處理夕春。處理完成之后所有的錯(cuò)誤都有了一個(gè)統(tǒng)一的格式
然后我們進(jìn)行上報(bào)，也就是我們的sendToErrorService方法
這里我們采用比較常見(jiàn)的統(tǒng)計(jì)上報(bào)方式专挪，為了減小請(qǐng)求體積這里我們對(duì)錯(cuò)誤信息進(jìn)行轉(zhuǎn)碼（也可以在這里進(jìn)行加密）及志，到這里我們的客戶端處理就算完成了，下一篇我們一起來(lái)看看我們的錯(cuò)誤日志處理服務(wù)怎么處理這些錯(cuò)誤寨腔。
