前端监控系统（二）JS错误日志收集篇

前端监控系统 目前已经上线，欢迎使用！

服务器搭建好了，可以着手开发了。

其实前端需要分析的数据有很多，包括，PVUV, 接口请求统计，耗时统计，JS错误统计，用户使用设备统计，用户地域分布，页面用户行为分析等等。这个系统是由JS错误搜集起源，所以先讲讲JS错误日志搜集篇。

一、创建一个js文件，命名为monitor.js

如果要监控前端项目的数据，就需要在页面的最顶部嵌入一段我们的监控代码，这也是最核心的部分，所以我把它单独拎出来立项。

二、开始监控JS的报错日志

window.onerror 方法， 大家熟知，监控JS错误必然离不开它，有人对他进行了测试 测试介绍 感觉也是比较用心了

/**
 * @param {String} errorMessage  错误信息
 * @param {String} scriptURI   出错的文件
 * @param {Long}  lineNumber   出错代码的行号
 * @param {Long}  columnNumber  出错代码的列号
 * @param {Object} errorObj    错误的详细信息，Anything
 */
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
  // TODO
}

三、window.onerror方法会漏掉一些JS错误

在监控JS的过程中, window.onerror无法记录页面初始化的时候发生的错误，所以我们需要重写console.error方法，才能够保证记录下更多JS错误日志，下边是我记录日志的代码：

  // 重写console.error, 可以捕获页面加载时候的报错
    var oldError = console.error;
    console.error = function () {
      // arguments的长度为2时，才是error上报的时机
      var errorMsg = arguments[0] && arguments[0].message;
      var url = WEB_LOCATION;
      var lineNumber = 0;
      var columnNumber = 0;
      var errorObj = arguments[0] && arguments[0].stack;
      if (!errorObj) errorObj = arguments[0];
      // 如果onerror重写成功，就无需在这里进行上报了
      !jsMonitorStarted && siftAndMakeUpMessage(errorMsg, url, lineNumber, columnNumber, errorObj);
      return oldError.apply(console, arguments);
    };
    window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj)
    {
      var errorStack = errorObj ? errorObj.stack : null
      jsMonitorStarted = true;
      siftAndMakeUpMessage(errorMsg, url, lineNumber, columnNumber, errorStack);
    };

四、简单封装一个AJAX方法

监控代码需要保证能够在很多环境下运行，有可能版本较低（至少是支持xmlHttpRequest的），可能没有fetch之类现成的api供我们调用，而直接用xmlHttpRequest又太过麻烦，所以我们需要封装一个简易的ajax,如下：

/**
 * @param method  请求类型(大写)  GET/POST
 * @param url     请求URL
 * @param param   请求参数
 * @param successCallback  成功回调方法
 * @param failCallback   失败回调方法
 */
function monitor_ajax(method, url, param, successCallback, failCallback) {
  var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  xmlHttp.open(method, url, true);
  xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var res = JSON.parse(xmlHttp.responseText);
      typeof successCallback == 'function' && successCallback(res);
    } else {
      typeof failCallback == 'function' && failCallback();
    }
  };
  xmlHttp.send("data=" + JSON.stringify(param));
}

有人可能会用img标签来进行上传日志，不过只有get方式，可能不足以让我上传足够大的数据量，所以我放弃这种方式了。

数据库设计字段如下：

下一步，做接口请求日志搜集。

OK, JS错误日志搜集功能完成了。