`

前端日志发送到服务器

阅读更多

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

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

 

分享到:
评论

相关推荐

    frontEndLog前端日志监控

    为了实现前端日志的统一管理和远程收集,通常需要自定义日志模块,支持不同级别的日志(如DEBUG、INFO、WARN、ERROR),并能将日志发送到服务器。 接着,前端日志的分类与处理: 1. 错误日志:捕获和记录运行时...

    将Logback日志输出到websocket

    这种组合使得应用程序能够实时地将日志信息推送到前端展示,而不仅仅是通过传统的文件或日志服务器。 描述中的关键点包括: 1. **无需读取日志文件**:传统方式下,日志通常被写入到磁盘文件中,然后由其他进程读取...

    logjs前端日志工具提供简易的API可以通过配置level和appender来输出日志

    或者创建一个网络appender,将日志发送到服务器,实现集中化的日志管理。这种灵活性使得logjs在各种项目中都能得心应手。 在实际使用logjs时,配置文件通常是必要的。例如,你可能会看到这样的配置: ```...

    logline轻量实用和客户端级的前端日志记录工具

    **logline:前端日志记录工具的精简与高效** 在现代Web开发中,日志记录是不可或缺的一部分,它帮助开发者追踪应用程序的行为,诊断错误,优化性能,以及提供用户行为的洞察。`logline`是一个专为前端设计的轻量级...

    实时打印 linux 服务器日志项目

    1. **设置服务器**:创建一个服务器端程序,定期读取目标日志文件(可能使用`tail -f`或更底层的文件I/O操作),并在检测到新内容时,通过WebSocket接口发送更新。 2. **建立WebSocket连接**:在客户端(例如网页)...

    使用kindeditor实现自定义邮件模板,后台根据不同数据动态生成邮件进行发送,前端简单实现demo

    用户编辑完模板后,前端需要将模板内容发送到后台。这通常通过Ajax异步请求实现,使用如jQuery的$.ajax或现代JavaScript的fetch API。同时,前端也需要处理反馈信息,如显示发送结果、错误提示等。 **安全与性能...

    用于将日志发送到SignalR集线器的自定义NLog目标。此版本基于SignalR2.0。_JavaScript_C#_.zip

    在这个项目中,自定义的NLog目标会将日志信息转发到集线器,集线器再将这些日志广播到所有已连接的客户端,这样开发者可以在前端页面实时查看服务器日志,这对于调试和监控系统状态非常有用。 NLog.SignalR-master ...

    前端错误、性能、安全日志收集系统,涉及到nodejs、mongodb、websocket等等内容.zip

    前端应用可以使用WebSocket API监听日志事件,并在发生错误、性能问题或安全事件时立即发送到服务器,而不是等待定期轮询。这样,服务器可以实时响应并快速处理问题,提高系统的响应速度。 项目可能包含以下核心...

    影城项目前端项目服务器

    而服务器则是处理前端发送的请求,提供所需数据或执行业务逻辑的地方。在这个项目中,"bmd_server"很可能是一个包含Node.js服务的应用,因为Node.js常用于构建服务器端的JavaScript应用。 为了在本地启动这个服务,...

    配置Nginx前端Apache后端服务器

    该指令用于向后端服务器发送额外的HTTP头信息,确保Apache接收到正确的客户端信息。例如,`proxy_set_header X-Real-IP $remote_addr;`将客户端的真实IP地址传递给Apache。 ##### proxy_pass 指令 `proxy_pass`用于...

    (源码)基于React和Python的端到端测试日志管理系统.zip

    系统通过中间件和Saga配置捕获React应用的动作,并将这些日志发送到后端服务器进行存储和分析。 ## 项目的主要特性和功能 1. 日志收集通过中间件捕获React应用的动作和状态,并将这些日志发送到后端服务器。 2. ...

    前端项目-jsnlog.zip

    前端项目-jsnlog,简单日志记录包。在客户端和/或服务器上使用。在客户机上,将日志发送到服务器,并将其存储在现有的服务器端日志中。在服务器上,登录到控制台或使用Winston传输。非常适合记录异常、Ajax超时。

    前端开源库-ewg-logging

    5. **多种输出方式**:默认情况下,日志可能会打印在浏览器控制台,但`ewg-logging`还支持将日志发送到服务器、存储在本地存储或者通过其他方式进行持久化,以便后期分析。 6. **模块化设计**:库采用模块化设计,...

    nxlog日志上传工具

    3. **日志发送**:转换后的syslog消息可以通过TCP、UDP或SSL/TLS等网络协议发送到远程日志服务器,确保日志传输的安全性和可靠性。 4. **过滤与解析**:nxlog 提供了灵活的日志过滤和解析规则,允许用户根据需要...

    前端开源库-coz-logger

    4. **处理器插件**:通过插件系统,可以添加额外的功能,如日志持久化、发送到远程服务器等。 5. **模块化设计**:每个模块可以有自己的日志实例,便于区分和管理不同部分的日志信息。 在实际应用中,`coz-logger` ...

    SMARTBI连接服务器做文件上传操作

    这个接口通常由后端编程语言如Java、Python、Node.js等实现,它接收前端发送过来的文件数据,并将其保存到服务器的特定目录。这个目录需要提前设置好,并确保有相应的权限允许SMARTBI服务写入文件。 在SMARTBI的...

    基于Websocket的远程日志查看系统

    这对于实时日志查看非常有用,因为开发者不再需要频繁刷新页面来获取最新的日志信息,而是可以实时接收到服务器端生成的日志更新。 首先,Websocket的核心在于它的握手过程。当客户端发起一个WebSocket连接请求时,...

    summernote集成前端oss上传图片到阿里云服务器

    在前端,应用会向后端服务器请求一个带有时效性的签名,这个签名包含在上传请求中,允许前端向OSS发送文件。 - **JavaScript SDK**:阿里云提供了JavaScript SDK,便于在前端与OSS服务交互。通过SDK,你可以创建...

    前端开源库-nce-winston

    nce-winston可能也实现了这些transports,使前端应用可以将日志发送到不同的目的地。 前端开源库的使用通常涉及以下知识点: 1. **模块化和打包**:nce-winston可能是一个ES6模块,可以使用import语句导入到项目中...

    koa给前端发送请求,定义中间件处理请求并使用

    本篇将详细介绍如何使用Koa来为前端发送请求,并定义中间件来处理这些请求。 首先,让我们了解Koa的基本概念。Koa的核心是其中间件机制,它采用了洋葱模型,即请求会逐层穿透中间件,直到被某个中间件处理后返回...

Global site tag (gtag.js) - Google Analytics