fix(replay): Place CLS web vital at the last layout shift

The replay CLS event used the CLS score as its timestamp, so it always
landed a fraction of a millisecond after page load. Use the start time
of the last layout shift instead, like the CLS span in tracing does.
This also picks the time origin from when the shift happened.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Lms24

packages/replay-internal/src/util/createPerformanceEntries.ts

@@ -220,7 +220,10 @@ export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry
     }
   }
 
-  return getWebVital(metric, 'cumulative-layout-shift', nodes, layoutShifts);
+  // The CLS value is a score, not a time, so we place the event at the last layout shift. A CLS of 0 has no layout
+  // shift, so it goes at the time origin.
+  const lastEntry = metric.entries[metric.entries.length - 1];
+  return getWebVital(metric, 'cumulative-layout-shift', nodes, layoutShifts, lastEntry?.startTime ?? 0);
 }
 
 /**
@@ -241,11 +244,12 @@ function getWebVital(
   name: string,
   nodes: Node[] | undefined,
   attributions?: WebVitalData['attributions'],
+  time = metric.value,
 ): ReplayPerformanceEntry<WebVitalData> {
   const value = metric.value;
   const rating = metric.rating;
 
-  const end = getAbsoluteTime(value);
+  const end = getAbsoluteTime(time);
 
   return {
     type: 'web-vital',

packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts

@@ -143,11 +143,14 @@ describe('Unit | util | createPerformanceEntries', () => {
   });
 
   describe('getCumulativeLayoutShift', () => {
-    it('works with a CLS metric', async () => {
+    it('places the CLS event at the last layout shift', async () => {
       const metric = {
-        value: 5108.299,
-        rating: 'good' as const,
-        entries: [],
+        value: 0.15,
+        rating: 'needs-improvement' as const,
+        entries: [
+          { entryType: 'layout-shift', startTime: 1000, value: 0.05, sources: [], hadRecentInput: false },
+          { entryType: 'layout-shift', startTime: 5108.299, value: 0.1, sources: [], hadRecentInput: false },
+        ] as unknown as PerformanceEntry[],
       };
 
       const event = getCumulativeLayoutShift(metric);
@@ -157,7 +160,46 @@ describe('Unit | util | createPerformanceEntries', () => {
         name: 'cumulative-layout-shift',
         start: 1672531205.108299,
         end: 1672531205.108299,
-        data: { value: 5108.299, size: 5108.299, rating: 'good', nodeIds: [], attributions: [] },
+        data: {
+          value: 0.15,
+          size: 0.15,
+          rating: 'needs-improvement',
+          nodeIds: [],
+          attributions: [
+            { value: 0.05, nodeIds: undefined },
+            { value: 0.1, nodeIds: undefined },
+          ],
+        },
+      });
+    });
+
+    it('uses the time origin from when the last layout shift happened', () => {
+      const driftPointMs = 200_000;
+      const sleepDurationMs = 3_600_000;
+      vi.mocked(browserPerformanceTimeOrigin).mockImplementation((time = 0) =>
+        time < driftPointMs ? TIME_ORIGIN : TIME_ORIGIN + sleepDurationMs,
+      );
+
+      const event = getCumulativeLayoutShift({
+        value: 0.1,
+        rating: 'good',
+        entries: [
+          { entryType: 'layout-shift', startTime: driftPointMs + 1000, value: 0.1, sources: [], hadRecentInput: false },
+        ] as unknown as PerformanceEntry[],
+      });
+
+      expect(event.start).toBe((TIME_ORIGIN + sleepDurationMs + driftPointMs + 1000) / 1000);
+    });
+
+    it('places a CLS of 0 at the time origin', async () => {
+      const event = getCumulativeLayoutShift({ value: 0, rating: 'good', entries: [] });
+
+      expect(event).toEqual({
+        type: 'web-vital',
+        name: 'cumulative-layout-shift',
+        start: TIME_ORIGIN / 1000,
+        end: TIME_ORIGIN / 1000,
+        data: { value: 0, size: 0, rating: 'good', nodeIds: [], attributions: [] },
       });
     });
   });