feat(browser)!: Remove FID web vital collection

Author: Lms24

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,7 @@ sentryTest(
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
         expectedCLSPerformanceSpan,
-        expectedFIDPerformanceSpan,
+        expectedFPPerformanceSpan,
         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 FCP is not recorded we should not record the cls value
     // according to the new definition of CLS.
     // TODO: Check if the first condition is still necessary: `onCLS` already only fires once `onFCP` was called.

packages/browser-utils/src/index.ts

@@ -182,5 +182,4 @@ export function registerInpInteractionListener(): void {
   };
 
   addPerformanceInstrumentationHandler('event', handleEntries);
-  addPerformanceInstrumentationHandler('first-input', handleEntries);
 }

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

@@ -1,22 +1,14 @@
 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';
 import { onTTFB } from './web-vitals/onTTFB';
 
-type InstrumentHandlerTypePerformanceObserver =
-  | 'longtask'
-  | 'event'
-  | 'navigation'
-  | 'paint'
-  | 'resource'
-  | 'first-input'
-  | 'element';
+type InstrumentHandlerTypePerformanceObserver = 'longtask' | 'event' | 'navigation' | 'paint' | 'resource' | 'element';
 
-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 +43,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 +103,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 +136,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 +219,6 @@ function instrumentCls(): StopListening {
   );
 }
 
-function instrumentFid(): void {
-  return onFID(metric => {
-    triggerHandlers('fid', {
-      metric,
-    });
-    _previousFid = metric;
-  });
-}
-
 function instrumentLcp(): StopListening {
   return onLCP(
     metric => {