前端监控系统落地篇

[liveKang]

前端监控系统落地篇

一 目的

• 收集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 快速定位脚本报错方案

SourceMap文件的生成，gulp配置。

三 错误信息展示平台

• 需要后台接口支持，进行数据统计和适当的分析。
• 需要UI支持，错误信息展示平台。
• 需要部署测试和生产两套环境，需要运维支持。

错误信息展示平台，前期需满足以下三点。

（1）简单的日志统计,对错误进行分析和统计。

（2）需要能够根据时间查询在某一段时间内的错误日志。

（3）能区分JS错误日志和ajax接口返回错误码日志。