前端错误日志采集上报

原创 我是小明同学 随笔 前端 201阅读 2018-06-21 21:16:12 举报

js-log-report

前端错误日志采集上报、上报给后端分析错误日、主要用于移动端各手机类型错误日志的收集分析

GitHub:
js-log-report

业务背景

在开发Vue移动端项目,运营同学反馈了一个客户手机上页面白屏的问题、此时说第一句话是,在我的手机上是正产的啊,可是问题就是存在,生产环境啊,需要怎么处理呢? 'vconsole'也只能在外测上使用、在生产上找问题,而且不知道是在什么手机上才会有这个问题、如何重现bug 是面临的第一个问题。

为何要做错误日志追踪上报

前端JS代码错误,浏览器都都会在控制台输出错误信息,以及出错的文件,行号,堆栈信息,这些错误很容易导致页面代码不执行,并且考虑到手机类型五花八门,浏览器内核以及版本的差异性,前端代码机型兼容性问题,并不能将所有的手机都拿来适配,前端错误日志上报是一个较好的解决方案

日志上报哪些数据

1.通过 wiindow.onerror 可以获取 msg, url, line, col, error等错误信息,JS 的错误行号、url错误地址,
2.通过 window.navigator.userAgent 获取 设备浏览器的信息集合
如:

  1. os_version 系统版本号
  2. browser 浏览器类型 Opera FF Chrome Safari IE

具体上报字段可查看表结构

如何实现错误上报

1.实现错误日志收集 收集onerror 错误参数,以及自定义的参数
2.核心window.onerror,重写该方法、在此中捕获异常错误信息、并且将错误信息发送至服务器接口
大致代码如下

如何使用

使用如index.html所示,导入以下代码在页面head中,并且优先于其他JS文件加载

数据上报表结构

缺点

对于压缩的代码,报错信息没法定位到具体是什么地方报错了,这里没有去详细研究,阮一峰老师有篇相关文章
JavaScript Source Map 详解,有时间再去研究一下

源代码

js-log-report

原文地址:
https://code.it919.cn/2018/06/web-js-log-report/

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复