前言
用户的浏览环境非常复杂，很多情况无法靠测试用例去覆盖，所以最好建立一个前端错误日志，在真实用户端收集bug。
try&catch
try&catch是一个捕获前端错误的常见方法，比如：
|
1 2 3 4 5 6 |
try{ //给所有脚本设置一个统一入口，比如设置一个init函数 init(); }catch(e){ //处理错误，将错误信息上报给服务器 } |
像上面这样，所有脚本统一用init作为入口，一旦发生错误就会被try捕获，然后交给catch去处理。
这种做法虽然能够收集错误信息，但弊端是必须统一一个脚本入口，并且把入口放在try里面，所以在实现时会比较麻烦。
理想情况下，处理错误信息的脚本应该尽可能做到无痕，为了实现这一点，可以借助window.onerror事件。
在W3C规范里，window.onerror是html5新定义的事件，但实际上，window.onerror从IE6开始就被支持了，而chrome、firefox、safari、opera，目前也都已经支持该事件。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 基于window.onerror 收集前端错误信息 window.onerror = function(message, url, line) { if (!url) return; var msg = {}; //记录客户端环境 msg.ua = window.navigator.userAgent; //只记录message里的message属性就好了， //错误信息可能会比较晦涩，有些信息完全无用，应酌情过滤 msg.message = message.message; msg.url = url; msg.line = line; msg.page = window.location.href; var s = []; //将错误信息转换成字符串 for(var key in msg){ s.push(key + '=' + msg[key]); } s = s.join('&'); //这里是用增加标签的方法调用日志收集接口，优点是比较简洁。 new Image().src = '/ajax-jserror.php?' + encodeURIComponent(s) + '&t=' + Math.random(); }; |
这段代码只要最好放到head标签里，放在所有script之前，这样当用户浏览时发生的JS错误就会上报到服务器了。
这里有几个点需要注意，一个是日志收集接口暴露在外，最好增加安全措施，比如设置token。
另外，脚本部署的时机、位置，以及日志过滤等条件，也需要根据具体情况进行设定。
onerror的事件绑定
如果想用事件绑定的方法处理window.onerror，有一点需要特别注意:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if(window.addEventListener){ /* 需要特别注意addEventListener的第三个参数，是否在捕获阶段处理 这个参数，大多数时候用的都是false 在这里，chrome、firefox也都可以用false 但是opera用false时就无法处理error 必须设置为true，在捕获阶段处理error，脚本才能正常运行 */ window.addEventListener("error",fn,true); }else if(window.attachEvent){ //ie在这里表示无压力 window.attachEvent("onerror",fn); } |
参考自：Dx. Yang
真不知道，还有这么好心的博主 支持
这个方面的话题的 都讨论一下