Skip to content
前端错误日志采集上报
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
LICENSE
README.md
_config.yml
package.json

README.md

js-log-report

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

为何要做错误日志追踪上报 (业务背景)

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

安装 Installation

直接下载 点击下载 error.js直接在你的页面中引用

<script src="/path/to/error.min.js"></script>

或者引用 jsDelivr CDN:

<script type="text/javascript" src="https://unpkg.com/js-log-report/src/error.min.js"></script>

npm 模块安装

npm install js-log-report
import errLogReport from 'js-log-report'
// 方法调用查看 如何使用

日志上报哪些数据

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

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
  1. os_version 系统版本号
  2. browser 浏览器类型 Opera FF Chrome Safari IE
var defaults = {
  ua: window.navigator.userAgent,
  browser: '',
  os: '',
  osVersion: '',
  errUrl: window.location.href,
  msg: '', // 错误的具体信息
  url: '', // 错误所在的url
  line: '', // 错误所在的行
  col: '', // 错误所在的列
  error: '' // 具体的error对象
}

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

如何实现错误上报

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

window.onerror = function(msg, url, line, col, error) {
  ajax({
    url: 'xxx/api/sendError', // 请求地址
    type: 'POST', // 请求方式
    data: data, // 请求参数
    dataType: 'json',
    success: function(response, xml) {
      // success
    },
    fail: function(status) {
      // error
    }
  })
}

如何使用

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

<script type="text/javascript" src="https://unpkg.com/js-log-report"></script>
<script>
  errLogReport({
    data: {
      productname: 'test' //产品名称
    },
    url: 'http://test.com/api/sendError' //上报地址
  })
  var a = 1
  b = c
</script>

上报数据样式

数据上报表结构

DROP TABLE IF EXISTS `j_log`;
CREATE TABLE `j_log` (
  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'id号',
  `os_version` char(10) DEFAULT NULL COMMENT '系统版本号',
  `msg` varchar(255) DEFAULT NULL COMMENT '错误信息',
  `error_url` varchar(255) DEFAULT NULL COMMENT '错误所在的url',
  `line` int(10) DEFAULT NULL COMMENT '错误所在的行',
  `col` int(10) DEFAULT NULL COMMENT '错误所在的列',
  `error` varchar(255) DEFAULT NULL COMMENT '具体的error对象',
  `url` varchar(255) DEFAULT NULL,
  `browser` varchar(255) DEFAULT NULL COMMENT '浏览器类型',
  `product_name` char(255) CHARACTER SET utf8 DEFAULT '' COMMENT '产品名称',
  `error_time` char(20) DEFAULT NULL COMMENT '时间戳',
  `os` char(10) DEFAULT NULL COMMENT '系统类型',
  `extend` varchar(255) DEFAULT NULL COMMENT '业务扩展字段、保存JSON字符串',
  `ua` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=55 DEFAULT CHARSET=utf8;

源代码

GitHub

缺点

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

License

MIT licensed.

You can’t perform that action at this time.