fix(browser): Apply urlQueryParams to breadcrumb and element timing URLs

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/withSensitiveQuery/subject.js

@@ -0,0 +1,3 @@
+fetch('http://sentry-test.io/foo?token=sensitive-token-value&page=1').then(() => {
+  Sentry.captureException('test error');
+});

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/withSensitiveQuery/test.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('filters sensitive query params in the fetch breadcrumb URL', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route('**/foo?*', route => route.fulfill({ status: 200, body: '{}' }));
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.breadcrumbs).toEqual([
+    {
+      timestamp: expect.any(Number),
+      category: 'fetch',
+      type: 'http',
+      data: {
+        method: 'GET',
+        status_code: 200,
+        url: 'http://sentry-test.io/foo?token=[Filtered]&page=1',
+      },
+    },
+  ]);
+});

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/history/withSensitiveQuery/subject.js

@@ -0,0 +1,4 @@
+history.pushState({}, '', '/foo?jwt=sensitive-jwt-value&a=1');
+history.pushState({}, '', '/bar');
+
+Sentry.captureException('test exception');

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/history/withSensitiveQuery/test.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/browser';
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('filters sensitive query params in navigation breadcrumbs', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.breadcrumbs).toEqual([
+    {
+      category: 'navigation',
+      data: {
+        from: '/index.html',
+        to: '/foo?jwt=[Filtered]&a=1',
+      },
+      timestamp: expect.any(Number),
+    },
+    {
+      category: 'navigation',
+      data: {
+        from: '/foo?jwt=[Filtered]&a=1',
+        to: '/bar',
+      },
+      timestamp: expect.any(Number),
+    },
+  ]);
+});

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/withSensitiveQuery/subject.js

@@ -0,0 +1,10 @@
+const xhr = new XMLHttpRequest();
+
+xhr.open('GET', 'http://sentry-test.io/foo?token=sensitive-token-value&page=1');
+xhr.send();
+
+xhr.addEventListener('readystatechange', function () {
+  if (xhr.readyState === 4) {
+    Sentry.captureException('test error');
+  }
+});

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/withSensitiveQuery/test.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+
+sentryTest('filters sensitive query params in the XHR breadcrumb URL', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.route('**/foo?*', route => route.fulfill({ status: 200, body: '{}' }));
+
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  expect(eventData.breadcrumbs).toEqual([
+    {
+      timestamp: expect.any(Number),
+      category: 'xhr',
+      type: 'http',
+      data: {
+        method: 'GET',
+        status_code: 200,
+        url: 'http://sentry-test.io/foo?token=[Filtered]&page=1',
+      },
+    },
+  ]);
+});

packages/browser-utils/src/performance/elementTiming.ts

@@ -1,5 +1,5 @@
 import type { IntegrationFn } from '@sentry/core';
-import { browserPerformanceTimeOrigin, defineIntegration, metrics } from '@sentry/core';
+import { browserPerformanceTimeOrigin, defineIntegration, filterCollectedUrl, metrics } from '@sentry/core';
 import { addPerformanceInstrumentationHandler } from '../instrumentation/performanceObserver';
 import { getBrowserPerformanceAPI } from './utils';
 
@@ -58,7 +58,7 @@ const _elementTimingIntegration = (() => {
           }
 
           if (elementEntry.url) {
-            metricAttributes['ui.element.url'] = elementEntry.url;
+            metricAttributes['ui.element.url'] = filterCollectedUrl(elementEntry.url);
           }
 
           if (elementEntry.naturalWidth) {

packages/browser-utils/test/performance/elementTiming.test.ts

@@ -98,7 +98,7 @@ describe('elementTimingIntegration', () => {
           identifier: 'hero-image',
           id: 'img1',
           element: { tagName: 'IMG' },
-          url: 'https://example.com/hero.jpg',
+          url: 'https://example.com/hero.jpg?token=abc&w=1920',
           naturalWidth: 1920,
           naturalHeight: 1080,
         } as unknown as PerformanceEntry,
@@ -112,7 +112,7 @@ describe('elementTimingIntegration', () => {
       'ui.element.paint_type': 'image-paint',
       'ui.element.id': 'img1',
       'ui.element.type': 'img',
-      'ui.element.url': 'https://example.com/hero.jpg',
+      'ui.element.url': 'https://example.com/hero.jpg?token=[Filtered]&w=1920',
       'ui.element.width': 1920,
       'ui.element.height': 1080,
     };

packages/browser/src/integrations/breadcrumbs.ts

@@ -14,6 +14,7 @@ import {
   addFetchInstrumentationHandler,
   debug,
   defineIntegration,
+  filterCollectedUrl,
   getBreadcrumbLogLevelFromHttpStatusCode,
   getClient,
   getEventDescription,
@@ -192,7 +193,7 @@ function _getXhrBreadcrumbHandler(client: Client): (handlerData: HandlerDataXhr)
 
     const data: XhrBreadcrumbData = {
       method,
-      url,
+      url: filterCollectedUrl(url),
       status_code,
     };
 
@@ -247,7 +248,7 @@ function _getFetchBreadcrumbHandler(client: Client): (handlerData: HandlerDataFe
 
       const breadcrumb = {
         category: 'fetch',
-        data: handlerData.fetchData,
+        data: { ...handlerData.fetchData, url: filterCollectedUrl(handlerData.fetchData.url) },
         level: 'error',
         type: 'http',
       } satisfies Breadcrumb;
@@ -259,6 +260,7 @@ function _getFetchBreadcrumbHandler(client: Client): (handlerData: HandlerDataFe
       const response = handlerData.response as Response | undefined;
       const data: FetchBreadcrumbData = {
         ...handlerData.fetchData,
+        url: filterCollectedUrl(handlerData.fetchData.url),
         status_code: response?.status,
       };
 
@@ -315,8 +317,8 @@ function _getHistoryBreadcrumbHandler(client: Client): (handlerData: HandlerData
     addBreadcrumb({
       category: 'navigation',
       data: {
-        from,
-        to,
+        from: filterCollectedUrl(from),
+        to: filterCollectedUrl(to),
       },
     });
   };