feat(v8/browser): Remove XHR transport (#10703)

resolves #5927

Removes `makeXHRTransport` and makes the fetch transport the default
one.

I've also added a warning warning to browser client init that states
that the sentry browser sdk requires the fetch API to function.

Author: AbhiPrasad

MIGRATION.md

@@ -90,6 +90,11 @@ to access and mutate the current scope.
 
 `@sentry/hub` has been removed. All exports from `@sentry.hub` should be available in `@sentry/core`.
 
+## Removal of `makeXHRTransport` transport (#10703)
+
+The `makeXHRTransport` transport has been removed. Only `makeFetchTransport` is available now. This means that the
+Sentry SDK requires the fetch API to be available in the environment.
+
 ## General API Changes
 
 - The minumum supported Node version for all the SDK packages is Node 14 (#10527)

dev-packages/browser-integration-tests/suites/replay/errors/errorModeCustomTransport/init.js

@@ -14,7 +14,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
   integrations: [window.Replay],
   transport: options => {
-    const transport = new Sentry.makeXHRTransport(options);
+    const transport = new Sentry.makeFetchTransport(options);
 
     delete transport.send.__sentry__baseTransport__;
 

packages/browser/src/exports.ts

@@ -82,7 +82,7 @@ export * from './metrics';
 
 export { WINDOW } from './helpers';
 export { BrowserClient } from './client';
-export { makeFetchTransport, makeXHRTransport } from './transports';
+export { makeFetchTransport } from './transports/fetch';
 export {
   defaultStackParser,
   defaultStackLineParsers,

packages/browser/src/sdk.ts

@@ -27,7 +27,7 @@ import { httpContextIntegration } from './integrations/httpcontext';
 import { linkedErrorsIntegration } from './integrations/linkederrors';
 import { browserApiErrorsIntegration } from './integrations/trycatch';
 import { defaultStackParser } from './stack-parsers';
-import { makeFetchTransport, makeXHRTransport } from './transports';
+import { makeFetchTransport } from './transports/fetch';
 
 /** Get the default integrations for the browser SDK. */
 export function getDefaultIntegrations(_options: Options): Integration[] {
@@ -116,11 +116,18 @@ export function init(options: BrowserOptions = {}): void {
     options.sendClientReports = true;
   }
 
+  if (DEBUG_BUILD) {
+    if (!supportsFetch()) {
+      logger.warn(
+        'No Fetch API detected. The Sentry SDK requires a Fetch API compatible environment to send events. Please add a Fetch API polyfill.',
+      );
+    }
+  }
   const clientOptions: BrowserClientOptions = {
     ...options,
     stackParser: stackParserFromStackParserOptions(options.stackParser || defaultStackParser),
     integrations: getIntegrationsToSetup(options),
-    transport: options.transport || (supportsFetch() ? makeFetchTransport : makeXHRTransport),
+    transport: options.transport || makeFetchTransport,
   };
 
   initAndBind(BrowserClient, clientOptions);

packages/browser/src/transports/fetch.ts

@@ -11,7 +11,7 @@ import { clearCachedFetchImplementation, getNativeFetchImplementation } from './
  */
 export function makeFetchTransport(
   options: BrowserTransportOptions,
-  nativeFetch: FetchImpl = getNativeFetchImplementation(),
+  nativeFetch: FetchImpl | undefined = getNativeFetchImplementation(),
 ): Transport {
   let pendingBodySize = 0;
   let pendingCount = 0;
@@ -41,6 +41,11 @@ export function makeFetchTransport(
       ...options.fetchOptions,
     };
 
+    if (!nativeFetch) {
+      clearCachedFetchImplementation();
+      return rejectedSyncPromise('No fetch implementation available');
+    }
+
     try {
       return nativeFetch(options.url, requestOptions).then(response => {
         pendingBodySize -= requestSize;

packages/browser/src/transports/index.ts

@@ -45,7 +45,7 @@ export type FetchImpl = typeof fetch;
  * Firefox: NetworkError when attempting to fetch resource
  * Safari:  resource blocked by content blocker
  */
-export function getNativeFetchImplementation(): FetchImpl {
+export function getNativeFetchImplementation(): FetchImpl | undefined {
   if (cachedFetchImpl) {
     return cachedFetchImpl;
   }
@@ -75,7 +75,13 @@ export function getNativeFetchImplementation(): FetchImpl {
     }
   }
 
-  return (cachedFetchImpl = fetchImpl.bind(WINDOW));
+  try {
+    return (cachedFetchImpl = fetchImpl.bind(WINDOW));
+  } catch (e) {
+    // empty
+  }
+
+  return undefined;
   /* eslint-enable @typescript-eslint/unbound-method */
 }
 

packages/browser/src/transports/utils.ts

@@ -10,6 +10,23 @@ describe('Sentry.VueIntegration', () => {
   let loggerWarnings: unknown[] = [];
   let warnings: unknown[] = [];
 
+  const globalFetch = globalThis.fetch;
+  const globalResponse = globalThis.Response;
+  const globalRequest = globalThis.Request;
+
+  beforeAll(() => {
+    globalThis.fetch = jest.fn();
+    // @ts-expect-error This is a mock
+    globalThis.Response = jest.fn();
+    globalThis.Request = jest.fn();
+  });
+
+  afterAll(() => {
+    globalThis.fetch = globalFetch;
+    globalThis.Response = globalResponse;
+    globalThis.Request = globalRequest;
+  });
+
   beforeEach(() => {
     warnings = [];
     loggerWarnings = [];
@@ -28,7 +45,11 @@ describe('Sentry.VueIntegration', () => {
   });
 
   it('allows to initialize integration later', () => {
-    Sentry.init({ dsn: PUBLIC_DSN, defaultIntegrations: false, autoSessionTracking: false });
+    Sentry.init({
+      dsn: PUBLIC_DSN,
+      defaultIntegrations: false,
+      autoSessionTracking: false,
+    });
 
     const el = document.createElement('div');
     const app = createApp({
@@ -48,7 +69,11 @@ describe('Sentry.VueIntegration', () => {
   });
 
   it('warns when mounting before SDK.VueIntegration', () => {
-    Sentry.init({ dsn: PUBLIC_DSN, defaultIntegrations: false, autoSessionTracking: false });
+    Sentry.init({
+      dsn: PUBLIC_DSN,
+      defaultIntegrations: false,
+      autoSessionTracking: false,
+    });
 
     const el = document.createElement('div');
     const app = createApp({