JS異常處理的一個想法(sofish)_javascript技巧

可能由於網頁、瀏覽器問題、快取等原因，可能導致線上執行 js 的時候與開發環境並不一樣，會拋出例外。 js 異常基本上是前端開發工程師的家常便飯。如何記錄，並使用它，卻很少人注意。最近在考慮一個想法，基本上涉及到兩個步驟：收集和使用。

一、收集
對於error 收集這一塊，還是比較方便的，因為在各瀏覽器中都有一個介面：window.onerror，程式碼如下：

複製程式碼 程式碼如下:

window.onerror = function(errorMessage, scriptURL, Number> >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）和存儲方式，是否繼續，還需要時間和進一步考慮，先發出來，拋磚引玉。