前端错误日志监听

前言

后台有日志，会把一些错误的原记录下来，但是前端没有办法记录下来，所以我们利用和埋点类似的方式来记录这些错误，方便我们对项目进行优化

在这里我只是提供一个思路，一个方案。
我用vue来举个例子

可能有的人看过我关于数据埋点的那套方案，这套方案我们来沿用它

vue中在2.5之前可以使用全局的 config.errorHandler 设置来为应用提供一个监听未知异常的函数，2.5 中，组件内提供了一个新的钩子函数 errorCaptured，可以捕获该组件内所有子组件树中（不含自身）产生的所有的异常（包括异步调用中的异常），这个钩子函数接收的参数和 errorHandler 一样，可以让开发者更加友好地处理组件内异常。

前端代码

在这个函数中我们埋入一段代码

errorCaptured (err, vm, info) { 
 log(err,vm,info)//处理错误函数
 return false
 }

处理错误函数代码

function log (err,vm,info) {
    var params = {};
    
    params.err = err||null;
    params.vm = vm||null;
    params.info = info||null
    //拼接参数串
    var args = '';
    for(var i in params) {
        if(args != '') {
            args += '&';
        }
        args += i + '=' + encodeURIComponent(params[i]);
    }
    //通过Image对象请求后端脚本
    var img = new Image(1, 1);
    img.src = 'http://127.0.0.1:9100/log.gif?' + args;
}

服务器

之后的代码请参考我的埋点方案

手把手教你做数据埋点

python-nginx日志埋点导入mysql