take top level domain only

Author: mydea

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

@@ -5,6 +5,10 @@ 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' } });

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

@@ -29,6 +29,34 @@ sentryTest('handles fetch network errors @firefox', async ({ getLocalTestUrl, pa
   });
 });
 
+
+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);

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

@@ -120,7 +120,10 @@ function instrumentFetch(onFetchResolved?: (response: Response) => void, skipNat
           ) {
             try {
               const url = new URL(handlerData.fetchData.url);
-              error.message = `${error.message} (${url.host})`;
+              // We only want to take the top-level domain, e.g. xxx.sentry.io should become sentry.io
+              // We do this to avoid noise when there may be dynamic subdomains
+              const host = url.host.split('.').slice(-2).join('.');
+              error.message = `${error.message} (${host})`;
             } catch {
               // ignore it if errors happen here
             }