前端日志发送到服务器

最新推荐文章于 2024-06-21 18:28:49 发布

wangtf6

最新推荐文章于 2024-06-21 18:28:49 发布

阅读量920

点赞数

分类专栏： JS学习文章标签：前端错误日志

本文链接：https://blog.csdn.net/wangtf6/article/details/84704252

版权

JS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

后台日志处理会帮我们解决好多用户遇到的问题，但是不同的用户环境造成的前端问题，会对我们造成不可预知的错误，我们没办法去一直麻烦用户帮我们去找问题，最好的解决方法就是把前端的错误日志也记录下来，这样可以帮助我们很快的定位到错误，下面是一段前端错误发送到后台的进行日志处理方法。

var logger = (function(){
    var loghost = 'http://127.0.0.1/log.gif?';
    var log = function(err){
        var img = new Image(0,0);
        var _url =[];
        _url.push('name'+'='+encodeURIComponent(err.name));
        _url.push('message'+'='+encodeURIComponent(err.message));
        _url.push('location'+'='+encodeURIComponent(err.location));
        if(err.line)
            _url.push('line'+'='+encodeURIComponent(err.line));
        if(err.func)
            _url.push('func'+'='+encodeURIComponent(err.func));

        var url = _url.join('&');
        img.src = loghost+url;
        console.log(img.src);
    }
    return {log:log};
})();

function trapError(msg, URI, ln) {
    // wrap our unknown error condition in an object
    var error = new Error(msg);
    error.location = URI; // add custom property
    error.line = ln;
    logger.log(error);
    warnUser();
    return true; // stop the yellow triangle
}

window.onerror = trapError;

function foo() {
    try {
        riskyOperation();
    } catch (err) {
        // add custom property
        err.location = location.href;
        err.func = 'foo';
        logger.log(err);
        warnUser();
    }
}
function warnUser() {
    alert("An error has occurred while processing this page.\
        Our engineers have been alerted!");
    // do something
}
foo();