fix(v10/browser): Apply urlQueryParams to event URLs, static span names and LCP URLs (#25297)

Backport of: #25262

## Differences to the original PR

- **Source files moved.** v10 still uses the older `browser-utils`
layout. The `performance/entries.ts` and `web-vitals/tracking.ts`
changes went into `src/metrics/browserMetrics.ts`. The
`web-vitals/spans.ts` change went into `src/metrics/webVitalSpans.ts`.
The filtering is the same.
- **Navigation spans:** v10's `_addPerformanceNavigationTiming` /
`_addRequest` set no `url.full` attribute and have no span-streaming
name branch. So only the span `name` is now filtered
(`filterCollectedUrl(entry.name)`).
- **`_sendLcpSpan` (`webVitalSpans.ts`):** on v10 this function takes no
`client` parameter. `filterCollectedUrl(entry.url)` falls back to
`getClient()`.
- **Added beyond the original:** `src/metrics/lcp.ts`
(`_sendStandaloneLcpSpan`) now filters its `lcp.url` attribute too. This
standalone LCP span code exists only on v10 (it was removed on develop).
Without this change it would still send the unfiltered LCP URL. This
matches the original PR's goal of filtering `lcp.url`.
- **`httpcontext.ts`:** v10 spreads `...reqData` into `event.request`
instead of setting `url` explicitly. The backport adds `url:
filterCollectedUrl(reqData.url, client)` after the spread and before
`...event.request`, so a URL the user set still wins. `preprocessEvent`
now takes the `client` argument.
- **Unit tests adapted to v10 paths and shapes:**
- The new `browserMetrics.test.ts` cases are in
`test/browser/browserMetrics.test.ts`. They check `description`/`data`,
not `name`/`attributes`.
- The navigation case checks only span descriptions, because v10
navigation spans have no `url.full`. To share it with the new case, the
navigation `entry` fixture moved to `describe` scope.
- The `_sendLcpSpan` expectation update is in
`test/metrics/webVitalSpans.test.ts`. No client mock is needed.
- `test/metrics/lcp.test.ts` gets the same query-param expectation for
the standalone LCP span.
- The `httpcontext.test.ts` cases were added at the top level, because
v10 has no `dataCollection` describe block.
- **Integration tests:**
- The develop-only `web-vitals-lcp-static` suite maps to v10's
`web-vitals-lcp` (static is the default there).
- The new `pageload-sensitive-query-params-static` test uses string ops
(`'pageload'`, `'browser.request'`, `'resource.img'`). v10's
`@sentry/conventions@0.16.0` doesn't export `BROWSER_REQUEST` /
`PAGELOAD` / `RESOURCE_IMG` from `@sentry/conventions/op`.
- The `httpContext` integration test imports
`waitForErrorRequest`/`envelopeRequestParser`, which v10's version
didn't import yet.

## Verification

- `yarn format`, `yarn lint:fix` (0 warnings, 0 errors) and `yarn
build:dev` all pass.
- Vitest passes for: `browser-utils` (`browserMetrics`, `lcp`,
`webVitalSpans`), `browser` (`browserTracingIntegration`) and `nextjs`
(`pagesRouterInstrumentation`).
- `browser` `httpcontext.test.ts` passed (5/5) only with a temporary
local workaround. Under the sandbox's Node 22, the existing
`globalThis.navigator = …` setup throws, and it does the same on
unmodified v10. The repo pins Node 20.
- Playwright browser-integration tests were not run locally. They are
left to CI.

<!-- junior-request-attribution:start -->
via Junior system actor `junior`.
<!-- junior-request-attribution:end -->

<!-- junior-session-footer:start -->
<!--
junior-conversation-id:agent-dispatch%3Adispatch_968746a4c2386e3695487fe7c0061e2b
-->

--

[View Junior
Session](https://junior-prod.sentry.dev/conversations/agent-dispatch%3Adispatch_968746a4c2386e3695487fe7c0061e2b)
[[Sentry]](https://sentry.sentry.io/explore/conversations/agent-dispatch%3Adispatch_968746a4c2386e3695487fe7c0061e2b/?project=4510944073809921)

<!-- junior-session-footer:end -->

Co-authored-by: sentry-junior[bot] <264270552+sentry-junior[bot]@users.noreply.github.com>

Author: sentry-junior[bot]

dev-packages/browser-integration-tests/suites/integrations/httpContext/test.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
 import { sentryTest } from '../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';
+import { envelopeRequestParser, getFirstSentryEnvelopeRequest, waitForErrorRequest } from '../../../utils/helpers';
 
 sentryTest('httpContextIntegration captures user-agent and referrer', async ({ getLocalTestUrl, page }) => {
   const url = await getLocalTestUrl({ testDir: __dirname });
@@ -23,3 +23,15 @@ sentryTest('httpContextIntegration captures user-agent and referrer', async ({ g
     url: expect.any(String),
   });
 });
+
+sentryTest('httpContextIntegration filters sensitive query params in the URL', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const errorEventPromise = waitForErrorRequest(page);
+
+  await page.goto(`${url}?jwt=sensitive-jwt-value&page=1`);
+
+  const errorEvent = envelopeRequestParser(await errorEventPromise);
+
+  expect(errorEvent.request?.url).toBe(`${url}?jwt=[Filtered]&page=1`);
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/pageload-sensitive-query-params-static/init.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  traceLifecycle: 'static',
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/pageload-sensitive-query-params-static/template.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <img src="https://sentry-test-site.example/path/to/image.svg?token=sensitive-token-value&size=2" />
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/pageload-sensitive-query-params-static/test.ts

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest(
+  'filters sensitive query params in the pageload transaction URL and span descriptions',
+  async ({ getLocalTestUrl, page }) => {
+    sentryTest.skip(shouldSkipTracingTest());
+
+    await page.route('https://sentry-test-site.example/path/to/image.svg?*', route =>
+      route.fulfill({ body: '<svg xmlns="http://www.w3.org/2000/svg"/>', contentType: 'image/svg+xml' }),
+    );
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const pageloadRequestPromise = waitForTransactionRequest(page, event => event.contexts?.trace?.op === 'pageload');
+    await page.goto(`${url}?jwt=sensitive-jwt-value&page=1`);
+    const eventData = envelopeRequestParser<Event>(await pageloadRequestPromise);
+
+    expect(eventData.request?.url).toBe(`${url}?jwt=[Filtered]&page=1`);
+    expect(eventData.spans?.find(({ op }) => op === 'browser.request')?.description).toBe(
+      `${url}?jwt=[Filtered]&page=1`,
+    );
+    expect(eventData.spans?.find(({ op }) => op === 'resource.img')?.description).toBe(
+      'https://sentry-test-site.example/path/to/image.svg?token=[Filtered]&size=2',
+    );
+
+    const serializedEvent = JSON.stringify(eventData);
+    expect(serializedEvent).not.toContain('sensitive-jwt-value');
+    expect(serializedEvent).not.toContain('sensitive-token-value');
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html

@@ -5,6 +5,6 @@
   </head>
   <body>
     <div id="content"></div>
-    <img src="https://sentry-test-site.example/my/image.png" />
+    <img src="https://sentry-test-site.example/my/image.png?token=sensitive-token-value&v=1" />
   </body>
 </html>

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts

@@ -10,7 +10,7 @@ sentryTest('captures LCP vitals with element details', async ({ browserName, get
   }
 
   page.route('**', route => route.continue());
-  page.route('**/my/image.png', async (route: Route) => {
+  page.route('**/my/image.png?*', async (route: Route) => {
     return route.fulfill({
       path: `${__dirname}/assets/sentry-logo-600x179.png`,
     });
@@ -26,6 +26,9 @@ sentryTest('captures LCP vitals with element details', async ({ browserName, get
   expect(eventData.contexts?.trace?.data?.['lcp.size']).toBeGreaterThan(0);
   expect(eventData.contexts?.trace?.data?.['lcp.loadTime']).toBeGreaterThan(0);
   expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBeGreaterThan(0);
+  expect(eventData.contexts?.trace?.data?.['lcp.url']).toBe(
+    'https://sentry-test-site.example/my/image.png?token=[Filtered]&v=1',
+  );
 
   // The LCP value should be the renderTime because the renderTime is set
   expect(eventData.measurements?.lcp?.value).toBeCloseTo(eventData.contexts?.trace?.data?.['lcp.renderTime']);

dev-packages/browser-integration-tests/utils/fixtures.ts

@@ -90,7 +90,7 @@ const sentryTest = base.extend<TestFixtures>({
         }
 
         await page.route(`${TEST_HOST}/*.*`, route => {
-          const file = route.request().url().split('/').pop();
+          const file = new URL(route.request().url()).pathname.split('/').pop();
           const filePath = path.resolve(tmpDir, `./${file}`);
 
           return fs.existsSync(filePath)

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -690,7 +690,7 @@ function _addPerformanceNavigationTiming(
   }
   startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
     op: `browser.${name}`,
-    name: entry.name,
+    name: filterCollectedUrl(entry.name),
     attributes: {
       [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
       ...(event === 'redirect' && entry.redirectCount != null ? { 'http.redirect_count': entry.redirectCount } : {}),
@@ -718,17 +718,19 @@ function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin:
     // In this case, ie. when the document request hasn't finished yet, `entry.responseEnd` will be 0.
     // In order not to produce faulty spans, where the end timestamp is before the start timestamp, we will only collect
     // these spans when the responseEnd value is available. The backend (Relay) would drop the entire span if it contained faulty spans.
+    const filteredUrl = filterCollectedUrl(entry.name);
+
     startAndEndSpan(span, requestStartTimestamp, responseEndTimestamp, {
       op: 'browser.request',
-      name: entry.name,
+      name: filteredUrl,
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
       },
     });
 
     startAndEndSpan(span, responseStartTimestamp, responseEndTimestamp, {
       op: 'browser.response',
-      name: entry.name,
+      name: filteredUrl,
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
       },
@@ -776,7 +778,8 @@ export function _addResourceSpans(
 
   attributes['url.same_origin'] = resourceUrl.includes(WINDOW.location.origin);
 
-  attributes[URL_FULL] = filterCollectedUrl(resourceUrl);
+  const filteredUrl = filterCollectedUrl(resourceUrl);
+  attributes[URL_FULL] = filteredUrl;
 
   _setResourceRequestAttributes(entry, attributes, [
     // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/responseStatus
@@ -799,7 +802,7 @@ export function _addResourceSpans(
   const endTimestamp = startTimestamp + duration;
 
   startAndEndSpan(span, startTimestamp, endTimestamp, {
-    name: resourceUrl.replace(WINDOW.location.origin, ''),
+    name: filteredUrl.replace(WINDOW.location.origin, ''),
     op,
     attributes: attributesWithResourceTiming,
   });
@@ -873,7 +876,7 @@ function _setWebVitalAttributes(span: Span, options: AddWebVitalsToSpanOptions):
 
     if (_lcpEntry.url) {
       // Trim URL to the first 200 characters.
-      span.setAttribute('lcp.url', _lcpEntry.url.trim().slice(0, 200));
+      span.setAttribute('lcp.url', filterCollectedUrl(_lcpEntry.url.trim()).slice(0, 200));
     }
 
     if (_lcpEntry.loadTime != null) {

packages/browser-utils/src/metrics/lcp.ts

@@ -2,6 +2,7 @@ import type { Client, SpanAttributes } from '@sentry/core';
 import {
   browserPerformanceTimeOrigin,
   debug,
+  filterCollectedUrl,
   getCurrentScope,
   SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME,
   SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT,
@@ -90,7 +91,7 @@ export function _sendStandaloneLcpSpan(
     entry.element && (attributes['lcp.element'] = htmlTreeAsString(entry.element));
     entry.id && (attributes['lcp.id'] = entry.id);
 
-    entry.url && (attributes['lcp.url'] = entry.url);
+    entry.url && (attributes['lcp.url'] = filterCollectedUrl(entry.url));
 
     // loadTime is the time of LCP that's related to receiving the LCP element response..
     entry.loadTime != null && (attributes['lcp.loadTime'] = entry.loadTime);

packages/browser-utils/src/metrics/webVitalSpans.ts

@@ -2,6 +2,7 @@ import type { Client, Span, SpanAttributes } from '@sentry/core';
 import {
   browserPerformanceTimeOrigin,
   debug,
+  filterCollectedUrl,
   getActiveSpan,
   getCurrentScope,
   getRootSpan,
@@ -162,7 +163,7 @@ export function _sendLcpSpan(
 
   entry?.element && (attributes['browser.web_vital.lcp.element'] = htmlTreeAsString(entry.element));
   entry?.id && (attributes['browser.web_vital.lcp.id'] = entry.id);
-  entry?.url && (attributes['browser.web_vital.lcp.url'] = entry.url);
+  entry?.url && (attributes['browser.web_vital.lcp.url'] = filterCollectedUrl(entry.url));
   entry?.loadTime != null && (attributes['browser.web_vital.lcp.load_time'] = entry.loadTime);
   entry?.renderTime != null && (attributes['browser.web_vital.lcp.render_time'] = entry.renderTime);
   entry?.size != null && (attributes['browser.web_vital.lcp.size'] = entry.size);