关于javascript:Sentry的异常数据上报机制

Sentry的异样数据上报机制

之前咱们聊过了Sentry的异样监控计划中具体有那几种异样,以及大略的解决形式。这次咱们来理解一下,这些异样数据的上报机制是怎么样的。

上报形式

就目前理解到的,支流的数据上报形式 而言,Sentry还是采纳的ajax上报的形式。为了有更好的兼容性,在初始化的时候会去判断浏览器是否反对fetch,反对就应用fetch否则是xhr。同时也反对自定义的上报形式,且优先级会高于fetch和xhr

class BaseBackend {
  if (this._options.transport) {
      return new this._options.transport(transportOptions);
  }
    if (supportsFetch()) { return new FetchTransport(transportOptions); };
     return new XHRTransport(transportOptions);
}

上报流程

以unhandledrejection为例,首先是 全局监听 触发对应的triggerHandlers

function instrumentUnhandledRejection(): void {
  _oldOnUnhandledRejectionHandler = global.onunhandledrejection;

  global.onunhandledrejection = function(e: any): boolean {
    triggerHandlers('unhandledrejection', e);

    if (_oldOnUnhandledRejectionHandler) {
      // eslint-disable-next-line prefer-rest-params
      return _oldOnUnhandledRejectionHandler.apply(this, arguments);
    }
    return true;
  };
}

对应的handler触发instrument.ts中的 captureEvent

 addInstrumentationHandler({
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      callback: (e: any) => {
        currentHub.captureEvent(event, {
          originalException: error,
        });
        return;
      },
      type: 'unhandledrejection',
    });

触发baseclient.ts 中的_captureEvent

  protected _captureEvent(event: Event, hint?: EventHint, scope?: Scope): PromiseLike<string | undefined> {
    return this._processEvent(event, hint, scope).then(
      finalEvent => {
        return finalEvent.event_id;
      },
      reason => {
        logger.error(reason);
        return undefined;
      },
    );
  }

最初走到外围主流程的函数办法上_processEvent

外围办法_processEvent

baseclient.ts _processEvent 参数event代表sentry要发送的事件自身的信息(event_id,timestamp,release
等等),hint代表其余的一些和原始异样相干的信息(captureContext,data,originalException等等),scope代表元数据的作用域

    // 代码有局部删减
protected _processEvent(event: Event, hint?: EventHint, scope?: Scope): PromiseLike<Event> {
    const { beforeSend, sampleRate } = this.getOptions();
    if (!this._isEnabled()) {
      return SyncPromise.reject(new SentryError('SDK not enabled, will not send event.'));
    }
    const isTransaction = event.type === 'transaction';
    if (!isTransaction && typeof sampleRate === 'number' && Math.random() > sampleRate) {
      return SyncPromise.reject(
        new SentryError(
          `Discarding event because it's not included in the random sample (sampling rate = ${sampleRate})`,
        ),
      );
    }

    return this._prepareEvent(event, scope, hint)
      .then(prepared => {
        const beforeSendResult = beforeSend(prepared, hint);
          if (isThenable(beforeSendResult)) {
          return (beforeSendResult as PromiseLike<Event | null>).then(
            event => event,
            e => {
              throw new SentryError(`beforeSend rejected with ${e}`);
            },
          );
        }
        return beforeSendResult;
      })
      .then(processedEvent => {
        const session = scope && scope.getSession && scope.getSession();
        if (!isTransaction && session) {
          this._updateSessionFromEvent(session, processedEvent);
        }

        this._sendEvent(processedEvent);
        return processedEvent;
      })
      .then(null, reason => {
        if (reason instanceof SentryError) {
          throw reason;
        }

        this.captureException(reason, {
          data: {
            __sentry__: true,
          },
          originalException: reason as Error,
        });
        throw new SentryError(
          `Event processing pipeline threw an error, original event will not be sent. Details have been sent as a new event.\nReason: ${reason}`,
        );
      });
  }

这一块的流程比拟多,尽管已做删减,还是须要分成几个模块来解说剖析

前置条件

    if (!this._isEnabled()) {
      return SyncPromise.reject(new SentryError('SDK not enabled, will not send event.'));
    }
    const isTransaction = event.type === 'transaction';
    if (!isTransaction && typeof sampleRate === 'number' && Math.random() > sampleRate) {
      return SyncPromise.reject(
        new SentryError(
          `Discarding event because it's not included in the random sample (sampling rate = ${sampleRate})`,
        ),
      );
    }

后面根本是对是否满足上报的条件进行校验,初始化的时候是否设置了enabled = false(默认为true),为false即Sentry不可应用,不会上报数据。设置的sampleRate采样率。比方设置了sampleRate = 0.1即会有10%的数据会被发送,实用于日活十分大的情景。

增加通用配置信息

this._prepareEvent(event, scope, hint)
次要是增加每个事件都须要的通用信息 如environment,message,dist,release, breadcrumbs等等

数据上报前的处理函数

beforeSend其实就是Sentry.init传入的函数,入参即为event,hint,最初返回event。便于应用方对event数据做解决过滤,等等

数据上报

        const session = scope && scope.getSession && scope.getSession();
        if (!isTransaction && session) {
          this._updateSessionFromEvent(session, processedEvent);
        }

        this._sendEvent(processedEvent);
        return processedEvent;

判断是否有session,有则更新
_sendEvent则指向对应的transport(因为浏览器兼容fetch,则本次实际上报形式是应用fetch)

  public sendEvent(event: Event): PromiseLike<Response> {
    return this._sendRequest(eventToSentryRequest(event, this._api), event);
  }

这里咱们看到,在上报前还会执行eventToSentryRequest,这个办法次要是在序列化参数

export function eventToSentryRequest(event: Event, api: API): SentryRequest {

  const req: SentryRequest = {
    body: JSON.stringify(sdkInfo ? enhanceEventWithSdkInfo(event, api.metadata.sdk) : event),
    type: eventType,
    url: useEnvelope ? api.getEnvelopeEndpointWithUrlEncodedAuth() : api.getStoreEndpointWithUrlEncodedAuth(),
  };
 
  return req;
}

Fetch中最初实现上报的中央为fetch.ts _sendRequest

  private _sendRequest(sentryRequest: SentryRequest, originalPayload: Event | Session): PromiseLike<Response> {
    if (this._isRateLimited(sentryRequest.type)) {
      return Promise.reject({
        event: originalPayload,
        type: sentryRequest.type,
        reason: `Transport locked till ${this._disabledUntil(sentryRequest.type)} due to too many requests.`,
        status: 429,
      });
    }

    const options: RequestInit = {
      body: sentryRequest.body,
      method: 'POST',
      referrerPolicy: (supportsReferrerPolicy() ? 'origin' : '') as ReferrerPolicy,
    };

    return this._buffer.add(
      new SyncPromise<Response>((resolve, reject) => {
        this._fetch(sentryRequest.url, options)
          .then(response => {
            const headers = {
              'x-sentry-rate-limits': response.headers.get('X-Sentry-Rate-Limits'),
              'retry-after': response.headers.get('Retry-After'),
            };
            this._handleResponse({
              requestType: sentryRequest.type,
              response,
              headers,
              resolve,
              reject,
            });
          })
          .catch(reject);
      }),
    );
  }

咱们能够看到sentry中通过_isRateLimited办法来避免一瞬间太多雷同的谬误产生。
最终上报的数据格式为

{
    "exception":{
        "values":[
            {
                "type":"UnhandledRejection",
                "value":"Non-Error promise rejection captured with value: 321",
                "mechanism":{
                    "handled":false,
                    "type":"onunhandledrejection"
                }
            }
        ]
    },
    "level":"error",
    "platform":"javascript",
    "event_id":"a94cd62ee6064321a340ce396da78de0",
    "timestamp":1617443534.168,
    "environment":"staging",
    "release":"1537345109360",
    "request":{
        "url":"http://127.0.0.1:5500/packages/browser/examples/index.html",
        "headers":{
            "Referer":"http://127.0.0.1:5500/packages/browser/examples/index.html",
            "User-Agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36"
        }
    },
    "sdk":{
        "name":"sentry.javascript.browser",
        "version":"6.2.5",
        "integrations":[

        ],
        "packages":[
            {
                "name":"npm:@sentry/browser",
                "version":"6.2.5"
            }
        ]
    }
}

总结

其实这篇文档在写到一半的时候,我忽然意识到一个略显难堪的问题,我如同没有具体写谬误数据是如何解决的,就间接写了上报的流程。然而毕竟写都写了,后期还是花了比拟多的精力,从新开始就有点浪费时间了。于是我决定在前面的一篇中补充上,Sentry对于异样数据的解决。ps: 因为本人之前做过一次监控SDK,在对Sentry理解的越多后,感觉到了本人之前的很多有余,同时也印证了本人之前的一些想法,这个系列不出意外应该还会继续上来。

参考资料

GitHub – getsentry/sentry-javascript: Official Sentry SDKs for Javascript
解析Sentry源码(三)| 数据上报

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理