Sentry的前端异常监控方案

Posted 2021-10-08 十一点我就睡

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