feat(browser): Add outgoingRequest context to fetch errors

For now, this only adds `method` and `url` fields.

Author: mydea

dev-packages/browser-integration-tests/suites/errors/fetch/subject.js

@@ -31,7 +31,7 @@ window.credentialsInUrl = () => {
 
 // Invalid mode
 window.invalidMode = () => {
-  fetch('https://sentry-test-external.io/invalid-mode', { mode: 'navigate' });
+  fetch('http://sentry-test-external.io/invalid-mode', { mode: 'navigate' });
 };
 
 // Invalid request method

dev-packages/browser-integration-tests/suites/errors/fetch/test.ts

@@ -27,6 +27,10 @@ sentryTest('handles fetch network errors @firefox', async ({ getLocalTestUrl, pa
       type: 'onunhandledrejection',
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'http://sentry-test-external.io/does-not-exist',
+  });
 });
 
 
@@ -55,6 +59,10 @@ sentryTest('handles fetch network errors on subdomains @firefox', async ({ getLo
       type: 'onunhandledrejection',
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'http://subdomain.sentry-test-external.io/does-not-exist',
+  });
 });
 
 sentryTest('handles fetch invalid header name errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
@@ -85,6 +93,10 @@ sentryTest('handles fetch invalid header name errors @firefox', async ({ getLoca
       frames: expect.any(Array),
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'http://sentry-test-external.io/invalid-header-name',
+  });
 });
 
 sentryTest('handles fetch invalid header value errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
@@ -117,6 +129,10 @@ sentryTest('handles fetch invalid header value errors @firefox', async ({ getLoc
       frames: expect.any(Array),
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'http://sentry-test-external.io/invalid-header-value',
+  });
 });
 
 sentryTest('handles fetch invalid URL scheme errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
@@ -159,6 +175,10 @@ sentryTest('handles fetch invalid URL scheme errors @firefox', async ({ getLocal
       frames: expect.any(Array),
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'blub://sentry-test-external.io/invalid-scheme',
+  });
 });
 
 sentryTest('handles fetch credentials in url errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
@@ -171,10 +191,10 @@ sentryTest('handles fetch credentials in url errors @firefox', async ({ getLocal
 
   const errorMap: Record<string, string> = {
     chromium:
-      "Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: https://user:[email protected]/credentials-in-url",
+      "Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: http://user:[email protected]/credentials-in-url",
     webkit: 'URL is not valid or contains user credentials.',
     firefox:
-      'Window.fetch: https://user:[email protected]/credentials-in-url is an url with embedded credentials.',
+      'Window.fetch: http://user:[email protected]/credentials-in-url is an url with embedded credentials.',
   };
 
   const error = errorMap[browserName];
@@ -191,6 +211,10 @@ sentryTest('handles fetch credentials in url errors @firefox', async ({ getLocal
       frames: expect.any(Array),
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'https://user:[email protected]/credentials-in-url',
+  });
 });
 
 sentryTest('handles fetch invalid mode errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
@@ -222,6 +246,10 @@ sentryTest('handles fetch invalid mode errors @firefox', async ({ getLocalTestUr
       frames: expect.any(Array),
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'GET',
+    url: 'http://sentry-test-external.io/invalid-mode',
+  });
 });
 
 sentryTest('handles fetch invalid request method errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
@@ -252,6 +280,10 @@ sentryTest('handles fetch invalid request method errors @firefox', async ({ getL
       frames: expect.any(Array),
     },
   });
+  expect(eventData.contexts?.outgoingRequest).toEqual({
+    method: 'CONNECT',
+    url: 'http://sentry-test-external.io/invalid-method',
+  });
 });
 
 sentryTest(
@@ -284,5 +316,9 @@ sentryTest(
         frames: expect.any(Array),
       },
     });
+    expect(eventData.contexts?.outgoingRequest).toEqual({
+      method: 'PUT',
+      url: 'http://sentry-test-external.io/no-cors-method',
+    });
   },
 );

packages/core/src/utils-hoist/instrument/fetch.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { Scope } from '../../scope';
 import type { HandlerDataFetch } from '../../types-hoist';
+import { addScopeDataToError } from '../../utils/prepareEvent';
 
 import { isError } from '../is';
 import { addNonEnumerableProperty, fill } from '../object';
@@ -126,6 +128,15 @@ function instrumentFetch(onFetchResolved?: (response: Response) => void, skipNat
             }
           }
 
+          // We attach an additional scope to the error, which contains the outgoing request data
+          // If this error bubbles up and is captured by Sentry, the scope will be added to the event
+          const scope = new Scope();
+          scope.setContext('outgoingRequest', {
+            method,
+            url,
+          });
+          addScopeDataToError(error, scope);
+
           // NOTE: If you are a Sentry user, and you are seeing this stack frame,
           //       it means the sentry.javascript SDK caught an error invoking your application code.
           //       This is expected behavior and NOT indicative of a bug with sentry.javascript.

packages/core/src/utils/prepareEvent.ts

@@ -21,6 +21,19 @@ export type ExclusiveEventHintOrCaptureContext =
   | (CaptureContext & Partial<{ [key in keyof EventHint]: never }>)
   | (EventHint & Partial<{ [key in keyof ScopeContext]: never }>);
 
+const errorScopeMap = new WeakMap<Error, Scope>();
+
+/**
+ * Add a scope that should be applied to the given error, if it is captured by Sentry.
+ */
+export function addScopeDataToError(error: Error, scope: Scope): void {
+  try {
+    errorScopeMap.set(error, scope);
+  } catch {
+    // ignore it if errors happen here, e.g. if `error` is not an object
+  }
+}
+
 /**
  * Adds common information to events.
  *
@@ -84,6 +97,16 @@ export function prepareEvent(
     mergeScopeData(data, isolationData);
   }
 
+  // In some cases, additional scope data may be attached to an error
+  // We also merge this data into the event scope data, if available
+  const originalException = hint.originalException;
+  if (originalException instanceof Error) {
+    const additionalErrorScope = errorScopeMap.get(originalException);
+    if (additionalErrorScope) {
+      mergeScopeData(data, additionalErrorScope.getScopeData());
+    }
+  }
+
   if (finalScope) {
     const finalScopeData = finalScope.getScopeData();
     mergeScopeData(data, finalScopeData);