@newrelic/browser-agent 1.254.1 → 1.256.0

package/src/common/timing/time-keeper.js

@@ -1,13 +1,14 @@
-import { gosNREUM } from '../window/nreum'
-import { getRuntime } from '../config/config'
-
 /**
  * Class used to adjust the timestamp of harvested data to New Relic server time. This
  * is done by tracking the performance timings of the RUM call and applying a calculation
  * to the harvested data event offset time.
  */
 export class TimeKeeper {
-  #agent
+  /**
+   * Represents the browser origin time.
+   * @type {number}
+   */
+  #originTime
 
   /**
    * Represents the browser origin time corrected to NR server time.
@@ -22,18 +23,26 @@ export class TimeKeeper {
    */
   #localTimeDiff
 
-  constructor (agent) {
-    this.#agent = agent
+  /**
+   * Represents whether the timekeeper is in a state that it can accurately convert
+   * timestamps.
+   * @type {number}
+   */
+  #ready = false
+
+  constructor () {
+    this.#originTime = Date.now() - performance.now()
   }
 
-  static getTimeKeeperByAgentIdentifier (agentIdentifier) {
-    const nr = gosNREUM()
-    return Object.keys(nr?.initializedAgents || {}).indexOf(agentIdentifier) > -1
-      ? nr.initializedAgents[agentIdentifier].timeKeeper
-      : undefined
+  get ready () {
+    return this.#ready
   }
 
-  get correctedPageOriginTime () {
+  get originTime () {
+    return this.#originTime
+  }
+
+  get correctedOriginTime () {
     return this.#correctedOriginTime
   }
 
@@ -54,18 +63,20 @@ export class TimeKeeper {
 
     // Corrected page origin time
     this.#correctedOriginTime = Math.floor(Date.parse(responseDateHeader) - serverOffset)
-    this.#localTimeDiff = getRuntime(this.#agent.agentIdentifier).offset - this.#correctedOriginTime
+    this.#localTimeDiff = this.#originTime - this.#correctedOriginTime
 
     if (Number.isNaN(this.#correctedOriginTime)) {
       throw new Error('Date header invalid format.')
     }
+
+    this.#ready = true
   }
 
   /**
    * Converts a page origin relative time to an absolute timestamp
    * corrected to NR server time.
    * @param relativeTime {number} The relative time of the event in milliseconds
-   * @returns {number} The correct timestamp as a unix/epoch timestamp value
+   * @returns {number} Corrected unix/epoch timestamp
    */
   convertRelativeTimestamp (relativeTime) {
     return this.#correctedOriginTime + relativeTime
@@ -79,12 +90,4 @@ export class TimeKeeper {
   correctAbsoluteTimestamp (timestamp) {
     return Math.floor(timestamp - this.#localTimeDiff)
   }
-
-  /**
-   * Returns the current time offset from page origin.
-   * @return {number}
-   */
-  now () {
-    return Math.floor(performance.now())
-  }
 }

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

@@ -1,4 +1,4 @@
-import { onCLS } from 'web-vitals'
+import { onCLS } from 'web-vitals/attribution'
 import { VITAL_NAMES } from './constants'
 import { VitalMetric } from './vital-metric'
 import { isBrowserScope } from '../constants/runtime'
@@ -6,8 +6,14 @@ 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 })
+  onCLS(({ value, attribution, id }) => {
+    const attrs = {
+      metricId: id,
+      largestShiftTarget: attribution.largestShiftTarget,
+      largestShiftTime: attribution.largestShiftTime,
+      largestShiftValue: attribution.largestShiftValue,
+      loadState: attribution.loadState
+    }
+    cumulativeLayoutShift.update({ value, attrs })
   }, { reportAllChanges: true })
 }

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

@@ -1,4 +1,4 @@
-import { onFCP } from 'web-vitals'
+import { onFCP } from 'web-vitals/attribution'
 // eslint-disable-next-line camelcase
 import { iOSBelow16, initiallyHidden, isBrowserScope } from '../constants/runtime'
 import { VITAL_NAMES } from './constants'
@@ -15,7 +15,7 @@ if (isBrowserScope) {
         const paintEntries = performance.getEntriesByType('paint')
         paintEntries.forEach(entry => {
           if (entry.name === 'first-contentful-paint') {
-            firstContentfulPaint.update({ value: Math.floor(entry.startTime), entries: paintEntries })
+            firstContentfulPaint.update({ value: Math.floor(entry.startTime) })
           }
         })
       }
@@ -23,9 +23,14 @@ if (isBrowserScope) {
     // ignore
     }
   } else {
-    onFCP(({ value, entries }) => {
+    onFCP(({ value, attribution }) => {
       if (initiallyHidden || firstContentfulPaint.isValid) return
-      firstContentfulPaint.update({ value, entries })
+      const attrs = {
+        timeToFirstByte: attribution.timeToFirstByte,
+        firstByteToFCP: attribution.firstByteToFCP,
+        loadState: attribution.loadState
+      }
+      firstContentfulPaint.update({ value, attrs })
     })
   }
 }

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

@@ -1,4 +1,4 @@
-import { onFID } from 'web-vitals'
+import { onFID } from 'web-vitals/attribution'
 import { VitalMetric } from './vital-metric'
 import { VITAL_NAMES } from './constants'
 import { initiallyHidden, isBrowserScope } from '../constants/runtime'
@@ -6,14 +6,19 @@ 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
+  onFID(({ value, attribution }) => {
+    if (initiallyHidden || firstInputDelay.isValid) return
+    const attrs = {
+      type: attribution.eventType,
+      fid: Math.round(value),
+      eventTarget: attribution.eventTarget,
+      loadState: attribution.loadState
+    }
 
     // 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) }
+      value: attribution.eventTime,
+      attrs
     })
   })
 }

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

@@ -11,7 +11,7 @@ if (isBrowserScope) {
         observer.disconnect()
 
         /* Initial hidden state and pre-rendering not yet considered for first paint. See web-vitals onFCP for example. */
-        firstPaint.update({ value: entry.startTime, entries })
+        firstPaint.update({ value: entry.startTime })
       }
     })
   }

package/src/common/vitals/interaction-to-next-paint.js

@@ -1,4 +1,4 @@
-import { onINP } from 'web-vitals'
+import { onINP } from 'web-vitals/attribution'
 import { VitalMetric } from './vital-metric'
 import { VITAL_NAMES } from './constants'
 import { isBrowserScope } from '../constants/runtime'
@@ -7,7 +7,14 @@ export const interactionToNextPaint = new VitalMetric(VITAL_NAMES.INTERACTION_TO
 
 if (isBrowserScope) {
 /* Interaction-to-Next-Paint */
-  onINP(({ value, entries, id }) => {
-    interactionToNextPaint.update({ value, entries, attrs: { metricId: id } })
+  onINP(({ value, attribution, id }) => {
+    const attrs = {
+      metricId: id,
+      eventTarget: attribution.eventTarget,
+      eventType: attribution.eventType,
+      eventTime: attribution.eventTime,
+      loadState: attribution.loadState
+    }
+    interactionToNextPaint.update({ value, attrs })
   })
 }

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

@@ -1,4 +1,4 @@
-import { onLCP } from 'web-vitals'
+import { onLCP } from 'web-vitals/attribution'
 import { VitalMetric } from './vital-metric'
 import { VITAL_NAMES } from './constants'
 import { initiallyHidden, isBrowserScope } from '../constants/runtime'
@@ -7,22 +7,26 @@ import { cleanURL } from '../url/clean-url'
 export const largestContentfulPaint = new VitalMetric(VITAL_NAMES.LARGEST_CONTENTFUL_PAINT)
 
 if (isBrowserScope) {
-  onLCP(({ value, entries }) => {
+  onLCP(({ value, attribution }) => {
   /* Largest 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 (initiallyHidden || largestContentfulPaint.isValid) return
 
-    const lcpEntry = entries[entries.length - 1] // this looks weird if we only expect one, but this is how cwv-attribution gets it so to be sure...
-    largestContentfulPaint.update({
-      value,
-      entries,
-      ...(entries.length > 0 && {
-        attrs: {
-          size: lcpEntry.size,
-          eid: lcpEntry.id,
-          ...(!!lcpEntry.url && { elUrl: cleanURL(lcpEntry.url) }),
-          ...(!!lcpEntry.element?.tagName && { elTag: lcpEntry.element.tagName })
-        }
-      })
-    })
+    let attrs
+    const lcpEntry = attribution.lcpEntry
+    if (lcpEntry) {
+      attrs = {
+        size: lcpEntry.size,
+        eid: lcpEntry.id,
+        element: attribution.element,
+        timeToFirstByte: attribution.timeToFirstByte,
+        resourceLoadDelay: attribution.resourceLoadDelay,
+        resourceLoadTime: attribution.resourceLoadTime,
+        elementRenderDelay: attribution.elementRenderDelay
+      }
+      if (attribution.url) attrs.elUrl = cleanURL(attribution.url)
+      if (lcpEntry.element?.tagName) attrs.elTag = lcpEntry.element.tagName
+    }
+
+    largestContentfulPaint.update({ value, attrs })
   })
 }

package/src/common/vitals/long-task.js

@@ -10,7 +10,6 @@ if (isBrowserScope) {
     entries.forEach(entry => {
       longTask.update({
         value: entry.duration,
-        entries: [entry],
         attrs: {
           ltFrame: entry.name, // MDN: the browsing context or frame that can be attributed to the long task
           ltStart: entry.startTime, // MDN: a double representing the time (millisec) when the task started

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

@@ -1,13 +1,14 @@
 import { globalScope, isBrowserScope, isiOS, offset } from '../constants/runtime'
 import { VITAL_NAMES } from './constants'
 import { VitalMetric } from './vital-metric'
-import { onTTFB } from 'web-vitals'
+import { onTTFB } from 'web-vitals/attribution'
 
 export const timeToFirstByte = new VitalMetric(VITAL_NAMES.TIME_TO_FIRST_BYTE)
 
 if (isBrowserScope && typeof PerformanceNavigationTiming !== 'undefined' && !isiOS) {
-  onTTFB(({ value, entries }) => {
-    if (!timeToFirstByte.isValid) timeToFirstByte.update({ value, entries })
+  onTTFB(({ value, attribution }) => {
+    if (timeToFirstByte.isValid) return
+    timeToFirstByte.update({ value, attrs: { navigationEntry: attribution.navigationEntry } })
   })
 } else {
   if (!timeToFirstByte.isValid) {
@@ -16,6 +17,6 @@ if (isBrowserScope && typeof PerformanceNavigationTiming !== 'undefined' && !isi
     for (let key in globalScope?.performance?.timing || {}) entry[key] = Math.max(globalScope?.performance?.timing[key] - offset, 0)
 
     // ttfb is equiv to document's responseStart property in timing API --> https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming/responseStart
-    timeToFirstByte.update({ value: entry.responseStart, entries: [entry] })
+    timeToFirstByte.update({ value: entry.responseStart, attrs: { navigationEntry: entry } })
   }
 }

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

@@ -8,19 +8,18 @@ export class VitalMetric {
     this.roundingMethod = typeof roundingMethod === 'function' ? roundingMethod : Math.floor
   }
 
-  update ({ value, entries = [], attrs = {} }) {
+  update ({ value, attrs = {} }) {
     if (value < 0) return
     const state = {
       value: this.roundingMethod(value),
       name: this.name,
-      entries,
       attrs
     }
 
     this.history.push(state)
     this.#subscribers.forEach(cb => {
       try {
-        cb(this.current)
+        cb(state)
       } catch (e) {
         // ignore errors
       }
@@ -31,7 +30,6 @@ export class VitalMetric {
     return this.history[this.history.length - 1] || {
       value: undefined,
       name: this.name,
-      entries: [],
       attrs: {}
     }
   }

package/src/common/window/nreum.js

@@ -1,5 +1,5 @@
-import { now } from '../timing/now'
 import { globalScope } from '../constants/runtime'
+import { now } from '../timing/now'
 
 export const defaults = {
   beacon: 'bam.nr-data.net',

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

@@ -33,7 +33,8 @@ export class Aggregate extends AggregateBase {
       this.drain()
     })
 
-    const denyList = getRuntime(agentIdentifier).denyList
+    const agentRuntime = getRuntime(agentIdentifier)
+    const denyList = agentRuntime.denyList
     setDenyList(denyList)
 
     let ajaxEvents = []
@@ -125,7 +126,7 @@ export class Aggregate extends AggregateBase {
       if (xhrContext.dt) {
         event.spanId = xhrContext.dt.spanId
         event.traceId = xhrContext.dt.traceId
-        event.spanTimestamp = xhrContext.dt.timestamp
+        event.spanTimestamp = agentRuntime.timeKeeper.correctAbsoluteTimestamp(xhrContext.dt.timestamp)
       }
 
       // parsed from the AJAX body, looking for operationName param & parsing query for operationType

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

@@ -8,7 +8,6 @@ import { id } from '../../../common/ids/id'
 import { ffVersion, globalScope, isBrowserScope } from '../../../common/constants/runtime'
 import { dataSize } from '../../../common/util/data-size'
 import { eventListenerOpts } from '../../../common/event-listener/event-listener-opts'
-import { now } from '../../../common/timing/now'
 import { wrapFetch, wrapXhr } from '../../../common/wrap'
 import { parseUrl } from '../../../common/url/parse-url'
 import { DT } from './distributed-tracing'
@@ -17,6 +16,7 @@ import { InstrumentBase } from '../../utils/instrument-base'
 import { FEATURE_NAME } from '../constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { SUPPORTABILITY_METRIC } from '../../metrics/constants'
+import { now } from '../../../common/timing/now'
 
 var handlers = ['load', 'error', 'abort', 'timeout']
 var handlersLen = handlers.length

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

@@ -14,7 +14,6 @@ import { stringify } from '../../../common/util/stringify'
 import { handle } from '../../../common/event-emitter/handle'
 import { mapOwn } from '../../../common/util/map-own'
 import { getInfo, getConfigurationValue, getRuntime } from '../../../common/config/config'
-import { now } from '../../../common/timing/now'
 import { globalScope } from '../../../common/constants/runtime'
 
 import { FEATURE_NAME } from '../constants'
@@ -22,6 +21,7 @@ import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { getNREUMInitializedAgent } from '../../../common/window/nreum'
 import { deregisterDrain } from '../../../common/drain/drain'
+import { now } from '../../../common/timing/now'
 
 /**
  * @typedef {import('./compute-stack-trace.js').StackInfo} StackInfo
@@ -38,10 +38,13 @@ export class Aggregate extends AggregateBase {
     this.bufferedErrorsUnderSpa = {}
     this.currentBody = undefined
     this.errorOnPage = false
+    this.replayAborted = false
 
     // this will need to change to match whatever ee we use in the instrument
     this.ee.on('interactionDone', (interaction, wasSaved) => this.onInteractionDone(interaction, wasSaved))
 
+    this.ee.on('REPLAY_ABORTED', () => { this.replayAborted = true })
+
     register('err', (...args) => this.storeError(...args), this.featureName, this.ee)
     register('ierr', (...args) => this.storeError(...args), this.featureName, this.ee)
     register('softNavFlush', (interactionId, wasFinished, softNavAttrs) =>
@@ -78,9 +81,16 @@ export class Aggregate extends AggregateBase {
       payload.qs.ri = releaseIds
     }
 
-    if (body && body.err && body.err.length && !this.errorOnPage) {
-      payload.qs.pve = '1'
-      this.errorOnPage = true
+    if (body && body.err && body.err.length) {
+      if (this.replayAborted) {
+        body.err.forEach((e) => {
+          delete e.params?.hasReplay
+        })
+      }
+      if (!this.errorOnPage) {
+        payload.qs.pve = '1'
+        this.errorOnPage = true
+      }
     }
     return payload
   }
@@ -133,7 +143,7 @@ export class Aggregate extends AggregateBase {
     return canonicalStackString
   }
 
-  storeError (err, time, internal, customAttributes) {
+  storeError (err, time, internal, customAttributes, hasReplay) {
     // are we in an interaction
     time = time || now()
     const agentRuntime = getRuntime(this.agentIdentifier)
@@ -173,7 +183,7 @@ export class Aggregate extends AggregateBase {
     if (!this.stackReported[bucketHash]) {
       this.stackReported[bucketHash] = true
       params.stack_trace = truncateSize(stackInfo.stackString)
-      this.observedAt[bucketHash] = agentRuntime.offset + time
+      this.observedAt[bucketHash] = agentRuntime.timeKeeper.convertRelativeTimestamp(time)
     } else {
       params.browser_stack_hash = stringHashCode(stackInfo.stackString)
     }
@@ -189,8 +199,9 @@ export class Aggregate extends AggregateBase {
       this.pageviewReported[bucketHash] = true
     }
 
-    if (agentRuntime?.session?.state?.sessionReplayMode) params.hasReplay = true
+    if (hasReplay && !this.replayAborted) params.hasReplay = hasReplay
     params.firstOccurrenceTimestamp = this.observedAt[bucketHash]
+    params.timestamp = this.observedAt[bucketHash]
 
     var type = internal ? 'ierr' : 'err'
     var newMetrics = { time }
@@ -198,7 +209,6 @@ export class Aggregate extends AggregateBase {
     // Trace sends the error in its payload, and both trace & replay simply listens for any error to occur.
     const jsErrorEvent = [type, bucketHash, params, newMetrics, customAttributes]
     handle('errorAgg', jsErrorEvent, undefined, FEATURE_NAMES.sessionTrace, this.ee)
-    handle('errorAgg', jsErrorEvent, undefined, FEATURE_NAMES.sessionReplay, this.ee)
     // still send EE events for other features such as above, but stop this one from aggregating internal data
     if (this.blocked) return
 

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

@@ -4,7 +4,6 @@
  */
 
 import { handle } from '../../../common/event-emitter/handle'
-import { now } from '../../../common/timing/now'
 import { InstrumentBase } from '../../utils/instrument-base'
 import { FEATURE_NAME } from '../constants'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
@@ -12,11 +11,14 @@ import { globalScope } from '../../../common/constants/runtime'
 import { eventListenerOpts } from '../../../common/event-listener/event-listener-opts'
 import { stringify } from '../../../common/util/stringify'
 import { UncaughtError } from './uncaught-error'
+import { now } from '../../../common/timing/now'
+import { SR_EVENT_EMITTER_TYPES } from '../../session_replay/constants'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME
 
   #seenErrors = new Set()
+  #replayRunning = false
 
   constructor (agentIdentifier, aggregator, auto = true) {
     super(agentIdentifier, aggregator, FEATURE_NAME, auto)
@@ -36,13 +38,16 @@ export class Instrument extends InstrumentBase {
 
     this.ee.on('internal-error', (error) => {
       if (!this.abortHandler) return
-      handle('ierr', [this.#castError(error), now(), true], undefined, FEATURE_NAMES.jserrors, this.ee)
+      handle('ierr', [this.#castError(error), now(), true, {}, this.#replayRunning], undefined, FEATURE_NAMES.jserrors, this.ee)
+    })
+
+    this.ee.on(SR_EVENT_EMITTER_TYPES.REPLAY_RUNNING, (isRunning) => {
+      this.#replayRunning = isRunning
     })
 
     globalScope.addEventListener('unhandledrejection', (promiseRejectionEvent) => {
       if (!this.abortHandler) return
-
-      handle('err', [this.#castPromiseRejectionEvent(promiseRejectionEvent), now(), false, { unhandledPromiseRejection: 1 }], undefined, FEATURE_NAMES.jserrors, this.ee)
+      handle('err', [this.#castPromiseRejectionEvent(promiseRejectionEvent), now(), false, { unhandledPromiseRejection: 1 }, this.#replayRunning], undefined, FEATURE_NAMES.jserrors, this.ee)
     }, eventListenerOpts(false, this.removeOnAbort?.signal))
 
     globalScope.addEventListener('error', (errorEvent) => {
@@ -57,7 +62,7 @@ export class Instrument extends InstrumentBase {
         return
       }
 
-      handle('err', [this.#castErrorEvent(errorEvent), now()], undefined, FEATURE_NAMES.jserrors, this.ee)
+      handle('err', [this.#castErrorEvent(errorEvent), now(), false, {}, this.#replayRunning], undefined, FEATURE_NAMES.jserrors, this.ee)
     }, eventListenerOpts(false, this.removeOnAbort?.signal))
 
     this.abortHandler = this.#abort // we also use this as a flag to denote that the feature is active or on and handling errors

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

@@ -86,14 +86,15 @@ export class Aggregate extends AggregateBase {
       height = window.document.documentElement.clientHeight
     }
 
+    const agentRuntime = getRuntime(this.agentIdentifier)
     var defaults = {
-      timestamp: t + getRuntime(this.agentIdentifier).offset,
+      timestamp: agentRuntime.timeKeeper.convertRelativeTimestamp(t),
       timeSinceLoad: t / 1000,
       browserWidth: width,
       browserHeight: height,
       referrerUrl: this.referrerUrl,
       currentUrl: cleanURL('' + location),
-      pageUrl: cleanURL(getRuntime(this.agentIdentifier).origin),
+      pageUrl: cleanURL(agentRuntime.origin),
       eventType: 'PageAction'
     }
 

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

@@ -15,6 +15,8 @@ import { drain } from '../../../common/drain/drain'
 import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { handle } from '../../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../../metrics/constants'
+import { now } from '../../../common/timing/now'
+import { TimeKeeper } from '../../../common/timing/time-keeper'
 
 export class Aggregate extends AggregateBase {
   static featureName = CONSTANTS.FEATURE_NAME
@@ -26,8 +28,8 @@ export class Aggregate extends AggregateBase {
     this.firstByteToDomContent = 0 // our "dom processing" duration
 
     if (isBrowserScope) {
-      timeToFirstByte.subscribe(({ value, entries }) => {
-        const navEntry = entries[0]
+      timeToFirstByte.subscribe(({ value, attrs }) => {
+        const navEntry = attrs.navigationEntry
         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
@@ -100,13 +102,13 @@ export class Aggregate extends AggregateBase {
     queryParameters.fp = firstPaint.current.value
     queryParameters.fcp = firstContentfulPaint.current.value
 
-    const rumStartTime = this.timeKeeper.now()
+    const rumStartTime = now()
     harvester.send({
       endpoint: 'rum',
       payload: { qs: queryParameters, body },
       opts: { needResponse: true, sendEmptyBody: true },
       cbFinished: ({ status, responseText, xhr }) => {
-        const rumEndTime = this.timeKeeper.now()
+        const rumEndTime = now()
 
         if (status >= 400 || status === 0) {
           // Adding retry logic for the rum call will be a separate change
@@ -115,7 +117,11 @@ export class Aggregate extends AggregateBase {
         }
 
         try {
-          this.timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime)
+          const timeKeeper = new TimeKeeper()
+          timeKeeper.processRumRequest(xhr, rumStartTime, rumEndTime)
+          if (!timeKeeper.ready) throw new Error('TimeKeeper not ready')
+
+          agentRuntime.timeKeeper = timeKeeper
         } catch (error) {
           handle(SUPPORTABILITY_METRIC_CHANNEL, ['PVE/NRTime/Calculation/Failed'], undefined, FEATURE_NAMES.metrics, this.ee)
           drain(this.agentIdentifier, FEATURE_NAMES.metrics, true)

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

@@ -20,6 +20,8 @@ import { interactionToNextPaint } from '../../../common/vitals/interaction-to-ne
 import { largestContentfulPaint } from '../../../common/vitals/largest-contentful-paint'
 import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte'
 import { longTask } from '../../../common/vitals/long-task'
+import { subscribeToVisibilityChange } from '../../../common/window/page-visibility'
+import { VITAL_NAMES } from '../../../common/vitals/constants'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -37,9 +39,6 @@ export class Aggregate extends AggregateBase {
 
     if (getConfigurationValue(this.agentIdentifier, 'page_view_timing.long_task') === true) longTask.subscribe(this.#handleVitalMetric)
 
-    /* It's important that CWV api, like "onLCP", is called before this scheduler is initialized. The reason is because they listen to the same
-      on vis change or pagehide events, and we'd want ex. onLCP to record the timing (win the race) before we try to send "final harvest". */
-
     registerHandler('docHidden', msTimestamp => this.endCurrentSession(msTimestamp), this.featureName, this.ee)
     registerHandler('winPagehide', msTimestamp => this.recordPageUnload(msTimestamp), this.featureName, this.ee)
 
@@ -47,14 +46,24 @@ export class Aggregate extends AggregateBase {
     const harvestTimeSeconds = getConfigurationValue(this.agentIdentifier, 'page_view_timing.harvestTimeSeconds') || 30
 
     this.waitForFlags(([])).then(() => {
+      /* It's important that CWV api, like "onLCP", is called before the **scheduler** is initialized. The reason is because they listen to the same
+        on vis change or pagehide events, and we'd want ex. onLCP to record the timing (win the race) before we try to send "final harvest". */
       firstPaint.subscribe(this.#handleVitalMetric)
       firstContentfulPaint.subscribe(this.#handleVitalMetric)
       firstInputDelay.subscribe(this.#handleVitalMetric)
       largestContentfulPaint.subscribe(this.#handleVitalMetric)
       interactionToNextPaint.subscribe(this.#handleVitalMetric)
-      timeToFirstByte.subscribe(({ entries }) => {
-        this.addTiming('load', Math.round(entries[0].loadEventEnd))
+      timeToFirstByte.subscribe(({ attrs }) => {
+        this.addTiming('load', Math.round(attrs.navigationEntry.loadEventEnd))
       })
+      subscribeToVisibilityChange(() => {
+        /* Downstream, the event consumer interprets all timing node value as ms-unit and converts it to seconds via division by 1000. CLS is unitless so this normally is a problem.
+          bel.6 schema also doesn't support decimal values, of which cls within [0,1). However, the two nicely cancels out, and we can multiply cls by 1000 to both negate the division
+          and send an integer > 1. We effectively lose some precision down to 3 decimal places for this workaround. E.g. (real) 0.749132... -> 749.132...-> 749 -> 0.749 (final) */
+        const { name, value, attrs } = cumulativeLayoutShift.current
+        if (value === undefined) return
+        this.addTiming(name, value * 1000, attrs)
+      }, true) // CLS node should only reports on vis change rather than on every change
 
       const scheduler = new HarvestScheduler('events', {
         onFinished: (...args) => this.onHarvestFinished(...args),
@@ -102,8 +111,9 @@ export class Aggregate extends AggregateBase {
     Issue: Because NR 'pageHide' was only sent once with what is considered the "final" CLS value, in the case that 'pageHide' fires before 'load' happens, we incorrectly a final CLS of 0 for that page.
     Mitigation: We've set initial CLS to null so that it's omitted from timings like 'pageHide' in that edge case. It should only be included if onCLS callback was executed at least once.
     Future: onCLS value changes should be reported directly & CLS separated into its own timing node so it's not beholden to 'pageHide' firing. It'd also be possible to report the real final CLS.
+    *cli Mar'24 update: CLS now emitted as its own timing node in addition to as-property under other nodes. The 'cls' property is unnecessary for cls nodes.
     */
-    if (cumulativeLayoutShift.current.value >= 0) {
+    if (name !== VITAL_NAMES.CUMULATIVE_LAYOUT_SHIFT && cumulativeLayoutShift.current.value >= 0) {
       attrs.cls = cumulativeLayoutShift.current.value
     }
 

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

@@ -5,10 +5,10 @@
 import { handle } from '../../../common/event-emitter/handle'
 import { subscribeToVisibilityChange } from '../../../common/window/page-visibility'
 import { windowAddEventListener } from '../../../common/event-listener/event-listener-opts'
-import { now } from '../../../common/timing/now'
 import { InstrumentBase } from '../../utils/instrument-base'
 import { FEATURE_NAME } from '../constants'
 import { isBrowserScope } from '../../../common/constants/runtime'
+import { now } from '../../../common/timing/now'
 
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME