Branch for 9.7.0-alpha

.size-limit.js

@@ -47,7 +47,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '75.2 KB',
+    limit: '76 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - with treeshaking flags',

CHANGELOG.md

@@ -10,6 +10,13 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 9.7.0-alpha.0
+
+This is an alpha release that includes experimental features which are subject to breaking changes.
+
+- fix(node): Ensure httpIntegration propagates traces #15735
+- feat(browser): Attach top-level domain to "Failed to fetch" errors #15729
+
 ## 9.6.1
 
 - feat(deps): bump @prisma/instrumentation from 6.4.1 to 6.5.0 ([#15714](https://github.com/getsentry/sentry-javascript/pull/15714))

dev-packages/browser-integration-tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/browser-integration-tests",
-  "version": "9.6.1",
+  "version": "9.7.0-alpha.0",
   "main": "index.js",
   "license": "MIT",
   "engines": {
@@ -42,7 +42,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@playwright/test": "~1.50.0",
     "@sentry-internal/rrweb": "2.34.0",
-    "@sentry/browser": "9.6.1",
+    "@sentry/browser": "9.7.0-alpha.0",
     "axios": "1.8.2",
     "babel-loader": "^8.2.2",
     "fflate": "0.8.2",

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 (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 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),
+      },
+    });
+  },
+);

dev-packages/bundle-analyzer-scenarios/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/bundle-analyzer-scenarios",
-  "version": "9.6.1",
+  "version": "9.7.0-alpha.0",
   "description": "Scenarios to test bundle analysis with",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/dev-packages/bundle-analyzer-scenarios",