add pageload span id

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-standalone-spans/test.ts

@@ -68,6 +68,7 @@ sentryTest('captures a "GOOD" CLS vital with its source as a standalone span', a
       'sentry.origin': 'auto.http.browser.cls',
       transaction: expect.stringContaining('index.html'),
       'user_agent.original': expect.stringContaining('Chrome'),
+      'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
     },
     description: expect.stringContaining('body > div#content > p'),
     exclusive_time: 0,
@@ -134,6 +135,7 @@ sentryTest('captures a "MEH" CLS vital with its source as a standalone span', as
       'sentry.origin': 'auto.http.browser.cls',
       transaction: expect.stringContaining('index.html'),
       'user_agent.original': expect.stringContaining('Chrome'),
+      'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
     },
     description: expect.stringContaining('body > div#content > p'),
     exclusive_time: 0,
@@ -198,6 +200,7 @@ sentryTest('captures a "POOR" CLS vital with its source as a standalone span.',
       'sentry.origin': 'auto.http.browser.cls',
       transaction: expect.stringContaining('index.html'),
       'user_agent.original': expect.stringContaining('Chrome'),
+      'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
     },
     description: expect.stringContaining('body > div#content > p'),
     exclusive_time: 0,
@@ -263,6 +266,7 @@ sentryTest(
         'sentry.origin': 'auto.http.browser.cls',
         transaction: expect.stringContaining('index.html'),
         'user_agent.original': expect.stringContaining('Chrome'),
+        'sentry.pageload.span_id': expect.stringMatching(/[a-f0-9]{16}/),
       },
       description: 'Layout shift',
       exclusive_time: 0,
@@ -306,6 +310,12 @@ sentryTest(
     expect(eventData.type).toBe('transaction');
     expect(eventData.contexts?.trace?.op).toBe('pageload');
 
+    const pageloadSpanId = eventData.contexts?.trace?.span_id;
+    const pageloadTraceId = eventData.contexts?.trace?.trace_id;
+
+    expect(pageloadSpanId).toMatch(/[a-f0-9]{16}/);
+    expect(pageloadTraceId).toMatch(/[a-f0-9]{32}/);
+
     const spanEnvelopePromise = getMultipleSentryEnvelopeRequests<SpanEnvelope>(
       page,
       1,
@@ -322,6 +332,10 @@ sentryTest(
     // Flakey value dependent on timings -> we check for a range
     expect(spanEnvelopeItem.measurements?.cls?.value).toBeGreaterThan(0.05);
     expect(spanEnvelopeItem.measurements?.cls?.value).toBeLessThan(0.15);
+
+    // Ensure the CLS span is connected to the pageload span and trace
+    expect(spanEnvelopeItem.data?.['sentry.pageload.span_id']).toBe(pageloadSpanId);
+    expect(spanEnvelopeItem.trace_id).toEqual(pageloadTraceId);
   },
 );
 
@@ -349,6 +363,7 @@ sentryTest('sends CLS of the initial page when soft-navigating to a new page', a
   // Flakey value dependent on timings -> we check for a range
   expect(spanEnvelopeItem.measurements?.cls?.value).toBeGreaterThan(0.05);
   expect(spanEnvelopeItem.measurements?.cls?.value).toBeLessThan(0.15);
+  expect(spanEnvelopeItem.data?.['sentry.pageload.span_id']).toMatch(/[a-f0-9]{16}/);
 });
 
 sentryTest("doesn't send further CLS after the first navigation", async ({ getLocalTestPath, page }) => {

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

@@ -4,8 +4,11 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE,
   SEMANTIC_ATTRIBUTE_SENTRY_OP,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  getActiveSpan,
   getClient,
   getCurrentScope,
+  getRootSpan,
+  spanToJSON,
 } from '@sentry/core';
 import type { SpanAttributes } from '@sentry/types';
 import { browserPerformanceTimeOrigin, dropUndefinedKeys, htmlTreeAsString, logger } from '@sentry/utils';
@@ -26,6 +29,7 @@ import { onHidden } from './web-vitals/lib/onHidden';
 export function trackClsAsStandaloneSpan(): void {
   let standaloneCLsValue = 0;
   let standaloneClsEntry: LayoutShift | undefined;
+  let pageloadSpanId: string | undefined;
 
   if (!supportsLayoutShift()) {
     return;
@@ -36,9 +40,11 @@ export function trackClsAsStandaloneSpan(): void {
     if (sentSpan) {
       return;
     }
-    sendStandaloneClsSpan(standaloneCLsValue, standaloneClsEntry);
-    cleanupClsHandler();
     sentSpan = true;
+    if (pageloadSpanId) {
+      sendStandaloneClsSpan(standaloneCLsValue, standaloneClsEntry, pageloadSpanId);
+    }
+    cleanupClsHandler();
   }
 
   const cleanupClsHandler = addClsInstrumentationHandler(({ metric }) => {
@@ -59,14 +65,23 @@ export function trackClsAsStandaloneSpan(): void {
   // we need to wait with subscribing to a client hook until the client is created. Therefore, we defer
   // to the next tick after the SDK setup.
   setTimeout(() => {
-    const unsubscribe = getClient()?.on('startNavigationSpan', () => {
+    const client = getClient();
+
+    const unsubscribeStartNavigation = client?.on('startNavigationSpan', () => {
       _collectClsOnce();
-      typeof unsubscribe === 'function' && unsubscribe();
+      unsubscribeStartNavigation && unsubscribeStartNavigation();
     });
+
+    const activeSpan = getActiveSpan();
+    const rootSpan = activeSpan && getRootSpan(activeSpan);
+    const spanJSON = rootSpan && spanToJSON(rootSpan);
+    if (spanJSON && spanJSON.op === 'pageload') {
+      pageloadSpanId = rootSpan.spanContext().spanId;
+    }
   }, 0);
 }
 
-function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined) {
+function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined, pageloadSpanId: string) {
   DEBUG_BUILD && logger.log(`Sending CLS span (${clsValue})`);
 
   const startTime = msToSec(browserPerformanceTimeOrigin as number) + (entry?.startTime || 0);
@@ -82,6 +97,8 @@ function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined)
     [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser.cls',
     [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.webvital.cls',
     [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: entry?.duration || 0,
+    // attach the pageload span id to the CLS span so that we can link them in the UI
+    'sentry.pageload.span_id': pageloadSpanId,
   });
 
   const span = startStandaloneWebVitalSpan({