前端日志发送到服务器

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

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();

 

若依前端日志记录的信息保存到服务器可以采用以下方法: #### 利用 Image 对象发送请求 可以使用 Image 对象来发送请求,将日志信息传递到服务器。这种方式具有一定的灵活性,所有浏览器都支持 Image 对象,包括那些不支持 XMLHttpRequest 对象的浏览器,还能避免跨域限制,且在记录错误的过程中出问题的概率比较低。以下是示例代码: ```javascript function logError(severity, message) { const img = new Image(); const logData = `severity=${encodeURIComponent(severity)}&message=${encodeURIComponent(message)}`; img.src = `http://your-server-url/log?${logData}`; } // 调用示例 logError('error', '这是一条错误日志信息'); ``` #### 借助 XMLHttpRequest Fetch API 使用 XMLHttpRequest Fetch API 可以将日志信息以异步请求的方式发送到服务器。以下是使用 Fetch API 的示例代码: ```javascript function sendLogToServer(logInfo) { fetch('http://your-server-url/log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(logInfo) }) .then(response => { if (!response.ok) { throw new Error('网络响应不正常'); } return response.json(); }) .then(data => { console.log('日志发送成功:', data); }) .catch(error => { console.error('日志发送失败:', error); }); } // 调用示例 const logInfo = { level: 'info', message: '这是一条普通日志信息', timestamp: new Date().toISOString() }; sendLogToServer(logInfo); ``` #### 前端日志系统记录 CommonJS 模块在运行过程中产生的各种事件和信息会传递给前端日志系统。前端日志系统根据信息的重要性和类型进行分类并记录,记录的日志可以发送到服务器进行存储和分析。流程如下:CommonJS 模块产生运行信息,前端日志系统进行日志分类、日志记录,最后将日志发送到服务器存储[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值