搭建前端监控系统（备选）用户行为统计和监控篇（如何快速定位线上问题）

//用户行为日志，继承于日志基类MonitorBaseInfo
  functionBehaviorInfo(uploadType, behaviorType, className, placeholder, inputValue, tagName, innerText) {
    setCommonProperty.apply(this);
    this.uploadType =uploadType;
    this.behaviorType =behaviorType;
    this.className =utils.b64EncodeUnicode(className);
    this.placeholder =utils.b64EncodeUnicode(placeholder);
    this.inputValue =utils.b64EncodeUnicode(inputValue);
    this.tagName =tagName;
    this.innerText =utils.b64EncodeUnicode(encodeURIComponent(innerText));
  }

/**
   * 用户行为记录监控
   * @param project 项目详情
   */
  functionrecordBehavior(project) {
    //行为记录开关
    if (project && project.record && project.record == 1) {
      //记录行为前，检查一下url记录是否变化
checkUrlChange();
      //记录用户点击元素的行为数据
      document.onclick = function(e) {
        var className = "";
        var placeholder = "";
        var inputValue = "";
        var tagName =e.target.tagName;
        var innerText = "";
        if (e.target.tagName != "svg" && e.target.tagName != "use") {
          className =e.target.className;
          placeholder = e.target.placeholder || "";
          inputValue = e.target.value || "";
          innerText = e.target.innerText.replace(/s*/g, "");
          //如果点击的内容过长，就截取上传
          if (innerText.length > 200) innerText = innerText.substring(0, 100) + "... ..." + innerText.substring(innerText.length - 99, innerText.length - 1);
          innerText = innerText.replace(/s/g, '');
        }
        var behaviorInfo = new BehaviorInfo(ELE_BEHAVIOR, "click", className, placeholder, inputValue, tagName, innerText);
        behaviorInfo.handleLogInfo(ELE_BEHAVIOR, behaviorInfo);
      }
    }
  };

//接口请求日志，继承于日志基类MonitorBaseInfo
  functionHttpLogInfo(uploadType, url, status, statusText, statusResult, currentTime) {
    setCommonProperty.apply(this);
    this.uploadType =uploadType;
    this.httpUrl =utils.b64EncodeUnicode(url);
    this.status =status;
    this.statusText =statusText;
    this.statusResult =statusResult;
    this.happenTime =currentTime;
  }

/**
   * 页面接口请求监控
   */
  functionrecordHttpLog() {
    //监听ajax的状态
    functionajaxEventTrigger(event) {
      var ajaxEvent = newCustomEvent(event, {
        detail: this});
      window.dispatchEvent(ajaxEvent);
    }
    var oldXHR =window.XMLHttpRequest;
    functionnewXHR() {
      var realXHR = newoldXHR();
      realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false);
      realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);
      realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);
      realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);
      realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);
      realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);
      realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);
      realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);
      returnrealXHR;
    }

    window.XMLHttpRequest =newXHR;
    window.addEventListener('ajaxLoadStart', function(e) {
      var currentTime = newDate().getTime()
      setTimeout(function() {
        var url =e.detail.responseURL;
        var status =e.detail.status;
        var statusText =e.detail.statusText;
        if (!url || url.indexOf(HTTP_UPLOAD_LOG_API) != -1) return;
        var httpLogInfo = new HttpLogInfo(HTTP_LOG, url, status, statusText, "发起请求", currentTime);
        httpLogInfo.handleLogInfo(HTTP_LOG, httpLogInfo);
      }, 2000)
    });
    window.addEventListener('ajaxLoadEnd', function(e) {
      var currentTime = newDate().getTime()
      var url =e.detail.responseURL;
      var status =e.detail.status;
      var statusText =e.detail.statusText;
      if (!url || url.indexOf(HTTP_UPLOAD_LOG_API) != -1) return;
      var httpLogInfo = new HttpLogInfo(HTTP_LOG, url, status, statusText, "请求返回", currentTime);
      httpLogInfo.handleLogInfo(HTTP_LOG, httpLogInfo);
    });

  }