可能由於網絡、浏覽器問題、緩存等原因，可能導致線上執行 js 的時候與開發環境並不一樣，會拋出異常。js 異常基本上是前端開發工程師的家常便飯。如何記錄，並使用它，卻很少人關注。最近在考慮一個想法，基本上涉及到兩步：收集和使用。
一、收集
對於 error 收集這一塊，還是比較方便的，因為在各浏覽器中都有一個接口：window.onerror，代碼如下：
復制代碼 代碼如下:
window.onerror = function(errorMessage, scriptURL, lineNumber) {
alert(errorMessage, scriptURL, lineNumber)
}
甚至中提供了 Stack Trace，比如在 try/catch 中還提供了 e.stack（各個浏覽器不同，可以使用 eriwen/javascript-stacktrace 這個兼容庫），試一下下面這段代碼：
復制代碼 代碼如下:
try {
fn()
} catch(e) {
alert(e.stack)
}
所以收集這些錯誤還是比較方便的，這裡需要注意的事，使用 window.addEventListener('error', callback, isBubble) 中 callback 的第一個參數並不是 event，而是一個 Error object。這樣的話，為了方便，使用 window.onerror 是一個不錯的選擇，但通過 dot 操作符監聽的事件是可以重載的，並且這段監聽腳本理論上是放在所有 js 最前面的，所以需要考慮其中的風險。
二、使用
之前在支付寶的時候，線上 js 報錯會變成一個郵件，發給前端開發 team，每個人自己認領、解決。其實這是一個不錯的選擇，也解決了最基本的問題：立即響應，修掉。不過也存在著一個問題，如果避免同樣的錯誤？我的初步想法是這樣的： 以 URL 為單元，記錄同一個頁面的報錯：方便統一解決 記錄錯誤包括：Page URL, User Agent, Script URL, Error Message 和 Line Number 每個錯誤解決後，都可以在一個地方寫解決方案，看到的人可以評論、加分，最終會存檔起來，作為一個知識庫，並用有方便的 api 可以使用這些知識庫的內容 在開發的時候，相同頁面 window.onerror 的時候，通過插件，分析 Error Message 識別出類型，加上 URL 的判斷，給予開發者提醒前人犯過的錯誤 開發者可以訂閱知識庫上某些標簽，自動接收郵件（當然也可以根據文件注釋、mapping 等方式做更好的配對） 為什麼這樣做？主要是為了解決下面的一些問題： 形成知識庫，開發者可以從中得到學習，特別是新人 工具保證效率的提升和避免重復錯誤重復解決 訂閱保證通知更具針對性
三、注意點
1. 收集的時候使用 POST 發送 有時候 Error Message 可能會比較長，而浏覽器的 URL 長度是有限制的，如果存的錯誤不多的話，可以考慮用 GET 發送，但通常來說 POST 可以把所有數據都發送到後台。 2. 何時發送數據 建議在觸發 onerror 的時候發送。在第一次有這個想法的時候，嘗試著在 onbeforeonload 的時候發送，但 POST 請求還沒 open 就已經被浏覽器中斷了。 3. 存於數據庫以哪個作為索引比較好？ 通常來說以 URL 可能會比較適合多數網站。但像百姓網、淘寶等 UGC 比較多的網站，可能需要變通一下以記錄 URL。畢竟不同帖子不同 URL 都是同一套代碼。 那以 Error 作為索引呢？其實無論是那種，看自己需求選擇吧。 4. 是否記錄所有錯誤 這個也比較合適根據需求來看。百姓網有各種亂七八糟的報錯可能都是來自到 baidu / Google 的 ad 外鏈。
四、結語
目前初步實現了一個收集的工具（sofish/stacktrace.js）和存儲方式，是否繼續，還需要時間和進一步考慮，先發出來，拋磚引玉。