chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/third_party/web-vitals/package/dist/modules/onTTFB.d.ts

@@ -1,4 +1,4 @@
-import { MetricRatingThresholds, ReportOpts, TTFBMetric } from './types.js';
+import type { MetricRatingThresholds, ReportOpts, TTFBMetric } from './types.js';
 /** Thresholds for TTFB. See https://web.dev/articles/ttfb#what_is_a_good_ttfb_score */
 export declare const TTFBThresholds: MetricRatingThresholds;
 /**

package/front_end/third_party/web-vitals/package/dist/modules/onTTFB.js

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 import { bindReporter } from './lib/bindReporter.js';
-import { initMetric } from './lib/initMetric.js';
-import { onBFCacheRestore } from './lib/bfcache.js';
+import { checkSoftNavsEnabled } from './lib/softNavs.js';
 import { getNavigationEntry } from './lib/getNavigationEntry.js';
 import { getActivationStart } from './lib/getActivationStart.js';
+import { initMetric } from './lib/initMetric.js';
+import { observe } from './lib/observe.js';
+import { getBFCacheRestoreTime, onBFCacheRestore } from './lib/bfcache.js';
 import { whenActivated } from './lib/whenActivated.js';
 /** Thresholds for TTFB. See https://web.dev/articles/ttfb#what_is_a_good_ttfb_score */
 export const TTFBThresholds = [800, 1800];
@@ -53,25 +55,41 @@ const whenReady = (callback) => {
  * and server processing time.
  */
 export const onTTFB = (onReport, opts = {}) => {
+    const softNavsEnabled = checkSoftNavsEnabled(opts);
     let metric = initMetric('TTFB');
     let report = bindReporter(onReport, metric, TTFBThresholds, opts.reportAllChanges);
     whenReady(() => {
-        const navigationEntry = getNavigationEntry();
-        if (navigationEntry) {
+        const hardNavEntry = getNavigationEntry();
+        if (hardNavEntry) {
+            const responseStart = hardNavEntry.responseStart;
             // The activationStart reference is used because TTFB should be
             // relative to page activation rather than navigation start if the
             // page was prerendered. But in cases where `activationStart` occurs
             // after the first byte is received, this time should be clamped at 0.
-            metric.value = Math.max(navigationEntry.responseStart - getActivationStart(), 0);
-            metric.entries = [navigationEntry];
+            metric.value = Math.max(responseStart - getActivationStart(), 0);
+            metric.entries = [hardNavEntry];
             report(true);
             // Only report TTFB after bfcache restores if a `navigation` entry
             // was reported for the initial load.
             onBFCacheRestore(() => {
-                metric = initMetric('TTFB', 0);
+                metric = initMetric('TTFB', 0, 'back-forward-cache', metric.navigationId, metric.navigationInteractionId, metric.navigationURL, getBFCacheRestoreTime());
                 report = bindReporter(onReport, metric, TTFBThresholds, opts.reportAllChanges);
                 report(true);
             });
+            // Listen for soft-navigation entries and emit a dummy 0 TTFB entry
+            if (softNavsEnabled) {
+                const reportSoftNavTTFBs = (entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.navigationId) {
+                            metric = initMetric('TTFB', 0, 'soft-navigation', entry.navigationId, entry.interactionId, entry.name, entry.startTime);
+                            metric.entries = [entry];
+                            report = bindReporter(onReport, metric, TTFBThresholds, opts.reportAllChanges);
+                            report(true);
+                        }
+                    });
+                };
+                observe(['soft-navigation'], reportSoftNavTTFBs, opts);
+            }
         }
     });
 };

package/front_end/third_party/web-vitals/package/dist/modules/types/base.d.ts

@@ -49,8 +49,29 @@ export interface Metric {
      * - 'prerender': for pages that were prerendered.
      * - 'restore': for pages that were discarded by the browser and then
      * restored by the user.
+     * - 'soft-navigation': for soft navigations.
      */
-    navigationType: 'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'restore';
+    navigationType: 'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'restore' | 'soft-navigation';
+    /**
+     * The navigationId the metric happened for. This is particularly relevant for soft navigations where
+     * the metric may be reported for a previous URL.
+     */
+    navigationId: number;
+    /**
+     * For metrics specific to a soft navigation, the interactionId of the
+     * interaction that triggered that soft navigation.
+     */
+    navigationInteractionId?: number;
+    /**
+     * The navigation startTime the metric is based from. This is particularly
+     * relevant for soft navigations where time origin is not 0.
+     */
+    navigationStartTime?: number;
+    /**
+     * The navigation URL the metric happened for. This is particularly relevant for soft navigations where
+     * the metric may be reported for a previous URL.
+     */
+    navigationURL?: string;
 }
 /** The union of supported metric types. */
 export type MetricType = CLSMetric | FCPMetric | INPMetric | LCPMetric | TTFBMetric;
@@ -80,6 +101,8 @@ export interface ReportCallback {
 }
 export interface ReportOpts {
     reportAllChanges?: boolean;
+    durationThreshold?: number;
+    reportSoftNavs?: boolean;
 }
 export interface AttributionReportOpts extends ReportOpts {
     generateTarget?: (el: Node | null) => string | undefined;

package/front_end/third_party/web-vitals/package/dist/modules/types/fcp.d.ts

@@ -36,7 +36,7 @@ export interface FCPAttribution {
      * general page load issues. This can be used to access `serverTiming` for example:
      * navigationEntry?.serverTiming
      */
-    navigationEntry?: PerformanceNavigationTiming;
+    navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
 }
 /**
  * An FCP-specific version of the Metric object with attribution.

package/front_end/third_party/web-vitals/package/dist/modules/types/inp.d.ts

@@ -43,35 +43,43 @@ export interface INPAttribution {
      * `generateTarget` configuration option was passed, then this will instead
      * be the return value of that function, falling back to the default if that
      * returns null or undefined.
+     * This value may not be set in cases where the event duration was less than
+     * the browser minimum reporting threshold, and thus no entry was dispatched.
      */
-    interactionTarget: string;
+    interactionTarget?: string;
     /**
      * The time when the user first interacted during the frame where the INP
      * candidate interaction occurred (if more than one interaction occurred
      * within the frame, only the first time is reported).
+     * This value may not be set in cases where the event duration was less than
+     * the browser minimum reporting threshold, and thus no entry was dispatched.
      */
-    interactionTime: DOMHighResTimeStamp;
+    interactionTime?: DOMHighResTimeStamp;
     /**
      * The type of interaction, based on the event type of the `event` entry
      * that corresponds to the interaction (i.e. the first `event` entry
      * containing an `interactionId` dispatched in a given animation frame).
      * For "pointerdown", "pointerup", or "click" events this will be "pointer",
      * and for "keydown" or "keyup" events this will be "keyboard".
+     * This value may not be set in cases where the event duration was less than
+     * the browser minimum reporting threshold, and thus no entry was dispatched.
      */
-    interactionType: 'pointer' | 'keyboard';
+    interactionType?: 'pointer' | 'keyboard';
     /**
      * The best-guess timestamp of the next paint after the interaction.
      * In general, this timestamp is the same as the `startTime + duration` of
      * the event timing entry. However, since duration values are rounded to the
      * nearest 8ms (and can be rounded down), this value is clamped to always be
      * reported after the processing times.
+     * This value may not be set in cases where the event duration was less than
+     * the browser minimum reporting threshold, and thus no entry was dispatched.
      */
-    nextPaintTime: DOMHighResTimeStamp;
+    nextPaintTime?: DOMHighResTimeStamp;
     /**
      * An array of Event Timing entries that were processed within the same
      * animation frame as the INP candidate interaction.
-     * This array can be quite large so it will be empty if the
-     * `includeProcessedEventEntries` configuration option is set to `false` to
+     * This array can be quite large so it will be empty unless the
+     * `includeProcessedEventEntries` configuration option is set to `true` to
      * conserve memory if these entries are not required.
      */
     processedEventEntries: PerformanceEventTiming[];

package/front_end/third_party/web-vitals/package/dist/modules/types/lcp.d.ts

@@ -54,7 +54,7 @@ export interface LCPAttribution {
      * general page load issues. This can be used to access `serverTiming` for example:
      * navigationEntry?.serverTiming
      */
-    navigationEntry?: PerformanceNavigationTiming;
+    navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
     /**
      * The `resource` entry for the LCP resource (if applicable), which is useful
      * for diagnosing resource load issues.

package/front_end/third_party/web-vitals/package/dist/modules/types/ttfb.d.ts

@@ -4,7 +4,7 @@ import type { Metric } from './base.js';
  */
 export interface TTFBMetric extends Metric {
     name: 'TTFB';
-    entries: PerformanceNavigationTiming[];
+    entries: PerformanceNavigationTiming[] | PerformanceSoftNavigation[];
 }
 /**
  * An object containing potentially-helpful debugging information that
@@ -49,7 +49,7 @@ export interface TTFBAttribution {
      * general page load issues. This can be used to access `serverTiming` for
      * example: navigationEntry?.serverTiming
      */
-    navigationEntry?: PerformanceNavigationTiming;
+    navigationEntry?: PerformanceNavigationTiming | PerformanceSoftNavigation;
 }
 /**
  * A TTFB-specific version of the Metric object with attribution.

package/front_end/third_party/web-vitals/package/dist/modules/types.d.ts

@@ -5,9 +5,13 @@ export * from './types/inp.js';
 export * from './types/lcp.js';
 export * from './types/ttfb.js';
 interface PerformanceEntryMap {
-    navigation: PerformanceNavigationTiming;
-    resource: PerformanceResourceTiming;
-    paint: PerformancePaintTiming;
+    'event': PerformanceEventTiming;
+    'interaction-contentful-paint': InteractionContentfulPaint;
+    'layout-shift': LayoutShift;
+    'navigation': PerformanceNavigationTiming;
+    'paint': PerformancePaintTiming;
+    'resource': PerformanceResourceTiming;
+    'soft-navigation': PerformanceSoftNavigation;
 }
 declare global {
     interface Document {
@@ -17,15 +21,19 @@ declare global {
     interface Performance {
         getEntriesByType<K extends keyof PerformanceEntryMap>(type: K): PerformanceEntryMap[K][];
     }
+    interface PerformanceEntry {
+        navigationId?: number;
+    }
     interface PerformanceObserverInit {
         durationThreshold?: number;
     }
-    interface PerformanceNavigationTiming {
+    interface PerformanceNavigationTiming extends PerformanceEntry {
         activationStart?: number;
     }
     interface PerformanceEventTiming extends PerformanceEntry {
         duration: DOMHighResTimeStamp;
         readonly interactionId: number;
+        readonly targetSelector: string;
     }
     interface LayoutShiftAttribution {
         node: Node | null;
@@ -45,6 +53,20 @@ declare global {
         readonly url: string;
         readonly element: Element | null;
     }
+    interface InteractionContentfulPaint extends PerformanceEntry {
+        readonly interactionId: number;
+        readonly largestContentfulPaint?: LargestContentfulPaint;
+    }
+    interface PerformanceSoftNavigation extends PerformanceEntry {
+        readonly interactionId: number;
+        readonly navigationType?: NavigationType;
+        readonly paintTime?: number;
+        readonly presentationTime?: number;
+        readonly getLargestInteractionContentfulPaint?: () => InteractionContentfulPaint | null;
+    }
+    var PerformanceSoftNavigation: {
+        prototype: PerformanceSoftNavigation;
+    };
     export type ScriptInvokerType = 'classic-script' | 'module-script' | 'event-listener' | 'user-callback' | 'resolve-promise' | 'reject-promise';
     export type ScriptWindowAttribution = 'self' | 'descendant' | 'ancestor' | 'same-page' | 'other';
     interface PerformanceScriptTiming extends PerformanceEntry {

package/front_end/third_party/web-vitals/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-vitals",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "description": "Easily measure performance metrics in JavaScript",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -90,6 +90,7 @@
     "release:alpha": "npm version prerelease --preid=alpha -m 'Release v%s' && npm publish --tag next",
     "release:beta": "npm version prerelease --preid=beta -m 'Release v%s' && npm publish --tag next",
     "release:rc": "npm version prerelease --preid=rc -m 'Release v%s' && npm publish --tag next",
+    "release:soft-navs": "npm run build && npm publish --tag soft-navs",
     "test": "npm-run-all build test:unit -p -r test:e2e test:server",
     "test:e2e": "wdio",
     "test:server": "node test/server.js",
@@ -125,11 +126,6 @@
   "bugs": {
     "url": "https://github.com/GoogleChrome/web-vitals/issues"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "prettier": {
     "arrowParens": "always",
     "bracketSpacing": false,
@@ -137,25 +133,28 @@
     "singleQuote": true
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@typescript-eslint/eslint-plugin": "^8.52.0",
-    "@typescript-eslint/parser": "^8.52.0",
-    "@wdio/cli": "^9.23.0",
-    "@wdio/local-runner": "^9.25.0",
-    "@wdio/mocha-framework": "^9.25.0",
-    "@wdio/spec-reporter": "^9.25.0",
-    "eslint": "^9.39.2",
-    "fs-extra": "^11.3.3",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@eslint/eslintrc": "^3.3.6",
+    "@eslint/js": "^10.0.1",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
+    "@wdio/cli": "^9.29.1",
+    "@wdio/local-runner": "^9.29.1",
+    "@wdio/mocha-framework": "^9.29.1",
+    "@wdio/spec-reporter": "^9.29.1",
+    "eslint": "^10.7.0",
+    "fs-extra": "^11.3.6",
+    "globals": "^17.7.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^17.0.8",
     "npm-run-all": "^4.1.5",
     "nunjucks": "^3.2.4",
-    "prettier": "^3.7.4",
-    "rollup": "^4.55.1",
-    "typescript": "^5.9.3",
+    "prettier": "^3.9.5",
+    "rollup": "^4.62.2",
+    "typescript": "^6.0.3",
     "yargs": "^18.0.0"
   },
   "lint-staged": {

package/front_end/third_party/web-vitals/package/src/attribution/onCLS.ts

@@ -19,7 +19,7 @@ import {getLoadState} from '../lib/getLoadState.js';
 import {getSelector} from '../lib/getSelector.js';
 import {initUnique} from '../lib/initUnique.js';
 import {onCLS as unattributedOnCLS} from '../onCLS.js';
-import {
+import type {
   CLSAttribution,
   CLSMetric,
   CLSMetricWithAttribution,

package/front_end/third_party/web-vitals/package/src/attribution/onFCP.ts

@@ -17,58 +17,81 @@
 import {getBFCacheRestoreTime} from '../lib/bfcache.js';
 import {getLoadState} from '../lib/getLoadState.js';
 import {getNavigationEntry} from '../lib/getNavigationEntry.js';
+import {initUnique} from '../lib/initUnique.js';
+import {FCPEntryManager} from '../lib/FCPEntryManager.js';
+import {checkSoftNavsEnabled} from '../lib/softNavs.js';
 import {onFCP as unattributedOnFCP} from '../onFCP.js';
-import {
+import type {
   FCPAttribution,
   FCPMetric,
   FCPMetricWithAttribution,
   AttributionReportOpts,
 } from '../types.js';
 
-const attributeFCP = (metric: FCPMetric): FCPMetricWithAttribution => {
-  // Use a default object if no other attribution has been set.
-  let attribution: FCPAttribution = {
-    timeToFirstByte: 0,
-    firstByteToFCP: metric.value,
-    loadState: getLoadState(getBFCacheRestoreTime()),
-  };
+export const onFCP = (
+  onReport: (metric: FCPMetricWithAttribution) => void,
+  opts: AttributionReportOpts = {},
+) => {
+  opts = Object.assign({}, opts);
+
+  // Init the fcpEntryManager (which will already be initialised in the
+  // unattributed onFCP method if soft navigation reporting is enabled
+  // and so will return that fcpEntryManager, rather than a new one)
+  const fcpEntryManager = initUnique(opts, FCPEntryManager);
+  if (checkSoftNavsEnabled(opts)) {
+    fcpEntryManager._softNavigationEntryMap = new Map();
+  }
 
-  if (metric.entries.length) {
-    const navigationEntry = getNavigationEntry();
-    const fcpEntry = metric.entries.at(-1);
+  const attributeFCP = (metric: FCPMetric): FCPMetricWithAttribution => {
+    // Use a default object if no other attribution has been set.
+    let attribution: FCPAttribution = {
+      timeToFirstByte: 0,
+      firstByteToFCP: metric.value,
+      loadState: getLoadState(getBFCacheRestoreTime()),
+    };
 
-    if (navigationEntry) {
-      const activationStart = navigationEntry.activationStart || 0;
-      const ttfb = Math.max(0, navigationEntry.responseStart - activationStart);
+    if (metric.navigationType !== 'soft-navigation') {
+      if (metric.entries.length) {
+        const navigationEntry = getNavigationEntry();
+        const fcpEntry = metric.entries.at(-1);
+        if (navigationEntry) {
+          const responseStart = navigationEntry.responseStart;
+          const activationStart = navigationEntry.activationStart || 0;
+          const ttfb = Math.max(0, responseStart - activationStart);
 
-      attribution = {
-        timeToFirstByte: ttfb,
-        firstByteToFCP: metric.value - ttfb,
-        loadState: getLoadState(metric.entries[0].startTime),
-        navigationEntry,
-        fcpEntry,
-      };
+          attribution = {
+            timeToFirstByte: ttfb,
+            firstByteToFCP: metric.value - ttfb,
+            loadState: getLoadState(metric.entries[0].startTime),
+            navigationEntry,
+            fcpEntry,
+          };
+        }
+      }
+    } else {
+      // Lookup the soft navigation entry. Do not use getEntriesByType since
+      // that is limited to the first 50 navigation entries due to buffer size.
+      const navigationEntry = fcpEntryManager._softNavigationEntryMap?.get(
+        metric.navigationId,
+      );
+      if (navigationEntry) {
+        attribution = {
+          timeToFirstByte: 0,
+          firstByteToFCP: metric.value,
+          loadState: 'complete',
+          navigationEntry,
+        };
+      }
     }
-  }
 
-  // Use `Object.assign()` to ensure the original metric object is returned.
-  const metricWithAttribution: FCPMetricWithAttribution = Object.assign(
-    metric,
-    {attribution},
-  );
-  return metricWithAttribution;
-};
+    // Use `Object.assign()` to ensure the original metric object is returned.
+    const metricWithAttribution: FCPMetricWithAttribution = Object.assign(
+      metric,
+      {attribution},
+    );
+    return metricWithAttribution;
+  };
 
-/**
- * Calculates the [FCP](https://web.dev/articles/fcp) value for the current page and
- * calls the `callback` function once the value is ready, along with the
- * relevant `paint` performance entry used to determine the value. The reported
- * value is a `DOMHighResTimeStamp`.
- */
-export const onFCP = (
-  onReport: (metric: FCPMetricWithAttribution) => void,
-  opts: AttributionReportOpts = {},
-) => {
   unattributedOnFCP((metric: FCPMetric) => {
     onReport(attributeFCP(metric));
   }, opts);

package/front_end/third_party/web-vitals/package/src/attribution/onINP.ts

@@ -17,11 +17,14 @@
 import {getLoadState} from '../lib/getLoadState.js';
 import {getSelector} from '../lib/getSelector.js';
 import {initUnique} from '../lib/initUnique.js';
-import {InteractionManager, Interaction} from '../lib/InteractionManager.js';
+import {
+  InteractionManager,
+  type Interaction,
+} from '../lib/InteractionManager.js';
 import {observe} from '../lib/observe.js';
 import {whenIdleOrHidden} from '../lib/whenIdleOrHidden.js';
 import {onINP as unattributedOnINP} from '../onINP.js';
-import {
+import type {
   INPAttribution,
   INPAttributionReportOpts,
   INPMetric,
@@ -63,7 +66,7 @@ const MAX_PENDING_FRAMES = 10;
  *
  * A custom `includeProcessedEventEntries` configuration option can optionally
  * be passed to control whether the `processedEventEntries` array in the
- * attribution object is populated. The default value is `true`.
+ * attribution object is populated. The default value is `false`.
  *
  * If the `reportAllChanges` configuration option is set to `true`, the
  * `callback` function will be called as soon as the value is initially
@@ -130,10 +133,19 @@ export const onINP = (
 
   const saveInteractionTarget = (interaction: Interaction) => {
     if (!interactionTargetMap.get(interaction)) {
-      const node = interaction.entries[0].target;
+      // Use find to get first selector
+      const node = interaction.entries.find((e) => e.target)?.target;
       if (node) {
         const customTarget = opts.generateTarget?.(node) ?? getSelector(node);
         interactionTargetMap.set(interaction, customTarget);
+      } else {
+        // Fall back to targetSelector
+        const selector = interaction.entries.find(
+          (e) => e.targetSelector,
+        )?.targetSelector;
+        if (selector) {
+          interactionTargetMap.set(interaction, selector);
+        }
       }
     }
   };
@@ -174,7 +186,7 @@ export const onINP = (
         );
         // processedEventEntries can be quite large, so only include them if
         // the user explicitly requests them (default is to include).
-        if (opts.includeProcessedEventEntries !== false) {
+        if (opts.includeProcessedEventEntries) {
           group.entries.push(entry);
         }
 
@@ -191,7 +203,7 @@ export const onINP = (
         renderTime,
         // processedEventEntries can be quite large, so only include them if
         // the user explicitly requests them (default is to include).
-        entries: opts.includeProcessedEventEntries !== false ? [entry] : [],
+        entries: opts.includeProcessedEventEntries ? [entry] : [],
       };
 
       pendingEntriesGroups.push(group);
@@ -282,6 +294,7 @@ export const onINP = (
       rating: 'good',
       value: entry.duration,
       delta: entry.duration,
+      navigationId: (entry as any).navigationId,
       navigationType: 'navigate',
       id: 'N/A',
     });
@@ -317,12 +330,18 @@ export const onINP = (
   };
 
   const attributeLoAFDetails = (attribution: INPAttribution) => {
-    // If there is no LoAF data then nothing further to attribute
-    if (!attribution.longAnimationFrameEntries?.length) {
+    const interactionTime = attribution.interactionTime;
+    const nextPaintTime = attribution.nextPaintTime;
+
+    // If there is no LoAF data, interactionTime or paintTime
+    // then nothing further to attribute here.
+    if (
+      !attribution.longAnimationFrameEntries?.length ||
+      !interactionTime ||
+      !nextPaintTime
+    ) {
       return;
     }
-
-    const interactionTime = attribution.interactionTime;
     const inputDelay = attribution.inputDelay;
     const processingDuration = attribution.processingDuration;
 
@@ -385,7 +404,7 @@ export const onINP = (
       ? lastLoAF.startTime + lastLoAF.duration
       : 0;
     if (lastLoAFEndTime >= interactionTime + inputDelay + processingDuration) {
-      totalPaintDuration = attribution.nextPaintTime - lastLoAFEndTime;
+      totalPaintDuration = nextPaintTime - lastLoAFEndTime;
     }
 
     if (longestScriptEntry && longestScriptSubpart) {
@@ -399,7 +418,7 @@ export const onINP = (
     attribution.totalStyleAndLayoutDuration = totalStyleAndLayoutDuration;
     attribution.totalPaintDuration = totalPaintDuration;
     attribution.totalUnattributedDuration =
-      attribution.nextPaintTime -
+      nextPaintTime -
       interactionTime -
       totalScriptDuration -
       totalStyleAndLayoutDuration -
@@ -407,10 +426,29 @@ export const onINP = (
   };
 
   const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
+    // Soft navs and bfcache can have a dummy INP as no first-input entry to
+    // fall back on so we report dummy values when the interactionCount has
+    // gone up, even if no entry was emitted.
+    // See https://github.com/GoogleChrome/web-vitals/issues/724
+    // All other INPs should have at least one entry, but we'll do same dummy
+    // processing if they don't for some reason.
+    if (metric.entries.length === 0) {
+      const navStartTime = metric.navigationStartTime || 0;
+      const attribution: INPAttribution = {
+        processedEventEntries: [],
+        longAnimationFrameEntries: [],
+        inputDelay: 0,
+        processingDuration: 0,
+        presentationDelay: metric.value,
+        loadState: getLoadState(navStartTime),
+      };
+      return Object.assign(metric, {attribution});
+    }
+
     const firstEntry = metric.entries[0];
     const group = entryToEntriesGroupMap.get(firstEntry)!;
 
-    const processingStart = firstEntry.processingStart;
+    const processingStart = group.processingStart;
 
     // Due to the fact that durations can be rounded down to the nearest 8ms,
     // we have to clamp `nextPaintTime` so it doesn't appear to occur before
@@ -420,7 +458,6 @@ export const onINP = (
       firstEntry.startTime + firstEntry.duration,
       processingStart,
     );
-
     // For the purposes of attribution, clamp `processingEnd` to `nextPaintTime`,
     // so processing is never reported as taking longer than INP (which can
     // happen via the web APIs in the case of sync modals, e.g. `alert()`).
@@ -469,7 +506,7 @@ export const onINP = (
   };
 
   // Start observing LoAF entries for attribution.
-  observe('long-animation-frame', handleLoAFEntries);
+  observe(['long-animation-frame'], handleLoAFEntries, opts);
 
   unattributedOnINP((metric: INPMetric) => {
     onReport(attributeINP(metric));