feat(browser): Update web-vitals to 5.0.2

Author: Lms24

packages/browser-utils/src/metrics/web-vitals/README.md

@@ -27,6 +27,10 @@ web-vitals only report once per pageload.
 
 ## CHANGELOG
 
+TODO PR URL
+
+- Bumped from Web Vitals 4.2.5 to 5.0.2
+
 https://github.com/getsentry/sentry-javascript/pull/14439
 
 - Bumped from Web Vitals v3.5.2 to v4.2.4

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

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
+import { WINDOW } from '../../types';
 import { bindReporter } from './lib/bindReporter';
 import { initMetric } from './lib/initMetric';
+import { initUnique } from './lib/initUnique';
+import { LayoutShiftManager } from './lib/LayoutShiftManager';
 import { observe } from './lib/observe';
-import { onHidden } from './lib/onHidden';
 import { runOnce } from './lib/runOnce';
 import { onFCP } from './onFCP';
 import type { CLSMetric, MetricRatingThresholds, ReportOpts } from './types';
@@ -54,58 +56,37 @@ export const onCLS = (onReport: (metric: CLSMetric) => void, opts: ReportOpts =
       const metric = initMetric('CLS', 0);
       let report: ReturnType<typeof bindReporter>;
 
-      let sessionValue = 0;
-      let sessionEntries: LayoutShift[] = [];
+      const layoutShiftManager = initUnique(opts, LayoutShiftManager);
 
       const handleEntries = (entries: LayoutShift[]) => {
-        entries.forEach(entry => {
-          // Only count layout shifts without recent user input.
-          if (!entry.hadRecentInput) {
-            const firstSessionEntry = sessionEntries[0];
-            const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
-
-            // If the entry occurred less than 1 second after the previous entry
-            // and less than 5 seconds after the first entry in the session,
-            // include the entry in the current session. Otherwise, start a new
-            // session.
-            if (
-              sessionValue &&
-              firstSessionEntry &&
-              lastSessionEntry &&
-              entry.startTime - lastSessionEntry.startTime < 1000 &&
-              entry.startTime - firstSessionEntry.startTime < 5000
-            ) {
-              sessionValue += entry.value;
-              sessionEntries.push(entry);
-            } else {
-              sessionValue = entry.value;
-              sessionEntries = [entry];
-            }
-          }
-        });
+        for (const entry of entries) {
+          layoutShiftManager._processEntry(entry);
+        }
 
         // If the current session value is larger than the current CLS value,
         // update CLS and the entries contributing to it.
-        if (sessionValue > metric.value) {
-          metric.value = sessionValue;
-          metric.entries = sessionEntries;
+        if (layoutShiftManager._sessionValue > metric.value) {
+          metric.value = layoutShiftManager._sessionValue;
+          metric.entries = layoutShiftManager._sessionEntries;
           report();
         }
       };
 
       const po = observe('layout-shift', handleEntries);
       if (po) {
-        report = bindReporter(onReport, metric, CLSThresholds, opts.reportAllChanges);
+        report = bindReporter(onReport, metric, CLSThresholds, opts!.reportAllChanges);
 
-        onHidden(() => {
-          handleEntries(po.takeRecords() as CLSMetric['entries']);
-          report(true);
+        WINDOW.document?.addEventListener('visibilitychange', () => {
+          if (WINDOW.document?.visibilityState === 'hidden') {
+            handleEntries(po.takeRecords() as CLSMetric['entries']);
+            report(true);
+          }
         });
 
         // Queue a task to report (if nothing else triggers a report first).
         // This allows CLS to be reported as soon as FCP fires when
         // `reportAllChanges` is true.
-        setTimeout(report, 0);
+        WINDOW?.setTimeout?.(report);
       }
     }),
   );

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

@@ -12,6 +12,10 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
+ *
+ * // Sentry: web-vitals removed FID reporting from v5. We're keeping it around
+ * for the time being.
+ * // TODO(v10): Remove FID reporting!
  */
 
 import { bindReporter } from './lib/bindReporter';

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

@@ -17,28 +17,34 @@
 import { WINDOW } from '../../types';
 import { bindReporter } from './lib/bindReporter';
 import { initMetric } from './lib/initMetric';
-import { DEFAULT_DURATION_THRESHOLD, estimateP98LongestInteraction, processInteractionEntry } from './lib/interactions';
+import { initUnique } from './lib/initUnique';
+import { InteractionManager } from './lib/InteractionManager';
 import { observe } from './lib/observe';
-import { onHidden } from './lib/onHidden';
 import { initInteractionCountPolyfill } from './lib/polyfills/interactionCountPolyfill';
 import { whenActivated } from './lib/whenActivated';
-import { whenIdle } from './lib/whenIdle';
-import type { INPMetric, MetricRatingThresholds, ReportOpts } from './types';
+import { whenIdleOrHidden } from './lib/whenIdleOrHidden';
+import type { INPMetric, INPReportOpts, MetricRatingThresholds } from './types';
 
 /** Thresholds for INP. See https://web.dev/articles/inp#what_is_a_good_inp_score */
 export const INPThresholds: MetricRatingThresholds = [200, 500];
 
+// The default `durationThreshold` used across this library for observing
+// `event` entries via PerformanceObserver.
+const DEFAULT_DURATION_THRESHOLD = 40;
+
 /**
  * Calculates the [INP](https://web.dev/articles/inp) value for the current
  * page and calls the `callback` function once the value is ready, along with
  * the `event` performance entries reported for that interaction. The reported
  * value is a `DOMHighResTimeStamp`.
  *
- * A custom `durationThreshold` configuration option can optionally be passed to
- * control what `event-timing` entries are considered for INP reporting. The
- * default threshold is `40`, which means INP scores of less than 40 are
- * reported as 0. Note that this will not affect your 75th percentile INP value
- * unless that value is also less than 40 (well below the recommended
+ * A custom `durationThreshold` configuration option can optionally be passed
+ * to control what `event-timing` entries are considered for INP reporting. The
+ * default threshold is `40`, which means INP scores of less than 40 will not
+ * be reported. To avoid reporting no interactions in these cases, the library
+ * will fall back to the input delay of the first interaction. Note that this
+ * will not affect your 75th percentile INP value unless that value is also
+ * less than 40 (well below the recommended
  * [good](https://web.dev/articles/inp#what_is_a_good_inp_score) threshold).
  *
  * If the `reportAllChanges` configuration option is set to `true`, the
@@ -55,9 +61,9 @@ export const INPThresholds: MetricRatingThresholds = [200, 500];
  * hidden. As a result, the `callback` function might be called multiple times
  * during the same page load._
  */
-export const onINP = (onReport: (metric: INPMetric) => void, opts: ReportOpts = {}) => {
+export const onINP = (onReport: (metric: INPMetric) => void, opts: INPReportOpts = {}) => {
   // Return if the browser doesn't support all APIs needed to measure INP.
-  if (!('PerformanceEventTiming' in WINDOW && 'interactionId' in PerformanceEventTiming.prototype)) {
+  if (!(globalThis.PerformanceEventTiming && 'interactionId' in PerformanceEventTiming.prototype)) {
     return;
   }
 
@@ -69,20 +75,24 @@ export const onINP = (onReport: (metric: INPMetric) => void, opts: ReportOpts =
     // eslint-disable-next-line prefer-const
     let report: ReturnType<typeof bindReporter>;
 
+    const interactionManager = initUnique(opts, InteractionManager);
+
     const handleEntries = (entries: INPMetric['entries']) => {
       // Queue the `handleEntries()` callback in the next idle task.
       // This is needed to increase the chances that all event entries that
       // occurred between the user interaction and the next paint
       // have been dispatched. Note: there is currently an experiment
       // running in Chrome (EventTimingKeypressAndCompositionInteractionId)
       // 123+ that if rolled out fully may make this no longer necessary.
-      whenIdle(() => {
-        entries.forEach(processInteractionEntry);
+      whenIdleOrHidden(() => {
+        for (const entry of entries) {
+          interactionManager._processEntry(entry);
+        }
 
-        const inp = estimateP98LongestInteraction();
+        const inp = interactionManager._estimateP98LongestInteraction();
 
-        if (inp && inp.latency !== metric.value) {
-          metric.value = inp.latency;
+        if (inp && inp._latency !== metric.value) {
+          metric.value = inp._latency;
           metric.entries = inp.entries;
           report();
         }
@@ -96,7 +106,7 @@ export const onINP = (onReport: (metric: INPMetric) => void, opts: ReportOpts =
       // and performance. Running this callback for any interaction that spans
       // just one or two frames is likely not worth the insight that could be
       // gained.
-      durationThreshold: opts.durationThreshold != null ? opts.durationThreshold : DEFAULT_DURATION_THRESHOLD,
+      durationThreshold: opts.durationThreshold ?? DEFAULT_DURATION_THRESHOLD,
     });
 
     report = bindReporter(onReport, metric, INPThresholds, opts.reportAllChanges);
@@ -106,9 +116,11 @@ export const onINP = (onReport: (metric: INPMetric) => void, opts: ReportOpts =
       // where the first interaction is less than the `durationThreshold`.
       po.observe({ type: 'first-input', buffered: true });
 
-      onHidden(() => {
-        handleEntries(po.takeRecords() as INPMetric['entries']);
-        report(true);
+      WINDOW.document?.addEventListener('visibilitychange', () => {
+        if (WINDOW.document?.visibilityState === 'hidden') {
+          handleEntries(po.takeRecords() as INPMetric['entries']);
+          report(true);
+        }
       });
     }
   });

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

@@ -19,18 +19,17 @@ import { bindReporter } from './lib/bindReporter';
 import { getActivationStart } from './lib/getActivationStart';
 import { getVisibilityWatcher } from './lib/getVisibilityWatcher';
 import { initMetric } from './lib/initMetric';
+import { initUnique } from './lib/initUnique';
+import { LCPEntryManager } from './lib/LCPEntryManager';
 import { observe } from './lib/observe';
-import { onHidden } from './lib/onHidden';
 import { runOnce } from './lib/runOnce';
 import { whenActivated } from './lib/whenActivated';
-import { whenIdle } from './lib/whenIdle';
+import { whenIdleOrHidden } from './lib/whenIdleOrHidden';
 import type { LCPMetric, 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];
 
-const reportedMetricIDs: Record<string, boolean> = {};
-
 /**
  * Calculates the [LCP](https://web.dev/articles/lcp) value for the current page and
  * calls the `callback` function once the value is ready (along with the
@@ -48,60 +47,62 @@ export const onLCP = (onReport: (metric: LCPMetric) => void, opts: ReportOpts =
     const metric = initMetric('LCP');
     let report: ReturnType<typeof bindReporter>;
 
+    const lcpEntryManager = initUnique(opts, LCPEntryManager);
+
     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) {
+      if (!opts!.reportAllChanges) {
         // eslint-disable-next-line no-param-reassign
         entries = entries.slice(-1);
       }
 
-      entries.forEach(entry => {
+      for (const entry of entries) {
+        lcpEntryManager._processEntry(entry);
+
         // Only report if the page wasn't hidden prior to LCP.
         if (entry.startTime < visibilityWatcher.firstHiddenTime) {
           // 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 pre-rendered. But in cases
+          // 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.entries = [entry];
           report();
         }
-      });
+      }
     };
 
     const po = observe('largest-contentful-paint', handleEntries);
 
     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(() => {
-        if (!reportedMetricIDs[metric.id]) {
-          handleEntries(po.takeRecords() as LCPMetric['entries']);
-          po.disconnect();
-          reportedMetricIDs[metric.id] = true;
-          report(true);
-        }
+        handleEntries(po.takeRecords() as LCPMetric['entries']);
+        po.disconnect();
+        report(true);
       });
 
-      // Stop listening after input. Note: while scrolling is an input that
-      // stops LCP observation, it's unreliable since it can be programmatically
-      // generated. See: https://github.com/GoogleChrome/web-vitals/issues/75
-      ['keydown', 'click'].forEach(type => {
-        // Wrap in a setTimeout so the callback is run in a separate task
-        // to avoid extending the keyboard/click handler to reduce INP impact
+      // Stop listening after input or visibilitychange.
+      // Note: while scrolling is an input that stops LCP observation, it's
+      // unreliable since it can be programmatically generated.
+      // See: https://github.com/GoogleChrome/web-vitals/issues/75
+      for (const type of ['keydown', 'click', 'visibilitychange']) {
+        // 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
         if (WINDOW.document) {
-          addEventListener(type, () => whenIdle(stopListening as () => void), {
-            once: true,
+          addEventListener(type, () => whenIdleOrHidden(stopListening), {
             capture: true,
+            once: true,
           });
         }
-      });
-
-      onHidden(stopListening);
+      }
     }
   });
 };