- 基于nodejs全栈开发;
- 集合主动上报与被动监测错误;
- 客户端JS文件体积小,gzip后约1.6KB;
- 配套可视化日志管理系统;
- 提供sourcemap支持。
- 创建mongodb数据库
默认表名是bug
,可在./models/db.js
修改。
开启mongo客户端命令行模式,执行:
- 创建名为bug的数据库
use bug
- 插入超级管理员账号(用户名:admin,密码:111111)【注意:只有完成该步骤数据库才是创建成功】
db.accounts.insert({
"salt": "6de1a85f69db9bf65b016fc3bf6d6cecc3b64cc2e6741ea332afb6e115d1b53d",
"hash": "447e6dcedb8ab3a0c1c16536b3eff8907745d38b5fc0a22db4fd19042dc8a7ae9d2e3d97ef984400ee1aa381ad08f62137273f178abfa5983b5d810dbd934c5ae2da38c8a8a4f40f699e91b9f16d1a80471f479aae59f373b09dcb25dcc2f88319246951d68c10d2dc8e505554ba11cdbed53ebf6a247bb81fd9f5da334c7ddf9133f23a5946c5331a933198ff393fc50bc464e4c8adf68bee44006fb7f23361ec345a65c2dbe0dbd9dbe83c257957f2cd65f7c4f4710d1e4398a579ea635b1c840961cf088a38c651fdf40bfd4d6b4e8aa667ba9e30403285fc2c8d8ad038d1e2cc78021759a104bf6565adfcc08c2a8703c1d6f2b837e3bb1fe6b34e75c2eed88ef6bdfb3d3cd859e85aac146baa7339fb5cf8f90f3613b11b6eb4fbafe47e6f65db718b98ec0a5594b8ca457501d96d7858474fbc26b689f5ae9e7352026e125c2a52029505e6dbbc42ca2b3bf9df168af6d9e2415728a7551829527dbbc840f08591af4f265dcfeba4c24984db7e5fd6aaa97a926f5069d971b457dc1df45070f1599121958115f20e8c17a1188fa87bb60301e7ec9085d8a12714ae5a2c46937b7a0d8122331d2914454d3276be5b31b8398c257498ebc018c5c8f1bd7863242ceebd028a99a7307312cda608b1f71280e62a2545db77959fb585090ab6e19389077ed6f5a1aaa1f100b414bc5b1f7cfb20a1272966076b53899661ce20",
"username": "admin",
"ip": "127.0.0.1",
"create_time": 1465206116175,
"type": 1
})
- 插入log有效期配置表
用于定时清log脚本读取有效期时间配置。
db.settings.insert({
"id": 1,
"expired_time": 86400,
"edit_user": "admin",
"edit_time": 1465206116175
})
- 修改用户权限
进入mongodb的accounts表,修改对应文档数据的type字段即可(type=1,超级管理员;type=2,普通管理员)。
- 安装npm模块依赖
npm install
- 创建nodejs守护进程
pm2 start pm2.release.config.json
-
访问 http://127.0.0.1:3000/ 即可进入错误上报管理系统查看log,部署到外网时可使用nginx反向代理端口方法,测试环境建议配域名host访问。
-
可选择运行定时清log脚本。
客户端js源码位于./public/src/my_modules/bugReport/index.js
,生成后文件位于./public/javascripts/bug.js
,该js符合UMD规范,可使用<script>
引入也可做成模块require引入。
该模块暴露了两个方法:
- 初始化 init(Object)
【该初始化方法必须在其他方法之前调用一次,并且需要独立引用,不能和待监测代码处在同一代码块,见用法例子】
参数名 | 类型 | 备注 |
---|---|---|
url | String | 上报接口地址(默认http://127.0.0.1:3000/report,建议修改成域名) |
random | Number | 上报概率,1~0 之间数值,1为100%上报(默认 1) |
ignore | Array | 需要忽略错误的正则数组(默认[/Script error/i]) |
onReport | Function | 上报完成回调 |
onError | Function | 网络错误回调 |
onTimeout | Function | 请求超时回调 |
debug | Boolean | 是否开发环境,true - 开发环境不上报,false - 生产环境上报(默认) |
- 主动上报 report(Object)
参数名 | 类型 | 备注 |
---|---|---|
msg | String | 错误信息 |
src | String | 错误文件名 |
col | Number | js错误行数 |
row | Number | js错误列数 |
该方法当产生XMLHttpRequest对象无法捕获的错误时会有返回一个对象,有如下属性:
属性名 | 类型 | 备注 |
---|---|---|
code | Number | 错误码(-1:不支持CORS;-2:没有调用初始化函数) |
msg | String | 错误信息 |
以script全局引入为例:
<script type="text/javascript" src="http://your.website.com/javascripts/bug.js"></script>
<script type="text/javascript">
// 不能和待监测代码处在同一代码块
(function(window) {
var bugReport = window.bugReport;
bugReport.init({
url: 'http://your.website.com/report',
random: 0.5,
ignore: [/Script error/i, /Type error/i],
onReport: function () { console.log('bingo!'); },
debug: false
});
})(window);
</script>
<script type="text/javascript">
// 主动上报
try {
console.log(a); // a未定义
} catch (err) {
var res = bugReport.report({
msg: String(err),
col: 13
});
}
// 被动上报
console.log(b); // b未定义,自动上报到服务器
</script>
- 主动上报需要手动调用report方法,一般用在try catch块和ajax/jsonp的回调函数里;
- 被动上报可监听所有window.onerror能捕获的错误(语法错误、运行时错误);
- 支持根据map文件查询原文件错误信息,要求map文件和js文件必须同级目录,建议开发时使用未压缩版的js以方便压缩后定位,如jQuery/Zepto的未压缩版。
- 优化:客户端JS中对xhr对象进行缓存,避免频繁创建对象
- 添加:客户端JS增加网络错误和请求超时回调函数
- 添加:客户端JS的report方法的返回值
- 修复:XSS问题
- 添加:单元测试
- 优化:客户端概率上报判断逻辑
- 优化:去掉可视化管理系统用于显示时间的moment依赖模块
- 优化:隐藏客户端JS的一个绑定事件接口
- 修复:可视化管理系统里关键字搜索包含正则特殊字符时结果不正确问题
- 修复:客户端JS在IE下无法获取错误信息问题
- 修复:map文件不是json格式时服务器报502问题
- 添加:增加超级管理员数据,方便添加普通管理员
- 初始化项目
MIT.