前端代码的错误日志收集了解一下

changfeng1050 发布于2019-08-26 11:59 / 2887人阅读

摘要：前言开发应用程序过程中的一种常见的做法就是集中保存错误日志以便查找重要错误的原因就像数据库和服务器都会定期写入日志一样在复杂的应用程序中我们同样推荐你把错误也回写到服务器换句话再说我们也可以将这些错误写入到保存服务器端错误的地方只不过标明他

前言

开发web应用程序过程中的一种常见的做法,就是集中保存错误日志,以便查找重要错误的原因.
就像数据库和服务器都会定期写入日志一样,在复杂的web应用程序中,我们同样推荐你把JavaScript错误也回写到服务器,换句话再说,我们也可以将这些错误写入到保存服务器端错误的地方,只不过标明他们来自前端.从而把前端的错误集中起来,可以及大地方便前端开发者分析代码.

具体操作 主要思想

后端需要提供一个接收错误信息的接口,把接收到的错误信息存放在一个日志文件中,比如 font-msg.log.
前端在比较可能会出现错误的地方用 try{}catch(err){} 语句来捕获,然后通过一些可以发送请求的方法,把收集到的报错信息发送到这个后端提供的日志接口.
这样就得到了前端的报错日志了,开发者可以经常去查看,分析自己代码中的不足,优化改善代码.

代码示例 前端代码示例

前端代码中,我们使用了Image对象来发送请求,这样做非常灵活,主要原因如下:

所有浏览器都支持Image对象;

可以避免跨域限制,img的src属性可以实现跨域访问.

在记录错误的过程中出问题的概率比较低.




    
    收集前端日志实例页面
    


    日志收集学习

补充:
评论里有朋友建议使用window.onerror事件,我在这里引用一下JavaScript高级程序设计(第三版)的书中对这个事件的解释:

任何没有通过try-catch处理的错误都会触发window对象的error事件,在任何web浏览器中,onerror事件处理程序都不会创建event对象,但它可以接收三个参数: 错误信息,错误所在的URL和行号.多数情况下,只有错误信息有用,因为URL只给出了文档的位置,而行号所指的代码既可能出自内部JavaScript代码,也可能出自外部文件.
只要发生错误,无论是不是浏览器生成的,都会触发error事件

window.onerror = function (message, url, line) {
    alert(message);
    return false;
}

通过返回false,这个函数实际就充当了整个文档的try-catch语句,可以捕获所有无代码处理的运行错误.但是浏览器在使用这个事件处理错误的方式有明显不同,在IE中,即使发生onerror事件,代码仍然会正常执行,所有变量和数据都将得到保留,因此能在onerror事件处理程序中访问它们,但在firefox中,常规代码会停止执行,事件发生之前的所有变量和数据都将被销毁,因此几乎就无法判断错误了,且另外window.onerror事件不能捕获promise的异常错误信息.
所以我在这里使用的是try...catch...,但是我觉得具体的使用方法可以根据自己的业务需求来确定,我这里只是做一个示例,实际的实现途径还有很多,但是万法同宗.

后端代码示例

这里我使用node写了一个日志采集的接口,并将采集到的信息写入日志文件.

app.js(主入口文件):

const Koa = require("koa");
const app = new Koa();

const router = require("./router");
const axios = require("axios")

app.use(router.routes());
app.use(router.allowedMethods());

app.on("error", function (err, ctx) {
    console.log(err)
})
app.listen(4000, function (ctx) {
    console.log("i am listening"); 
})

router/index.js(路由入口文件):

const koaRouter = require("koa-router");
const router = new koaRouter();

const log4js = require("log4js");
var config = {
    "replaceConsole": true,
    "appenders": {
        "stdout": { 
            "type": "stdout"
        },
        "req": {
            "type": "dateFile",
            "filename": "logs/reqlog/",
            "pattern": "req-yyyy-MM-dd.log",
            "alwaysIncludePattern": true
        },
        "err": {
            "type": "dateFile",
            "filename": "logs/errlog/",
            "pattern": "err-yyyy-MM-dd.log",
            "alwaysIncludePattern": true
        },
        "oth": {
            "type": "dateFile",
            "filename": "logs/othlog/",
            "pattern": "oth-yyyy-MM-dd.log",
            "alwaysIncludePattern": true
        }
    },
    "categories": {
        "default": { 
            "appenders": ["stdout", "req"], 
            "level": "debug"
        },
        "err": { 
            "appenders": ["stdout", "err"], 
            "level": "error"
        },
        "oth": { 
            "appenders": ["stdout", "oth"], 
            "level": "info"
        }
    }
}
log4js.configure(config);
const reqLogger = log4js.getLogger();
const errLogger = log4js.getLogger("err");
const infoLogger = log4js.getLogger("oth");

router.get("/postMessage", async(ctx, next) => {
    console.log(ctx.query); 
    infoLogger.info(ctx.query.sev + "--" + ctx.query.msg);
    ctx.body = {
        msg: "i get it",
        code: 200
    };
    return next();
})
module.exports = router;

收集到的日志信息截图:

更详细的代码: https://github.com/muzishuiji...

推荐阅读:

谈谈前端异常捕获与上报

评论区的朋友推荐的sentry的介绍

不知道你们是怎样前端报错信息的呢?如果你们有更好的采集方法,欢迎email(2510909248@qq.com)或者私信给我,爱分享的你最可爱^_^^_^

如果我的文章中有不足之处,欢迎批评指正~~

GPU云服务器云服务器多台服务器的日志收集日志收集、集群日志收集 webrtc的错误日志在哪里

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107974.html

前端错误日志采集上报

摘要：前端错误日志采集上报上报给后端分析错误日主要用于移动端各手机类型错误日志的收集分析业务背景在开发移动端项目，运营同学反馈了一个客户手机上页面白屏的问题此时说第一句话是，在我的手机上是正产的啊，可是问题就是存在，生产环境啊，需要怎么处 js-log-report 前端错误日志采集上报、上报给后端分析错误日、主要用于移动端各手机类型错误日志的收集分析 GitHub:js-log-repor...

AZmake 2019-08-22 18:12 评论0 收藏0
这么多监控组件，总有一款适合你

摘要：典型实现不同的监控模块，侧重于不同领域，有着不同的职责。指标收集方面，支持多样化的组件将被优先下使用。以上谈了这么多，仅仅是聊了一下收集方面而已。更多文章，请移步微信公众号《小姐姐味道》 mp原文 https://mp.weixin.qq.com/s?__...监控是分布式系统的必备组件，能够起到提前预警、问题排查、评估决策等功效，乃行走江湖、居家必备之良品。监控系统概要功能划分...

simon_chen 2019-08-16 13:52 评论0 收藏0
这么多监控组件，总有一款适合你

摘要：典型实现不同的监控模块，侧重于不同领域，有着不同的职责。指标收集方面，支持多样化的组件将被优先下使用。以上谈了这么多，仅仅是聊了一下收集方面而已。更多文章，请移步微信公众号《小姐姐味道》 mp原文 https://mp.weixin.qq.com/s?__...监控是分布式系统的必备组件，能够起到提前预警、问题排查、评估决策等功效，乃行走江湖、居家必备之良品。监控系统概要功能划分...

wpw 2019-05-28 17:12 评论0 收藏0
[ 好文分享 ] 美团酒店Node全栈开发实践

摘要：我所在的美团酒店事业部去年月份成立，新的业务新的开发团队，这一切使得我们的前后端分离推进的很彻底。日志监控平台日志监控平台是美团内部的一个日志收集系统，目前美团统一使用收集日志，具有接收格式日志的能力，而日志监控平台也是以格式日志来收集。转自：美团技术团队作者：美团技术团队分享理由：很好的分享，可见，基于Node的前后端分离的架构是越显流行和重要，前端攻城狮们，No...

wangdai 2019-08-21 10:34 评论0 收藏0
前端异常监控-看这篇就够了

摘要：前端异常监控如果是移除的流程，那么编程就一定是将放进去的流程。过滤掉运行时错误上报加载错误事件捕获异常最新的规范中定义了事件用于全局捕获对象没有处理器时异常情况。前端异常监控如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？主要内容 Web规范中相关前端异常异常按照捕获方式分类异常的捕获方式日志...

Aklman 2019-08-23 12:59 评论0 收藏0