feat: Remove FID (#1319)

Author: ptang-nr

src/common/vitals/constants.js

@@ -5,9 +5,13 @@
 export const VITAL_NAMES = {
   FIRST_PAINT: 'fp',
   FIRST_CONTENTFUL_PAINT: 'fcp',
-  FIRST_INPUT_DELAY: 'fi',
+  FIRST_INTERACTION: 'fi',
   LARGEST_CONTENTFUL_PAINT: 'lcp',
   CUMULATIVE_LAYOUT_SHIFT: 'cls',
   INTERACTION_TO_NEXT_PAINT: 'inp',
   TIME_TO_FIRST_BYTE: 'ttfb'
 }
+
+export const PERFORMANCE_ENTRY_TYPE = {
+  FIRST_INPUT: 'first-input'
+}

src/common/vitals/first-input-delay.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { VitalMetric } from './vital-metric'
+import { VITAL_NAMES, PERFORMANCE_ENTRY_TYPE } from './constants'
+import { initiallyHidden, isBrowserScope } from '../constants/runtime'
+
+// Note: First Interaction is a legacy NR timing event, not an actual CWV metric
+export const firstInteraction = new VitalMetric(VITAL_NAMES.FIRST_INTERACTION)
+
+if (isBrowserScope) {
+  try {
+    let observer
+    // preserve the original behavior where FID is not reported if the page is hidden before the first interaction
+    if (PerformanceObserver.supportedEntryTypes.includes(PERFORMANCE_ENTRY_TYPE.FIRST_INPUT) && !initiallyHidden) {
+      observer = new PerformanceObserver((list) => {
+        const firstInput = list.getEntries()[0]
+
+        const attrs = {
+          type: firstInput.name,
+          eventTarget: firstInput.target
+        }
+
+        observer.disconnect()
+        if (!firstInteraction.isValid) {
+          firstInteraction.update({
+            value: firstInput.startTime,
+            attrs
+          })
+        }
+      })
+      observer.observe({ type: PERFORMANCE_ENTRY_TYPE.FIRST_INPUT, buffered: true })
+    }
+  } catch (e) {
+    // Do nothing.
+  }
+}

src/common/vitals/first-interaction.js

@@ -11,8 +11,8 @@ import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { cumulativeLayoutShift } from '../../../common/vitals/cumulative-layout-shift'
 import { firstContentfulPaint } from '../../../common/vitals/first-contentful-paint'
-import { firstInputDelay } from '../../../common/vitals/first-input-delay'
 import { firstPaint } from '../../../common/vitals/first-paint'
+import { firstInteraction } from '../../../common/vitals/first-interaction'
 import { interactionToNextPaint } from '../../../common/vitals/interaction-to-next-paint'
 import { largestContentfulPaint } from '../../../common/vitals/largest-contentful-paint'
 import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte'
@@ -37,8 +37,8 @@ export class Aggregate extends AggregateBase {
     this.waitForFlags(([])).then(() => {
       firstPaint.subscribe(this.#handleVitalMetric)
       firstContentfulPaint.subscribe(this.#handleVitalMetric)
-      firstInputDelay.subscribe(this.#handleVitalMetric)
       largestContentfulPaint.subscribe(this.#handleVitalMetric)
+      firstInteraction.subscribe(this.#handleVitalMetric)
       interactionToNextPaint.subscribe(this.#handleVitalMetric)
       timeToFirstByte.subscribe(({ attrs }) => {
         this.addTiming('load', Math.round(attrs.navigationEntry.loadEventEnd))

src/features/page_view_timing/aggregate/index.js

@@ -136,11 +136,6 @@ export class TraceStorage {
 
   processPVT (name, value, attrs) {
     this.storeTiming({ [name]: value })
-    if (hasFID(name, attrs)) this.storeEvent({ type: 'fid', target: 'document' }, 'document', value, value + attrs.fid)
-
-    function hasFID (name, attrs) {
-      return name === 'fi' && !!attrs && typeof attrs.fid === 'number'
-    }
   }
 
   storeTiming (timingEntry, isAbsoluteTimestamp = false) {

src/features/session_trace/aggregate/trace/storage.js

@@ -5,27 +5,18 @@ import { VITAL_NAMES } from '../../../src/common/vitals/constants'
 
 // Note: these callbacks fire right away unlike the real web-vitals API which are async-on-trigger
 jest.mock('web-vitals/attribution', () => ({
-  // eslint-disable-next-line
   onCLS: jest.fn((cb) => cb({
     value: 0.1119,
     attribution: {}
   })),
-  // eslint-disable-next-line
   onFCP: jest.fn((cb) => cb({
     value: 1,
     attribution: {}
   })),
-  // eslint-disable-next-line
-  onFID: jest.fn(cb => cb({
-    value: 1234,
-    attribution: { eventTime: 5, eventType: 'pointerdown' }
-  })),
-  // eslint-disable-next-line
   onINP: jest.fn((cb) => cb({
     value: 8,
     attribution: {}
   })),
-  // eslint-disable-next-line
   onLCP: jest.fn((cb) => cb({
     value: 1,
     attribution: {}
@@ -90,13 +81,6 @@ test('LCP event with CLS attribute', () => {
   }
 })
 
-test('sends expected FI attributes when available', () => {
-  expect(timingsAggregate.events.get()[0].data.length).toBeGreaterThanOrEqual(1)
-  const fiPayload = timingsAggregate.events.get()[0].data.find(x => x.name === 'fi')
-  expect(fiPayload.value).toEqual(5)
-  expect(fiPayload.attrs).toEqual(expect.objectContaining({ type: 'pointerdown', fid: 1234, cls: 0.1119, ...expectedNetworkInfo }))
-})
-
 test('sends CLS node with right val on vis change', () => {
   let clsNode = timingsAggregate.events.get()[0].data.find(tn => tn.name === VITAL_NAMES.CUMULATIVE_LAYOUT_SHIFT)
   expect(clsNode).toBeUndefined()

tests/components/page_view_timing/aggregate.test.js

@@ -2,27 +2,18 @@ import { VITAL_NAMES } from '../../../src/common/vitals/constants'
 
 // Note: these callbacks fire right away unlike the real web-vitals API which are async-on-trigger
 jest.mock('web-vitals/attribution', () => ({
-  // eslint-disable-next-line
   onCLS: jest.fn((cb) => cb({
     value: 0.1119,
     attribution: {}
   })),
-  // eslint-disable-next-line
   onFCP: jest.fn((cb) => cb({
     value: 1,
     attribution: {}
   })),
-  // eslint-disable-next-line
-  onFID: jest.fn(cb => cb({
-    value: 1234,
-    attribution: { eventTime: 5, eventType: 'pointerdown' }
-  })),
-  // eslint-disable-next-line
   onINP: jest.fn((cb) => cb({
     value: 8,
     attribution: {}
   })),
-  // eslint-disable-next-line
   onLCP: jest.fn((cb) => cb({
     value: 1,
     attribution: {}
@@ -92,13 +83,6 @@ describe('pvt aggregate tests', () => {
     }
   })
 
-  test('sends expected FI attributes when available', () => {
-    expect(pvtAgg.events.get()[0].data.length).toBeTruthy()
-    const fiPayload = pvtAgg.events.get()[0].data.find(x => x.name === 'fi')
-    expect(fiPayload.value).toEqual(5)
-    expect(fiPayload.attrs).toEqual(expect.objectContaining({ type: 'pointerdown', fid: 1234, cls: 0.1119, ...expectedNetworkInfo }))
-  })
-
   test('sends CLS node with right val on vis change', () => {
     let clsNode = pvtAgg.events.get()[0].data.find(tn => tn.name === VITAL_NAMES.CUMULATIVE_LAYOUT_SHIFT)
     expect(clsNode).toBeUndefined()

tests/components/page_view_timing/index.test.js

@@ -30,7 +30,7 @@ test('creates right nodes', async () => {
   document.dispatchEvent(new CustomEvent('DOMContentLoaded')) // simulate natural browser event
   window.dispatchEvent(new CustomEvent('load')) // load is actually ignored by Trace as it should be passed by the PVT feature, so it should not be in payload
   sessionTraceAggregate.events.storeXhrAgg('xhr', '[200,null,null]', { method: 'GET', status: 200 }, { rxSize: 770, duration: 99, cbTime: 0, time: 217 }) // fake ajax data
-  sessionTraceAggregate.events.processPVT('fi', 30, { fid: 8 }) // fake pvt data
+  sessionTraceAggregate.events.processPVT('fi', 30) // fake pvt data
 
   const payload = sessionTraceAggregate.makeHarvestPayload()[0].payload
   let res = payload.body
@@ -58,11 +58,6 @@ test('creates right nodes', async () => {
   expect(pvt.o).toEqual('document')
   expect(pvt.s).toEqual(pvt.e) // that FI has no duration
   expect(pvt.t).toEqual('timing')
-  pvt = res.filter(node => node.n === 'fid')[0]
-  expect(pvt.o).toEqual('document')
-  expect(pvt.s).toEqual(30) // that FID has a duration relative to FI'
-  expect(pvt.e).toEqual(30 + 8)
-  expect(pvt.t).toEqual('event')
 
   let unknown = res.filter(n => n.o === 'unknown')
   expect(unknown.length).toEqual(0) // no events with unknown origin

tests/components/session_trace/aggregate.test.js

@@ -1,7 +1,6 @@
-import { supportsCumulativeLayoutShift, supportsFirstInputDelay, supportsFirstPaint, supportsInteractionToNextPaint, supportsLargestContentfulPaint } from '../../../tools/browser-matcher/common-matchers.mjs'
+import { supportsCumulativeLayoutShift, supportsFirstPaint, supportsInteractionToNextPaint, supportsLargestContentfulPaint, supportsPerformanceEventTiming } from '../../../tools/browser-matcher/common-matchers.mjs'
 import { testTimingEventsRequest } from '../../../tools/testing-server/utils/expect-tests'
 
-const isClickInteractionType = type => type === 'pointerdown' || type === 'mousedown' || type === 'click'
 const loadersToTest = ['rum', 'spa']
 
 describe('pvt timings tests', () => {
@@ -69,7 +68,7 @@ describe('pvt timings tests', () => {
 
   describe('interaction related timings', () => {
     loadersToTest.forEach(loader => {
-      it(`FI, FID, INP & LCP for ${loader} agent`, async () => {
+      it(`FI, INP & LCP for ${loader} agent`, async () => {
         const start = Date.now()
         await browser.url(
           await browser.testHandle.assetURL('basic-click-tracking.html', { loader })
@@ -82,19 +81,17 @@ describe('pvt timings tests', () => {
             .then(async () => browser.url(await browser.testHandle.assetURL('/')))
         ])
 
-        if (browserMatch(supportsFirstInputDelay)) {
+        if (browserMatch(supportsPerformanceEventTiming)) {
+          // FID is replaced by subscribing to 'first-input'
           const fi = timingsHarvests.find(harvest => harvest.request.body.find(t => t.name === 'fi'))
             ?.request.body.find(timing => timing.name === 'fi')
           expect(fi.value).toBeGreaterThanOrEqual(0)
           expect(fi.value).toBeLessThan(Date.now() - start)
 
+          const isClickInteractionType = type => type === 'pointerdown' || type === 'mousedown' || type === 'click'
           const fiType = fi.attributes.find(attr => attr.key === 'type')
           expect(isClickInteractionType(fiType.value)).toEqual(true)
           expect(fiType.type).toEqual('stringAttribute')
-
-          const fid = fi.attributes.find(attr => attr.key === 'fid')
-          expect(fid.value).toBeGreaterThanOrEqual(0)
-          expect(fid.type).toEqual('doubleAttribute')
         }
 
         if (browserMatch(supportsLargestContentfulPaint)) {

tests/specs/pvt/timings.e2e.js

@@ -1,34 +1,43 @@
+import { PERFORMANCE_ENTRY_TYPE } from '../../../../src/common/vitals/constants'
+
 beforeEach(() => {
   jest.resetModules()
   jest.resetAllMocks()
   jest.clearAllMocks()
-})
 
-const fidAttribution = {
-  eventTarget: 'html>body',
-  eventType: 'pointerdown',
-  eventTime: 1,
-  loadState: 'loading'
-}
-let triggeronFIDCallback
-const getFreshFIDImport = async (codeToRun) => {
-  jest.doMock('web-vitals/attribution', () => ({
-    onFID: jest.fn(cb => { triggeronFIDCallback = cb; cb({ value: 100, attribution: fidAttribution }) })
+  const mockPerformanceObserver = jest.fn(cb => ({
+    // Note: this is an imperfect mock, as observer.disconnect() is not functional
+    observe: () => {
+      const callCb = () => {
+        cb({
+          getEntries: () => [{
+            name: PERFORMANCE_ENTRY_TYPE.FIRST_INPUT,
+            startTime: 1
+          }]
+        })
+        setTimeout(callCb, 250)
+      }
+      setTimeout(callCb, 250)
+    },
+    disconnect: jest.fn()
   }))
-  const { firstInputDelay } = await import('../../../../src/common/vitals/first-input-delay')
-  codeToRun(firstInputDelay)
+  global.PerformanceObserver = mockPerformanceObserver
+  global.PerformanceObserver.supportedEntryTypes = [PERFORMANCE_ENTRY_TYPE.FIRST_INPUT]
+})
+
+const getFreshImport = async (codeToRun) => {
+  const { firstInteraction } = await import('../../../../src/common/vitals/first-interaction')
+  codeToRun(firstInteraction)
 }
 
-describe('fid', () => {
-  test('reports fcp from web-vitals', (done) => {
-    getFreshFIDImport(metric => metric.subscribe(({ value, attrs }) => {
-      expect(value).toEqual(1)
-      expect(attrs.type).toEqual(fidAttribution.eventType)
-      expect(attrs.fid).toEqual(100)
-      expect(attrs.eventTarget).toEqual(fidAttribution.eventTarget)
-      expect(attrs.loadState).toEqual(fidAttribution.loadState)
-      done()
-    }))
+describe('fi (first interaction)', () => {
+  test('reports fi', (done) => {
+    getFreshImport(metric => {
+      metric.subscribe(({ value }) => {
+        expect(value).toEqual(1)
+        done()
+      })
+    })
   })
 
   test('Does NOT report values if initiallyHidden', (done) => {
@@ -38,7 +47,7 @@ describe('fid', () => {
       isBrowserScope: true
     }))
 
-    getFreshFIDImport(metric => {
+    getFreshImport(metric => {
       metric.subscribe(() => {
         console.log('should not have reported')
         expect(1).toEqual(2)
@@ -50,11 +59,12 @@ describe('fid', () => {
   test('does NOT report if not browser scoped', (done) => {
     jest.doMock('../../../../src/common/constants/runtime', () => ({
       __esModule: true,
+      initiallyHidden: false,
       isBrowserScope: false
     }))
 
-    getFreshFIDImport(metric => {
-      metric.subscribe(() => {
+    getFreshImport(metric => {
+      metric.subscribe(({ value, attrs }) => {
         console.log('should not have reported...')
         expect(1).toEqual(2)
       })
@@ -65,10 +75,11 @@ describe('fid', () => {
   test('multiple subs get same value', done => {
     jest.doMock('../../../../src/common/constants/runtime', () => ({
       __esModule: true,
+      initiallyHidden: false,
       isBrowserScope: true
     }))
     let witness = 0
-    getFreshFIDImport(metric => {
+    getFreshImport(metric => {
       metric.subscribe(({ value }) => {
         expect(value).toEqual(1)
         witness++
@@ -88,15 +99,14 @@ describe('fid', () => {
       isBrowserScope: true
     }))
     let triggered = 0
-    getFreshFIDImport(metric => {
-      metric.subscribe(({ value }) => {
-        triggered++
-        expect(value).toEqual(1)
-        expect(triggered).toEqual(1)
-      })
-      triggeronFIDCallback({ value: 'notequal1' })
+    getFreshImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
       expect(triggered).toEqual(1)
-      done()
-    })
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    }))
   })
 })