前端的异常收集常用的两种方式：
<a href="https://blog.jimliu.xyz/2017/06/08/feerr/">原文地址</a>
1.try catch
使用一个webpack的loader <a href="https://github.com/foio/babel_try_catch_loader">babel_try_catch_loader</a>对js代码进行包裹。
打包完成后，所有的函数块会被加上try catch 我们只需在全局空间定义catch的函数，然后进行收集。
使用try catch 我们可以捕获到
1.错误信息
2.文件名
3.函数块行号
4.函数名称
当然其他的一些信息我们可以在catch的错误函数中添加，例如时间，UA，项目名称等。
但是try,catch的方案有2个缺点：
没法捕捉try,catch块，当前代码块有语法错误，JS解释器压根都不会执行当前这个代码块，所以也就没办法被catch住；
没法捕捉到全局的错误事件，也即是只有try,catch的块里边运行出错才会被你捕捉到，这里的块你要理解成一个函数块。
所以当我们使用try-catch方式来进行错误收集时，我们代码最好使用函数式思想来编写。
2.window.onerror
- 可以捕捉语法错误，也可以捕捉运行时错误；
- 可以拿到出错的信息，堆栈，出错的文件、行号、列号；
- 只要在当前页面执行的js脚本出错都会捕捉到，例如：浏览器插件的javascript、或者flash抛出的异常等。
- 跨域的资源需要特殊头部支持。
<span style="color: red">需要注意的是：</span>
- window.onerror能捕捉到语法错误，但是语法出错的代码块不能跟window.onerror在同一个块
- 对于跨域的JS资源，window.onerror拿不到详细的信息，需要往资源的请求添加额外的头部。
window.onerror = (msg, url, line, col, error) => {
//没有URL不上报！上报也不知道错误
if (msg != "Script error." && !url) {
return true;
}
setTimeout(() => {
var data = {};
//不一定所有浏览器都支持col参数
col = col || (window.event && window.event.errorCharacter) || 0;
data.url = url;
data.line = line;
data.col = col;
if (!!error && !!error.stack) {
//如果浏览器有堆栈信息
//直接使用
data.msg = error.stack.toString();
} else if (!!arguments.callee) {
//尝试通过callee拿堆栈信息
var ext = [];
var f = arguments.callee.caller, c = 3;
//这里只拿三层堆栈信息
while (f && (--c > 0)) {
ext.push(f.toString());
if (f === f.caller) {
break;//如果有环
}
f = f.caller;
}
ext = ext.join(",");
data.msg = ext;
}
//把data上报到后台！
//这里可以做日志上报
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = someURL + data;
}, 0);
return false;
};
window.onerror 看似完美，但当前这种环境下，框架都会自己拦截到err 然后再打印到控制台，像angular。
在angular中需要写一个注入方法替换默认错误处理方法：
.factory('$exceptionHandler', function() {
return function errHandle(e) {
//这里放window.onerror函数中的内容
};
})
本文只列方法，不做讨论。另外关于错误的存储和展示，那是又一块大内容，暂不列举~
