前端代碼異常日志收集與監(jiān)控

1、前端代碼異常日志收集與監(jiān)控在復(fù)雜的網(wǎng)絡(luò)環(huán)境和瀏覽器環(huán)境下，自測(cè)、QA測(cè)試以及Code Review都是不夠 的，如果對(duì)頁(yè)面穩(wěn)定性和準(zhǔn)確性要求較高，就必須有一套完善的代碼異常監(jiān)控體 系，本文從前端代碼異常監(jiān)控的方法和問(wèn)題著手，盡量全面地闡述錯(cuò)誤日志 收 集各個(gè)階段中可能遇到的阻礙和處理方案。收集日志的方法平時(shí)收集日志的手段，可以歸類(lèi)為兩個(gè)方面，一個(gè)是邏輯中的錯(cuò)誤判斷，為主動(dòng) 判斷；一個(gè)是利用語(yǔ)言給我們提供的捷徑，暴力式獲取錯(cuò)誤信息，如 try.catch 和 window.onerror。主動(dòng)判斷我們?cè)谝恍┻\(yùn)算之后，得到一個(gè)期望的結(jié)果，然而結(jié)果不是我們想要的/ test.jsfunction c

2、alc() / code.return val;if(calc() != someVal) Reporter.sen d( position: test.js:calc msg: calc e rror );這種屬于邏輯錯(cuò)誤/狀態(tài)錯(cuò)誤的反饋，在接口 status 判斷中用的比較多。try.catch 捕獲判斷一個(gè)代碼段中存在的錯(cuò)誤：try init(); / code. catch(e) Reporter.send(format(e);以 init 為程序的入口，代碼中所有同步執(zhí)行出現(xiàn)的錯(cuò)誤都會(huì)被捕獲，這種方式 也可以很好的避免程序剛跑起來(lái)就掛。window.onerror捕獲全局錯(cuò)誤：win

3、dow.onerror = function() var errInfo = format( arguments); Reporter.send(errInfo); return true;在上面的函數(shù)中返回ret urn true，錯(cuò)誤便不會(huì)暴露到控制臺(tái)中。下面是它的參 數(shù)信息：1./* * param StringerrorMessage錯(cuò)誤信息 * param StringscriptURI出錯(cuò)的文件 * param LonglineNumber出錯(cuò)代碼的行號(hào) * param LongcolumnNumber出錯(cuò)代碼的列號(hào) * param ObjecterrorObj錯(cuò)誤的詳細(xì)信息Any

4、thing */window.onerror = function(errorMessage, s criptURI, lineNumber,columnNumber,errorObj) / code.window.onerror算是一種特別暴力的容錯(cuò)手段，try.catch也是如此，他們底 層的實(shí)現(xiàn)就是利用 C/C+ 中的 goto 語(yǔ)句實(shí)現(xiàn)，一旦發(fā)現(xiàn)錯(cuò)誤，不管目前的堆 棧有多深，不管代碼運(yùn)行到了何處，直接跑到頂層或者 try.catch 捕獲的那一 層，這種一腳踢開(kāi)錯(cuò)誤的處理方式并不是很好。收集日志存在的問(wèn)題收集日志的目的是為了及時(shí)發(fā)現(xiàn)問(wèn)題，最好日志能夠告訴我們，錯(cuò)誤在哪里，更 優(yōu)秀的做法

5、是，不僅告訴錯(cuò)誤在哪里，還告訴我們，如何處理這個(gè)錯(cuò)誤。終極目 標(biāo)是，發(fā)現(xiàn)錯(cuò)誤，自動(dòng)容錯(cuò)，這一步是最難的。無(wú)具體報(bào)錯(cuò)信息，Script error先看下面的例子， test.html window.onerror = function() console.lo g(arguments); ;4.5. test.js6./ HYPERLINK http:/barret/test.js http:/barret/test.jsfunction test() ver a = 1; return a+1;test();我們期望收集到的日志是下面這樣具體的信息：C 3 baiTeVtest-htmlSyn

6、taError: C 3 baiTeVtest-htmlSyntaError: Unexpected identifiedf lliittpB: !rUnca!ugiit SyntaxErrar： Unexpected identifier 1: ! HYPERLINK http:/barret/te%c2%a3t%e3%83%bb%5d%c2%a3%e3%80%8c http:/barret/tet25 23： 7卜4: SyntaxError; Unexpected identifLer length: 5卜 _proto_: Array QG uncauaht s/iKaxError：

7、unexpected idemiuertestjs from： HYPERLINK http:/barret http:/barretQ Q Elements Niwork Sources Tims ine Profles Pe source a V - Prtierwe log-ftegsk . Etrtir& Vi/arnngs Infn Lags為了對(duì)資源進(jìn)行更好的配置和管理，我們通常將靜態(tài)資源放到異域上 window.onerror = function() console.lo g(arguments); ;而拿到的結(jié)果卻是：barreVtest.htmlScript error/1

8、. nobarreVtest.htmlScript error/1. noy 0f &f nullG Uncauqnt SyntaxError: Unexpected identifiEtest.js from HYPERLINK http:/localhost http:/localhostRegex . Errors Waminss lnf(Q Q Eemtnts Network Sources Jimeline ProfilesQ 7 lGU-iacu=CHURIi ?if rdGcuyltvoE;L3.| i|taE-Qatii)11e&直FlpL-3戸沁aaiu豈丄匕河?。嚎贚iii

9、 | *|f4%kih f-kSMrLurgu滬 2c=-pc -arraE . | g上gufu. xuIji i-i- mctwirtY s i-?23Grwtixzi cm.;mT 跨域情況下，返回的結(jié)果是 Script error. 。/http:/trac.webkit. org/browser/branches/chromium/1453/Source/WebCore/dom/ScriptExecutionContext .cpp#L333String message = errorMessage;int line = lineNumber;String sourceName =

10、sourceURL;/ 已經(jīng)拿到了所有的錯(cuò)誤信息，但如果發(fā)現(xiàn)是非同源情況sanitizeScriptError、中復(fù)寫(xiě)錯(cuò)誤信息 sanitizeScriptError(message, line, sourceName, cachedScript);舊版的 WebCore 中只判斷了 securityOrigin()-canRequest(targetURL),新 版中還多了一個(gè) cachedScript 的判斷，可以看出瀏覽器對(duì)這方面的限制越來(lái)越 嚴(yán)格。在本地測(cè)試了下：C Lj file：/Users/barretlee/work/tes：t/jserror/test.ritnnl本地測(cè)試Q

11、 Q Elements Ne-twork Sou fees Timeline Profiles R-Q V G1 Pre serve logI _ Regex .Errors Warning; InfoScript error-lHcanRequest(targetURL)也是 false。為何 Script error.?簡(jiǎn)單報(bào)錯(cuò)：Scrip t error，目的是避免數(shù)據(jù)泄露到不安全的域中，一個(gè)簡(jiǎn)單的 例子：上面我們并沒(méi)有引入一個(gè)js文件，而是一個(gè)html，這個(gè)html是銀行的登錄 頁(yè)面，如果你已經(jīng)登錄了 ，那login頁(yè)面就會(huì)自動(dòng)跳轉(zhuǎn)到Welcome xxx. ，如果未登錄則跳轉(zhuǎn)到 Pl

12、easeLogin. ，那么 JS 報(bào)錯(cuò)也會(huì)是 Welcome xxx. is not defined， Please Login. is not defined，通過(guò)這些信息可 以判斷一個(gè)用戶是否登錄他的銀行帳號(hào)，給 hacker 提供了十分便利的判斷渠道 這是相當(dāng)不安全的。crossOrigin 參數(shù)跳過(guò)跨域限制image 和 script 標(biāo)簽都有 crossorigin 參數(shù)，它的作用就是告訴瀏覽器，我 要加載一個(gè)外域的資源，并且我信任這個(gè)資源。 然而，卻報(bào)錯(cuò)了：cross ong inMe-I =q 口 Elementssources Tine me 匚cross ong inMe-

13、I =q 口 Elementssources Tine me 匚cmwlpl 血 1 斗 Qd x0 Script f roH origin 1 https/Zlocalhost? has been饑航 htcrljlblocked Thft loaning by Cross Origin Resource Sharing policy: No Access Control Allow Origin!，header is present an the -cquc&ccd resource Origin 1 http:/barret is therefore not aVIowed atccGS

14、.0 Pre sens qq! Reoex - Erro Warm infi Log Dehi Hand HidenlJ barinet/test.html這是意料之中的錯(cuò)誤，跨域資源共享策略要求，服務(wù)器也設(shè)置Access-Control-Allow-Origin 的響應(yīng)頭： header(Access-Control-Allow-Origin: *);回頭看看我們 CDN 的資源，jsName PaihXHR Script Style Images iMedis. Fants Documents jsName PaihXHR Script Style Images iMedis. Fants

15、 Documents WeII MT上 “I g.R/sd/da_EufelJ1.aplu5_v2.sgaltedrirCOm/alllQgi/mlgg耳 | Headers Preview flCEpDri&e C.ocjI xj_heat.jE?M= 1503233LUJ seised n.cQm/3iHog/rtiio= I TJsearch- suggest； S 0.9/ m nd 5 Q,iiiccln.corn/kQt Fsgorrsejieaderscaciiecontrol: nax-age=2592E&0r &naxiage=360i conceni.-qzlpconten

16、r-Type： .appiicatton/aascnpt date: taed, 19 Aug 2015 12:21:39 葩T last-modified: Tue, 11 Aug 2615 65:29; 13 GMTJavascript/CSS/Image/Font/SWF 等這些靜態(tài)資源其實(shí)都已經(jīng)早早地加上了 CORS 響應(yīng)頭。壓縮代碼無(wú)法定位到錯(cuò)誤的具體位置線上的代碼幾乎都是經(jīng)過(guò)打包壓縮的，幾十上百的文件壓縮后打包成一個(gè)，而且 只有一行。當(dāng)我們收到 a is not defined 的時(shí)候，如果只在特定場(chǎng)景下才報(bào)錯(cuò)， 我們根本無(wú)法定位到這個(gè)被壓縮的 a 是個(gè)什么東西，那么此時(shí)的錯(cuò)誤日志

17、就是 無(wú)效的。第一個(gè)想到的辦法是利用sourceMap,利用它可以定位到壓縮代碼某一點(diǎn)在未壓 縮代碼的具體位置。下面是 sourceMap 引入的格式，在代碼的最后一行加入：/# sourceMappingURL=index.js.map以前使用的是 / 作為開(kāi)頭,現(xiàn)在使用 /#,然而對(duì)于錯(cuò)誤上報(bào),這 玩意兒沒(méi)啥用。JS不能拿到他真實(shí)的行數(shù)，只能通過(guò)Chrome DevTools這樣的 工具輔助定位,而且并不是每個(gè)線上資源都會(huì)添加 sourceMap 文件。 sourceMap 的用途目前還只能體現(xiàn)在開(kāi)發(fā)階段。當(dāng)然，如果理解了 sourceMap 的 VLQ 編碼和位置對(duì)應(yīng)關(guān)系，也可以將拿到的

18、日 志進(jìn)行二次解析，映射到真實(shí)路徑位置，這個(gè)成本比較高，貌似暫時(shí)也沒(méi)人嘗試 過(guò)。那么，有什么辦法，可以定位錯(cuò)誤的具體位置，或者說(shuō)有什么辦法可以縮小我們 定位問(wèn)題的難度呢？可以這樣考慮：打包的時(shí)候，在每?jī)蓚€(gè)合并的文件之間加上 1000 個(gè)空行，最后 上線的文件就會(huì)變成(function()var longCode)(); / file 12./ 1000 個(gè)空行4.5. (function()var longCode)(); / file 26.7./ 1000 個(gè)空行8.(function()var longCode)(); / file 310.11./ 1000 個(gè)空行12.13. (fu

19、nction()var longCode)(); / file 414.15.16. var _fileConfig = file 1, file 2, file 3, f ile 4如果報(bào)錯(cuò)在第 3001 行，window.onerror = function(msg, url, line, col, error ) / line = 3001var lineNum = line; console.log(錯(cuò)誤位置： + _fileConfiglineNum % 1000 - 1); / - 錯(cuò)誤位置：file 3;可以計(jì)算出，錯(cuò)誤出現(xiàn)在第三個(gè)文件中，范圍就縮小了很多。error 事件的注冊(cè)

20、多次注冊(cè) error 事件，不會(huì)重復(fù)執(zhí)行多個(gè)回調(diào)：var fn = window.onerror = function() console.log( arguments);window.addEventListener(error, fn);wi ndow.addEventListener(error, fn);觸發(fā)錯(cuò)誤之后，上面代碼的結(jié)果為：4Cbarrat/tcsthtmlcrossoriginQ 訂 Elements Network Sources TJmeline Profiles Resouro0 V? ;tjp frame?PreservE Jog. Errors Warnings

21、 Info LogsUncaught SyntaxError: Unexpected identifierj ftirrorventD Uncught SyntaxError: Unexpected identifierwindow.onerror 和 addEventListener 都執(zhí)行了，并只執(zhí)行了一次。收集日志的量沒(méi)有必要將所有的錯(cuò)誤信息全部送到 Log 中，這個(gè)量太大了。如果網(wǎng)頁(yè) PV 有 lkw,那么一個(gè)必現(xiàn)錯(cuò)誤發(fā)送的log信息將有l(wèi)kw條，大約一個(gè)G的日志。我 們可以給 Reporter 函數(shù)添加一個(gè)采樣率：function needReport (sampling) / sa

22、mpling: 0 - 1return Math.random() = sampling;Reporter.send = function(errInfo, sampling) if(needReport(samplin g | 1) Reporter._send(errInfo); ;這個(gè)采樣率可以按需求來(lái)處理，可以同上，使用一個(gè)隨機(jī)數(shù)，也可以使用 cookie 中的某個(gè)字段(如nickname )的最后一個(gè)字母/數(shù)字來(lái)判定，也可以將用戶的 nickname 進(jìn)行 hash 計(jì)算，再通過(guò)最后一位的字母/數(shù)字來(lái)判斷，總之，方法是 很多的。收集日志布點(diǎn)位置為了更加精準(zhǔn)的拿到錯(cuò)誤信息，有效地統(tǒng)計(jì)錯(cuò)

23、誤日志，我們應(yīng)該更多地采用主動(dòng) 式埋點(diǎn)，比如在一個(gè)接口的請(qǐng)求中：/ Module A Get Shops Data$.ajax( url: URL, dataType: jsonp, success: fun ction(ret) if(ret.status = failed) / 埋 點(diǎn) 1 return Reporter.send( category: WARN, msg: M odule_A_GET_SHOPS_DATA_FAILED ); if(!ret.data | !ret.data.length) / 埋點(diǎn) 2 return Reporter.send( category: WA

24、RN, msg: M odule_A_GET_SHOPS_DATA_EMPTY ); , error: functi on() / 埋點(diǎn) 3 Reporter.send( category: ERROR, msg: Module_ A_GET_SHOPS_DATA_ERROR ); );上面我們精準(zhǔn)地布下了三個(gè)點(diǎn)，描述十分清晰，這三個(gè)點(diǎn)會(huì)對(duì)我們后續(xù)排查線上 問(wèn)題提供十分有利的信息。關(guān)于 try.catch 的使用對(duì)于try.ca tch的使用，我的建議是：能不用，盡量不要用。JS代碼都是自 己寫(xiě)出來(lái)的，哪里會(huì)出現(xiàn)問(wèn)題，會(huì)出現(xiàn)什么問(wèn)題，心中應(yīng)該都有個(gè)譜，平時(shí)用到 try.catch 的一般只有兩

25、個(gè)地方：/ JSON 格式不對(duì)try JSON.parse(JSONString);catch(e)/ 存在不可 decode 的字符try decodeComponentURI(string);catch(e)類(lèi)似這樣的錯(cuò)誤都是不太可控的?？梢栽谑褂玫?try.catch 的地方思考是否可 以使用其他方式做兼容。關(guān)于 window.onerror 的使用可以嘗試如下代碼：/ test.jsthrow new Error(SHOW ME); window.onerror =function() console.log(arguments);/ 阻止在控制臺(tái)中打印錯(cuò)誤信息 return true;上面的代碼直接報(bào)錯(cuò)了，沒(méi)有繼續(xù)往下執(zhí)行。頁(yè)面中可能有好幾個(gè) script 標(biāo)簽， 但是 window.onerror 這個(gè)錯(cuò)誤監(jiān)聽(tīng)一定要放到最前頭！ 錯(cuò)誤的警報(bào)與提示 什么時(shí)候該警報(bào)？不能有錯(cuò)就報(bào)。上面也說(shuō)了，因?yàn)榫W(wǎng)絡(luò)環(huán)境和瀏覽器環(huán)境因素，復(fù)雜頁(yè)面我們?cè)试S千分之一的錯(cuò)誤率。日志處理后的數(shù)據(jù)圖：圖中有兩根線，橙色線是今日的數(shù)據(jù)，淺藍(lán)色線是往日平均數(shù)據(jù)，每隔 10 分鐘 產(chǎn)生一條記錄，橫坐標(biāo)是 0-24 點(diǎn)的時(shí)間軸，縱坐標(biāo)是錯(cuò)誤量?？梢院苊黠@的看 出，在凌晨一兩點(diǎn)左右，服務(wù)出現(xiàn)了異常，錯(cuò)誤信息是平均值的十幾倍，那么這 個(gè)時(shí)候就改報(bào)警了。報(bào)警的條件可以設(shè)置得