fix(browser): Ensure url.full and http.url attributes have the same values on http.client spans

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

@@ -50,6 +50,7 @@ sentryTest('should update spans for GraphQL fetch requests', async ({ getLocalTe
       type: 'fetch',
       'http.method': 'POST',
       'http.url': 'http://sentry-test.io/foo',
+      'url.full': 'http://sentry-test.io/foo',
       url: 'http://sentry-test.io/foo',
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/persistedQuery-fetch/test.ts

@@ -44,6 +44,7 @@ sentryTest('should update spans for GraphQL persisted query fetch requests', asy
       type: 'fetch',
       'http.method': 'POST',
       'http.url': 'http://sentry-test.io/graphql',
+      'url.full': 'http://sentry-test.io/graphql',
       url: 'http://sentry-test.io/graphql',
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',

dev-packages/browser-integration-tests/suites/integrations/graphqlClient/persistedQuery-xhr/test.ts

@@ -44,6 +44,7 @@ sentryTest('should update spans for GraphQL persisted query XHR requests', async
       type: 'xhr',
       'http.method': 'POST',
       'http.url': 'http://sentry-test.io/graphql',
+      'url.full': 'http://sentry-test.io/graphql',
       url: 'http://sentry-test.io/graphql',
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',

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

@@ -50,6 +50,7 @@ sentryTest('should update spans for GraphQL XHR requests', async ({ getLocalTest
       type: 'xhr',
       'http.method': 'POST',
       'http.url': 'http://sentry-test.io/foo',
+      'url.full': 'http://sentry-test.io/foo',
       url: 'http://sentry-test.io/foo',
       'server.address': 'sentry-test.io',
       'sentry.op': 'http.client',

dev-packages/browser-integration-tests/suites/tracing/request/fetch-data-url/test.ts

@@ -32,4 +32,5 @@ sentryTest('sanitizes data URLs in fetch span name and attributes', async ({ get
   });
 
   expect(span?.data?.['http.url']).toBe(sanitizedUrl);
+  expect(span?.data?.['url.full']).toBe(sanitizedUrl);
 });

dev-packages/browser-integration-tests/suites/tracing/request/fetch-immediate/test.ts

@@ -32,6 +32,7 @@ sentryTest('should create spans for fetch requests called directly after init',
     data: {
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/0',
+      'url.full': 'http://sentry-test-site.example/0',
       url: 'http://sentry-test-site.example/0',
       'server.address': 'sentry-test-site.example',
       type: 'fetch',

dev-packages/browser-integration-tests/suites/tracing/request/fetch-relative-url/test.ts

@@ -30,6 +30,7 @@ sentryTest('should create spans for fetch requests', async ({ getLocalTestUrl, p
       data: {
         'http.method': 'GET',
         'http.url': `${TEST_HOST}/test-req/${index}`,
+        'url.full': `${TEST_HOST}/test-req/${index}`,
         url: `/test-req/${index}`,
         'server.address': 'sentry-test.io',
         type: 'fetch',

dev-packages/browser-integration-tests/suites/tracing/request/fetch-streamed/test.ts

@@ -38,6 +38,7 @@ sentryTest('creates spans for fetch requests', async ({ getLocalTestUrl, page })
       attributes: expect.objectContaining({
         'http.method': { type: 'string', value: 'GET' },
         'http.url': { type: 'string', value: `http://sentry-test-site.example/${index}` },
+        'url.full': { type: 'string', value: `http://sentry-test-site.example/${index}` },
         url: { type: 'string', value: `http://sentry-test-site.example/${index}` },
         'server.address': { type: 'string', value: 'sentry-test-site.example' },
         type: { type: 'string', value: 'fetch' },

dev-packages/browser-integration-tests/suites/tracing/request/fetch-strip-query-and-fragment/test.ts

@@ -31,6 +31,7 @@ sentryTest('strips query params in fetch request spans', async ({ getLocalTestUr
     data: expect.objectContaining({
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/0?id=123;page=5',
+      'url.full': 'http://sentry-test-site.example/0?id=123;page=5',
       'http.query': '?id=123;page=5',
       'http.response.status_code': 200,
       'http.response_content_length': 2,
@@ -74,6 +75,7 @@ sentryTest('strips hash fragment in fetch request spans', async ({ getLocalTestU
     data: expect.objectContaining({
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/1#fragment',
+      'url.full': 'http://sentry-test-site.example/1#fragment',
       'http.fragment': '#fragment',
       'http.response.status_code': 200,
       'http.response_content_length': 2,
@@ -117,6 +119,7 @@ sentryTest('strips hash fragment and query params in fetch request spans', async
     data: expect.objectContaining({
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/2?id=1#fragment',
+      'url.full': 'http://sentry-test-site.example/2?id=1#fragment',
       'http.query': '?id=1',
       'http.fragment': '#fragment',
       'http.response.status_code': 200,
@@ -161,6 +164,7 @@ sentryTest(
       data: expect.objectContaining({
         'http.method': 'GET',
         'http.url': 'http://sentry-test.io/api/users?id=1#fragment',
+        'url.full': 'http://sentry-test.io/api/users?id=1#fragment',
         'http.query': '?id=1',
         'http.fragment': '#fragment',
         'http.response.status_code': 200,

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

@@ -33,6 +33,7 @@ sentryTest('should create spans for fetch requests', async ({ getLocalTestUrl, p
       data: {
         'http.method': 'GET',
         'http.url': `http://sentry-test-site.example/${index}`,
+        'url.full': `http://sentry-test-site.example/${index}`,
         url: `http://sentry-test-site.example/${index}`,
         'server.address': 'sentry-test-site.example',
         type: 'fetch',

dev-packages/browser-integration-tests/suites/tracing/request/xhr-data-url/test.ts

@@ -27,4 +27,5 @@ sentryTest('sanitizes data URLs in XHR span name and attributes', async ({ getLo
   });
 
   expect(span?.data?.['http.url']).toBe(sanitizedUrl);
+  expect(span?.data?.['url.full']).toBe(sanitizedUrl);
 });

dev-packages/browser-integration-tests/suites/tracing/request/xhr-relative-url/test.ts

@@ -30,6 +30,7 @@ sentryTest('should create spans for xhr requests', async ({ getLocalTestUrl, pag
       data: {
         'http.method': 'GET',
         'http.url': `${TEST_HOST}/test-req/${index}`,
+        'url.full': `${TEST_HOST}/test-req/${index}`,
         url: `/test-req/${index}`,
         'server.address': 'sentry-test.io',
         type: 'xhr',

dev-packages/browser-integration-tests/suites/tracing/request/xhr-streamed/test.ts

@@ -34,6 +34,7 @@ sentryTest('creates spans for XHR requests', async ({ getLocalTestUrl, page }) =
       attributes: expect.objectContaining({
         'http.method': { type: 'string', value: 'GET' },
         'http.url': { type: 'string', value: `http://sentry-test-site.example/${index}` },
+        'url.full': { type: 'string', value: `http://sentry-test-site.example/${index}` },
         url: { type: 'string', value: `http://sentry-test-site.example/${index}` },
         'server.address': { type: 'string', value: 'sentry-test-site.example' },
         type: { type: 'string', value: 'xhr' },

dev-packages/browser-integration-tests/suites/tracing/request/xhr-strip-query-and-fragment/test.ts

@@ -31,6 +31,7 @@ sentryTest('strips query params in XHR request spans', async ({ getLocalTestUrl,
     data: expect.objectContaining({
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/0?id=123;page=5',
+      'url.full': 'http://sentry-test-site.example/0?id=123;page=5',
       'http.query': '?id=123;page=5',
       'http.response.status_code': 200,
       'sentry.op': 'http.client',
@@ -73,6 +74,7 @@ sentryTest('strips hash fragment in XHR request spans', async ({ getLocalTestUrl
     data: expect.objectContaining({
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/1#fragment',
+      'url.full': 'http://sentry-test-site.example/1#fragment',
       'http.fragment': '#fragment',
       'http.response.status_code': 200,
       'sentry.op': 'http.client',
@@ -115,6 +117,7 @@ sentryTest('strips hash fragment and query params in XHR request spans', async (
     data: expect.objectContaining({
       'http.method': 'GET',
       'http.url': 'http://sentry-test-site.example/2?id=1#fragment',
+      'url.full': 'http://sentry-test-site.example/2?id=1#fragment',
       'http.query': '?id=1',
       'http.fragment': '#fragment',
       'http.response.status_code': 200,
@@ -158,6 +161,7 @@ sentryTest(
       data: expect.objectContaining({
         'http.method': 'GET',
         'http.url': 'http://sentry-test.io/api/users?id=1#fragment',
+        'url.full': 'http://sentry-test.io/api/users?id=1#fragment',
         'http.query': '?id=1',
         'http.fragment': '#fragment',
         'http.response.status_code': 200,

dev-packages/browser-integration-tests/suites/tracing/request/xhr/test.ts

@@ -28,6 +28,7 @@ sentryTest('should create spans for XHR requests', async ({ getLocalTestUrl, pag
       data: {
         'http.method': 'GET',
         'http.url': `http://sentry-test-site.example/${index}`,
+        'url.full': `http://sentry-test-site.example/${index}`,
         url: `http://sentry-test-site.example/${index}`,
         'server.address': 'sentry-test-site.example',
         type: 'xhr',

dev-packages/e2e-tests/test-applications/nextjs-13/tests/client/fetch.test.ts

@@ -36,6 +36,7 @@ test('should correctly instrument `fetch` for performance tracing', async ({ pag
           'http.method': 'GET',
           url: 'https://example.com',
           'http.url': 'https://example.com/',
+          'url.full': 'https://example.com/',
           'server.address': 'example.com',
           type: 'fetch',
           'http.response_content_length': expect.any(Number),

packages/browser/src/integrations/httpcontext.ts

@@ -1,4 +1,4 @@
-import { defineIntegration, safeSetSpanJSONAttributes } from '@sentry/core/browser';
+import { defineIntegration, safeSetSpanJSONAttributes, SEMANTIC_ATTRIBUTE_SENTRY_OP } from '@sentry/core/browser';
 import { getHttpRequestData, WINDOW } from '../helpers';
 
 /**
@@ -27,6 +27,8 @@ export const httpContextIntegration = defineIntegration(() => {
       };
     },
     processSegmentSpan(span) {
+      const spanOp = span.attributes?.[SEMANTIC_ATTRIBUTE_SENTRY_OP];
+
       // if none of the information we want exists, don't bother
       if (!WINDOW.navigator && !WINDOW.location && !WINDOW.document) {
         return;
@@ -37,7 +39,7 @@ export const httpContextIntegration = defineIntegration(() => {
       safeSetSpanJSONAttributes(span, {
         // Coerce empty string to undefined so the helper's nullish check drops it,
         // rather than writing an empty `url.full` attribute onto the span.
-        'url.full': reqData.url || undefined,
+        'url.full': spanOp !== 'http.client' ? reqData.url : undefined,
         'http.request.header.user_agent': reqData.headers['User-Agent'],
         'http.request.header.referer': reqData.headers['Referer'],
       });

packages/browser/src/tracing/request.ts

@@ -169,8 +169,12 @@ export function instrumentOutgoingRequests(client: Client, _options?: Partial<Re
       if (createdSpan) {
         const fullUrl = getFullURL(handlerData.fetchData.url);
         const host = fullUrl ? parseUrl(fullUrl).host : undefined;
+        const sanitizedFullUrl = fullUrl ? stripDataUrlContent(fullUrl) : undefined;
         createdSpan.setAttributes({
-          'http.url': fullUrl ? stripDataUrlContent(fullUrl) : undefined,
+          'http.url': sanitizedFullUrl,
+          // `url.full` must match `http.url`. Setting it here ensures parentless `http.client`
+          // segment spans don't get `url.full` backfilled with the host page URL (see httpContextIntegration).
+          'url.full': sanitizedFullUrl,
           'server.address': host,
         });
 
@@ -367,6 +371,7 @@ function xhrCallback(
 
   const fullUrl = getFullURL(url);
   const parsedUrl = fullUrl ? parseUrl(fullUrl) : parseUrl(url);
+  const sanitizedFullUrl = fullUrl ? stripDataUrlContent(fullUrl) : undefined;
 
   const urlForSpanName = stripDataUrlContent(stripUrlQueryAndFragment(url));
 
@@ -383,7 +388,10 @@ function xhrCallback(
             url: stripDataUrlContent(url),
             type: 'xhr',
             'http.method': method,
-            'http.url': fullUrl ? stripDataUrlContent(fullUrl) : undefined,
+            'http.url': sanitizedFullUrl,
+            // `url.full` must match `http.url`. Setting it here ensures parentless `http.client`
+            // segment spans don't get `url.full` backfilled with the host page URL (see httpContextIntegration).
+            'url.full': sanitizedFullUrl,
             'server.address': parsedUrl?.host,
             [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser',
             [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client',

packages/browser/test/integrations/httpcontext.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest';
+import { httpContextIntegration, SEMANTIC_ATTRIBUTE_SENTRY_OP } from '../../src/exports';
+import type { StreamedSpanJSON } from '@sentry/core';
+import { getDefaultBrowserClientOptions } from '../helper/browser-client-options';
+import { BrowserClient } from '../../src/client';
+
+describe('httpContextIntegration', () => {
+  globalThis.navigator = {
+    userAgent:
+      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+  } as unknown as Navigator;
+  globalThis.location = {
+    href: 'https://example.com',
+  } as unknown as Location;
+  globalThis.document = {
+    referrer: 'https://example.com',
+    addEventListener: vi.fn(),
+    location: {
+      href: 'https://example.com',
+    },
+  } as unknown as Document;
+
+  it("doesn't attach url.full to http.client segment spans", () => {
+    const integration = httpContextIntegration();
+
+    const span: Partial<StreamedSpanJSON> = {
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client',
+      },
+    };
+
+    const browserClient = new BrowserClient(getDefaultBrowserClientOptions());
+
+    integration.processSegmentSpan!(span as StreamedSpanJSON, browserClient);
+
+    expect(span.attributes).not.toHaveProperty('url.full');
+    expect(span.attributes).toEqual({
+      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'http.client',
+      'http.request.header.referer': 'https://example.com',
+      'http.request.header.user_agent':
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+    });
+  });
+
+  it('attaches url.full to non-http.client segment spans', () => {
+    const integration = httpContextIntegration();
+
+    const span: Partial<StreamedSpanJSON> = {
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      },
+    };
+
+    const browserClient = new BrowserClient(getDefaultBrowserClientOptions());
+
+    integration.processSegmentSpan!(span as StreamedSpanJSON, browserClient);
+
+    expect(span.attributes).toEqual({
+      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      'http.request.header.referer': 'https://example.com',
+      'http.request.header.user_agent':
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+      'url.full': 'https://example.com',
+    });
+  });
+});