@newrelic/browser-agent 1.239.1 → 1.240.0

package/dist/types/features/session_trace/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_trace/aggregate/index.js"],"names":[],"mappings":"AAiCA;IACE,2BAAiC;IAGjC,iEAyHC;IAvHC,kBAA+C;IAK/C,sBAAiD;IACjD,yBAAc;IACd,sBAAe;IACf,8BAAkB;IAClB,iCAAqB;IACrB,wBAA0G;IAC1G,wBAA4G;IAC5G;;4EAEwE;IACxE,kCAAyB;IAGzB,0CAAsC;IAuGxC,sEAcC;IA6CD,oDAOC;IAGD,oCAwBC;IAGD,uEAkBC;IAED,oDAKC;IAED,wBAwBC;IAED,uCAuBC;IAGD,gDASC;IAID,qCAkBC;IAGD,qEAUC;IAGD,mEAUC;IAGD,yBAeC;IAED;;;;OAIG;IACH,2BAHW,MAAM,GACJ,MAAM,CAsBlB;IAGD;;;;;;;;;;MAwBC;IAED,mEA6BC;;CACF;8BAne6B,4BAA4B;6BAH7B,2BAA2B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/session_trace/aggregate/index.js"],"names":[],"mappings":"AAiCA;IACE,2BAAiC;IAGjC,iEAyHC;IAvHC,kBAA+C;IAK/C,sBAAiD;IACjD,yBAAc;IACd,sBAAe;IACf,8BAAkB;IAClB,iCAAqB;IACrB,wBAA0G;IAC1G,wBAA4G;IAC5G;;4EAEwE;IACxE,kCAAyB;IAGzB,0CAAsC;IAuGxC,sEAcC;IA6CD,oDAOC;IAGD,oCAwBC;IAGD,uEAkBC;IAED,oDAKC;IAED,wBAwBC;IAED,uCAuBC;IAGD,gDASC;IAID,qCAkBC;IAGD,qEAUC;IAGD,mEAUC;IAGD,yBAeC;IAED;;;;OAIG;IACH,2BAHW,MAAM,GACJ,MAAM,CAsBlB;IAGD;;;;;;YA2BM;0GAC8F;;YAE9F;0FAC8E;;YAE9E,4IAA4I;;;;;;MAKjJ;IAED,mEA6BC;;CACF;8BAjf6B,4BAA4B;6BAH7B,2BAA2B"}

package/dist/types/features/spa/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/spa/aggregate/index.js"],"names":[],"mappings":"AA0BA;IACE,2BAAiC;IACjC,mDA8rBC;IA3rBC;;;;;;;;;;;;;;;;MAgBC;IAED,uBAAsC;CA0qBzC;8BAvsB6B,4BAA4B;2BAJ/B,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/spa/aggregate/index.js"],"names":[],"mappings":"AA2BA;IACE,2BAAiC;IACjC,mDA8rBC;IA3rBC;;;;;;;;;;;;;;;;MAgBC;IAED,uBAAsC;CA0qBzC;8BAzsB6B,4BAA4B;2BAJ/B,cAAc"}

package/dist/types/loaders/agent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent.d.ts","sourceRoot":"","sources":["../../../src/loaders/agent.js"],"names":[],"mappings":"AAiBA;;GAEG;AAEH;;;GAGG;AACH;IACE,oDAuBC;IAbC,oCAAsC;IACtC,yCAAiF;IACjF,yBAAkB;IAElB,sCAAsD;IAWxD;;;;;MAOC;IAED,yBAgCC;IAID;;;;;;;;;OASG;IACH,6BAPW;QAAC,MAAM,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAC,QASrF;IAED;;;;OAIG;IACH,0BAFW,MAAM,QAIhB;IAED;;;;OAIG;IACH,eAFa,mBAAmB,CAI/B;CACF;kCA7GY,OAAO,yBAAyB,EAAE,mBAAmB;0BAjBxC,cAAc;2BAQb,gCAAgC"}
+{"version":3,"file":"agent.d.ts","sourceRoot":"","sources":["../../../src/loaders/agent.js"],"names":[],"mappings":"AAmBA;;GAEG;AAEH;;;GAGG;AACH;IACE,oDAuBC;IAbC,oCAAsC;IACtC,yCAAiF;IACjF,yBAAkB;IAElB,sCAAsD;IAWxD;;;;;MAOC;IAED,yBAgCC;IAID;;;;;;;;;OASG;IACH,6BAPW;QAAC,MAAM,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAC,QASrF;IAED;;;;OAIG;IACH,0BAFW,MAAM,QAIhB;IAED;;;;OAIG;IACH,eAFa,mBAAmB,CAI/B;CACF;kCA7GY,OAAO,yBAAyB,EAAE,mBAAmB;0BAjBxC,cAAc;2BAQb,gCAAgC"}

package/dist/types/loaders/api/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../src/loaders/api/api.js"],"names":[],"mappings":"AAkBA,2CAoBC;AAED;;;;;IA0DE;;;;OAIG;qBAFQ,MAAM;IAWjB;;;;OAIG;iCAFQ,MAAM,GAAC,IAAI;;;;EAwFvB;AAzLD,0CAA0C"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../src/loaders/api/api.js"],"names":[],"mappings":"AAkBA,2CAoBC;AAED;;;;;IA0DE;;;;OAIG;qBAFQ,MAAM;IAWjB;;;;OAIG;iCAFQ,MAAM,GAAC,IAAI;;;;EA0FvB;AA3LD,0CAA0C"}

package/dist/types/loaders/api/apiAsync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apiAsync.d.ts","sourceRoot":"","sources":["../../../../src/loaders/api/apiAsync.js"],"names":[],"mappings":"AAUA,mDAiFC"}
+{"version":3,"file":"apiAsync.d.ts","sourceRoot":"","sources":["../../../../src/loaders/api/apiAsync.js"],"names":[],"mappings":"AAUA,mDAkFC"}

package/dist/types/loaders/configure/configure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../../../../src/loaders/configure/configure.js"],"names":[],"mappings":"AAMA;;;;;;;;;;EAwCC"}
+{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../../../../src/loaders/configure/configure.js"],"names":[],"mappings":"AASA;;;;;;;;;;EA6CC"}

package/dist/types/loaders/configure/public-path.d.ts

@@ -0,0 +1,2 @@
+export function redefinePublicPath(url: any): void;
+//# sourceMappingURL=public-path.d.ts.map

package/dist/types/loaders/configure/public-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-path.d.ts","sourceRoot":"","sources":["../../../../src/loaders/configure/public-path.js"],"names":[],"mappings":"AAEO,mDAGN"}

package/dist/types/loaders/configure/public-path.npm.d.ts

@@ -0,0 +1,2 @@
+export function redefinePublicPath(): void;
+//# sourceMappingURL=public-path.npm.d.ts.map

package/dist/types/loaders/configure/public-path.npm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-path.npm.d.ts","sourceRoot":"","sources":["../../../../src/loaders/configure/public-path.npm.js"],"names":[],"mappings":"AACO,2CAEN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "1.239.1",
+  "version": "1.240.0",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "New Relic Browser Agent",

package/src/cdn/pro.js

@@ -11,6 +11,7 @@ import { Instrument as InstrumentMetrics } from '../features/metrics/instrument'
 import { Instrument as InstrumentErrors } from '../features/jserrors/instrument'
 import { Instrument as InstrumentXhr } from '../features/ajax/instrument'
 import { Instrument as InstrumentSessionTrace } from '../features/session_trace/instrument'
+import { Instrument as InstrumentSessionReplay } from '../features/session_replay/instrument'
 import { Instrument as InstrumentPageAction } from '../features/page_action/instrument'
 
 new Agent({
@@ -18,6 +19,7 @@ new Agent({
     InstrumentPageViewEvent,
     InstrumentPageViewTiming,
     InstrumentSessionTrace,
+    InstrumentSessionReplay,
     InstrumentXhr,
     InstrumentMetrics,
     InstrumentPageAction,

package/src/cdn/spa.js

@@ -10,6 +10,7 @@ import { Instrument as InstrumentMetrics } from '../features/metrics/instrument'
 import { Instrument as InstrumentErrors } from '../features/jserrors/instrument'
 import { Instrument as InstrumentXhr } from '../features/ajax/instrument'
 import { Instrument as InstrumentSessionTrace } from '../features/session_trace/instrument'
+import { Instrument as InstrumentSessionReplay } from '../features/session_replay/instrument'
 import { Instrument as InstrumentSpa } from '../features/spa/instrument'
 import { Instrument as InstrumentPageAction } from '../features/page_action/instrument'
 
@@ -19,6 +20,7 @@ new Agent({
     InstrumentPageViewEvent,
     InstrumentPageViewTiming,
     InstrumentSessionTrace,
+    InstrumentSessionReplay,
     InstrumentMetrics,
     InstrumentPageAction,
     InstrumentErrors,

package/src/common/config/state/init.js

@@ -8,6 +8,10 @@ const model = () => {
     maskInputOptions: { password: true }
   }
   return {
+    proxy: {
+      assets: undefined, // if this value is set, it will be used to overwrite the webpack asset path used to fetch assets
+      beacon: undefined // likewise for the url to which we send analytics
+    },
     privacy: { cookies_enabled: true }, // *cli - per discussion, default should be true
     ajax: { deny_list: undefined, block_internal: true, enabled: true, harvestTimeSeconds: 10, autoStart: true },
     distributed_tracing: {

package/src/common/constants/runtime.js

@@ -44,9 +44,11 @@ export const globalScope = isBrowserScope
       globalThis
   ))
 
+export const initiallyHidden = Boolean(globalScope?.document?.visibilityState === 'hidden')
+
 export const initialLocation = '' + globalScope?.location
 
-export const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+export const isiOS = /iPad|iPhone|iPod/.test(globalScope.navigator?.userAgent)
 
 /**
  * Shared Web Workers introduced in iOS 16.0+ and n/a in 15.6-
@@ -58,7 +60,7 @@ export const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
 export const iOSBelow16 = (isiOS && typeof SharedWorker === 'undefined')
 
 export const ffVersion = (() => {
-  const match = navigator.userAgent.match(/Firefox[/\s](\d+\.\d+)/)
+  const match = globalScope.navigator?.userAgent?.match(/Firefox[/\s](\d+\.\d+)/)
   if (Array.isArray(match) && match.length >= 2) {
     return +match[1]
   }
@@ -68,4 +70,6 @@ export const ffVersion = (() => {
 
 export const isIE = Boolean(isBrowserScope && window.document.documentMode) // deprecated property that only works in IE
 
-export const supportsSendBeacon = !!navigator.sendBeacon
+export const supportsSendBeacon = !!globalScope.navigator?.sendBeacon
+
+export const offset = Math.floor(globalScope?.performance?.timeOrigin || globalScope?.performance?.timing?.navigationStart || Date.now())

package/src/common/constants/runtime.test.js

@@ -106,10 +106,12 @@ test.each([
   { userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13.4; rv:109.0) Gecko/20100101 Firefox/114.0', expected: false }
 ])('should set isiOS to $expected for $userAgent', async ({ userAgent, expected }) => {
   global.navigator.userAgent = userAgent
+  global.window = { navigator: global.navigator, document: true }
 
   const runtime = await import('./runtime')
 
   expect(runtime.isiOS).toEqual(expected)
+  delete global.window
 })
 
 test.each([
@@ -127,12 +129,14 @@ test.each([
     global.SharedWorker = class SharedWorker {}
   }
   global.navigator.userAgent = userAgent
+  global.window = { navigator: global.navigator, document: true }
 
   const runtime = await import('./runtime')
 
   delete global.SharedWorker
 
   expect(runtime.iOSBelow16).toEqual(expected)
+  delete global.window
 })
 
 test.each([
@@ -144,10 +148,12 @@ test.each([
   { userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13.4; rv:109.0) Gecko/20100101 Firefox/114.0', expected: 114 }
 ])('should set ffVersion to $expected for $userAgent', async ({ userAgent, expected }) => {
   global.navigator.userAgent = userAgent
+  global.window = { navigator: global.navigator, document: true }
 
   const runtime = await import('./runtime')
 
   expect(runtime.ffVersion).toEqual(expected)
+  delete global.window
 })
 
 test('should set supportsSendBeacon to false', async () => {
@@ -161,8 +167,10 @@ test('should set supportsSendBeacon to false', async () => {
 
 test('should set supportsSendBeacon to true', async () => {
   global.navigator.sendBeacon = jest.fn()
+  global.window = { navigator: global.navigator, document: true }
 
   const runtime = await import('./runtime')
 
   expect(runtime.supportsSendBeacon).toEqual(true)
+  delete global.window
 })

package/src/common/harvest/harvest.js

@@ -7,7 +7,7 @@ import { obj as encodeObj, param as encodeParam } from '../url/encode'
 import { stringify } from '../util/stringify'
 import * as submitData from '../util/submit-data'
 import { getLocation } from '../url/location'
-import { getInfo, getConfigurationValue, getRuntime } from '../config/config'
+import { getInfo, getConfigurationValue, getRuntime, getConfiguration } from '../config/config'
 import { cleanURL } from '../url/clean-url'
 import { now } from '../timing/now'
 import { eventListenerOpts } from '../event-listener/event-listener-opts'
@@ -33,7 +33,6 @@ export class Harvest extends SharedContext {
 
     this.tooManyRequestsDelay = getConfigurationValue(this.sharedContext.agentIdentifier, 'harvest.tooManyRequestsDelay') || 60
     this.obfuscator = new Obfuscator(this.sharedContext)
-    this.getScheme = () => (getConfigurationValue(this.sharedContext.agentIdentifier, 'ssl') === false) ? 'http' : 'https'
 
     this._events = {}
   }
@@ -96,10 +95,13 @@ export class Harvest extends SharedContext {
       return false
     }
 
+    const init = getConfiguration(this.sharedContext.agentIdentifier)
+    const protocol = init.ssl === false ? 'http' : 'https'
+    const perceviedBeacon = init.proxy.beacon || info.errorBeacon
     const endpointURLPart = endpoint !== 'rum' ? `/${endpoint}` : ''
-    let url = `${this.getScheme()}://${info.errorBeacon}${endpointURLPart}/1/${info.licenseKey}`
+    let url = `${protocol}://${perceviedBeacon}${endpointURLPart}/1/${info.licenseKey}`
     if (customUrl) url = customUrl
-    if (raw) url = `${this.getScheme()}://${info.errorBeacon}/${endpoint}`
+    if (raw) url = `${protocol}://${perceviedBeacon}/${endpoint}`
 
     const baseParams = !raw && includeBaseParams ? this.baseQueryString() : ''
     let payloadParams = encodeObj(qs, agentRuntime.maxBytes)

package/src/common/harvest/harvest.test.js

@@ -159,6 +159,10 @@ describe('_send', () => {
     jest.mocked(configModule.getRuntime).mockReturnValue({
       maxBytes: Infinity
     })
+    jest.mocked(configModule.getConfiguration).mockReturnValue({
+      ssl: undefined,
+      proxy: {}
+    })
 
     spec = {
       endpoint: faker.datatype.uuid(),
@@ -223,6 +227,19 @@ describe('_send', () => {
     })
   })
 
+  test('able to use and send to proxy when defined', () => {
+    jest.mocked(configModule.getConfiguration).mockReturnValue({ proxy: { beacon: 'some_other_string' } })
+    const result = harvestInstance._send(spec)
+
+    expect(result).toEqual(true)
+    expect(submitMethod).toHaveBeenCalledWith({
+      body: JSON.stringify(spec.payload.body),
+      headers: [{ key: 'content-type', value: 'text/plain' }],
+      sync: undefined,
+      url: expect.stringContaining(`https://some_other_string/${spec.endpoint}/1/${licenseKey}?`)
+    })
+  })
+
   test('should use the custom defined url', () => {
     spec.customUrl = faker.internet.url()
 

package/src/common/vitals/__mocks__/web-vitals.js

@@ -0,0 +1,19 @@
+const continuouslyReportMetric = c => {
+  let count = 0
+  const vital = { value: 1, entries: [{ startTime: 1, name: 'name', size: 1, id: `id${++count}`, url: 'url', element: { tagName: 'tagName' } }], id: 'id' }
+  // report a new metric every quarter second
+  const callcb = () => {
+    setTimeout(() => {
+      c(vital)
+      callcb()
+    }, 250)
+  }
+  callcb()
+}
+
+export const onCLS = c => continuouslyReportMetric(c)
+export const onFCP = c => continuouslyReportMetric(c)
+export const onFID = c => continuouslyReportMetric(c)
+export const onINP = c => continuouslyReportMetric(c)
+export const onLCP = c => continuouslyReportMetric(c)
+export const onTTFB = c => continuouslyReportMetric(c)

package/src/common/vitals/constants.js

@@ -0,0 +1,10 @@
+export const VITAL_NAMES = {
+  FIRST_PAINT: 'fp',
+  FIRST_CONTENTFUL_PAINT: 'fcp',
+  FIRST_INPUT_DELAY: 'fi',
+  LARGEST_CONTENTFUL_PAINT: 'lcp',
+  CUMULATIVE_LAYOUT_SHIFT: 'cls',
+  INTERACTION_TO_NEXT_PAINT: 'inp',
+  LONG_TASK: 'lt',
+  TIME_TO_FIRST_BYTE: 'ttfb'
+}

package/src/common/vitals/cumulative-layout-shift.js

@@ -0,0 +1,13 @@
+import { onCLS } from 'web-vitals'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+import { isBrowserScope } from '../constants/runtime'
+
+export const cumulativeLayoutShift = new VitalMetric(VITAL_NAMES.CUMULATIVE_LAYOUT_SHIFT, (x) => x)
+
+if (isBrowserScope) {
+  onCLS(({ value, entries }) => {
+    if (cumulativeLayoutShift.roundingMethod(value) === cumulativeLayoutShift.current.value) return
+    cumulativeLayoutShift.update({ value, entries })
+  }, { reportAllChanges: true })
+}

package/src/common/vitals/cumulative-layout-shift.test.js

@@ -0,0 +1,71 @@
+afterEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshCLSImport = async (codeToRun) => {
+  const { cumulativeLayoutShift } = await import('./cumulative-layout-shift')
+  codeToRun(cumulativeLayoutShift)
+}
+
+describe('cls', () => {
+  test('reports cls', (done) => {
+    getFreshCLSImport(metric => {
+      metric.subscribe(({ value }) => {
+        expect(value).toEqual(1)
+        done()
+      })
+    })
+  })
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshCLSImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshCLSImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+  test('reports only new values', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshCLSImport(metric => {
+      metric.subscribe(({ value }) => {
+        triggered++
+        expect(value).toEqual(1)
+        expect(triggered).toEqual(1)
+        setTimeout(() => {
+          expect(triggered).toEqual(1)
+          done()
+        }, 1000)
+      })
+    })
+  })
+})

package/src/common/vitals/first-contentful-paint.js

@@ -0,0 +1,31 @@
+import { onFCP } from 'web-vitals'
+// eslint-disable-next-line camelcase
+import { iOSBelow16, initiallyHidden, isBrowserScope } from '../constants/runtime'
+import { VITAL_NAMES } from './constants'
+import { VitalMetric } from './vital-metric'
+
+export const firstContentfulPaint = new VitalMetric(VITAL_NAMES.FIRST_CONTENTFUL_PAINT)
+
+/* First Contentful Paint - As of WV v3, it still imperfectly tries to detect document vis state asap and isn't supposed to report if page starts hidden. */
+if (isBrowserScope) {
+  // eslint-disable-next-line camelcase
+  if (iOSBelow16) {
+    try {
+      if (!initiallyHidden) { // see ios-version.js for detail on this following bug case; tldr: buffered flag doesn't work but getEntriesByType does
+        const paintEntries = performance.getEntriesByType('paint')
+        paintEntries.forEach(entry => {
+          if (entry.name === 'first-contentful-paint') {
+            firstContentfulPaint.update({ value: Math.floor(entry.startTime), entries: paintEntries })
+          }
+        })
+      }
+    } catch (e) {
+    // ignore
+    }
+  } else {
+    onFCP(({ value, entries }) => {
+      if (initiallyHidden || firstContentfulPaint.isValid) return
+      firstContentfulPaint.update({ value, entries })
+    })
+  }
+}

package/src/common/vitals/first-contentful-paint.test.js

@@ -0,0 +1,124 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshFCPImport = async (codeToRun) => {
+  const { firstContentfulPaint } = await import('./first-contentful-paint')
+  codeToRun(firstContentfulPaint)
+}
+
+describe('fcp', () => {
+  test('reports fcp from web-vitals', (done) => {
+    getFreshFCPImport(firstContentfulPaint => firstContentfulPaint.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('reports fcp from paintEntries if ios<16', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    global.performance.getEntriesByType = jest.fn(() => [{ name: 'first-contentful-paint', startTime: 1 }])
+
+    getFreshFCPImport(firstContentfulPaint => firstContentfulPaint.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshFCPImport(metric => {
+      metric.subscribe(({ value, attrs }) => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('Does NOT report values from paintEntries other than fcp', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    global.performance.getEntriesByType = jest.fn(() => [{ name: 'other-timing-name', startTime: 1 }])
+
+    getFreshFCPImport(firstContentfulPaint => {
+      firstContentfulPaint.subscribe(() => {
+        console.log('should not have reported')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('Does NOT report fcp from paintEntries if ios<16 && initiallyHidden', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: true,
+      initiallyHidden: true,
+      isBrowserScope: true
+    }))
+    global.performance.getEntriesByType = jest.fn(() => [{ name: 'first-contentful-paint', startTime: 1 }])
+
+    getFreshFCPImport(firstContentfulPaint => {
+      firstContentfulPaint.subscribe(() => {
+        console.log('should not have reported....')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 2000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshFCPImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+
+  test('reports only once', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      iOSBelow16: false,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshFCPImport(firstContentfulPaint => firstContentfulPaint.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

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

@@ -0,0 +1,20 @@
+import { onFID } from 'web-vitals'
+import { VitalMetric } from './vital-metric'
+import { VITAL_NAMES } from './constants'
+import { initiallyHidden, isBrowserScope } from '../constants/runtime'
+
+export const firstInputDelay = new VitalMetric(VITAL_NAMES.FIRST_INPUT_DELAY)
+
+if (isBrowserScope) {
+  onFID(({ value, entries }) => {
+    if (initiallyHidden || firstInputDelay.isValid || entries.length === 0) return
+
+    // CWV will only report one (THE) first-input entry to us; fid isn't reported if there are no user interactions occurs before the *first* page hiding.
+    firstInputDelay.update({
+      value: entries[0].startTime,
+      entries,
+      attrs: { type: entries[0].name, fid: Math.round(value) },
+      shouldAddConnectionAttributes: true
+    })
+  })
+}

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

@@ -0,0 +1,88 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshFIDImport = async (codeToRun) => {
+  const { firstInputDelay } = await import('./first-input-delay')
+  codeToRun(firstInputDelay)
+}
+
+describe('fid', () => {
+  test('reports fcp from web-vitals', (done) => {
+    getFreshFIDImport(metric => metric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    }))
+  })
+
+  test('Does NOT report values if initiallyHidden', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: true,
+      isBrowserScope: true
+    }))
+
+    getFreshFIDImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report if not browser scoped', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: false
+    }))
+
+    getFreshFIDImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true
+    }))
+    let sub1, sub2
+    getFreshFIDImport(metric => {
+      const remove1 = metric.subscribe(({ entries }) => {
+        sub1 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+
+      const remove2 = metric.subscribe(({ entries }) => {
+        sub2 ??= entries[0].id
+        if (sub1 === sub2) { remove1(); remove2(); done() }
+      })
+    })
+  })
+
+  test('reports only once', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      initiallyHidden: false,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshFIDImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})