feat(core): Add option to enhance the fetch error message (#18466)

(closes #18449)
(closes
[JS-1281](https://linear.app/getsentry/issue/JS-1281/appending-hostname-to-fetch-error-messages-breaks-is-network-error-and))

## Problem

As of now, the user has no chance to disallow the manipulation of fetch
errors, as we overwrite the error. This can cause problems as seen in
#18449.

## Solution

This adds a new option for the SDK (please be very critical about that
new option here, since `fetch` has no integration this has to be added
as a `init` option). `always` is the default and acts the same as it is
now, so it is acting as feature:

```ts
enhanceFetchErrorMessages: 'always' | 'report-only' | false`
```

To give the user full control of how the errors are done there are 3
settings:


| | always | report-only | false |
| ------------------------------------------ | ------- | ----------- | -
| manipulate the error message directly | ✅ | ❌ | ❌
| send only the changed message to Sentry | ✅ | ✅ | ❌


## Special attention to reviewers

When having `report-only` the generated logs locally differ from the
ones in Sentry. I am not quite sure if that would cause any problems.
This is the only question which I don't have the answer to yet

## Alternative

In case the size increase is too much, we can also have a boolean that
disables that (which is on by default)

---------

Co-authored-by: Lukas Stracke <[email protected]>

Author: JPeer264

.size-limit.js

@@ -8,7 +8,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '25 KB',
+    limit: '25.5 KB',
   },
   {
     name: '@sentry/browser - with treeshaking flags',
@@ -148,7 +148,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '44 KB',
+    limit: '44.5 KB',
   },
   // Vue SDK (ESM)
   {
@@ -171,20 +171,20 @@ module.exports = [
     path: 'packages/svelte/build/esm/index.js',
     import: createImport('init'),
     gzip: true,
-    limit: '25 KB',
+    limit: '25.5 KB',
   },
   // Browser CDN bundles
   {
     name: 'CDN Bundle',
     path: createCDNPath('bundle.min.js'),
     gzip: true,
-    limit: '27.5 KB',
+    limit: '28 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '42.5 KB',
+    limit: '43 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay)',
@@ -234,7 +234,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '46.5 KB',
+    limit: '47 KB',
   },
   // SvelteKit SDK (ESM)
   {
@@ -243,7 +243,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['$app/stores'],
     gzip: true,
-    limit: '42.5 KB',
+    limit: '43 KB',
   },
   // Node-Core SDK (ESM)
   {
@@ -261,7 +261,7 @@ module.exports = [
     import: createImport('init'),
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     gzip: true,
-    limit: '162.5 KB',
+    limit: '163 KB',
   },
   {
     name: '@sentry/node - without tracing',

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

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  enhanceFetchErrorMessages: false,
+});

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

@@ -0,0 +1,49 @@
+// 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');
+};
+
+window.networkErrorWithPort = () => {
+  fetch('http://sentry-test-external.io:3000/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:[email protected]/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-enhance-messages-off/test.ts

@@ -0,0 +1,113 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../utils/fixtures';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../utils/helpers';
+
+sentryTest(
+  'enhanceFetchErrorMessages: false: enhances error for Sentry while preserving original',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    const reqPromise = waitForErrorRequest(page);
+    const pageErrorPromise = new Promise<string>(resolve => {
+      page.on('pageerror', error => {
+        resolve(error.message);
+      });
+    });
+
+    await page.goto(url);
+    await page.evaluate('networkError()');
+
+    const [req, pageErrorMessage] = await Promise.all([reqPromise, pageErrorPromise]);
+    const eventData = envelopeRequestParser(req);
+    const originalErrorMap: Record<string, string> = {
+      chromium: 'Failed to fetch',
+      webkit: 'Load failed',
+      firefox: 'NetworkError when attempting to fetch resource.',
+    };
+
+    const originalError = originalErrorMap[browserName];
+
+    expect(pageErrorMessage).toContain(originalError);
+    expect(pageErrorMessage).not.toContain('sentry-test-external.io');
+
+    expect(eventData.exception?.values).toHaveLength(1);
+    expect(eventData.exception?.values?.[0]).toMatchObject({
+      type: 'TypeError',
+      value: originalError,
+      mechanism: {
+        handled: false,
+        type: 'auto.browser.global_handlers.onunhandledrejection',
+      },
+    });
+  },
+);
+
+sentryTest(
+  'enhanceFetchErrorMessages: false: enhances subdomain errors',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    const reqPromise = waitForErrorRequest(page);
+    const pageErrorPromise = new Promise<string>(resolve => page.on('pageerror', error => resolve(error.message)));
+
+    await page.goto(url);
+    await page.evaluate('networkErrorSubdomain()');
+
+    const [req, pageErrorMessage] = await Promise.all([reqPromise, pageErrorPromise]);
+    const eventData = envelopeRequestParser(req);
+
+    const originalErrorMap: Record<string, string> = {
+      chromium: 'Failed to fetch',
+      webkit: 'Load failed',
+      firefox: 'NetworkError when attempting to fetch resource.',
+    };
+
+    const originalError = originalErrorMap[browserName];
+
+    expect(pageErrorMessage).toContain(originalError);
+    expect(pageErrorMessage).not.toContain('subdomain.sentry-test-external.io');
+    expect(eventData.exception?.values).toHaveLength(1);
+    expect(eventData.exception?.values?.[0]).toMatchObject({
+      type: 'TypeError',
+      value: originalError,
+      mechanism: {
+        handled: false,
+        type: 'auto.browser.global_handlers.onunhandledrejection',
+      },
+    });
+  },
+);
+
+sentryTest(
+  'enhanceFetchErrorMessages: false: includes port in hostname',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    const reqPromise = waitForErrorRequest(page);
+
+    const pageErrorPromise = new Promise<string>(resolve => page.on('pageerror', error => resolve(error.message)));
+
+    await page.goto(url);
+    await page.evaluate('networkErrorWithPort()');
+
+    const [req, pageErrorMessage] = await Promise.all([reqPromise, pageErrorPromise]);
+    const eventData = envelopeRequestParser(req);
+
+    const originalErrorMap: Record<string, string> = {
+      chromium: 'Failed to fetch',
+      webkit: 'Load failed',
+      firefox: 'NetworkError when attempting to fetch resource.',
+    };
+
+    const originalError = originalErrorMap[browserName];
+
+    expect(pageErrorMessage).toContain(originalError);
+    expect(pageErrorMessage).not.toContain('sentry-test-external.io:3000');
+    expect(eventData.exception?.values).toHaveLength(1);
+    expect(eventData.exception?.values?.[0]).toMatchObject({
+      type: 'TypeError',
+      value: originalError,
+      mechanism: {
+        handled: false,
+        type: 'auto.browser.global_handlers.onunhandledrejection',
+      },
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/errors/fetch-enhance-messages-report-only/init.js

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  enhanceFetchErrorMessages: 'report-only',
+});

dev-packages/browser-integration-tests/suites/errors/fetch-enhance-messages-report-only/subject.js

@@ -0,0 +1,49 @@
+// 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');
+};
+
+window.networkErrorWithPort = () => {
+  fetch('http://sentry-test-external.io:3000/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:[email protected]/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' });
+};