fix(browser): Ensure Standalone CLS span timestamps are correct

Author: Lms24

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

@@ -453,3 +453,44 @@ sentryTest("doesn't send further CLS after the first page hide", async ({ getLoc
   // a timeout or something similar.
   await navigationTxnPromise;
 });
+
+sentryTest('CLS span timestamps are set correctly', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  const eventData = await getFirstSentryEnvelopeRequest<SentryEvent>(page, url);
+
+  expect(eventData.type).toBe('transaction');
+  expect(eventData.contexts?.trace?.op).toBe('pageload');
+  expect(eventData.timestamp).toBeDefined();
+
+  const pageloadEndTimestamp = eventData.timestamp!;
+
+  const spanEnvelopePromise = getMultipleSentryEnvelopeRequests<SpanEnvelope>(
+    page,
+    1,
+    { envelopeType: 'span' },
+    properFullEnvelopeRequestParser,
+  );
+
+  await triggerAndWaitForLayoutShift(page);
+
+  await hidePage(page);
+
+  const spanEnvelope = (await spanEnvelopePromise)[0];
+  const spanEnvelopeItem = spanEnvelope[1][0][1];
+
+  expect(spanEnvelopeItem.start_timestamp).toBeDefined();
+  expect(spanEnvelopeItem.timestamp).toBeDefined();
+
+  const clsSpanStartTimestamp = spanEnvelopeItem.start_timestamp!;
+  const clsSpanEndTimestamp = spanEnvelopeItem.timestamp!;
+
+  // CLS performance entries have no duration ==> start and end timestamp should be the same
+  expect(clsSpanStartTimestamp).toEqual(clsSpanEndTimestamp);
+
+  // We don't really care that they are very close together but rather about the order of magnitude
+  // Previously, we had a bug where the timestamps would be significantly off (by multiple hours)
+  // so we only ensure that this bug is fixed. 60 seconds should be more than enough.
+  expect(clsSpanStartTimestamp - pageloadEndTimestamp).toBeLessThan(60);
+  expect(clsSpanStartTimestamp).toBeGreaterThan(pageloadEndTimestamp);
+});

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

@@ -84,8 +84,7 @@ export function trackClsAsStandaloneSpan(): void {
 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);
-  const duration = msToSec(entry?.duration || 0);
+  const startTime = msToSec((browserPerformanceTimeOrigin || 0) + (entry?.startTime || 0));
   const routeName = getCurrentScope().getScopeData().transactionName;
 
   const name = entry ? htmlTreeAsString(entry.sources[0]?.node) : 'Layout shift';
@@ -110,7 +109,9 @@ function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined,
     [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: clsValue,
   });
 
-  span?.end(startTime + duration);
+  // LayoutShift performance entries always have a duration of 0, so we don't need to add `enntry.duration` here
+  // see: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration
+  span?.end(startTime);
 }
 
 function supportsLayoutShift(): boolean {

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

@@ -86,7 +86,7 @@ export function startStandaloneWebVitalSpan(options: StandaloneWebVitalSpanOptio
   const user = scope.getUser();
   const userDisplay = user !== undefined ? user.email || user.id || user.ip_address : undefined;
 
-  let profileId: string | undefined = undefined;
+  let profileId: string | undefined;
   try {
     // @ts-expect-error skip optional chaining to save bundle size with try catch
     profileId = scope.getScopeData().contexts.profile.profile_id;