@newrelic/browser-agent 1.239.0 → 1.240.0

package/src/common/vitals/time-to-first-byte.test.js

@@ -0,0 +1,147 @@
+beforeEach(() => {
+  jest.resetModules()
+  jest.resetAllMocks()
+  jest.clearAllMocks()
+})
+
+const getFreshTTFBImport = async (codeToRun) => {
+  const { timeToFirstByte } = await import('./time-to-first-byte')
+  codeToRun(timeToFirstByte)
+}
+
+describe('ttfb', () => {
+  test('reports ttfb from web-vitals', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: false,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = jest.fn()
+
+    getFreshTTFBImport(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
+    }))
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report ttfb from web-vitals if no PNT', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: false,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = undefined
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('does NOT report ttfb from web-vitals if is iOS', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: true,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = jest.fn()
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(() => {
+        console.log('should not have reported...')
+        expect(1).toEqual(2)
+      })
+      setTimeout(done, 1000)
+    })
+  })
+
+  test('reports from performance.timing if cant use web-vitals', (done) => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isiOS: true,
+      globalScope: {
+        performance: {
+          timing: {
+            responseStart: 2
+          }
+        }
+      },
+      offset: 1,
+      isBrowserScope: true
+    }))
+    global.PerformanceNavigationTiming = undefined
+
+    getFreshTTFBImport(metric => {
+      metric.subscribe(({ value }) => {
+        expect(value).toEqual(1) // responseStart (2) - offset (1) === 1
+        done()
+      })
+    })
+  })
+
+  test('multiple subs get same value', done => {
+    jest.doMock('../constants/runtime', () => ({
+      __esModule: true,
+      isBrowserScope: true,
+      isiOS: false
+    }))
+    global.PerformanceNavigationTiming = jest.fn()
+    let sub1, sub2
+    getFreshTTFBImport(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,
+      isiOS: true,
+      globalScope: {
+        performance: {
+          timing: {
+            responseStart: 2
+          }
+        }
+      },
+      offset: 1,
+      isBrowserScope: true
+    }))
+    let triggered = 0
+    getFreshTTFBImport(metric => metric.subscribe(({ value }) => {
+      triggered++
+      expect(value).toEqual(1)
+      expect(triggered).toEqual(1)
+      setTimeout(() => {
+        expect(triggered).toEqual(1)
+        done()
+      }, 1000)
+    })
+    )
+  })
+})

package/src/common/vitals/vital-metric.js

@@ -0,0 +1,60 @@
+export class VitalMetric {
+  #subscribers = new Set()
+  history = []
+
+  constructor (name, roundingMethod) {
+    this.name = name
+    this.attrs = {}
+    this.roundingMethod = typeof roundingMethod === 'function' ? roundingMethod : Math.floor
+  }
+
+  update ({ value, entries = [], attrs = {}, shouldAddConnectionAttributes = false }) {
+    if (value < 0) return
+    const state = {
+      value: this.roundingMethod(value),
+      name: this.name,
+      entries,
+      attrs
+    }
+    if (shouldAddConnectionAttributes) addConnectionAttributes(state.attrs)
+    this.history.push(state)
+    this.#subscribers.forEach(cb => {
+      try {
+        cb(this.current)
+      } catch (e) {
+        // ignore errors
+      }
+    })
+  }
+
+  get current () {
+    return this.history[this.history.length - 1] || {
+      value: undefined,
+      name: this.name,
+      entries: [],
+      attrs: {}
+    }
+  }
+
+  get isValid () {
+    return this.current.value >= 0
+  }
+
+  subscribe (callback, buffered = true) {
+    if (typeof callback !== 'function') return
+    this.#subscribers.add(callback)
+    // emit full history on subscription ("buffered" behavior)
+    if (this.isValid && !!buffered) this.history.forEach(state => { callback(state) })
+    return () => { this.#subscribers.delete(callback) }
+  }
+}
+
+function addConnectionAttributes (obj) {
+  var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection // to date, both window & worker shares the same support for connection
+  if (!connection) return
+
+  if (connection.type) obj['net-type'] = connection.type
+  if (connection.effectiveType) obj['net-etype'] = connection.effectiveType
+  if (connection.rtt) obj['net-rtt'] = connection.rtt
+  if (connection.downlink) obj['net-dlink'] = connection.downlink
+}

package/src/common/vitals/vital-metric.test.js

@@ -0,0 +1,171 @@
+import { VitalMetric } from './vital-metric'
+
+let vitalMetric
+beforeEach(() => {
+  vitalMetric = new VitalMetric('test')
+})
+
+afterEach(() => {
+  jest.resetAllMocks()
+})
+
+describe('vital-metric', () => {
+  test('default values', () => {
+    expect(vitalMetric).toMatchObject({
+      name: 'test',
+      history: []
+    })
+
+    expect(vitalMetric.current).toMatchObject({
+      name: 'test',
+      attrs: {},
+      entries: [],
+      value: undefined
+    })
+  })
+
+  test('update', () => {
+    let i = 0
+    vitalMetric.update({ value: i, entries: [{ test: i + 1 }], attrs: { test: i + 2 }, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current).toMatchObject({
+      value: i,
+      entries: [{ test: i + 1 }],
+      attrs: { test: i + 2 }
+    })
+
+    i++
+    vitalMetric.update({ value: i, entries: [{ test: i + 1 }], attrs: { test: i + 2 }, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current).toMatchObject({
+      value: i,
+      entries: [{ test: i + 1 }],
+      attrs: { test: i + 2 }
+    })
+  })
+
+  test('rounding', () => {
+    // default rounding
+    vitalMetric.update({ value: 1.234 })
+    expect(vitalMetric.current.value).toEqual(1)
+    // custom rounding
+    vitalMetric = new VitalMetric('test', (x) => x * 100)
+    vitalMetric.update({ value: 5 })
+    expect(vitalMetric.current.value).toEqual(500)
+  })
+
+  test('isValid', () => {
+    expect(vitalMetric.isValid).toEqual(false)
+
+    vitalMetric.update({ value: -1 })
+    expect(vitalMetric.isValid).toEqual(false)
+
+    vitalMetric.update({ value: 1 })
+    expect(vitalMetric.isValid).toEqual(true)
+  })
+
+  test('subscribers get updates when valid', (done) => {
+    vitalMetric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    })
+
+    vitalMetric.update({ value: 1 })
+  })
+
+  test('multiple subscribers get same update when valid', (done) => {
+    let sub1, sub2
+    let stop1 = vitalMetric.subscribe(({ entries }) => {
+      sub1 ??= entries[0].id
+      if (sub1 === sub2) { stop1(); stop2(); done() }
+    })
+
+    let stop2 = vitalMetric.subscribe(({ entries }) => {
+      sub2 ??= entries[0].id
+      if (sub1 === sub2) { stop1(); stop2(); done() }
+    })
+
+    vitalMetric.update({ value: 1, entries: [{ id: 'abcd' }] })
+  })
+
+  test('subscribers do not get updates when not valid', (done) => {
+    vitalMetric.subscribe(({ value }) => {
+      console.log(value)
+      console.log('should not have reached subscriber')
+      expect(1).toEqual(2)
+    })
+
+    vitalMetric.update({ value: -1 })
+    setTimeout(done, 1000)
+  })
+
+  test('subscribers get latest value immediately if already valid', (done) => {
+    vitalMetric.update({ value: 1 })
+
+    vitalMetric.subscribe(({ value }) => {
+      expect(value).toEqual(1)
+      done()
+    })
+  })
+
+  test('unsubscribe', (done) => {
+    const unsubscribe = vitalMetric.subscribe(({ value }) => {
+      console.log('should not have reached subscriber')
+      expect(1).toEqual(2)
+    })
+
+    unsubscribe()
+    vitalMetric.update({ value: 1 })
+    setTimeout(done, 1000)
+  })
+
+  test('addConnectionAttributes', () => {
+    global.navigator.connection = {}
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({}))
+
+    global.navigator.connection.type = 'type'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type'
+    }))
+
+    global.navigator.connection.effectiveType = 'effectiveType'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType'
+    }))
+
+    global.navigator.connection.rtt = 'rtt'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType',
+      'net-rtt': 'rtt'
+    }))
+
+    global.navigator.connection.downlink = 'downlink'
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType',
+      'net-rtt': 'rtt',
+      'net-dlink': 'downlink'
+    }))
+
+    global.navigator.connection = {
+      type: 'type',
+      effectiveType: 'effectiveType',
+      rtt: 'rtt',
+      downlink: 'downlink'
+    }
+    vitalMetric.update({ value: 1, shouldAddConnectionAttributes: true })
+
+    expect(vitalMetric.current.attrs).toEqual(expect.objectContaining({
+      'net-type': 'type',
+      'net-etype': 'effectiveType',
+      'net-rtt': 'rtt',
+      'net-dlink': 'downlink'
+    }))
+    global.navigator.connection = {}
+  })
+})

package/src/features/ajax/aggregate/index.js

@@ -67,6 +67,9 @@ export class Aggregate extends AggregateBase {
 
     this.drain()
 
+    const beacon = getInfo(agentIdentifier).errorBeacon
+    const proxyBeacon = agentInit.proxy.beacon
+
     function storeXhr (params, metrics, startTime, endTime, type) {
       metrics.time = startTime
 
@@ -86,7 +89,8 @@ export class Aggregate extends AggregateBase {
       if (!allAjaxIsEnabled) return
 
       if (!shouldCollectEvent(params)) {
-        if (params.hostname === getInfo(agentIdentifier).errorBeacon) {
+        if (params.hostname === beacon || (proxyBeacon && params.hostname === proxyBeacon)) {
+          // This doesn't make a distinction if the same-domain request is going to a different port or path...
           handle(SUPPORTABILITY_METRIC_CHANNEL, ['Ajax/Events/Excluded/Agent'], undefined, FEATURE_NAMES.metrics, ee)
         } else {
           handle(SUPPORTABILITY_METRIC_CHANNEL, ['Ajax/Events/Excluded/App'], undefined, FEATURE_NAMES.metrics, ee)

package/src/features/metrics/aggregate/index.js

@@ -1,4 +1,4 @@
-import { getRuntime } from '../../../common/config/config'
+import { getRuntime, getConfiguration } from '../../../common/config/config'
 import { registerHandler } from '../../../common/event-emitter/register-handler'
 import { HarvestScheduler } from '../../../common/harvest/harvest-scheduler'
 import { FEATURE_NAME, SUPPORTABILITY_METRIC, CUSTOM_METRIC, SUPPORTABILITY_METRIC_CHANNEL, CUSTOM_METRIC_CHANNEL } from '../constants'
@@ -82,6 +82,11 @@ export class Aggregate extends AggregateBase {
     const rules = getRules(this.agentIdentifier)
     if (rules.length > 0) this.storeSupportabilityMetrics('Generic/Obfuscate/Detected')
     if (rules.length > 0 && !validateRules(rules)) this.storeSupportabilityMetrics('Generic/Obfuscate/Invalid')
+
+    // Check if proxy for either chunks or beacon is being used
+    const { proxy } = getConfiguration(this.agentIdentifier)
+    if (proxy.assets) this.storeSupportabilityMetrics('Config/AssetsUrl/Changed')
+    if (proxy.beacon) this.storeSupportabilityMetrics('Config/BeaconUrl/Changed')
   }
 
   eachSessionChecks () {

package/src/features/page_view_event/aggregate/index.js

@@ -1,53 +1,41 @@
-import { handle } from '../../../common/event-emitter/handle'
-import { FEATURE_NAMES } from '../../../loaders/features/features'
-import { isiOS, globalScope, isBrowserScope } from '../../../common/constants/runtime'
-import { onTTFB } from 'web-vitals'
+import { globalScope, isBrowserScope } from '../../../common/constants/runtime'
 import { addPT, addPN } from '../../../common/timing/nav-timing'
 import { stringify } from '../../../common/util/stringify'
-import { paintMetrics } from '../../../common/metrics/paint-metrics'
-import { getConfigurationValue, getInfo, getRuntime } from '../../../common/config/config'
+import { getInfo, getRuntime } from '../../../common/config/config'
 import { Harvest } from '../../../common/harvest/harvest'
 import * as CONSTANTS from '../constants'
 import { getActivatedFeaturesFlags } from './initialized-features'
 import { activateFeatures } from '../../../common/util/feature-flags'
 import { warn } from '../../../common/util/console'
 import { AggregateBase } from '../../utils/aggregate-base'
+import { firstContentfulPaint } from '../../../common/vitals/first-contentful-paint'
+import { firstPaint } from '../../../common/vitals/first-paint'
+import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte'
 
 export class Aggregate extends AggregateBase {
   static featureName = CONSTANTS.FEATURE_NAME
   constructor (agentIdentifier, aggregator) {
     super(agentIdentifier, aggregator, CONSTANTS.FEATURE_NAME)
 
-    if (typeof PerformanceNavigationTiming !== 'undefined' && !isiOS) {
-      this.alreadySent = false // we don't support timings on BFCache restores
-      const agentRuntime = getRuntime(agentIdentifier) // we'll store timing values on the runtime obj to be read by the aggregate module
+    this.timeToFirstByte = 0
+    this.firstByteToWindowLoad = 0 // our "frontend" duration
+    this.firstByteToDomContent = 0 // our "dom processing" duration
 
-      /* Time To First Byte
-        This listener must record these values *before* PVE's aggregate sends RUM. */
-      onTTFB(({ value, entries }) => {
-        if (this.alreadySent) return
-        this.alreadySent = true
-
-        agentRuntime[CONSTANTS.TTFB] = Math.round(value) // this is our "backend" duration; web-vitals will ensure it's lower bounded at 0
-
-        // Similar to what vitals does for ttfb, we have to factor in activation-start when calculating relative timings:
+    if (isBrowserScope) {
+      timeToFirstByte.subscribe(({ value, entries }) => {
         const navEntry = entries[0]
-        const respOrActivStart = Math.max(navEntry.responseStart, navEntry.activationStart || 0)
-        agentRuntime[CONSTANTS.FBTWL] = Math.max(Math.round(navEntry.loadEventEnd - respOrActivStart), 0) // our "frontend" duration
-        handle('timing', ['load', Math.round(navEntry.loadEventEnd)], undefined, FEATURE_NAMES.pageViewTiming, this.ee)
-        agentRuntime[CONSTANTS.FBTDC] = Math.max(Math.round(navEntry.domContentLoadedEventEnd - respOrActivStart), 0) // our "dom processing" duration
+        this.timeToFirstByte = Math.max(value, this.timeToFirstByte)
+        this.firstByteToWindowLoad = Math.max(Math.round(navEntry.loadEventEnd - this.timeToFirstByte), this.firstByteToWindowLoad) // our "frontend" duration
+        this.firstByteToDomContent = Math.max(Math.round(navEntry.domContentLoadedEventEnd - this.timeToFirstByte), this.firstByteToDomContent) // our "dom processing" duration
 
         this.sendRum()
       })
     } else {
-      this.sendRum() // timings either already in runtime from instrument or is meant to get 0'd.
+      // worker agent build does not get TTFB values, use default 0 values
+      this.sendRum()
     }
   }
 
-  getScheme () {
-    return getConfigurationValue(this.agentIdentifier, 'ssl') === false ? 'http' : 'https'
-  }
-
   sendRum () {
     const info = getInfo(this.agentIdentifier)
     const agentRuntime = getRuntime(this.agentIdentifier)
@@ -60,9 +48,9 @@ export class Aggregate extends AggregateBase {
     // These 3 values should've been recorded after load and before this func runs. They are part of the minimum required for PageView events to be created.
     // Following PR #428, which demands that all agents send RUM call, these need to be sent even outside of the main window context where PerformanceTiming
     // or PerformanceNavigationTiming do not exists. Hence, they'll be filled in by 0s instead in, for example, worker threads that still init the PVE module.
-    this.aggregator.store('measures', 'be', { value: isBrowserScope ? agentRuntime[CONSTANTS.TTFB] : 0 })
-    this.aggregator.store('measures', 'fe', { value: isBrowserScope ? agentRuntime[CONSTANTS.FBTWL] : 0 })
-    this.aggregator.store('measures', 'dc', { value: isBrowserScope ? agentRuntime[CONSTANTS.FBTDC] : 0 })
+    this.aggregator.store('measures', 'be', { value: this.timeToFirstByte })
+    this.aggregator.store('measures', 'fe', { value: this.firstByteToWindowLoad })
+    this.aggregator.store('measures', 'dc', { value: this.firstByteToDomContent })
 
     const queryParameters = {
       tt: info.ttGuid,
@@ -103,19 +91,8 @@ export class Aggregate extends AggregateBase {
       }
     }
 
-    try { // PVTiming sends these too, albeit using web-vitals and slightly different; it's unknown why they're duplicated, but PVT should be the truth
-      var entries = globalScope.performance.getEntriesByType('paint')
-      entries.forEach(function (entry) {
-        if (!entry.startTime || entry.startTime <= 0) return
-
-        if (entry.name === 'first-paint') {
-          queryParameters.fp = String(Math.floor(entry.startTime))
-        } else if (entry.name === 'first-contentful-paint') {
-          queryParameters.fcp = String(Math.floor(entry.startTime))
-        }
-        paintMetrics[entry.name] = Math.floor(entry.startTime) // this is consumed by Spa module
-      })
-    } catch (e) {}
+    queryParameters.fp = firstPaint.current.value
+    queryParameters.fcp = firstContentfulPaint.current.value
 
     harvester.send({
       endpoint: 'rum',

package/src/features/page_view_event/constants.js

@@ -1,6 +1,3 @@
 import { FEATURE_NAMES } from '../../loaders/features/features'
 
 export const FEATURE_NAME = FEATURE_NAMES.pageViewEvent
-export const TTFB = 'firstbyte'
-export const FBTDC = 'domcontent'
-export const FBTWL = 'windowload'

package/src/features/page_view_event/instrument/index.js

@@ -1,32 +1,11 @@
-import { handle } from '../../../common/event-emitter/handle'
-import { isiOS } from '../../../common/constants/runtime'
 import { InstrumentBase } from '../../utils/instrument-base'
 import * as CONSTANTS from '../constants'
-import { FEATURE_NAMES } from '../../../loaders/features/features'
-import { getRuntime } from '../../../common/config/config'
-import { onDOMContentLoaded, onWindowLoad } from '../../../common/window/load'
-import { now } from '../../../common/timing/now'
 
 export class Instrument extends InstrumentBase {
   static featureName = CONSTANTS.FEATURE_NAME
   constructor (agentIdentifier, aggregator, auto = true) {
     super(agentIdentifier, aggregator, CONSTANTS.FEATURE_NAME, auto)
 
-    if ((typeof PerformanceNavigationTiming === 'undefined' || isiOS) && typeof PerformanceTiming !== 'undefined') {
-      // For majority browser versions in which PNT exists, we can get load timings later from the nav entry (in the aggregate portion). At minimum, PT should exist for main window.
-      // *cli Mar'23 - iOS 15.2 & 15.4 testing in Sauce still fails with onTTFB. Hence, all iOS will fallback to this for now. Unknown if this is similar in nature to iOSBelow16 bug.
-      const agentRuntime = getRuntime(agentIdentifier)
-
-      agentRuntime[CONSTANTS.TTFB] = Math.max(Date.now() - agentRuntime.offset, 0)
-      onDOMContentLoaded(() => { agentRuntime[CONSTANTS.FBTDC] = Math.max(now() - agentRuntime[CONSTANTS.TTFB], 0) })
-      onWindowLoad(() => {
-        const timeNow = now()
-        agentRuntime[CONSTANTS.FBTWL] = Math.max(timeNow - agentRuntime[CONSTANTS.TTFB], 0)
-        handle('timing', ['load', timeNow], undefined, FEATURE_NAMES.pageViewTiming, this.ee)
-      })
-    }
-    // Else, inference: inside worker or some other env where these events are irrelevant. They'll get filled in with 0s in RUM call.
-
     this.importAggregator()
   }
 }

package/src/features/page_view_timing/aggregate/index.component-test.js

@@ -0,0 +1,86 @@
+import { Aggregator } from '../../../common/aggregate/aggregator'
+import { ee } from '../../../common/event-emitter/contextual-ee'
+import { drain } from '../../../common/drain/drain'
+import { setRuntime } from '../../../common/config/config'
+
+jest.mock('web-vitals', () => ({
+  __esModule: true,
+  // eslint-disable-next-line
+  onFID: jest.fn(cb => cb({
+    value: 1234,
+    entries: [{ name: 'pointerdown', startTime: 5 }]
+  })),
+  // eslint-disable-next-line
+  onCLS: jest.fn((cb) => cb({
+    value: 1,
+    entries: [{ value: 1 }]
+  })),
+  // eslint-disable-next-line
+  onFCP: jest.fn((cb) => cb({
+    value: 1,
+    entries: [{ value: 1 }]
+  })),
+  // eslint-disable-next-line
+  onINP: jest.fn((cb) => cb({
+    value: 1,
+    entries: [{ value: 1 }]
+  })),
+  // eslint-disable-next-line
+  onLCP: jest.fn((cb) => cb({
+    value: 1,
+    entries: [{ value: 1 }]
+  }))
+})
+)
+
+let pvtAgg, cumulativeLayoutShift
+describe('pvt aggregate tests', () => {
+  beforeEach(async () => {
+    const { Aggregate } = await import('.')
+    setRuntime('abcd', {})
+    pvtAgg = new Aggregate('abcd', new Aggregator({ agentIdentifier: 'abcd', ee }))
+    pvtAgg.scheduler.harvest.send = jest.fn()
+    pvtAgg.prepareHarvest = jest.fn(() => ({}))
+    drain('abcd', 'feature')
+
+    global.navigator.connection = {
+      type: 'cellular',
+      effectiveType: '3g',
+      rtt: 270,
+      downlink: 700
+    }
+
+    const { cumulativeLayoutShift: cls } = await import('../../../common/vitals/cumulative-layout-shift')
+    cumulativeLayoutShift = cls
+  })
+  test('LCP event with CLS attribute', () => {
+    cumulativeLayoutShift.update({ value: 1 })
+    pvtAgg.addTiming('lcp', 1, { size: 1, startTime: 1 })
+
+    var timing = find(pvtAgg.timings, function (t) {
+      return t.name === 'lcp'
+    })
+
+    expect(timing.attrs.cls).toEqual(1) // 'CLS value should be the one present at the time LCP happened'
+
+    function find (arr, fn) {
+      if (arr.find) {
+        return arr.find(fn)
+      }
+      var match = null
+      arr.forEach(function (t) {
+        if (fn(t)) {
+          match = t
+        }
+      })
+      return match
+    }
+  })
+
+  test('sends expected FI attributes when available', () => {
+    expect(pvtAgg.timings.length).toBeGreaterThanOrEqual(1)
+    const fiPayload = pvtAgg.timings.find(x => x.name === 'fi')
+    expect(fiPayload.value).toEqual(5)
+    expect(fiPayload.attrs).toEqual(expect.objectContaining({ type: 'pointerdown', fid: 1234, cls: 1 }))
+  })
+})