feat(replay): Change LCP calculation (#7187)

Fixes up calculating LCP timing based on `web-vitals`. Previously we were using the `duration` field on the PerformanceEntry, but it was always 0.

Decided to change the `data.duration` field to `data.value` so that we do not break the frontend when trying to display this new field.

Author: billyvg

packages/integration-tests/utils/replayEventTemplates.ts

@@ -91,7 +91,7 @@ export const expectedLCPPerformanceSpan = {
   startTimestamp: expect.any(Number),
   endTimestamp: expect.any(Number),
   data: {
-    duration: expect.any(Number),
+    value: expect.any(Number),
     nodeId: expect.any(Number),
     size: expect.any(Number),
   },

packages/replay/src/util/createPerformanceEntries.ts

@@ -104,17 +104,29 @@ function createResourceEntry(entry: PerformanceResourceTiming) {
 // TODO: type definition!
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function createLargestContentfulPaint(entry: PerformanceEntry & { size: number; element: Node }) {
-  const { duration, entryType, startTime, size } = entry;
+  const { entryType, startTime, size } = entry;
 
-  const start = getAbsoluteTime(startTime);
+  let startTimeOrNavigationActivation = 0;
+
+  if (WINDOW.performance) {
+    const navEntry = WINDOW.performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming & {
+      activationStart: number;
+    };
+
+    // See https://github.com/GoogleChrome/web-vitals/blob/9f11c4c6578fb4c5ee6fa4e32b9d1d756475f135/src/lib/getActivationStart.ts#L21
+    startTimeOrNavigationActivation = (navEntry && navEntry.activationStart) || 0;
+  }
+
+  const start = getAbsoluteTime(startTimeOrNavigationActivation);
+  const value = Math.max(startTime - startTimeOrNavigationActivation, 0);
 
   return {
     type: entryType,
     name: entryType,
     start,
-    end: start + duration,
+    end: start + value,
     data: {
-      duration,
+      value,
       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