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 算是清晰了整体的脉络。