移動Web開發過程中，在真機測試時，往往會遇到一些PC調試無法重制的問題，這時候我們需要在手機上攔截錯誤，并有相應的輸出。公司和網上都有類似的工具/類庫，但如果純粹一個簡單的調試，或許不需要引入工具或類庫，我們隻需要知道全局攔截的原理。
其實很簡單，就是window.onerror
文法：
οnerrοr=handleErr
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}
浏覽器是否顯示标準的錯誤消息，取決于 onerror 的傳回值。如果傳回值為 false，則在控制台 (JavaScript console) 中顯示錯誤消息。反之則不會。
執行個體：
下面的例子展示如何使用 onerror 事件來捕獲錯誤：
<html>
<head>
<script type="text/javascript">
οnerrοr=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}
function message()
{
adddlert("Welcome guest!")
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()" />
</body>
</html>
另外，如果我們想在chrome控制台中直接模拟這個過程，會發現，直接使用throw new Error，無法觸發這個onerror，這個可能是因為控制台的環境跟頁面環境不一樣。
但換一個方式，就可以觸發了：
setTimeout(function(){throw new Error}, 1000)
而實際上要做好bug監控，單單onerror是不夠的。
相容浏覽器坑在哪裡？
- Error對象的屬性各有不同，例如大名鼎鼎的Chrome的Error對象木有fileName，lineNumber以及columnNumber屬性;
- Onerror事件的參數各有不同，例如老版本的Firefox木有columnNumber 和error參數
- API不同，例如老版本的IE木有JSON對象;
- 同一個屬性名在不同浏覽器的含義不同；
- 同一個屬性在不同浏覽器的名稱不同；
- 國内浏覽器的IE相容模式與真正的IE也略有不同;
- ……
這些問題大概前端工程師都會深有同感吧。
錯誤智能聚合
同樣的代碼産生的同一個錯誤，在不同浏覽器上的報錯資訊是各不相同的。name不同的錯誤可能是同一個錯誤，例如SyntaxError與ReferenceError；message不同的錯誤可能是同一個錯誤，例如can not find variable fundebug與fundebug is not defined。并且，同一個錯誤在不同浏覽器下的lineNumber，columnNumber，stack，與url都有可能不同。
對于這個問題，我們對收集的錯誤利用機器學習算法進行了智能聚合，盡量将同一個錯誤聚合到一起，減少重複報警。根據我們的初步估算，目前聚合算法能夠将90%的重複錯誤成功聚合，這樣極大地提高了使用者分析錯誤的效率。
Fundebug是前端JavaScript錯誤實時監控平台，經過大量相容性調試，Fundebug的JavaScript監控插件已經能夠在各種主流浏覽器中自動捕獲錯誤，并且可以擷取最全面的錯誤資訊，幫助開發者更快的Debug。
您可能感興趣的
- 詳解1000+項目資料分析出來的10大JavaScript錯誤
- 提示“使用者名或密碼不正确”很糟糕
- Debug前端HTML/CSS
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)