fix(replay): Place INP web vital at the interaction

Like CLS, the replay INP event used the metric value as its timestamp.
For INP that value is a duration, so the event landed shortly after
page load. Use the start time of the interaction instead.

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

Author: Lms24

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

@@ -233,7 +233,8 @@ export function getInteractionToNextPaint(metric: Metric): ReplayPerformanceEntr
   // oxlint-disable-next-line typescript/no-unnecessary-type-assertion -- rule false positive: the cast exposes the entry's `target` field; tsc errors without it
   const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { target?: Node }) | undefined;
   const node = lastEntry?.target ? [lastEntry.target] : undefined;
-  return getWebVital(metric, 'interaction-to-next-paint', node);
+  // The INP value is a duration, not a time, so we place the event at the interaction.
+  return getWebVital(metric, 'interaction-to-next-paint', node, undefined, lastEntry?.startTime ?? 0);
 }
 
 /**

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

@@ -205,11 +205,11 @@ describe('Unit | util | createPerformanceEntries', () => {
   });
 
   describe('getInteractionToNextPaint', () => {
-    it('works with an INP metric', async () => {
+    it('places the INP event at the interaction', async () => {
       const metric = {
-        value: 5108.299,
+        value: 120,
         rating: 'good' as const,
-        entries: [],
+        entries: [{ name: 'click', entryType: 'event', startTime: 5108.299, duration: 120 }] as PerformanceEntry[],
       };
 
       const event = getInteractionToNextPaint(metric);
@@ -219,8 +219,26 @@ describe('Unit | util | createPerformanceEntries', () => {
         name: 'interaction-to-next-paint',
         start: 1672531205.108299,
         end: 1672531205.108299,
-        data: { value: 5108.299, size: 5108.299, rating: 'good', nodeIds: undefined, attributions: undefined },
+        data: { value: 120, size: 120, rating: 'good', nodeIds: undefined, attributions: undefined },
       });
     });
+
+    it('uses the time origin from when the interaction 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 = getInteractionToNextPaint({
+        value: 120,
+        rating: 'good',
+        entries: [
+          { name: 'click', entryType: 'event', startTime: driftPointMs + 1000, duration: 120 },
+        ] as PerformanceEntry[],
+      });
+
+      expect(event.start).toBe((TIME_ORIGIN + sleepDurationMs + driftPointMs + 1000) / 1000);
+    });
   });
 });