前端监控系统落地篇
liveKang opened this issue · comments
飘香 commented
前端监控系统落地篇
一 目的
- 收集JS错误日志
- 收集ajax请求错误信息
JS错误日志
项目运行过程中,发生的JS代码报错,通过window.onerror
方法收集。
收集参数
* @param {String} msg 错误信息 * @param {String} url 出错文件 * @param {Number} row 行号 * @param {Number} col 列号 * @param {Object} error 错误详细信息 * @param {Date} date 错误发生的时间
行号和列号需对应开发环境开发文件的行和列,非压缩编译后。
收集ajax请求错误码
接口请求过程中,接口返回码非200,201,304等状态,通过try catch
方法收集。
收集参数
* @param {String} msg 错误信息 * @param {String} url 接口地址 * @param {Number} status 状态码 * @param {Date} date 错误发生的时间
二 前端实现
前端项目错误监控埋点
- 监控错误代码实践与封装(同上收集参数)
- 上报错误
- 错误代码定位
上报错误
动态创建 img 标签的形式(类似如下代码)
/** * 上报数据 * * @param {string} url 目标链接 * @param {Object} data 上报数据 */ function report(url, data) { if (!url || !data) { return; } // @see http://jsperf.com/new-image-vs-createelement-img var image = doc.createElement('img'); var items = []; for (var key in data) { if (data[key]) { items.push(key + '=' + encodeURIComponent(data[key])); } } var name = 'img_' + (+new Date()); entry[name] = image; image.onload = image.onerror = function () { entry[name] = image = image.onload = image.onerror = null; delete entry[name]; }; image.src = url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&'); }
错误代码定位:SourceMap 快速定位
SourceMap 是一个信息文件,存储着源文件的信息及源文件与处理后文件的映射关系。
在定位压缩代码的报错时,可以通过错误信息的行列数与对应的 SourceMap 文件,处理后得到源文件的具体错误信息。
SourceMap 文件中的 sourcesContent 字段对应源代码内容,不希望将 SourceMap 文件发布到外网上,而是将其存储到脚本错误处理平台上,只用在处理脚本错误中。s
通过 SourceMap 文件可以得到源文件的具体错误信息,结合 sourcesContent 上源文件的内容进行可视化展示.
SourceMap文件的生成,gulp配置。
三 错误信息展示平台
- 需要后台接口支持,进行数据统计和适当的分析。
- 需要UI支持,错误信息展示平台。
- 需要部署测试和生产两套环境,需要运维支持。
错误信息展示平台,前期需满足以下三点。
(1)简单的日志统计,对错误进行分析和统计。
(2)需要能够根据时间查询在某一段时间内的错误日志。
(3)能区分JS错误日志和ajax接口返回错误码日志。