可能由于網(wǎng)絡(luò)、瀏覽器問(wèn)題、緩存等原因，可能導(dǎo)致線(xiàn)上執(zhí)行 js 的時(shí)候與開(kāi)發(fā)環(huán)境并不一樣，會(huì)拋出異常。js 異?；旧鲜乔岸碎_(kāi)發(fā)工程師的家常便飯。如何記錄，并使用它，卻很少人關(guān)注。最近在考慮一個(gè)想法，基本上涉及到兩步：收集和使用。

一、收集
對(duì)于 error 收集這一塊，還是比較方便的，因?yàn)樵诟鳛g覽器中都有一個(gè)接口：window.onerror，代碼如下：

甚至中提供了 Stack Trace，比如在 try/catch 中還提供了 e.stack（各個(gè)瀏覽器不同，可以使用 eriwen/javascript-stacktrace 這個(gè)兼容庫(kù)），試一下下面這段代碼：

所以收集這些錯(cuò)誤還是比較方便的，這里需要注意的事，使用 window.addEventListener('error', callback, isBubble) 中 callback 的第一個(gè)參數(shù)并不是 event，而是一個(gè) Error object。這樣的話(huà)，為了方便，使用 window.onerror 是一個(gè)不錯(cuò)的選擇，但通過(guò) dot 操作符監(jiān)聽(tīng)的事件是可以重載的，并且這段監(jiān)聽(tīng)腳本理論上是放在所有 js 最前面的，所以需要考慮其中的風(fēng)險(xiǎn)。

二、使用
之前在支付寶的時(shí)候，線(xiàn)上 js 報(bào)錯(cuò)會(huì)變成一個(gè)郵件，發(fā)給前端開(kāi)發(fā) team，每個(gè)人自己認(rèn)領(lǐng)、解決。其實(shí)這是一個(gè)不錯(cuò)的選擇，也解決了最基本的問(wèn)題：立即響應(yīng)，修掉。不過(guò)也存在著一個(gè)問(wèn)題，如果避免同樣的錯(cuò)誤？我的初步想法是這樣的： 以 URL 為單元，記錄同一個(gè)頁(yè)面的報(bào)錯(cuò)：方便統(tǒng)一解決 記錄錯(cuò)誤包括：Page URL, User Agent, Script URL, Error Message 和 Line Number 每個(gè)錯(cuò)誤解決后，都可以在一個(gè)地方寫(xiě)解決方案，看到的人可以評(píng)論、加分，最終會(huì)存檔起來(lái)，作為一個(gè)知識(shí)庫(kù)，并用有方便的 api 可以使用這些知識(shí)庫(kù)的內(nèi)容 在開(kāi)發(fā)的時(shí)候，相同頁(yè)面 window.onerror 的時(shí)候，通過(guò)插件，分析 Error Message 識(shí)別出類(lèi)型，加上 URL 的判斷，給予開(kāi)發(fā)者提醒前人犯過(guò)的錯(cuò)誤 開(kāi)發(fā)者可以訂閱知識(shí)庫(kù)上某些標(biāo)簽，自動(dòng)接收郵件（當(dāng)然也可以根據(jù)文件注釋、mapping 等方式做更好的配對(duì)） 為什么這樣做？主要是為了解決下面的一些問(wèn)題： 形成知識(shí)庫(kù)，開(kāi)發(fā)者可以從中得到學(xué)習(xí)，特別是新人 工具保證效率的提升和避免重復(fù)錯(cuò)誤重復(fù)解決 訂閱保證通知更具針對(duì)性

三、注意點(diǎn)
1. 收集的時(shí)候使用 POST 發(fā)送 有時(shí)候 Error Message 可能會(huì)比較長(zhǎng)，而瀏覽器的 URL 長(zhǎng)度是有限制的，如果存的錯(cuò)誤不多的話(huà)，可以考慮用 GET 發(fā)送，但通常來(lái)說(shuō) POST 可以把所有數(shù)據(jù)都發(fā)送到后臺(tái)。 2. 何時(shí)發(fā)送數(shù)據(jù) 建議在觸發(fā) onerror 的時(shí)候發(fā)送。在第一次有這個(gè)想法的時(shí)候，嘗試著在 onbeforeonload 的時(shí)候發(fā)送，但 POST 請(qǐng)求還沒(méi) open 就已經(jīng)被瀏覽器中斷了。 3. 存于數(shù)據(jù)庫(kù)以哪個(gè)作為索引比較好？ 通常來(lái)說(shuō)以 URL 可能會(huì)比較適合多數(shù)網(wǎng)站。但像百姓網(wǎng)、淘寶等 UGC 比較多的網(wǎng)站，可能需要變通一下以記錄 URL。畢竟不同帖子不同 URL 都是同一套代碼。 那以 Error 作為索引呢？其實(shí)無(wú)論是那種，看自己需求選擇吧。 4. 是否記錄所有錯(cuò)誤 這個(gè)也比較合適根據(jù)需求來(lái)看。百姓網(wǎng)有各種亂七八糟的報(bào)錯(cuò)可能都是來(lái)自到 baidu / Google 的 ad 外鏈。

四、結(jié)語(yǔ)
目前初步實(shí)現(xiàn)了一個(gè)收集的工具（sofish/stacktrace.js）和存儲(chǔ)方式，是否繼續(xù)，還需要時(shí)間和進(jìn)一步考慮，先發(fā)出來(lái)，拋磚引玉。

最新評(píng)論