處理JS異常的一個想法
可能由于網(wǎng)絡(luò)、瀏覽器問題、緩存等原因，可能導(dǎo)致線上執(zhí)行 js 的時候與開發(fā)環(huán)境并不一樣，會拋出異常。js 異常基本上是前端開發(fā)工程師的家常便飯。如何記錄，并使用它，卻很少人關(guān)注。最近在考慮一個想法，基本上涉及到兩步：收集和使用。
一、收集
對于 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 的第一個參數(shù)并不是 event，而是一個 Error object。這樣的話，為了方便，使用 window.onerror 是一個不錯的選擇，但通過 dot 操作符監(jiān)聽的事件是可以重載的，并且這段監(jiān)聽腳本理論上是放在所有 js 最前面的，所以需要考慮其中的風(fēng)險。
二、使用
·之前在支付寶的時候，線上 js 報錯會變成一個郵件，發(fā)給前端開發(fā) team，每個人自己認領(lǐng)、解決。其實這是一個不錯的選擇，也解決了最基本的問題：立即響應(yīng)，修掉。不過也存在著一個問題，如果避免同樣的錯誤？我的初步想法是這樣的：
·以 URL 為單元，記錄同一個頁面的報錯：方便統(tǒng)一解決
·記錄錯誤包括：Page URL, User Agent, Script URL, Error Message 和 Line Number
·每個錯誤解決后，都可以在一個地方寫解決方案，看到的人可以評論、加分，最終會存檔起來，作為一個知識庫，并用有方便的 api 可以使用這些知識庫的內(nèi)容
·在開發(fā)的時候，相同頁面 window.onerror 的時候，通過插件，分析 Error Message 識別出類型，加上 URL 的判斷，給予開發(fā)者提醒前人犯過的錯誤
·開發(fā)者可以訂閱知識庫上某些標簽，自動接收郵件（當然也可以根據(jù)文件注釋、mapping 等方式做更好的配對）
為什么這樣做？主要是為了解決下面的一些問題：
·形成知識庫，開發(fā)者可以從中得到學(xué)習(xí)，特別是新人
·工具保證效率的提升和避免重復(fù)錯誤重復(fù)解決
·訂閱保證通知更具針對性
三、注意點
1. 收集的時候使用 POST 發(fā)送
有時候 Error Message 可能會比較長，而瀏覽器的 URL 長度是有限制的，如果存的錯誤不多的話，可以考慮用 GET 發(fā)送，但通常來說 POST 可以把所有數(shù)據(jù)都發(fā)送到后臺。
2. 何時發(fā)送數(shù)據(jù)
建議在觸發(fā) onerror 的時候發(fā)送。在第一次有這個想法的時候，嘗試著在 onbeforeonload 的時候發(fā)送，但 POST 請求還沒 open 就已經(jīng)被瀏覽器中斷了。
3. 存于數(shù)據(jù)庫以哪個作為索引比較好？
通常來說以 URL 可能會比較適合多數(shù)網(wǎng)站。但像百姓網(wǎng)、淘寶等 UGC 比較多的網(wǎng)站，可能需要變通一下以記錄 URL。畢竟不同帖子不同 URL 都是同一套代碼。
那以 Error 作為索引呢？其實無論是那種，看自己需求選擇吧。
4. 是否記錄所有錯誤
這個也比較合適根據(jù)需求來看。百姓網(wǎng)有各種亂七八糟的報錯可能都是來自到 baidu / Google 的 ad 外鏈。
四、結(jié)語
目前初步實現(xiàn)了一個收集的工具（sofish/stacktrace.js）和存儲方式（以 URL 為索引），是否繼續(xù)，還需要時間和進一步考慮，先發(fā)出來，拋磚引玉。
五、附錄
- <?php
- $url = new Url();
- $page = $url->post('page');
- if(!$page) return;
- class ErrorTrace extends MongoData {
- // MongoData 中沒有，區(qū)別 http://stackoverflow.com/a/7958954
- public function findOne($obj) {
- return $this->connection->findOne($obj);
- }
- };
- $store = new ErrorTrace();
- $fields = array(
- 'url' => $url->post('url'),
- 'message' => $url->post('message'),
- 'line' => $url->post('line'),
- 'ua' => $url->post('ua'),
- );
- $index = array('page' => $page);
- $hash = md5(json_encode($fields));
- // 不重復(fù)記錄一個錯誤，所有錯誤記錄在同一個 URL 下
- if($field = $store->findOne($index)) {
- if(isset($field[$hash])) return;
- return $store->setAttr(new Query('page', $page), $hash, $fields);
- }
- $store->page = $page;
- $store->$hash = $fields;
- $store->save();
- ?>
