feat(browser): SDK Outcomes

kamilogorek · kamilogorek · commit b87dc2655720 · 2021-09-15T12:17:42.000+02:00
diff --git a/packages/browser/src/transports/base.ts b/packages/browser/src/transports/base.ts
@@ -1,6 +1,7 @@
 import { API } from '@sentry/core';
 import {
   Event,
+  Outcome,
   Response as SentryResponse,
   SentryRequestType,
   Status,
@@ -34,10 +35,18 @@ export abstract class BaseTransport implements Transport {
   /** Locks transport after receiving rate limits in a response */
   protected readonly _rateLimits: Record<string, Date> = {};
 
+  protected _outcomes: { [key in Outcome]?: number } = {};
+
   public constructor(public options: TransportOptions) {
     this._api = new API(options.dsn, options._metadata, options.tunnel);
     // eslint-disable-next-line deprecation/deprecation
     this.url = this._api.getStoreEndpointWithUrlEncodedAuth();
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'hidden') {
+        this._flushOutcomes();
+      }
+    });
   }
 
   /**
@@ -54,6 +63,48 @@ export abstract class BaseTransport implements Transport {
     return this._buffer.drain(timeout);
   }
 
+  /**
+   * @inheritDoc
+   */
+  public recordLostEvent(type: Outcome): void {
+    logger.log(`Adding ${type} outcome`);
+    this._outcomes[type] = (this._outcomes[type] ?? 0) + 1;
+  }
+
+  /**
+   * Send outcomes as an envelope
+   */
+  protected _flushOutcomes(): void {
+    if (!navigator || typeof navigator.sendBeacon !== 'function') {
+      logger.warn('Beacon API not available, skipping sending outcomes.');
+      return;
+    }
+
+    const outcomes = this._outcomes;
+
+    // Nothing to send
+    if (!Object.keys(outcomes).length) {
+      logger.log('No outcomes to flush');
+      return;
+    }
+
+    logger.log(`Flushing outcomes:\n${JSON.stringify(outcomes, null, 2)}`);
+
+    const url = this._api.getEnvelopeEndpointWithUrlEncodedAuth();
+    const itemHeaders = JSON.stringify({
+      type: 'client_report',
+    });
+    const item = JSON.stringify({
+      timestamp: Date.now(),
+      discarded_events: this._outcomes,
+    });
+    const envelope = `${itemHeaders}\n${item}`;
+
+    navigator.sendBeacon(url, envelope);
+
+    this._outcomes = {};
+  }
+
   /**
    * Handle Sentry repsonse for promise-based transports.
    */
diff --git a/packages/browser/src/transports/fetch.ts b/packages/browser/src/transports/fetch.ts
@@ -1,6 +1,13 @@
 import { eventToSentryRequest, sessionToSentryRequest } from '@sentry/core';
-import { Event, Response, SentryRequest, Session, TransportOptions } from '@sentry/types';
-import { getGlobalObject, isNativeFetch, logger, supportsReferrerPolicy, SyncPromise } from '@sentry/utils';
+import { Event, Outcome, Response, SentryRequest, Session, TransportOptions } from '@sentry/types';
+import {
+  getGlobalObject,
+  isNativeFetch,
+  logger,
+  SentryError,
+  supportsReferrerPolicy,
+  SyncPromise,
+} from '@sentry/utils';
 
 import { BaseTransport } from './base';
 
@@ -106,6 +113,8 @@ export class FetchTransport extends BaseTransport {
    */
   private _sendRequest(sentryRequest: SentryRequest, originalPayload: Event | Session): PromiseLike<Response> {
     if (this._isRateLimited(sentryRequest.type)) {
+      this.recordLostEvent(Outcome.RateLimit);
+
       return Promise.reject({
         event: originalPayload,
         type: sentryRequest.type,
@@ -132,25 +141,34 @@ export class FetchTransport extends BaseTransport {
       options.headers = this.options.headers;
     }
 
-    return this._buffer.add(
-      () =>
-        new SyncPromise<Response>((resolve, reject) => {
-          void 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);
-        }),
-    );
+    return this._buffer
+      .add(
+        () =>
+          new SyncPromise<Response>((resolve, reject) => {
+            void 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);
+          }),
+      )
+      .then(undefined, reason => {
+        if (reason instanceof SentryError) {
+          this.recordLostEvent(Outcome.QueueSize);
+        } else {
+          this.recordLostEvent(Outcome.NetworkError);
+        }
+        throw reason;
+      });
   }
 }
diff --git a/packages/browser/src/transports/xhr.ts b/packages/browser/src/transports/xhr.ts
@@ -1,6 +1,6 @@
 import { eventToSentryRequest, sessionToSentryRequest } from '@sentry/core';
-import { Event, Response, SentryRequest, Session } from '@sentry/types';
-import { SyncPromise } from '@sentry/utils';
+import { Event, Outcome, Response, SentryRequest, Session } from '@sentry/types';
+import { SentryError, SyncPromise } from '@sentry/utils';
 
 import { BaseTransport } from './base';
 
@@ -26,6 +26,8 @@ export class XHRTransport extends BaseTransport {
    */
   private _sendRequest(sentryRequest: SentryRequest, originalPayload: Event | Session): PromiseLike<Response> {
     if (this._isRateLimited(sentryRequest.type)) {
+      this.recordLostEvent(Outcome.RateLimit);
+
       return Promise.reject({
         event: originalPayload,
         type: sentryRequest.type,
@@ -36,29 +38,38 @@ export class XHRTransport extends BaseTransport {
       });
     }
 
-    return this._buffer.add(
-      () =>
-        new SyncPromise<Response>((resolve, reject) => {
-          const request = new XMLHttpRequest();
+    return this._buffer
+      .add(
+        () =>
+          new SyncPromise<Response>((resolve, reject) => {
+            const request = new XMLHttpRequest();
 
-          request.onreadystatechange = (): void => {
-            if (request.readyState === 4) {
-              const headers = {
-                'x-sentry-rate-limits': request.getResponseHeader('X-Sentry-Rate-Limits'),
-                'retry-after': request.getResponseHeader('Retry-After'),
-              };
-              this._handleResponse({ requestType: sentryRequest.type, response: request, headers, resolve, reject });
-            }
-          };
+            request.onreadystatechange = (): void => {
+              if (request.readyState === 4) {
+                const headers = {
+                  'x-sentry-rate-limits': request.getResponseHeader('X-Sentry-Rate-Limits'),
+                  'retry-after': request.getResponseHeader('Retry-After'),
+                };
+                this._handleResponse({ requestType: sentryRequest.type, response: request, headers, resolve, reject });
+              }
+            };
 
-          request.open('POST', sentryRequest.url);
-          for (const header in this.options.headers) {
-            if (this.options.headers.hasOwnProperty(header)) {
-              request.setRequestHeader(header, this.options.headers[header]);
+            request.open('POST', sentryRequest.url);
+            for (const header in this.options.headers) {
+              if (this.options.headers.hasOwnProperty(header)) {
+                request.setRequestHeader(header, this.options.headers[header]);
+              }
             }
-          }
-          request.send(sentryRequest.body);
-        }),
-    );
+            request.send(sentryRequest.body);
+          }),
+      )
+      .then(undefined, reason => {
+        if (reason instanceof SentryError) {
+          this.recordLostEvent(Outcome.QueueSize);
+        } else {
+          this.recordLostEvent(Outcome.NetworkError);
+        }
+        throw reason;
+      });
   }
 }
diff --git a/packages/core/src/baseclient.ts b/packages/core/src/baseclient.ts
@@ -7,6 +7,7 @@ import {
   Integration,
   IntegrationClass,
   Options,
+  Outcome,
   SessionStatus,
   Severity,
 } from '@sentry/types';
@@ -498,6 +499,7 @@ export abstract class BaseClient<B extends Backend, O extends Options> implement
   protected _processEvent(event: Event, hint?: EventHint, scope?: Scope): PromiseLike<Event> {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     const { beforeSend, sampleRate } = this.getOptions();
+    const transport = this._getBackend().getTransport();
 
     if (!this._isEnabled()) {
       return SyncPromise.reject(new SentryError('SDK not enabled, will not capture event.'));
@@ -508,6 +510,7 @@ export abstract class BaseClient<B extends Backend, O extends Options> implement
     // 0.0 === 0% events are sent
     // Sampling for transaction happens somewhere else
     if (!isTransaction && typeof sampleRate === 'number' && Math.random() > sampleRate) {
+      transport.recordLostEvent?.(Outcome.SampleRate);
       return SyncPromise.reject(
         new SentryError(
           `Discarding event because it's not included in the random sample (sampling rate = ${sampleRate})`,
@@ -518,6 +521,7 @@ export abstract class BaseClient<B extends Backend, O extends Options> implement
     return this._prepareEvent(event, scope, hint)
       .then(prepared => {
         if (prepared === null) {
+          transport.recordLostEvent?.(Outcome.EventProcessor);
           throw new SentryError('An event processor returned null, will not send event.');
         }
 
@@ -531,6 +535,7 @@ export abstract class BaseClient<B extends Backend, O extends Options> implement
       })
       .then(processedEvent => {
         if (processedEvent === null) {
+          transport.recordLostEvent?.(Outcome.BeforeSend);
           throw new SentryError('`beforeSend` returned `null`, will not send event.');
         }
 
diff --git a/packages/node/src/transports/base/index.ts b/packages/node/src/transports/base/index.ts
@@ -199,9 +199,6 @@ export abstract class BaseTransport implements Transport {
       });
     }
 
-    if (!this._buffer.isReady()) {
-      return Promise.reject(new SentryError('Not adding Promise due to buffer limit reached.'));
-    }
     return this._buffer.add(
       () =>
         new Promise<Response>((resolve, reject) => {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -47,6 +47,6 @@ export {
   TransactionSamplingMethod,
 } from './transaction';
 export { Thread } from './thread';
-export { Transport, TransportOptions, TransportClass } from './transport';
+export { Outcome, Transport, TransportOptions, TransportClass } from './transport';
 export { User } from './user';
 export { WrappedFunction } from './wrappedfunction';
diff --git a/packages/types/src/transport.ts b/packages/types/src/transport.ts
@@ -4,6 +4,15 @@ import { Response } from './response';
 import { SdkMetadata } from './sdkmetadata';
 import { Session, SessionAggregates } from './session';
 
+export enum Outcome {
+  BeforeSend = 'before_send',
+  EventProcessor = 'event_processor',
+  NetworkError = 'network_error',
+  QueueSize = 'queue_size',
+  RateLimit = 'backoff', // NOTE(kamil): I'd prefer to call it `rate_limit` instead of `backoff`
+  SampleRate = 'sample_rate',
+}
+
 /** Transport used sending data to Sentry */
 export interface Transport {
   /**
@@ -29,6 +38,11 @@ export interface Transport {
    * still events in the queue when the timeout is reached.
    */
   close(timeout?: number): PromiseLike<boolean>;
+
+  /**
+   * Increment the counter for the specific client outcome
+   */
+  recordLostEvent?(type: Outcome): void;
 }
 
 /** JSDoc */

Original file line number	Diff line number	Diff line change
`@@ -199,9 +199,6 @@ export abstract class BaseTransport implements Transport {`
`199`	`199`	`});`
`200`	`200`	`}`
`201`	`201`
`202`		`- if (!this._buffer.isReady()) {`
`203`		`- return Promise.reject(new SentryError('Not adding Promise due to buffer limit reached.'));`
`204`		`- }`
`205`	`202`	`return this._buffer.add(`
`206`	`203`	`() =>`
`207`	`204`	`new Promise<Response>((resolve, reject) => {`