ref(browser): Unify BrowserTransportOptions (#5058)

Enforce browser transport types by unifying fetch and xhr types into
a single `BrowserTransportOptions` interface. This is used as a generic
for `ClientOptions<BrowserTransportOptions>`.

This cleans up the transport typing, and enables the transportOptions to
be typed correctly in init.

Author: AbhiPrasad

packages/browser/src/client.ts

@@ -13,6 +13,7 @@ import { eventFromException, eventFromMessage } from './eventbuilder';
 import { IS_DEBUG_BUILD } from './flags';
 import { Breadcrumbs } from './integrations';
 import { BREADCRUMB_INTEGRATION_ID } from './integrations/breadcrumbs';
+import { BrowserTransportOptions } from './transports/types';
 import { sendReport } from './transports/utils';
 
 const globalObject = getGlobalObject<Window>();
@@ -37,13 +38,13 @@ export interface BaseBrowserOptions {
  * Configuration options for the Sentry Browser SDK.
  * @see @sentry/types Options for more information.
  */
-export interface BrowserOptions extends Options, BaseBrowserOptions {}
+export interface BrowserOptions extends Options<BrowserTransportOptions>, BaseBrowserOptions {}
 
 /**
  * Configuration options for the Sentry Browser SDK Client class
  * @see BrowserClient for more information.
  */
-export interface BrowserClientOptions extends ClientOptions, BaseBrowserOptions {}
+export interface BrowserClientOptions extends ClientOptions<BrowserTransportOptions>, BaseBrowserOptions {}
 
 /**
  * The Sentry Browser SDK Client.

packages/browser/src/transports/fetch.ts

@@ -1,25 +1,23 @@
 import { createTransport } from '@sentry/core';
-import { BaseTransportOptions, Transport, TransportMakeRequestResponse, TransportRequest } from '@sentry/types';
+import { Transport, TransportMakeRequestResponse, TransportRequest } from '@sentry/types';
 
+import { BrowserTransportOptions } from './types';
 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 makeFetchTransport(
-  options: FetchTransportOptions,
+  options: BrowserTransportOptions,
   nativeFetch: FetchImpl = getNativeFetchImplementation(),
 ): Transport {
   function makeRequest(request: TransportRequest): PromiseLike<TransportMakeRequestResponse> {
     const requestOptions: RequestInit = {
       body: request.body,
       method: 'POST',
       referrerPolicy: 'origin',
-      ...options.requestOptions,
+      headers: options.headers,
+      ...options.fetchOptions,
     };
 
     return nativeFetch(options.url, requestOptions).then(response => ({

packages/browser/src/transports/types.ts

@@ -0,0 +1,8 @@
+import { BaseTransportOptions } from '@sentry/types';
+
+export interface BrowserTransportOptions extends BaseTransportOptions {
+  /** Fetch API init parameters. Used by the FetchTransport */
+  fetchOptions?: RequestInit;
+  /** Custom headers for the transport. Used by the XHRTransport and FetchTransport */
+  headers?: { [key: string]: string };
+}

packages/browser/src/transports/xhr.ts

@@ -1,7 +1,9 @@
 import { createTransport } from '@sentry/core';
-import { BaseTransportOptions, Transport, TransportMakeRequestResponse, TransportRequest } from '@sentry/types';
+import { Transport, TransportMakeRequestResponse, TransportRequest } from '@sentry/types';
 import { SyncPromise } from '@sentry/utils';
 
+import { BrowserTransportOptions } from './types';
+
 /**
  * The DONE ready state for XmlHttpRequest
  *
@@ -12,14 +14,10 @@ import { SyncPromise } from '@sentry/utils';
  */
 const XHR_READYSTATE_DONE = 4;
 
-export interface XHRTransportOptions extends BaseTransportOptions {
-  headers?: { [key: string]: string };
-}
-
 /**
  * Creates a Transport that uses the XMLHttpRequest API to send events to Sentry.
  */
-export function makeXHRTransport(options: XHRTransportOptions): Transport {
+export function makeXHRTransport(options: BrowserTransportOptions): Transport {
   function makeRequest(request: TransportRequest): PromiseLike<TransportMakeRequestResponse> {
     return new SyncPromise((resolve, reject) => {
       const xhr = new XMLHttpRequest();

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

@@ -1,10 +1,11 @@
 import { EventEnvelope, EventItem } from '@sentry/types';
 import { createEnvelope, serializeEnvelope } from '@sentry/utils';
 
-import { FetchTransportOptions, makeFetchTransport } from '../../../src/transports/fetch';
+import { makeFetchTransport } from '../../../src/transports/fetch';
+import { BrowserTransportOptions } from '../../../src/transports/types';
 import { FetchImpl } from '../../../src/transports/utils';
 
-const DEFAULT_FETCH_TRANSPORT_OPTIONS: FetchTransportOptions = {
+const DEFAULT_FETCH_TRANSPORT_OPTIONS: BrowserTransportOptions = {
   url: 'https://sentry.io/api/42/store/?sentry_key=123&sentry_version=7',
   recordDroppedEvent: () => undefined,
 };
@@ -83,7 +84,7 @@ describe('NewFetchTransport', () => {
     };
 
     const transport = makeFetchTransport(
-      { ...DEFAULT_FETCH_TRANSPORT_OPTIONS, requestOptions: REQUEST_OPTIONS },
+      { ...DEFAULT_FETCH_TRANSPORT_OPTIONS, fetchOptions: REQUEST_OPTIONS },
       mockFetch,
     );
 

packages/browser/test/unit/transports/xhr.test.ts

@@ -1,9 +1,10 @@
 import { EventEnvelope, EventItem } from '@sentry/types';
 import { createEnvelope, serializeEnvelope } from '@sentry/utils';
 
-import { makeXHRTransport, XHRTransportOptions } from '../../../src/transports/xhr';
+import { BrowserTransportOptions } from '../../../src/transports/types';
+import { makeXHRTransport } from '../../../src/transports/xhr';
 
-const DEFAULT_XHR_TRANSPORT_OPTIONS: XHRTransportOptions = {
+const DEFAULT_XHR_TRANSPORT_OPTIONS: BrowserTransportOptions = {
   url: 'https://sentry.io/api/42/store/?sentry_key=123&sentry_version=7',
   recordDroppedEvent: () => undefined,
 };
@@ -82,7 +83,7 @@ describe('NewXHRTransport', () => {
       keepalive: 'true',
       referrer: 'http://example.org',
     };
-    const options: XHRTransportOptions = {
+    const options: BrowserTransportOptions = {
       ...DEFAULT_XHR_TRANSPORT_OPTIONS,
       headers,
     };