在上一篇文章里面我們成功的收集到的瀏覽器端的錯(cuò)誤广鳍，收集就是為了處理惶翻，這篇我們來(lái)看看如何處理這些錯(cuò)誤杨箭。
有經(jīng)驗(yàn)的同學(xué)應(yīng)該都知道赢赊，我們的vue代碼打包過(guò)后在生產(chǎn)環(huán)境是一個(gè)壓縮的狀態(tài)乙漓，也就是說(shuō)，我們的代碼已經(jīng)不是我們的源代碼了释移，這就導(dǎo)致我們沒(méi)法定位到源代碼的位置叭披，這時(shí)候我們即使捕獲到錯(cuò)誤也沒(méi)法定位到出錯(cuò)的代碼，那這該怎么辦呢秀鞭？答案是sourceMap
什么是sourceMap
sourceMap其實(shí)是記錄壓縮后代碼與源代碼位置關(guān)系的文件趋观。
如何使用sourceMap
我們上一篇中將錯(cuò)誤堆棧用error-stack-parser進(jìn)行了格式化處理，處理完成后就變成了這樣
這里我們可以看到錯(cuò)誤堆棧中有當(dāng)前錯(cuò)誤的文件地址锋边，行號(hào)皱坛，列號(hào)（這也是我們需要處理的）
sourceMap反解
我們拿到了當(dāng)前錯(cuò)誤信息，剩下的就是對(duì)錯(cuò)誤信息利用sourceMap進(jìn)行反解出源碼的位置信息豆巨，那我們?cè)撛趺醋瞿兀?/p>
當(dāng)我們的vue代碼打包完成后經(jīng)過(guò)配置會(huì)生成對(duì)應(yīng)的.map文件這文件也就是我們的sourceMap文件剩辟，我們接下來(lái)就要利用這個(gè)文件來(lái)對(duì)報(bào)錯(cuò)信息進(jìn)行反解。
我們先來(lái)看看我們的日志處理服務(wù)的項(xiàng)目結(jié)構(gòu)
這里我們采用express進(jìn)行了項(xiàng)目搭建往扔，然后routes下的error.js作為我們的入口文件贩猎。
這邊我們采用策略模式來(lái)處理三種錯(cuò)誤分別交由不同的錯(cuò)誤處理程序。也就是我們的functions下的index.js
這邊就是對(duì)不同的錯(cuò)誤處理進(jìn)行的一個(gè)聚合導(dǎo)出萍膛。然后我們深入到vue錯(cuò)誤處理文件中吭服。
終于看到我們的重點(diǎn)了source-map-functions/index.js,這邊使用這個(gè)文件中的toSource方法對(duì)我們上報(bào)的錯(cuò)誤進(jìn)行反解
這里是采用source-map來(lái)處理我們的報(bào)錯(cuò)，也就是之前提到的反解蝗罗，這里可以看到有幾個(gè)核心的東西：.map文件艇棕，行號(hào)蝌戒，列號(hào)剩下的就交給source-map來(lái)處理吧。
接下來(lái)我們要將我們收集到的錯(cuò)誤寫(xiě)入文件沼琉，以便于查找北苟，這里我使用了log4js來(lái)處理
到此，我們?nèi)罩揪褪占炅舜虮瘢梢杂淇斓呐挪閱?wèn)題了友鼻。這里其實(shí)少了一步，大家猜猜是啥闺骚？下一篇我們?cè)僬f(shuō)吧彩扔，最后附上項(xiàng)目地址：
https://github.com/wangKXX/error-service
https://github.com/wangKXX/error-web
