feat(browser): Add new v7 Fetch Transport

packages/browser/src/backend.ts

@@ -1,9 +1,9 @@
-import { BaseBackend } from '@sentry/core';
-import { Event, EventHint, Options, Severity, Transport } from '@sentry/types';
+import { BaseBackend, getEnvelopeEndpointWithUrlEncodedAuth, initAPIDetails } from '@sentry/core';
+import { Event, EventHint, Options, Severity, Transport, TransportOptions } from '@sentry/types';
 import { supportsFetch } from '@sentry/utils';
 
 import { eventFromException, eventFromMessage } from './eventbuilder';
-import { FetchTransport, XHRTransport } from './transports';
+import { FetchTransport, makeNewFetchTransport, XHRTransport } from './transports';
 
 /**
  * Configuration options for the Sentry Browser SDK.
@@ -58,18 +58,23 @@ export class BrowserBackend extends BaseBackend<BrowserOptions> {
       return super._setupTransport();
     }
 
-    const transportOptions = {
+    const transportOptions: TransportOptions = {
       ...this._options.transportOptions,
       dsn: this._options.dsn,
       tunnel: this._options.tunnel,
       sendClientReports: this._options.sendClientReports,
       _metadata: this._options._metadata,
     };
 
+    const api = initAPIDetails(transportOptions.dsn, transportOptions._metadata, transportOptions.tunnel);
+    const url = getEnvelopeEndpointWithUrlEncodedAuth(api.dsn, api.tunnel);
+
     if (this._options.transport) {
       return new this._options.transport(transportOptions);
     }
     if (supportsFetch()) {
+      const requestOptions: RequestInit = { ...transportOptions.fetchParameters };
+      this._newTransport = makeNewFetchTransport({ requestOptions, url });
       return new FetchTransport(transportOptions);
     }
     return new XHRTransport(transportOptions);

packages/browser/src/transports/index.ts

@@ -1,3 +1,5 @@
 export { BaseTransport } from './base';
 export { FetchTransport } from './fetch';
 export { XHRTransport } from './xhr';
+
+export { makeNewFetchTransport } from './new-fetch';

packages/browser/src/transports/new-fetch.ts

@@ -0,0 +1,44 @@
+import {
+  BaseTransportOptions,
+  createTransport,
+  NewTransport,
+  TransportMakeRequestResponse,
+  TransportRequest,
+} from '@sentry/core';
+
+import { FetchImpl, getNativeFetchImplementation } from './utils';
+
+export interface FetchTransportOptions extends BaseTransportOptions {
+  requestOptions?: RequestInit;
+}
+
+/**
+ * Creates a Transport that uses the Fetch API to send events to Sentry.
+ */
+export function makeNewFetchTransport(
+  options: FetchTransportOptions,
+  nativeFetch: FetchImpl = getNativeFetchImplementation(),
+): NewTransport {
+  function makeRequest(request: TransportRequest): PromiseLike<TransportMakeRequestResponse> {
+    const requestOptions: RequestInit = {
+      body: request.body,
+      method: 'POST',
+      referrerPolicy: 'origin',
+      ...options.requestOptions,
+    };
+
+    return nativeFetch(options.url, requestOptions).then(response => {
+      return response.text().then(body => ({
+        body,
+        headers: {
+          'x-sentry-rate-limits': response.headers.get('X-Sentry-Rate-Limits'),
+          'retry-after': response.headers.get('Retry-After'),
+        },
+        reason: response.statusText,
+        statusCode: response.status,
+      }));
+    });
+  }
+
+  return createTransport({ bufferSize: options.bufferSize }, makeRequest);
+}

packages/browser/test/unit/transports/new-fetch.test.ts

@@ -0,0 +1,97 @@
+import { makeNewFetchTransport, FetchTransportOptions } from '../../../src/transports/new-fetch';
+import { createEnvelope, serializeEnvelope } from '@sentry/utils';
+import { EventEnvelope, EventItem } from '@sentry/types';
+import { FetchImpl } from '../../../src/transports/utils';
+
+const DEFAULT_FETCH_TRANSPORT_OPTIONS: FetchTransportOptions = {
+  url: 'https://sentry.io/api/42/store/?sentry_key=123&sentry_version=7',
+};
+
+const ERROR_ENVELOPE = createEnvelope<EventEnvelope>({ event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2', sent_at: '123' }, [
+  [{ type: 'event' }, { event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2' }] as EventItem,
+]);
+
+class Headers {
+  headers: { [key: string]: string } = {};
+  get(key: string) {
+    return this.headers[key] || null;
+  }
+  set(key: string, value: string) {
+    this.headers[key] = value;
+  }
+}
+
+describe('NewFetchTransport', () => {
+  it('calls fetch with the given URL', async () => {
+    const mockFetch = jest.fn(() =>
+      Promise.resolve({
+        headers: new Headers(),
+        status: 200,
+        text: () => Promise.resolve({}),
+      }),
+    ) as unknown as FetchImpl;
+    const transport = makeNewFetchTransport(DEFAULT_FETCH_TRANSPORT_OPTIONS, mockFetch);
+
+    expect(mockFetch).toHaveBeenCalledTimes(0);
+    const res = await transport.send(ERROR_ENVELOPE);
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+
+    expect(res.status).toBe('success');
+
+    expect(mockFetch).toHaveBeenLastCalledWith(DEFAULT_FETCH_TRANSPORT_OPTIONS.url, {
+      body: serializeEnvelope(ERROR_ENVELOPE),
+      method: 'POST',
+      referrerPolicy: 'origin',
+    });
+  });
+
+  it('sets rate limit headers', async () => {
+    const headers = {
+      get: jest.fn(),
+    };
+
+    const mockFetch = jest.fn(() =>
+      Promise.resolve({
+        headers,
+        status: 200,
+        text: () => Promise.resolve({}),
+      }),
+    ) as unknown as FetchImpl;
+    const transport = makeNewFetchTransport(DEFAULT_FETCH_TRANSPORT_OPTIONS, mockFetch);
+
+    expect(headers.get).toHaveBeenCalledTimes(0);
+    await transport.send(ERROR_ENVELOPE);
+
+    expect(headers.get).toHaveBeenCalledTimes(2);
+    expect(headers.get).toHaveBeenCalledWith('X-Sentry-Rate-Limits');
+    expect(headers.get).toHaveBeenCalledWith('Retry-After');
+  });
+
+  it('allows for custom options to be passed in', async () => {
+    const mockFetch = jest.fn(() =>
+      Promise.resolve({
+        headers: new Headers(),
+        status: 200,
+        text: () => Promise.resolve({}),
+      }),
+    ) as unknown as FetchImpl;
+
+    const REQUEST_OPTIONS: RequestInit = {
+      referrerPolicy: 'strict-origin',
+      keepalive: true,
+      referrer: 'http://example.org',
+    };
+
+    const transport = makeNewFetchTransport(
+      { ...DEFAULT_FETCH_TRANSPORT_OPTIONS, requestOptions: REQUEST_OPTIONS },
+      mockFetch,
+    );
+
+    await transport.send(ERROR_ENVELOPE);
+    expect(mockFetch).toHaveBeenLastCalledWith(DEFAULT_FETCH_TRANSPORT_OPTIONS.url, {
+      body: serializeEnvelope(ERROR_ENVELOPE),
+      method: 'POST',
+      ...REQUEST_OPTIONS,
+    });
+  });
+});

packages/core/src/index.ts

@@ -29,6 +29,13 @@ export { BackendClass, BaseBackend } from './basebackend';
 export { eventToSentryRequest, sessionToSentryRequest } from './request';
 export { initAndBind, ClientClass } from './sdk';
 export { NoopTransport } from './transports/noop';
+export {
+  BaseTransportOptions,
+  createTransport,
+  NewTransport,
+  TransportMakeRequestResponse,
+  TransportRequest,
+} from './transports/base';
 export { SDK_VERSION } from './version';
 
 import * as Integrations from './integrations';

packages/core/src/request.ts

@@ -82,6 +82,35 @@ export function createEventEnvelope(event: Event, api: APIDetails): EventEnvelop
   const { transactionSampling } = event.sdkProcessingMetadata || {};
   const { method: samplingMethod, rate: sampleRate } = transactionSampling || {};
 
+  // TODO: Below is a temporary hack in order to debug a serialization error - see
+  // https://github.com/getsentry/sentry-javascript/issues/2809,
+  // https://github.com/getsentry/sentry-javascript/pull/4425, and
+  // https://github.com/getsentry/sentry-javascript/pull/4574.
+  //
+  // TL; DR: even though we normalize all events (which should prevent this), something is causing `JSON.stringify` to
+  // throw a circular reference error.
+  //
+  // When it's time to remove it:
+  // 1. Delete everything between here and where the request object `req` is created, EXCEPT the line deleting
+  //    `sdkProcessingMetadata`
+  // 2. Restore the original version of the request body, which is commented out
+  // 3. Search for either of the PR URLs above and pull out the companion hacks in the browser playwright tests and the
+  //    baseClient tests in this package
+  enhanceEventWithSdkInfo(event, api.metadata.sdk);
+  event.tags = event.tags || {};
+  event.extra = event.extra || {};
+
+  // In theory, all events should be marked as having gone through normalization and so
+  // we should never set this tag/extra data
+  if (!(event.sdkProcessingMetadata && event.sdkProcessingMetadata.baseClientNormalized)) {
+    event.tags.skippedNormalization = true;
+    event.extra.normalizeDepth = event.sdkProcessingMetadata ? event.sdkProcessingMetadata.normalizeDepth : 'unset';
+  }
+
+  // prevent this data from being sent to sentry
+  // TODO: This is NOT part of the hack - DO NOT DELETE
+  delete event.sdkProcessingMetadata;
+
   const envelopeHeaders = {
     event_id: event.event_id as string,
     sent_at: new Date().toISOString(),

packages/integration-tests/suites/new-transports/fetch-captureException/subject.js

@@ -0,0 +1 @@
+Sentry.captureException({});

packages/integration-tests/suites/new-transports/fetch-captureException/test.ts

@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';
+
+sentryTest('should capture an empty object with the new fetch transport', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'Error',
+    value: 'Non-Error exception captured with keys: [object has no keys]',
+    mechanism: {
+      type: 'generic',
+      handled: true,
+    },
+  });
+});

packages/integration-tests/suites/new-transports/fetch-startTransaction/subject.js

@@ -0,0 +1,2 @@
+const transaction = Sentry.startTransaction({ name: 'test_transaction_1' });
+transaction.finish();

packages/integration-tests/suites/new-transports/fetch-startTransaction/test.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';
+
+sentryTest('should report a transaction with the new fetch transport', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+  const transaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(transaction.transaction).toBe('test_transaction_1');
+  expect(transaction.spans).toBeDefined();
+});

packages/integration-tests/suites/new-transports/init.js

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/browser';
+// eslint-disable-next-line no-unused-vars
+import '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  _experiments: {
+    newTransport: true,
+  },
+  tracesSampleRate: 1.0,
+});