2017-06-08 • 于 js 阅读

前端代码错误收集（一）

前端的异常收集常用的两种方式：

1.try catch

使用一个webpack的loader babel_try_catch_loader对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抛出的异常等。
跨域的资源需要特殊头部支持。

需要注意的是：

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函数中的内容
    };
})

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

Jimliu

前端代码错误收集（一）

1.try catch

2.window.onerror

JavaScript错误类型

mysql索引