feat(browser): Add url.full attribute to resource spans (#21846)

This attribute is needed for resource span description inference in
Relay (span streaming)

closes #21749

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-resource-spans/test.ts

@@ -65,6 +65,12 @@ sentryTest('adds resource spans to pageload transaction', async ({ getLocalTestU
   expect(scriptSpans?.map(({ description }) => description).sort()).toEqual(expectedScripts);
   expect(scriptSpans?.map(({ parent_span_id }) => parent_span_id)).toEqual(expectedScripts.map(() => spanId));
 
+  // The init bundle script is served from the test origin: its description is origin-relative,
+  // but `url.full` retains the full absolute URL (needed for span description inference).
+  const sameOriginScriptSpan = scriptSpans?.find(({ description }) => description === '/init.bundle.js');
+  expect(sameOriginScriptSpan?.data?.['url.same_origin']).toBe(true);
+  expect(sameOriginScriptSpan?.data?.['url.full']).toMatch(/^https?:\/\/.+\/init\.bundle\.js$/);
+
   const customScriptSpan = scriptSpans?.find(
     ({ description }) => description === 'https://sentry-test-site.example/path/to/script.js',
   );
@@ -94,6 +100,7 @@ sentryTest('adds resource spans to pageload transaction', async ({ getLocalTestU
       'server.address': 'sentry-test-site.example',
       'url.same_origin': false,
       'url.scheme': 'https',
+      'url.full': 'https://sentry-test-site.example/path/to/image.svg',
       ...(!isWebkitRun && {
         'http.response.status_code': expect.any(Number),
         'resource.render_blocking_status': 'non-blocking',
@@ -141,6 +148,7 @@ sentryTest('adds resource spans to pageload transaction', async ({ getLocalTestU
       'server.address': 'sentry-test-site.example',
       'url.same_origin': false,
       'url.scheme': 'https',
+      'url.full': 'https://sentry-test-site.example/path/to/style.css',
       ...(!isWebkitRun && {
         'http.response.status_code': expect.any(Number),
         'resource.render_blocking_status': 'non-blocking',
@@ -182,6 +190,7 @@ sentryTest('adds resource spans to pageload transaction', async ({ getLocalTestU
       'server.address': 'sentry-test-site.example',
       'url.same_origin': false,
       'url.scheme': 'https',
+      'url.full': 'https://sentry-test-site.example/path/to/script.js',
       ...(!isWebkitRun && {
         'http.response.status_code': expect.any(Number),
         'resource.render_blocking_status': 'non-blocking',

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

@@ -8,6 +8,7 @@ import {
   isPrimitive,
   parseUrl,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_URL_FULL,
   setMeasurement,
   spanToJSON,
   stringMatchesSomePattern,
@@ -774,6 +775,8 @@ export function _addResourceSpans(
 
   attributes['url.same_origin'] = resourceUrl.includes(WINDOW.location.origin);
 
+  attributes[SEMANTIC_ATTRIBUTE_URL_FULL] = resourceUrl;
+
   _setResourceRequestAttributes(entry, attributes, [
     // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/responseStatus
     ['responseStatus', 'http.response.status_code'],

packages/browser-utils/test/browser/browserMetrics.test.ts

@@ -471,6 +471,7 @@ describe('_addResourceSpans', () => {
           ['url.scheme']: 'https',
           ['server.address']: 'example.com',
           ['url.same_origin']: true,
+          ['url.full']: resourceEntryName,
           ['network.protocol.name']: 'http',
           ['network.protocol.version']: '1.1',
           'http.request.connect_start': expect.any(Number),
@@ -491,6 +492,47 @@ describe('_addResourceSpans', () => {
     );
   });
 
+  it('sets url.full to the absolute resource URL with query and fragment while keeping the description origin-relative', () => {
+    const spans: Span[] = [];
+
+    getClient()?.on('spanEnd', span => {
+      spans.push(span);
+    });
+
+    const entry = mockPerformanceResourceTiming({
+      initiatorType: 'script',
+      nextHopProtocol: 'http/1.1',
+    });
+
+    _addResourceSpans(span, entry, 'https://example.com/assets/app.js?v=42#main', 100, 23, 345);
+
+    expect(spans).toHaveLength(1);
+    const json = spanToJSON(spans[0]!);
+    expect(json.description).toBe('/assets/app.js?v=42#main');
+    expect(json.data['url.full']).toBe('https://example.com/assets/app.js?v=42#main');
+  });
+
+  it('sets url.full to the full cross-origin URL', () => {
+    const spans: Span[] = [];
+
+    getClient()?.on('spanEnd', span => {
+      spans.push(span);
+    });
+
+    const entry = mockPerformanceResourceTiming({
+      initiatorType: 'img',
+      nextHopProtocol: 'http/1.1',
+    });
+
+    _addResourceSpans(span, entry, 'https://cdn.example.org/static/logo.png', 100, 23, 345);
+
+    expect(spans).toHaveLength(1);
+    const json = spanToJSON(spans[0]!);
+    expect(json.description).toBe('https://cdn.example.org/static/logo.png');
+    expect(json.data['url.full']).toBe('https://cdn.example.org/static/logo.png');
+    expect(json.data['url.same_origin']).toBe(false);
+  });
+
   it('creates a variety of resource spans', () => {
     const spans: Span[] = [];
 
@@ -611,6 +653,7 @@ describe('_addResourceSpans', () => {
           ['url.scheme']: 'https',
           ['server.address']: 'example.com',
           ['url.same_origin']: true,
+          ['url.full']: resourceEntryName,
           ['network.protocol.name']: 'http',
           ['network.protocol.version']: '2',
         }),
@@ -644,6 +687,7 @@ describe('_addResourceSpans', () => {
           'server.address': 'example.com',
           'url.same_origin': true,
           'url.scheme': 'https',
+          'url.full': resourceEntryName,
           ['network.protocol.name']: 'http',
           ['network.protocol.version']: '3',
         }),
@@ -696,6 +740,7 @@ describe('_addResourceSpans', () => {
           'server.address': 'example.com',
           'url.same_origin': true,
           'url.scheme': 'https',
+          'url.full': resourceEntryName,
           ['network.protocol.name']: 'http',
           ['network.protocol.version']: '3',
           'http.request.connect_start': expect.any(Number),