feat: update lcp

Author: logaretm

packages/browser-utils/src/metrics/web-vitals/getLCP.ts

@@ -16,16 +16,17 @@
 
 import { bindReporter } from './lib/bindReporter';
 import { getActivationStart } from './lib/getActivationStart';
+import { getNavigationEntry } from './lib/getNavigationEntry';
 import { getVisibilityWatcher } from './lib/getVisibilityWatcher';
-import { addPageListener, removePageListener } from './lib/globalListeners';
+import { addPageListener } from './lib/globalListeners';
 import { initMetric } from './lib/initMetric';
 import { initUnique } from './lib/initUnique';
 import { LCPEntryManager } from './lib/LCPEntryManager';
 import { observe } from './lib/observe';
-import { runOnce } from './lib/runOnce';
+import { getSoftNavigationEntry, softNavs } from './lib/softNavs';
 import { whenActivated } from './lib/whenActivated';
 import { whenIdleOrHidden } from './lib/whenIdleOrHidden';
-import type { LCPMetric, MetricRatingThresholds, ReportOpts } from './types';
+import type { LCPMetric, Metric, MetricRatingThresholds, ReportOpts } from './types';
 
 /** Thresholds for LCP. See https://web.dev/articles/lcp#what_is_a_good_lcp_score */
 export const LCPThresholds: MetricRatingThresholds = [2500, 4000];
@@ -42,22 +43,63 @@ export const LCPThresholds: MetricRatingThresholds = [2500, 4000];
  * been determined.
  */
 export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts = {}) => {
+  let reportedMetric = false;
+  const softNavsEnabled = softNavs(opts);
+  let metricNavStartTime = 0;
+  const hardNavId = getNavigationEntry()?.navigationId || '1';
+  let finalizeNavId = '';
+
   whenActivated(() => {
-    const visibilityWatcher = getVisibilityWatcher();
-    const metric = initMetric('LCP');
+    let visibilityWatcher = getVisibilityWatcher();
+    let metric = initMetric('LCP');
     let report: ReturnType<typeof bindReporter>;
 
     const lcpEntryManager = initUnique(opts, LCPEntryManager);
 
+    const initNewLCPMetric = (navigation?: Metric['navigationType'], navigationId?: string) => {
+      metric = initMetric('LCP', 0, navigation, navigationId);
+      report = bindReporter(onReport, metric, LCPThresholds, opts.reportAllChanges);
+      reportedMetric = false;
+      if (navigation === 'soft-navigation') {
+        visibilityWatcher = getVisibilityWatcher(true);
+        const softNavEntry = getSoftNavigationEntry(navigationId);
+        metricNavStartTime = softNavEntry?.startTime ?? 0;
+      }
+    };
+
     const handleEntries = (entries: LCPMetric['entries']) => {
       // If reportAllChanges is set then call this function for each entry,
-      // otherwise only consider the last one.
-      if (!opts.reportAllChanges) {
+      // otherwise only consider the last one, unless soft navs are enabled.
+      if (!opts.reportAllChanges && !softNavsEnabled) {
         // eslint-disable-next-line no-param-reassign
         entries = entries.slice(-1);
       }
 
       for (const entry of entries) {
+        if (softNavsEnabled && entry?.navigationId !== metric.navigationId) {
+          // If the entry is for a new navigationId than previous, then we have
+          // entered a new soft nav, so emit the final LCP and reinitialize the
+          // metric.
+          if (!reportedMetric) report(true);
+          initNewLCPMetric('soft-navigation', entry.navigationId);
+        }
+        let value = 0;
+        if (!entry.navigationId || entry.navigationId === hardNavId) {
+          // The startTime attribute returns the value of the renderTime if it is
+          // not 0, and the value of the loadTime otherwise. The activationStart
+          // reference is used because LCP should be relative to page activation
+          // rather than navigation start if the page was prerendered. But in cases
+          // where `activationStart` occurs after the LCP, this time should be
+          // clamped at 0.
+          value = Math.max(entry.startTime - getActivationStart(), 0);
+        } else {
+          // As a soft nav needs an interaction, it should never be before
+          // getActivationStart so can just cap to 0
+          const softNavEntry = getSoftNavigationEntry(entry.navigationId);
+          const softNavEntryStartTime = softNavEntry?.startTime ?? 0;
+          value = Math.max(entry.startTime - softNavEntryStartTime, 0);
+        }
+
         lcpEntryManager._processEntry(entry);
 
         // Only report if the page wasn't hidden prior to LCP.
@@ -68,36 +110,37 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
           // rather than navigation start if the page was prerendered. But in cases
           // where `activationStart` occurs after the LCP, this time should be
           // clamped at 0.
-          metric.value = Math.max(entry.startTime - getActivationStart(), 0);
+          metric.value = value;
           metric.entries = [entry];
           report();
         }
       }
     };
 
-    const po = observe('largest-contentful-paint', handleEntries);
+    const po = observe('largest-contentful-paint', handleEntries, opts);
 
     if (po) {
       report = bindReporter(onReport, metric, LCPThresholds, opts.reportAllChanges);
 
-      // Ensure this logic only runs once, since it can be triggered from
-      // any of three different event listeners below.
-      const stopListening = runOnce(() => {
-        handleEntries(po.takeRecords() as LCPMetric['entries']);
-        po.disconnect();
-        report(true);
-      });
-
-      // Need a separate wrapper to ensure the `runOnce` function above is
-      // common for all three functions
-      const stopListeningWrapper = (event: Event) => {
-        if (event.isTrusted) {
+      const finalizeLCP = (event: Event) => {
+        if (event.isTrusted && !reportedMetric) {
+          // Finalize the current navigationId metric.
+          finalizeNavId = metric.navigationId;
           // Wrap the listener in an idle callback so it's run in a separate
           // task to reduce potential INP impact.
           // https://github.com/GoogleChrome/web-vitals/issues/383
-          whenIdleOrHidden(stopListening);
-          removePageListener(event.type, stopListeningWrapper, {
-            capture: true,
+          whenIdleOrHidden(() => {
+            if (!reportedMetric) {
+              handleEntries(po.takeRecords() as LCPMetric['entries']);
+              if (!softNavsEnabled) {
+                po.disconnect();
+                removeEventListener(event.type, finalizeLCP);
+              }
+              if (metric.navigationId === finalizeNavId) {
+                reportedMetric = true;
+                report(true);
+              }
+            }
           });
         }
       };
@@ -107,10 +150,40 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
       // unreliable since it can be programmatically generated.
       // See: https://github.com/GoogleChrome/web-vitals/issues/75
       for (const type of ['keydown', 'click', 'visibilitychange']) {
-        addPageListener(type, stopListeningWrapper, {
+        addPageListener(type, finalizeLCP, {
           capture: true,
         });
       }
+
+      // Soft navs may be detected by navigationId changes in metrics above
+      // But where no metric is issued we need to also listen for soft nav
+      // entries, then emit the final metric for the previous navigation and
+      // reset the metric for the new navigation.
+      //
+      // As PO is ordered by time, these should not happen before metrics.
+      //
+      // We add a check on startTime as we may be processing many entries that
+      // are already dealt with so just checking navigationId differs from
+      // current metric's navigation id, as we did above, is not sufficient.
+      const handleSoftNavEntries = (entries: SoftNavigationEntry[]) => {
+        entries.forEach(entry => {
+          const softNavEntry = entry.navigationId ? getSoftNavigationEntry(entry.navigationId) : null;
+          if (
+            entry?.navigationId !== metric.navigationId &&
+            softNavEntry?.startTime &&
+            softNavEntry.startTime > metricNavStartTime
+          ) {
+            handleEntries(po.takeRecords() as LCPMetric['entries']);
+            if (!reportedMetric) report(true);
+            initNewLCPMetric('soft-navigation', entry.navigationId);
+          }
+        });
+      };
+
+      if (softNavsEnabled) {
+        observe('interaction-contentful-paint', handleEntries, opts);
+        observe('soft-navigation', handleSoftNavEntries, opts);
+      }
     }
   });
 };