Sentry的前端异样监控计划

Sentry的异样信息收集形式分为两种，一种为主动收集，另一种为业务我的项目中手动收集，咱们临时只钻研主动收集的形式。

异样监控收集的数据类型

首先定位到代码的instrument办法，能够看到全局主动收集的数据类型有以下几种：

• console
• dom
• xhr
• fetch
• history
• error
• unhandledrejection

/** Instruments given API */
function instrument(type: InstrumentHandlerType): void {
  if (instrumented[type]) {
    return;
  }

  instrumented[type] = true;

  switch (type) {
    case 'console': // console的信息
      instrumentConsole();
      break;
    case 'dom':
      instrumentDOM(); // 监听并记录dom上的click keyPress事件
      break;
    case 'xhr': // xhr申请信息
      instrumentXHR();
      break;
    case 'fetch': // fetch申请信息
      instrumentFetch();
      break;
    case 'history':// 浏览器行为记录(点击后退 后退按钮)
      instrumentHistory();
      break;
    case 'error': // 全局window.onerror事件 监听js运行谬误
      instrumentError();
      break;
    case 'unhandledrejection': // Promise 异样
      instrumentUnhandledRejection();
      break;
    default:
      logger.warn('unknown instrumentation type:', type);
  }
}

接下来咱们重点钻研一下 error unhandledrejection 以及 fetch xhr

window.onerror

window.onerror次要收集的是js代码运行时的全局异样.此处代码简略来说就是把原有的window.onerror包了一层，次要收集的信息有：
* msg：错误信息（字符串）。可用于HTML onerror=””处理程序中的event
* url：产生谬误的脚本URL（字符串）
* line：产生谬误的行号（数字）
* column：产生谬误的列号（数字）
* error：Error对象（对象）或 其余类型

let _oldOnErrorHandler: OnErrorEventHandler = null;
/** JSDoc */
function instrumentError(): void {
  _oldOnErrorHandler = global.onerror;
  global.onerror = function (msg: any, url: any, line: any, column: any, error: any): boolean {
    triggerHandlers('error', {
      column,
      error,
      line,
      msg,
      url,
    });

    if (_oldOnErrorHandler) {
      return _oldOnErrorHandler.apply(this, arguments);
    }
    return false;
  };
}

window.unhandleRejection

当 Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；

解决形式与window.onerror类似，都是包了一层

let _oldOnUnhandledRejectionHandler: ((e: any) => void) | null = null;
/** JSDoc */
function instrumentUnhandledRejection(): void {
  _oldOnUnhandledRejectionHandler = global.onunhandledrejection;

  global.onunhandledrejection = function (e: any): boolean {
    triggerHandlers('unhandledrejection', e);
    if (_oldOnUnhandledRejectionHandler) {
      return _oldOnUnhandledRejectionHandler.apply(this, arguments);
    }
    return true;
  };
}

xhr

从上面的代码能够看出，次要对xhr 原型链上的send 以及open办法进行改写，然而须要留神的是此处并没有只收集异样信息，也不能捕捉到接口404 500等信息(需手动收集)

function instrumentXHR(): void {
  // 局部代码已做删减
  const xhrproto = XMLHttpRequest.prototype;

  fill(xhrproto, 'open', function (originalOpen: () => void): () => void {
    return function (this: SentryWrappedXMLHttpRequest, ...args: any[]): void {
      const xhr = this;

      const onreadystatechangeHandler = function (): void {
        if (xhr.readyState === 4) {
          if (xhr.__sentry_xhr__) {
              xhr.__sentry_xhr__.status_code = xhr.status;
            }
          triggerHandlers('xhr', {
            args,
            endTimestamp: Date.now(),
            startTimestamp: Date.now(),
            xhr,
          });
        }
      };

      if ('onreadystatechange' in xhr && typeof xhr.onreadystatechange === 'function') {
        fill(xhr, 'onreadystatechange', function (original: WrappedFunction): Function {
          return function (...readyStateArgs: any[]): void {
            onreadystatechangeHandler();
            return original.apply(xhr, readyStateArgs);
          };
        });
      } else {
        xhr.addEventListener('readystatechange', onreadystatechangeHandler);
      }

      return originalOpen.apply(xhr, args);
    };
  });

  fill(xhrproto, 'send', function (originalSend: () => void): () => void {
    return function (this: SentryWrappedXMLHttpRequest, ...args: any[]): void {
      triggerHandlers('xhr', {
        args,
        startTimestamp: Date.now(),
        xhr: this,
      });
      return originalSend.apply(this, args);
    };
  });
}

fetch

相比起xhr，fetch的数据捕捉流程就显得比拟洁净清晰得多(fetch自身是基于promise的)。咱们能够比拟容易的看出，fetch申请记录的就是申请的 method url 起始工夫 完结工夫 申请返回的信息，以及错误信息

function instrumentFetch(): void {
  fill(global, 'fetch', function (originalFetch: () => void): () => void {
    return function (...args: any[]): void {
      const handlerData = {
        args,
        fetchData: {
          method: getFetchMethod(args),
          url: getFetchUrl(args),
        },
        startTimestamp: Date.now(),
      };

      triggerHandlers('fetch', {
        ...handlerData,
      });
      return originalFetch.apply(global, args).then(
        (response: Response) => { // 记录失常申请的信息
          triggerHandlers('fetch', {
            ...handlerData,
            endTimestamp: Date.now(),
            response,
          });
          return response;
        },
        (error: Error) => { // 记录异样申请的信息
          triggerHandlers('fetch', {
            ...handlerData,
            endTimestamp: Date.now(),
            error,
          });
          throw error;
        },
      );
    };
  });
}

总结

毫无意外，咱们能够看出主动收集的错误信息，都是通过代理的形式，将原有的window.xx办法包裹一层，进行改写。其实在钻研之前也大略猜到了，然而毕竟集体的教训无限，很难比拟全面地理解到具体收集哪些方面的信息，这次通过sentry算是清晰了整体的脉络。