feat(browser)!: Remove FID web vital collection (#17076)

This PR removes the FID web vital collection logic from the browser SDK.
This is a behaviour breaking change and should not be backported to
`v9`.

For reasons see #16560 but the TLDR is that FID has long been deprecated
and replaced by INP.

Added a note to the changelog with possible implications on the product.
Also thought of a minor edge case where the removal could have an effect
on SDK code: If a filtering decision in `beforeSend` depends on the
presence of the FID measurement. A very niche case IMHO but probably
good to mention anyway.

closes #16560

Author: Lms24

MIGRATION.md

@@ -70,3 +70,20 @@ Additionally, we hold ourselves accountable to any security issues, meaning that
 
 Note, that it is decided on a case-per-case basis, what gets backported or not.
 If you need a fix or feature in a previous version of the SDK, please reach out via a GitHub Issue.
+
+## 3. Behaviour Changes
+
+### Removal of First Input Delay (FID) Web Vital Reporting
+
+Affected SDKs: All SDKs running in browser applications (`@sentry/browser`, `@sentry/react`, `@sentry/nextjs`, etc.)
+
+In v10, the SDK stopped reporting the First Input Delay (FID) web vital.
+This was done because FID has been replaced by Interaction to Next Paint (INP) and is therefore no longer relevant for assessing and tracking a website's performance.
+For reference, FID has long been deprecated by Google's official `web-vitals` library and was eventually removed in version `5.0.0`.
+Sentry now follows Google's lead by also removing it.
+
+The removal entails **no breaking API changes**. However, in rare cases, you might need to adjust some of your Sentry SDK and product setup:
+
+- Remove any logic in `beforeSend` or other filtering/event processing logic that depends on FID or replace it with INP logic.
+- If you set up Sentry Alerts that depend on FID, be aware that these could trigger once you upgrade the SDK, due to a lack of new values.
+  To replace them, adjust your alerts (or dashbaords) to use INP.

dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts

@@ -4,7 +4,6 @@ import {
   expectedClickBreadcrumb,
   expectedCLSPerformanceSpan,
   expectedFCPPerformanceSpan,
-  expectedFIDPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
   expectedMemoryPerformanceSpan,
@@ -56,7 +55,6 @@ sentryTest(
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
         expectedCLSPerformanceSpan,
-        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan, // two memory spans - once per flush

dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts

@@ -4,7 +4,6 @@ import {
   expectedClickBreadcrumb,
   expectedCLSPerformanceSpan,
   expectedFCPPerformanceSpan,
-  expectedFIDPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
   expectedMemoryPerformanceSpan,
@@ -77,7 +76,6 @@ sentryTest(
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
         expectedCLSPerformanceSpan,
-        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan, // two memory spans - once per flush
@@ -117,7 +115,6 @@ sentryTest(
         expectedReloadPerformanceSpan,
         expectedLCPPerformanceSpan,
         expectedCLSPerformanceSpan,
-        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,
@@ -188,7 +185,6 @@ sentryTest(
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
         expectedCLSPerformanceSpan,
-        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,
@@ -326,7 +322,6 @@ sentryTest(
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
         expectedCLSPerformanceSpan,
-        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-fid/template.html

@@ -148,19 +148,6 @@ export const expectedCLSPerformanceSpan = {
   },
 };
 
-export const expectedFIDPerformanceSpan = {
-  op: 'web-vital',
-  description: 'first-input-delay',
-  startTimestamp: expect.any(Number),
-  endTimestamp: expect.any(Number),
-  data: {
-    value: expect.any(Number),
-    rating: expect.any(String),
-    size: expect.any(Number),
-    nodeIds: expect.any(Array),
-  },
-};
-
 export const expectedINPPerformanceSpan = {
   op: 'web-vital',
   description: 'interaction-to-next-paint',

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

@@ -245,25 +245,6 @@ export const ReplayRecordingData = [
       },
     },
   },
-  {
-    type: 5,
-    timestamp: expect.any(Number),
-    data: {
-      tag: 'performanceSpan',
-      payload: {
-        op: 'web-vital',
-        description: 'first-input-delay',
-        startTimestamp: expect.any(Number),
-        endTimestamp: expect.any(Number),
-        data: {
-          value: expect.any(Number),
-          size: expect.any(Number),
-          rating: expect.any(String),
-          nodeIds: [10],
-        },
-      },
-    },
-  },
   {
     type: 5,
     timestamp: expect.any(Number),

dev-packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -1,7 +1,6 @@
 export {
   addPerformanceInstrumentationHandler,
   addClsInstrumentationHandler,
-  addFidInstrumentationHandler,
   addTtfbInstrumentationHandler,
   addLcpInstrumentationHandler,
   addInpInstrumentationHandler,

dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts

@@ -17,7 +17,6 @@ import { trackClsAsStandaloneSpan } from './cls';
 import {
   type PerformanceLongAnimationFrameTiming,
   addClsInstrumentationHandler,
-  addFidInstrumentationHandler,
   addLcpInstrumentationHandler,
   addPerformanceInstrumentationHandler,
   addTtfbInstrumentationHandler,
@@ -103,13 +102,11 @@ export function startTrackingWebVitals({
     if (performance.mark) {
       WINDOW.performance.mark('sentry-tracing-init');
     }
-    const fidCleanupCallback = _trackFID();
     const lcpCleanupCallback = recordLcpStandaloneSpans ? trackLcpAsStandaloneSpan(client) : _trackLCP();
     const ttfbCleanupCallback = _trackTtfb();
     const clsCleanupCallback = recordClsStandaloneSpans ? trackClsAsStandaloneSpan(client) : _trackCLS();
 
     return (): void => {
-      fidCleanupCallback();
       lcpCleanupCallback?.();
       ttfbCleanupCallback();
       clsCleanupCallback?.();
@@ -277,21 +274,6 @@ function _trackLCP(): () => void {
   }, true);
 }
 
-/** Starts tracking the First Input Delay on the current page. */
-function _trackFID(): () => void {
-  return addFidInstrumentationHandler(({ metric }) => {
-    const entry = metric.entries[metric.entries.length - 1];
-    if (!entry) {
-      return;
-    }
-
-    const timeOrigin = msToSec(browserPerformanceTimeOrigin() as number);
-    const startTime = msToSec(entry.startTime);
-    _measurements['fid'] = { value: metric.value, unit: 'millisecond' };
-    _measurements['mark.fid'] = { value: timeOrigin + startTime, unit: 'second' };
-  });
-}
-
 function _trackTtfb(): () => void {
   return addTtfbInstrumentationHandler(({ metric }) => {
     const entry = metric.entries[metric.entries.length - 1];
@@ -415,21 +397,6 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
   if (op === 'pageload') {
     _addTtfbRequestTimeToMeasurements(_measurements);
 
-    const fidMark = _measurements['mark.fid'];
-    if (fidMark && _measurements['fid']) {
-      // create span for FID
-      startAndEndSpan(span, fidMark.value, fidMark.value + msToSec(_measurements['fid'].value), {
-        name: 'first input delay',
-        op: 'ui.action',
-        attributes: {
-          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
-        },
-      });
-
-      // Delete mark.fid as we don't want it to be part of final payload
-      delete _measurements['mark.fid'];
-    }
-
     // If CLS standalone spans are enabled, don't record CLS as a measurement
     if (!options.recordClsOnPageloadSpan) {
       delete _measurements.cls;

packages/browser-utils/src/index.ts

@@ -1,7 +1,6 @@
 import { debug, getFunctionName } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 import { onCLS } from './web-vitals/getCLS';
-import { onFID } from './web-vitals/getFID';
 import { onINP } from './web-vitals/getINP';
 import { onLCP } from './web-vitals/getLCP';
 import { observe } from './web-vitals/lib/observe';
@@ -13,10 +12,11 @@ type InstrumentHandlerTypePerformanceObserver =
   | 'navigation'
   | 'paint'
   | 'resource'
-  | 'first-input'
-  | 'element';
+  | 'element'
+  // fist-input is still needed for INP
+  | 'first-input';
 
-type InstrumentHandlerTypeMetric = 'cls' | 'lcp' | 'fid' | 'ttfb' | 'inp';
+type InstrumentHandlerTypeMetric = 'cls' | 'lcp' | 'ttfb' | 'inp';
 
 // We provide this here manually instead of relying on a global, as this is not available in non-browser environements
 // And we do not want to expose such types
@@ -51,7 +51,7 @@ interface Metric {
   /**
    * The name of the metric (in acronym form).
    */
-  name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB';
+  name: 'CLS' | 'FCP' | 'INP' | 'LCP' | 'TTFB';
 
   /**
    * The current value of the metric.
@@ -111,7 +111,6 @@ const handlers: { [key in InstrumentHandlerType]?: InstrumentHandlerCallback[] }
 const instrumented: { [key in InstrumentHandlerType]?: boolean } = {};
 
 let _previousCls: Metric | undefined;
-let _previousFid: Metric | undefined;
 let _previousLcp: Metric | undefined;
 let _previousTtfb: Metric | undefined;
 let _previousInp: Metric | undefined;
@@ -145,15 +144,7 @@ export function addLcpInstrumentationHandler(
 }
 
 /**
- * Add a callback that will be triggered when a FID metric is available.
- * Returns a cleanup callback which can be called to remove the instrumentation handler.
- */
-export function addFidInstrumentationHandler(callback: (data: { metric: Metric }) => void): CleanupHandlerCallback {
-  return addMetricObserver('fid', callback, instrumentFid, _previousFid);
-}
-
-/**
- * Add a callback that will be triggered when a FID metric is available.
+ * Add a callback that will be triggered when a TTFD metric is available.
  */
 export function addTtfbInstrumentationHandler(callback: (data: { metric: Metric }) => void): CleanupHandlerCallback {
   return addMetricObserver('ttfb', callback, instrumentTtfb, _previousTtfb);
@@ -236,15 +227,6 @@ function instrumentCls(): StopListening {
   );
 }
 
-function instrumentFid(): void {
-  return onFID(metric => {
-    triggerHandlers('fid', {
-      metric,
-    });
-    _previousFid = metric;
-  });
-}
-
 function instrumentLcp(): StopListening {
   return onLCP(
     metric => {