feat(browser): Update web-vitals to 5.0.2 (#16492)

Bump vendored `web-vitals` library. 
Important changes from the original library:

- For now until the next SDK major, we'll keep reporting FID.
`web-vitals` removed the already deprecated APIs for it in v5 but we
simply keep them from v4
- `web-vitals` further removed compatibility for older iOS Safari
versions. Unfortunately, [we still support Safari 14.4

](https://docs.sentry.io/platforms/javascript/troubleshooting/supported-browsers/)
which is the last version that doesn't yet fully support the
`visibilitychange` event. This requires us to keep the `onHidden` helper
around which also listens to `pagehide` events that this Safari version
supports. I adjusted our integration tests to keep one around that fails
if we remove this special handling in a future upgrade (also added some
context for future us).

I will follow up with at least one more PR to do some more refactorings
but I decided to keep them minimal in this PR to get better diffs for
reviewing:

- rename the `get*` files to `on*`, since this is how they're named now
in the official library

closes #16310

Author: Lms24

.size-limit.js

@@ -120,7 +120,7 @@ module.exports = [
     import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
     ignore: ['react/jsx-runtime'],
     gzip: true,
-    limit: '40.5 KB',
+    limit: '41 KB',
   },
   // Vue SDK (ESM)
   {
@@ -215,7 +215,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['$app/stores'],
     gzip: true,
-    limit: '39 KB',
+    limit: '40 KB',
   },
   // Node SDK (ESM)
   {

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-late/test.ts

@@ -4,6 +4,7 @@ import { sentryTest } from '../../../../utils/fixtures';
 import {
   getFirstSentryEnvelopeRequest,
   getMultipleSentryEnvelopeRequests,
+  hidePage,
   properFullEnvelopeRequestParser,
   shouldSkipTracingTest,
 } from '../../../../utils/helpers';
@@ -33,9 +34,7 @@ sentryTest('should capture an INP click event span after pageload', async ({ bro
   await page.waitForTimeout(500);
 
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    window.dispatchEvent(new Event('pagehide'));
-  });
+  await hidePage(page);
 
   // Get the INP span envelope
   const spanEnvelope = (await spanEnvelopePromise)[0];

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-parametrized-late/test.ts

@@ -4,6 +4,7 @@ import { sentryTest } from '../../../../utils/fixtures';
 import {
   getFirstSentryEnvelopeRequest,
   getMultipleSentryEnvelopeRequests,
+  hidePage,
   properFullEnvelopeRequestParser,
   shouldSkipTracingTest,
 } from '../../../../utils/helpers';
@@ -35,9 +36,7 @@ sentryTest(
     await page.waitForTimeout(500);
 
     // Page hide to trigger INP
-    await page.evaluate(() => {
-      window.dispatchEvent(new Event('pagehide'));
-    });
+    await hidePage(page);
 
     // Get the INP span envelope
     const spanEnvelope = (await spanEnvelopePromise)[0];

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-parametrized/test.ts

@@ -3,6 +3,7 @@ import type { SpanEnvelope } from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
 import {
   getMultipleSentryEnvelopeRequests,
+  hidePage,
   properFullEnvelopeRequestParser,
   shouldSkipTracingTest,
 } from '../../../../utils/helpers';
@@ -33,9 +34,7 @@ sentryTest(
     await page.waitForTimeout(500);
 
     // Page hide to trigger INP
-    await page.evaluate(() => {
-      window.dispatchEvent(new Event('pagehide'));
-    });
+    await hidePage(page);
 
     // Get the INP span envelope
     const spanEnvelope = (await spanEnvelopePromise)[0];

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp/init.js

@@ -14,6 +14,7 @@ Sentry.init({
     }),
   ],
   tracesSampleRate: 1,
+  debug: true,
 });
 
 const client = Sentry.getClient();

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp/test.ts

@@ -4,6 +4,7 @@ import { sentryTest } from '../../../../utils/fixtures';
 import {
   getFirstSentryEnvelopeRequest,
   getMultipleSentryEnvelopeRequests,
+  hidePage,
   properFullEnvelopeRequestParser,
   shouldSkipTracingTest,
 } from '../../../../utils/helpers';
@@ -32,9 +33,7 @@ sentryTest('should capture an INP click event span during pageload', async ({ br
   await page.waitForTimeout(500);
 
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    window.dispatchEvent(new Event('pagehide'));
-  });
+  await hidePage(page);
 
   // Get the INP span envelope
   const spanEnvelope = (await spanEnvelopePromise)[0];
@@ -118,6 +117,14 @@ sentryTest(
     });
 
     // Page hide to trigger INP
+
+    // Important: Purposefully not using hidePage() here to test the hidden state
+    // via the `pagehide` event. This is necessary because iOS Safari 14.4
+    // still doesn't fully emit the `visibilitychange` events but it's the lower
+    // bound for Safari on iOS that we support.
+    // If this test times out or fails, it's likely because we tried updating
+    // the web-vitals library which officially already dropped support for
+    // this iOS version
     await page.evaluate(() => {
       window.dispatchEvent(new Event('pagehide'));
     });

packages/browser-utils/src/metrics/cls.ts

@@ -58,6 +58,7 @@ export function trackClsAsStandaloneSpan(): void {
     standaloneClsEntry = entry;
   }, true);
 
+  // TODO: Figure out if we can switch to using whenIdleOrHidden instead of onHidden
   // use pagehide event from web-vitals
   onHidden(() => {
     _collectClsOnce();

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

@@ -2,10 +2,10 @@
 
 > A modular library for measuring the [Web Vitals](https://web.dev/vitals/) metrics on real users.
 
-This was vendored from: https://github.com/GoogleChrome/web-vitals: v3.5.2
+This was vendored from: https://github.com/GoogleChrome/web-vitals: v5.0.2
 
 The commit SHA used is:
-[3d2b3dc8576cc003618952fa39902fab764a53e2](https://github.com/GoogleChrome/web-vitals/tree/3d2b3dc8576cc003618952fa39902fab764a53e2)
+[463abbd425cda01ed65e0b5d18be9f559fe446cb](https://github.com/GoogleChrome/web-vitals/tree/463abbd425cda01ed65e0b5d18be9f559fe446cb)
 
 Current vendored web vitals are:
 
@@ -27,6 +27,12 @@ web-vitals only report once per pageload.
 
 ## CHANGELOG
 
+https://github.com/getsentry/sentry-javascript/pull/16492
+
+- Bumped from Web Vitals 4.2.5 to 5.0.2
+  - Mainly fixes some INP, LCP and FCP edge cases
+  - Original library removed FID; we still keep it around for now
+
 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';
@@ -60,6 +64,7 @@ export const onFID = (onReport: (metric: FIDMetric) => void, opts: ReportOpts =
     report = bindReporter(onReport, metric, FIDThresholds, opts.reportAllChanges);
 
     if (po) {
+      // sentry: TODO: Figure out if we can use new whinIdleOrHidden insteard of onHidden
       onHidden(
         runOnce(() => {
           handleEntries(po.takeRecords() as FIDMetric['entries']);