- 基于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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent