前端代码错误收集

前端的异常收集常用的两种方式：
<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

1. 可以捕捉语法错误，也可以捕捉运行时错误；
2. 可以拿到出错的信息，堆栈，出错的文件、行号、列号；
3. 只要在当前页面执行的js脚本出错都会捕捉到，例如：浏览器插件的javascript、或者flash抛出的异常等。
4. 跨域的资源需要特殊头部支持。

<span style="color: red">需要注意的是：</span>

1. window.onerror能捕捉到语法错误，但是语法出错的代码块不能跟window.onerror在同一个块
2. 对于跨域的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函数中的内容
    };
})

本文只列方法，不做讨论。另外关于错误的存储和展示，那是又一块大内容，暂不列举~