fix(replay): Fix timestamps on LCP (#7225)

`value` was being used as ms but start/end timestamps are in seconds. Changed start and end to be equal because LCP does not have a duration, it is a single point in time.

---------

Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

Author: billyvg

packages/integration-tests/suites/replay/customEvents/test.ts

@@ -10,6 +10,7 @@ import {
   expectedNavigationPerformanceSpan,
   getExpectedReplayEvent,
 } from '../../../utils/replayEventTemplates';
+import type { PerformanceSpan } from '../../../utils/replayHelpers';
 import {
   getCustomRecordingEvents,
   getReplayEvent,
@@ -68,6 +69,13 @@ sentryTest(
         expectedMemoryPerformanceSpan,
       ]),
     );
+
+    const lcpSpan = collectedPerformanceSpans.find(
+      s => s.description === 'largest-contentful-paint',
+    ) as PerformanceSpan;
+
+    // LCP spans should be point-in-time spans
+    expect(lcpSpan?.startTimestamp).toBeCloseTo(lcpSpan?.endTimestamp);
   },
 );
 

packages/integration-tests/utils/replayHelpers.ts

@@ -6,7 +6,7 @@ import type { Page, Request } from 'playwright';
 import { envelopeRequestParser } from './helpers';
 
 type CustomRecordingEvent = { tag: string; payload: Record<string, unknown> };
-type PerformanceSpan = {
+export type PerformanceSpan = {
   op: string;
   description: string;
   startTimestamp: number;

packages/replay/src/util/createPerformanceEntries.ts

@@ -117,16 +117,19 @@ function createLargestContentfulPaint(entry: PerformanceEntry & { size: number;
     startTimeOrNavigationActivation = (navEntry && navEntry.activationStart) || 0;
   }
 
-  const start = getAbsoluteTime(startTimeOrNavigationActivation);
+  // value is in ms
   const value = Math.max(startTime - startTimeOrNavigationActivation, 0);
+  // LCP doesn't have a "duration", it just happens at a single point in time.
+  // But the UI expects both, so use end (in seconds) for both timestamps.
+  const end = getAbsoluteTime(startTimeOrNavigationActivation) + value / 1000;
 
   return {
     type: entryType,
     name: entryType,
-    start,
-    end: start + value,
+    start: end,
+    end,
     data: {
-      value,
+      value, // LCP "duration" in ms
       size,
       // Not sure why this errors, Node should be correct (Argument of type 'Node' is not assignable to parameter of type 'INode')
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/replay/test/fixtures/performanceEntry/lcp.ts

@@ -4,10 +4,10 @@ export function PerformanceEntryLcp(obj?: Partial<PerformancePaintTiming>): Perf
   const entry = {
     name: '',
     entryType: 'largest-contentful-paint',
-    startTime: 108.299,
+    startTime: 5108.299,
     duration: 0,
     size: 7619,
-    renderTime: 108.299,
+    renderTime: 5108.299,
     loadTime: 0,
     firstAnimatedFrameTime: 0,
     id: '',

packages/replay/test/fixtures/performanceEntry/navigation.ts

@@ -2,6 +2,7 @@ import type { PerformanceNavigationTiming } from '../../../src/types';
 
 export function PerformanceEntryNavigation(obj?: Partial<PerformanceNavigationTiming>): PerformanceNavigationTiming {
   const entry = {
+    activationStart: 0,
     name: 'https://sentry.io/organizations/sentry/discover/',
     entryType: 'navigation',
     startTime: 0,

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

@@ -1,6 +1,32 @@
+jest.useFakeTimers().setSystemTime(new Date('2023-01-01'));
+
+jest.mock('@sentry/utils', () => ({
+  ...jest.requireActual('@sentry/utils'),
+  browserPerformanceTimeOrigin: Date.now(),
+}));
+
+import { WINDOW } from '../../../src/constants';
 import { createPerformanceEntries } from '../../../src/util/createPerformanceEntries';
+import { PerformanceEntryLcp } from '../../fixtures/performanceEntry/lcp';
+import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation';
 
 describe('Unit | util | createPerformanceEntries', () => {
+  beforeEach(function () {
+    if (!WINDOW.performance.getEntriesByType) {
+      WINDOW.performance.getEntriesByType = jest.fn((type: string) => {
+        if (type === 'navigation') {
+          return [PerformanceEntryNavigation()];
+        }
+        throw new Error(`entry ${type} not mocked`);
+      });
+    }
+  });
+
+  afterAll(function () {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
   it('ignores sdks own requests', function () {
     const data = {
       name: 'https://ingest.f00.f00/api/1/envelope/?sentry_key=dsn&sentry_version=7',
@@ -31,4 +57,21 @@ describe('Unit | util | createPerformanceEntries', () => {
     // @ts-ignore Needs a PerformanceEntry mock
     expect(createPerformanceEntries([data])).toEqual([]);
   });
+
+  it('has correct LCP entry when no navigation event', function () {
+    const result = createPerformanceEntries([PerformanceEntryLcp()]);
+    expect(result).toEqual([
+      {
+        data: {
+          nodeId: -1,
+          size: 7619,
+          value: 5108.299,
+        },
+        name: 'largest-contentful-paint',
+        type: 'largest-contentful-paint',
+        end: 1672531205.108299,
+        start: 1672531205.108299,
+      },
+    ]);
+  });
 });