前端的谬误监控、性能数据往往对业务的稳定性有很重要的影响，即便咱们在开发阶段非常小心，也不免线上会出现异常，并且线上环境的异样咱们往往后知后觉。而页面的性能数据则关系到用户体验，因而采集页面的性能数据也非常的重要。

当初第三方残缺解决方案国外有sentry，国内有fundebug、frontjs，他们提供前端接入的SDK和数据服务，而后有肯定的收费额度，超出就须要应用付费计划。前端的SDK用户监控用户端异样和性能，后端服务用户能够创立利用，每个利用调配一个APPKEY，而后SDK实现主动上报。

本文不思考数据服务，只对前端监控进行剖析，讲下web如何进行监控和采集这些数据，并且通过TS集成这些性能做出一套前端监控SDK。

既然须要采集数据，咱们要明确下可能须要哪些数据，目前来看有如下一些数据：

页面谬误数据
页面资源加载状况
页面性能数据
接口数据
手机、浏览器数据
页面拜访数据
用户行为数据
…

上面剖析一下这些数据如何获取：

页面谬误数据

window.onerror AOP捕捉异样能力无论是异步还是非异步谬误，onerror 都能捕捉到运行时谬误。
window.onerror不能捕捉页面资源的加载谬误，但资源加载谬误能被window.addEventListener在捕捉阶段捕捉。因为addEventListener也可能捕捉js谬误，因而须要过滤防止反复触发事件钩子
window.onerror无奈捕捉Promise工作中未被解决的异样，通过unhandledrejection能够捕捉

页面资源加载异样

window.addEventListener(
  "error",
  function (event) {
    const target: any = event.target || event.srcElement;
    const isElementTarget =
      target instanceof HTMLScriptElement ||
      target instanceof HTMLLinkElement ||
      target instanceof HTMLImageElement;
    if (!isElementTarget) return false;

    const url = target.src || target.href;
    onResourceError?.call(this, url);
  },
  true
);

页面逻辑和未catch的promise异样

 const oldOnError = window.onerror;
 const oldUnHandleRejection = window.onunhandledrejection;

 window.onerror = function (...args) {
   if (oldOnError) {
     oldOnError(...args);
   }

   const [msg, url, line, column, error] = args;
   onError?.call(this, {
     msg,
     url,
     line,
     column,
     error
   });
 };

 window.onunhandledrejection = function (e: PromiseRejectionEvent) {
   if (oldUnHandleRejection) {
     oldUnHandleRejection.call(window, e);
   }

   onUnHandleRejection && onUnHandleRejection(e);
 };

在Vue中，咱们应该通过Vue.config.errorHandler = function(err, vm, info) {};进行异样捕捉，这样能够获取到更多的上下文信息。

对于React，React 16 提供了一个内置函数 componentDidCatch，应用它能够非常简单的获取到 react 下的错误信息

componentDidCatch(error, info) {
    console.log(error, info);
}

页面性能数据

通常咱们会关注以下性能指标：

白屏工夫：从浏览器输出地址并回车后到页面开始有内容的工夫；
首屏工夫：从浏览器输出地址并回车后到首屏内容渲染结束的工夫；
用户可操作工夫节点：domready触发节点，点击事件有反馈；
总下载工夫：window.onload的触发节点。

白屏工夫

白屏工夫节点指的是从用户进入网站（输出url、刷新、跳转等形式）的时刻开始计算，始终到页面有内容展现进去的工夫节点。
这个过程包含dns查问、建设tcp连贯、发送首个http申请（如果应用https还要染指TLS的验证工夫）、返回html文档、html文档head解析结束。

首屏工夫

首屏工夫的统计比较复杂，因为波及图片等多种元素及异步渲染等形式。察看加载视图可发现，影响首屏的次要因素的图片的加载。通过统计首屏内图片的加载工夫便能够获取首屏渲染实现的工夫。

页面存在 iframe 的状况下也须要判断加载工夫
gif 图片在 IE 上可能反复触发 load 事件需排除
异步渲染的状况下应在异步获取数据插入之后再计算首屏
css 重要背景图片能够通过 JS 申请图片 url 来统计(浏览器不会反复加载)
没有图片则以统计 JS 执行工夫为首屏，即认为文字呈现工夫

用户可操作工夫

DOM解析结束工夫，可统计DomReady工夫，因为通常会在这个工夫点绑定事件

对于web端获取性能数据办法很简略，只须要应用浏览器自带的Performance接口

页面性能数据采集

Performance 接口能够获取到以后页面中与性能相干的信息，它是 High Resolution Time API 的一部分，同时也交融了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

从图中能够看到很多指标都是成对呈现，这里咱们间接求差值，就能够求出对应页面加载过程中要害节点的耗时，这里咱们介绍几个比拟罕用的，比方：

const timingInfo = window.performance.timing;

// DNS解析，DNS查问耗时
timingInfo.domainLookupEnd - timingInfo.domainLookupStart;

// TCP连贯耗时
timingInfo.connectEnd - timingInfo.connectStart;

// 取得首字节消耗工夫，也叫TTFB
timingInfo.responseStart - timingInfo.navigationStart;

// *: domReady工夫(与DomContentLoad事件对应)
timingInfo.domContentLoadedEventStart - timingInfo.navigationStart;

// DOM资源下载
timingInfo.responseEnd - timingInfo.responseStart;

// 筹备新页面工夫耗时
timingInfo.fetchStart - timingInfo.navigationStart;

// 重定向耗时
timingInfo.redirectEnd - timingInfo.redirectStart;

// Appcache 耗时
timingInfo.domainLookupStart - timingInfo.fetchStart;

// unload 前文档耗时
timingInfo.unloadEventEnd - timingInfo.unloadEventStart;

// request申请耗时
timingInfo.responseEnd - timingInfo.requestStart;

// 申请结束至DOM加载
timingInfo.domInteractive - timingInfo.responseEnd;

// 解释dom树耗时
timingInfo.domComplete - timingInfo.domInteractive;

// *：从开始至load总耗时
timingInfo.loadEventEnd - timingInfo.navigationStart;

// *: 白屏工夫
timingInfo.responseStart - timingInfo.fetchStart;

// *: 首屏工夫
timingInfo.domComplete - timingInfo.fetchStart;

接口数据

接口数据次要包含接口耗时、接口申请异样，耗时能够通过对XmlHttpRequest 和 fetch申请的拦挡过程中进行工夫统计，异样通过xhr的readyState和status属性判断。

XmlHttpRequest 拦挡：批改XMLHttpRequest的原型，在发送申请时开启事件监听，注入SDK钩子
XMLHttpRequest.readyState的五种就绪状态：

0：申请未初始化（还没有调用 open()）。
1：申请曾经建设，然而还没有发送（还没有调用 send()）。
2：申请已发送，正在解决中（通常当初能够从响应中获取内容头）。
3：申请在解决中；通常响应中已有局部数据可用了，然而服务器还没有实现响应的生成。
4：响应已实现；您能够获取并应用服务器的响应了。

XMLHttpRequest.prototype.open = function (method: string, url: string) {
  // ...省略
  return open.call(this, method, url, true);
};
XMLHttpRequest.prototype.send = function (...rest: any[]) {
  // ...省略
  const body = rest[0];

  this.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 300) {
        // ...省略
      } else {
        // ...省略
      }
    }
  });
  return send.call(this, body);
};

Fetch 拦挡：Object.defineProperty

Object.defineProperty(window, "fetch", {
  configurable: true,
  enumerable: true,
  get() {
    return (url: string, options: any = {}) => {
      return originFetch(url, options)
        .then((res) => {
            // ...
        })
    };
  }
});

手机、浏览器数据

通过navigatorAPI获取在进行解析，应用第三方包mobile-detect帮忙咱们获取解析

页面拜访数据

全局数据减少url、页面题目、用户标识，SDK能够主动为网页session调配一个随机用户label作为标识，以此标识单个用户

用户行为数据

次要蕴含用户点击页面元素、控制台信息、用户鼠标挪动轨迹。

用户点击元素：window事件代理
控制台信息：重写console
用户鼠标挪动轨迹：第三方库rrweb

上面是针对这些数据进行对立的监控SDK设计

SDK开发

为更好的解耦模块，我决定应用基于事件订阅的形式，整个SDK分成几个外围的模块，因为应用ts开发并且代码会保持良好的命名标准和语义化，只有在要害的中央才会有正文，残缺的代码实现见文末Github仓库。

class: WebMonitor：外围监控类
class：AjaxInterceptor：拦挡ajax申请
class：ErrorObserver：监控全局谬误
class：FetchInterceptor：拦挡fetch申请
class：Reporter：上报
class：Performance：监控性能数据
class：RrwebObserver：接入rrweb获取用户行为轨迹
class：SpaHandler：针对SPA利用做解决
util: DeviceUtil：设施信息获取辅助函数
event: 事件核心

SDK提供的事件

对外裸露事件，_结尾为框架外部事件

export enum TrackerEvents {
  // 对外裸露事件
  performanceInfoReady = "performanceInfoReady",  // 页面性能数据获取结束
  reqStart = "reqStart",  // 接口申请开始
  reqEnd = "reqEnd",   // 接口申请实现
  reqError = "reqError",  // 申请谬误
  jsError = "jsError",  // 页面逻辑异样
  vuejsError = "vuejsError",  // vue谬误监控事件
  unHandleRejection = "unHandleRejection",  // 未解决promise异样
  resourceError = "resourceError",  // 资源加载谬误
  batchErrors = "batchErrors",  // 谬误合并上报事件，用户合并上报申请节俭申请数量
  mouseTrack = "mouseTrack",  //  用户鼠标行为追踪
}

应用形式

import { WebMonitor } from "femonitor-web";
const monitor = Monitor.init();
/* Listen single event */
monitor.on([event], (emitData) => {});
/* Or Listen all event */
monitor.on("event", (eventName, emitData) => {})

外围模块解析

WebMonitor、errorObserver、ajaxInterceptor、fetchInterceptor、performance

WebMonitor

集成了框架的其余类，对传入配置和默认配置进行deepmerge，依据配置进行初始化

this.initOptions(options);

this.getDeviceInfo();
this.getNetworkType();
this.getUserAgent();

this.initGlobalData(); // 设置一些全局的数据，在所有事件中globalData中都会带上
this.initInstances();
this.initEventListeners();

API

反对链式操作

on：监听事件
off：移除事件
useVueErrorListener：应用Vue谬误监控，获取更具体的组件数据
changeOptions：批改配置
configData：设置全局数据

errorObserver

监听window.onerror和window.onunhandledrejection，并且对err.message进行解析，获取想要emit的谬误数据。

window.onerror = function (...args) {
  // 调用原始办法
  if (oldOnError) {
    oldOnError(...args);
  }

  const [msg, url, line, column, error] = args;

  const stackTrace = error ? ErrorStackParser.parse(error) : [];
  const msgText = typeof msg === "string" ? msg : msg.type;
  const errorObj: IError = {};

  myEmitter.customEmit(TrackerEvents.jsError, errorObj);
};

window.onunhandledrejection = function (error: PromiseRejectionEvent) {
  if (oldUnHandleRejection) {
    oldUnHandleRejection.call(window, error);
  }

  const errorObj: IUnHandleRejectionError = {};
  myEmitter.customEmit(TrackerEvents.unHandleRejection, errorObj);
};

window.addEventListener(
  "error",
  function (event) {
    const target: any = event.target || event.srcElement;
    const isElementTarget =
      target instanceof HTMLScriptElement ||
      target instanceof HTMLLinkElement ||
      target instanceof HTMLImageElement;
    if (!isElementTarget) return false;

    const url = target.src || target.href;

    const errorObj: BaseError = {};
    myEmitter.customEmit(TrackerEvents.resourceError, errorObj);
  },
  true
);

ajaxInterceptor

拦挡ajax申请，并触发自定义的事件。对XMLHttpRequest的open和send办法进行重写

XMLHttpRequest.prototype.open = function (method: string, url: string) {
  const reqStartRes: IAjaxReqStartRes = {
  };

  myEmitter.customEmit(TrackerEvents.reqStart, reqStartRes);
  return open.call(this, method, url, true);
};

XMLHttpRequest.prototype.send = function (...rest: any[]) {
  const body = rest[0];
  const requestData: string = body;
  const startTime = Date.now();

  this.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 300) {
        const reqEndRes: IReqEndRes = {};

        myEmitter.customEmit(TrackerEvents.reqEnd, reqEndRes);
      } else {
        const reqErrorObj: IHttpReqErrorRes = {};
        
        myEmitter.customEmit(TrackerEvents.reqError, reqErrorObj);
      }
    }
  });
  return send.call(this, body);
};

fetchInterceptor

对fetch进行拦挡，并且触发自定义的事件。

Object.defineProperty(window, "fetch", {
  configurable: true,
  enumerable: true,
  get() {
    return (url: string, options: any = {}) => {
      const reqStartRes: IFetchReqStartRes = {};
      myEmitter.customEmit(TrackerEvents.reqStart, reqStartRes);

      return originFetch(url, options)
        .then((res) => {
          const status = res.status;
          const reqEndRes: IReqEndRes = {};

          const reqErrorRes: IHttpReqErrorRes = {};

          if (status >= 200 && status < 300) {
            myEmitter.customEmit(TrackerEvents.reqEnd, reqEndRes);
          } else {
            if (this._url !== self._options.reportUrl) {
              myEmitter.customEmit(TrackerEvents.reqError, reqErrorRes);
            }
          }

          return Promise.resolve(res);
        })
        .catch((e: Error) => {
          const reqErrorRes: IHttpReqErrorRes = {};
          myEmitter.customEmit(TrackerEvents.reqError, reqErrorRes);
        });
    };
  }
});

performance

通过Performance获取页面性能，在性能数据齐备后emit事件

const {
  domainLookupEnd,
  domainLookupStart,
  connectEnd,
  connectStart,
  responseEnd,
  requestStart,
  domComplete,
  domInteractive,
  domContentLoadedEventEnd,
  loadEventEnd,
  navigationStart,
  responseStart,
  fetchStart
} = this.timingInfo;

const dnsLkTime = domainLookupEnd - domainLookupStart;
const tcpConTime = connectEnd - connectStart;
const reqTime = responseEnd - requestStart;
const domParseTime = domComplete - domInteractive;
const domReadyTime = domContentLoadedEventEnd - fetchStart;
const loadTime = loadEventEnd - navigationStart;
const fpTime = responseStart - fetchStart;
const fcpTime = domComplete - fetchStart;

const performanceInfo: IPerformanceInfo<number> = {
  dnsLkTime,
  tcpConTime,
  reqTime,
  domParseTime,
  domReadyTime,
  loadTime,
  fpTime,
  fcpTime
};

myEmitter.emit(TrackerEvents.performanceInfoReady, performanceInfo);

残缺SDK实现见下方Github仓库地址，欢送star、fork、issue。

web前端监控SDK：https://github.com/alex1504/f…

关于前端:基于typescript开发前端错误及性能监控SDK

页面谬误数据

页面资源加载异样

页面逻辑和未catch的promise异样

页面性能数据

白屏工夫

首屏工夫

用户可操作工夫

页面性能数据采集

接口数据

手机、浏览器数据

页面拜访数据

用户行为数据

SDK开发

SDK提供的事件

应用形式

外围模块解析

WebMonitor

API

errorObserver

ajaxInterceptor

fetchInterceptor

performance

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:基于typescript开发前端错误及性能监控SDK

页面谬误数据

页面资源加载异样

页面逻辑和未catch的promise异样

页面性能数据

白屏工夫

首屏工夫

用户可操作工夫

页面性能数据采集

接口数据

手机、浏览器数据

页面拜访数据

用户行为数据

SDK开发

SDK提供的事件

应用形式

外围模块解析

WebMonitor

API

errorObserver

ajaxInterceptor

fetchInterceptor

performance

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复