知識星球作者：李靖（@Barret李靖）
網址：http://www.cnblogs.com/hustskyking/p/fe-monitor.html
在複雜的網路環境和瀏覽器環境下，自測、QA測試以及 Code Review 都是不夠的，如果對頁面穩定性和準確性要求較高，就必須有一套完善的程式碼異常監控體系，本文從前端程式碼異常監控的方法和問題著手，儘量全面地闡述錯誤日誌收集各個階段中可能遇到的阻礙和處理方案。
☞ 收集日誌的方法
平時收集日誌的手段，可以歸類為兩個方面，一個是邏輯中的錯誤判斷，為主動判斷；一個是利用語言給我們提供的捷徑，暴力式獲取錯誤資訊，如 try..catch 和 window.onerror。
1. 主動判斷
我們在一些運算之後，得到一個期望的結果，然而結果不是我們想要的
// test.js
function calc(){
// code…
return val;
}
if(calc() !== “someVal”){
Reporter.send({
position: “test.js::
calc” msg: “calc error”
});
}
這種屬於邏輯錯誤/狀態錯誤的反饋，在介面 status 判斷中用的比較多。
2. try..catch 捕獲
判斷一個程式碼段中存在的錯誤：
try {
init();
// code…
} catch(e){
Reporter.send(format(e));
}
以 init 為程式的入口，程式碼中所有同步執行出現的錯誤都會被捕獲，這種方式也可以很好的避免程式剛跑起來就掛。
3. window.onerror
捕獲全域性錯誤：
window.onerror = function() {
var errInfo = format(arguments);
Reporter.send(errInfo);
return true;
};
在上面的函式中傳回 return true，錯誤便不會暴露到控制臺中。下麵是它的引數資訊：
/**
* @param {String} errorMessage 錯誤資訊
* @param {String} scriptURI 出錯的檔案
* @param {Long} lineNumber 出錯程式碼的行號
* @param {Long} columnNumber 出錯程式碼的列號
* @param {Object} errorObj 錯誤的詳細資訊，Anything
*/
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
// code..
}
window.onerror 算是一種特別暴力的容錯手段，try..catch 也是如此，他們底層的實現就是利用 C/C++ 中的 goto 陳述句實現，一旦發現錯誤，不管目前的堆疊有多深，不管程式碼執行到了何處，直接跑到頂層或者 try..catch 捕獲的那一層，這種一腳踢開錯誤的處理方式並不是很好。
☞ 收集日誌存在的問題
收集日誌的目的是為了及時發現問題，最好日誌能夠告訴我們，錯誤在哪裡，更優秀的做法是，不僅告訴錯誤在哪裡，還告訴我們，如何處理這個錯誤。終極標的是，發現錯誤，自動容錯，這一步是最難的。
1. 無具體報錯資訊，Script error.
先看下麵的例子，test.html