feat(browser): Attach host as part of error message to "Failed to fetch" errors

.size-limit.js

@@ -40,7 +40,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '37.5 KB',
+    limit: '38 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay)',

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

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  transportOptions: {
+    fetchOptions: {
+      // See: https://github.com/microsoft/playwright/issues/34497
+      keepalive: false,
+    },
+  },
+});

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

@@ -0,0 +1,45 @@
+// Based on possible TypeError exceptions from https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch
+
+// Network error (e.g. ad-blocked, offline, page does not exist, ...)
+window.networkError = () => {
+  fetch('http://sentry-test-external.io/does-not-exist');
+};
+
+window.networkErrorSubdomain = () => {
+  fetch('http://subdomain.sentry-test-external.io/does-not-exist');
+};
+
+// Invalid header also produces TypeError
+window.invalidHeaderName = () => {
+  fetch('http://sentry-test-external.io/invalid-header-name', { headers: { 'C ontent-Type': 'text/xml' } });
+};
+
+// Invalid header value also produces TypeError
+window.invalidHeaderValue = () => {
+  fetch('http://sentry-test-external.io/invalid-header-value', { headers: ['Content-Type', 'text/html', 'extra'] });
+};
+
+// Invalid URL scheme
+window.invalidUrlScheme = () => {
+  fetch('blub://sentry-test-external.io/invalid-scheme');
+};
+
+// URL includes credentials
+window.credentialsInUrl = () => {
+  fetch('https://user:password@sentry-test-external.io/credentials-in-url');
+};
+
+// Invalid mode
+window.invalidMode = () => {
+  fetch('https://sentry-test-external.io/invalid-mode', { mode: 'navigate' });
+};
+
+// Invalid request method
+window.invalidMethod = () => {
+  fetch('http://sentry-test-external.io/invalid-method', { method: 'CONNECT' });
+};
+
+// No-cors mode with cors-required method
+window.noCorsMethod = () => {
+  fetch('http://sentry-test-external.io/no-cors-method', { mode: 'no-cors', method: 'PUT' });
+};

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

@@ -0,0 +1,288 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../utils/helpers';
+
+sentryTest('handles fetch network errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('networkError()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium: 'Failed to fetch (sentry-test-external.io)',
+    webkit: 'Load failed (sentry-test-external.io)',
+    firefox: 'NetworkError when attempting to fetch resource. (sentry-test-external.io)',
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+  });
+});
+
+
+sentryTest('handles fetch network errors on subdomains @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('networkErrorSubdomain()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium: 'Failed to fetch (subdomain.sentry-test-external.io)',
+    webkit: 'Load failed (subdomain.sentry-test-external.io)',
+    firefox: 'NetworkError when attempting to fetch resource. (subdomain.sentry-test-external.io)',
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+  });
+});
+
+sentryTest('handles fetch invalid header name errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('invalidHeaderName()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium: "Failed to execute 'fetch' on 'Window': Invalid name",
+    webkit: "Invalid header name: 'C ontent-Type'",
+    firefox: 'Window.fetch: c ontent-type is an invalid header name.',
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});
+
+sentryTest('handles fetch invalid header value errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('invalidHeaderValue()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium:
+      "Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': The provided value cannot be converted to a sequence.",
+    webkit: 'Value is not a sequence',
+    firefox:
+      "Window.fetch: Element of sequence<sequence<ByteString>> branch of (sequence<sequence<ByteString>> or record<ByteString, ByteString>) can't be converted to a sequence.",
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});
+
+sentryTest('handles fetch invalid URL scheme errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  await page.route('http://sentry-test-external.io/**', route => {
+    return route.fulfill({
+      status: 200,
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('invalidUrlScheme()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium: 'Failed to fetch (sentry-test-external.io)',
+    webkit: 'Load failed (sentry-test-external.io)',
+    firefox: 'NetworkError when attempting to fetch resource. (sentry-test-external.io)',
+  };
+
+  const error = errorMap[browserName];
+
+  /**
+   * This kind of error does show a helpful warning in the console, e.g.:
+   * Fetch API cannot load blub://sentry-test-external.io/invalid-scheme. URL scheme "blub" is not supported.
+   * But it seems we cannot really access this in the SDK :(
+   */
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});
+
+sentryTest('handles fetch credentials in url errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('credentialsInUrl()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium:
+      "Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: https://user:password@sentry-test-external.io/credentials-in-url",
+    webkit: 'URL is not valid or contains user credentials.',
+    firefox:
+      'Window.fetch: https://user:password@sentry-test-external.io/credentials-in-url is an url with embedded credentials.',
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});
+
+sentryTest('handles fetch invalid mode errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('invalidMode()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium:
+      "Failed to execute 'fetch' on 'Window': Cannot construct a Request with a RequestInit whose mode member is set as 'navigate'.",
+    webkit: 'Request constructor does not accept navigate fetch mode.',
+    firefox: 'Window.fetch: Invalid request mode navigate.',
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});
+
+sentryTest('handles fetch invalid request method errors @firefox', async ({ getLocalTestUrl, page, browserName }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const reqPromise = waitForErrorRequest(page);
+  await page.goto(url);
+  await page.evaluate('invalidMethod()');
+
+  const eventData = envelopeRequestParser(await reqPromise);
+
+  const errorMap: Record<string, string> = {
+    chromium: "Failed to execute 'fetch' on 'Window': 'CONNECT' HTTP method is unsupported.",
+    webkit: 'Method is forbidden.',
+    firefox: 'Window.fetch: Invalid request method CONNECT.',
+  };
+
+  const error = errorMap[browserName];
+
+  expect(eventData.exception?.values).toHaveLength(1);
+  expect(eventData.exception?.values?.[0]).toMatchObject({
+    type: 'TypeError',
+    value: error,
+    mechanism: {
+      handled: false,
+      type: 'onunhandledrejection',
+    },
+    stacktrace: {
+      frames: expect.any(Array),
+    },
+  });
+});
+
+sentryTest(
+  'handles fetch no-cors mode with cors-required method errors @firefox',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    const reqPromise = waitForErrorRequest(page);
+    await page.goto(url);
+    await page.evaluate('noCorsMethod()');
+
+    const eventData = envelopeRequestParser(await reqPromise);
+
+    const errorMap: Record<string, string> = {
+      chromium: "Failed to execute 'fetch' on 'Window': 'PUT' is unsupported in no-cors mode.",
+      webkit: 'Method must be GET, POST or HEAD in no-cors mode.',
+      firefox: 'Window.fetch: Invalid request method PUT.',
+    };
+
+    const error = errorMap[browserName];
+
+    expect(eventData.exception?.values).toHaveLength(1);
+    expect(eventData.exception?.values?.[0]).toMatchObject({
+      type: 'TypeError',
+      value: error,
+      mechanism: {
+        handled: false,
+        type: 'onunhandledrejection',
+      },
+      stacktrace: {
+        frames: expect.any(Array),
+      },
+    });
+  },
+);

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

@@ -107,6 +107,25 @@ function instrumentFetch(onFetchResolved?: (response: Response) => void, skipNat
             addNonEnumerableProperty(error, 'framesToPop', 1);
           }
 
+          // We enhance the not-so-helpful "Failed to fetch" error messages with the host
+          // Possible messages we handle here:
+          // * "Failed to fetch" (chromium)
+          // * "Load failed" (webkit)
+          // * "NetworkError when attempting to fetch resource." (firefox)
+          if (
+            error instanceof TypeError &&
+            (error.message === 'Failed to fetch' ||
+              error.message === 'Load failed' ||
+              error.message === 'NetworkError when attempting to fetch resource.')
+          ) {
+            try {
+              const url = new URL(handlerData.fetchData.url);
+              error.message = `${error.message} (${url.host})`;
+            } catch {
+              // ignore it if errors happen here
+            }
+          }
+
           // 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.