@newrelic/browser-agent 1.254.0 → 1.255.0

package/dist/esm/common/constants/env.npm.js

@@ -6,7 +6,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.254.0";
+export const VERSION = "1.255.0";
 
 /**
  * Exposes the build type of the agent

package/dist/esm/common/context/shared-context.js

@@ -14,7 +14,7 @@ export class SharedContext {
         if (Object.keys(model).includes(key)) this.sharedContext[key] = value;
       });
     } catch (err) {
-      warn('An error occured while setting SharedContext', err);
+      warn('An error occurred while setting SharedContext', err);
     }
   }
 }

package/dist/esm/common/harvest/harvest.js

@@ -9,7 +9,6 @@ import * as submitData from '../util/submit-data';
 import { getLocation } from '../url/location';
 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';
 import { Obfuscator } from '../util/obfuscate';
 import { applyFnToProps } from '../util/traverse';
@@ -17,6 +16,7 @@ import { SharedContext } from '../context/shared-context';
 import { VERSION } from "../constants/env.npm";
 import { isWorkerScope, isIE } from '../constants/runtime';
 import { warn } from '../util/console';
+import { now } from '../timing/now';
 const warnings = {};
 
 /**

package/dist/esm/common/timing/time-keeper.js

@@ -1,6 +1,4 @@
-import { gosNREUM } from '../window/nreum';
 import { globalScope } from '../constants/runtime';
-import { getRuntime } from '../config/config';
 
 /**
  * Class used to adjust the timestamp of harvested data to New Relic server time. This
@@ -8,7 +6,11 @@ import { getRuntime } from '../config/config';
  * 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,56 +24,54 @@ export class TimeKeeper {
    * @type {number}
    */
   #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 = globalScope.performance.timeOrigin || globalScope.performance.timing.navigationStart;
+  }
+  get ready() {
+    return this.#ready;
   }
-  static getTimeKeeperByAgentIdentifier(agentIdentifier) {
-    const nr = gosNREUM();
-    return Object.keys(nr?.initializedAgents || {}).indexOf(agentIdentifier) > -1 ? nr.initializedAgents[agentIdentifier].timeKeeper : undefined;
+  get originTime() {
+    return this.#originTime;
   }
-  get correctedPageOriginTime() {
+  get correctedOriginTime() {
     return this.#correctedOriginTime;
   }
 
   /**
    * Process a rum request to calculate NR server time.
    * @param rumRequest {XMLHttpRequest} The xhr for the rum request
-   * @param rumRequestUrl {string} The full url of the rum request
+   * @param startTime {number} The start time of the RUM request
+   * @param endTime {number} The end time of the RUM request
    */
-  processRumRequest(rumRequest, rumRequestUrl) {
+  processRumRequest(rumRequest, startTime, endTime) {
     const responseDateHeader = rumRequest.getResponseHeader('Date');
     if (!responseDateHeader) {
       throw new Error('Missing date header on rum response.');
     }
-    const resourceEntries = globalScope.performance.getEntriesByName(rumRequestUrl, 'resource');
-    if (!Array.isArray(resourceEntries) || resourceEntries.length === 0) {
-      throw new Error('Missing rum request performance entry.');
-    }
-    let medianRumOffset = 0;
-    let serverOffset = 0;
-    if (typeof resourceEntries[0].responseStart === 'number' && resourceEntries[0].responseStart !== 0) {
-      // Cors is enabled and we can make a more accurate calculation of NR server time
-      medianRumOffset = (resourceEntries[0].responseStart - resourceEntries[0].requestStart) / 2;
-      serverOffset = Math.floor(resourceEntries[0].requestStart + medianRumOffset);
-    } else {
-      // Cors is disabled or erred, we need to use a less accurate calculation
-      medianRumOffset = (resourceEntries[0].responseEnd - resourceEntries[0].fetchStart) / 2;
-      serverOffset = Math.floor(resourceEntries[0].fetchStart + medianRumOffset);
-    }
+    const medianRumOffset = (endTime - startTime) / 2;
+    const serverOffset = Math.floor(startTime + medianRumOffset);
 
     // 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;

package/dist/esm/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';
@@ -7,12 +7,19 @@ if (isBrowserScope) {
   onCLS(_ref => {
     let {
       value,
-      entries
+      attribution,
+      id
     } = _ref;
-    if (cumulativeLayoutShift.roundingMethod(value) === cumulativeLayoutShift.current.value) return;
+    const attrs = {
+      metricId: id,
+      largestShiftTarget: attribution.largestShiftTarget,
+      largestShiftTime: attribution.largestShiftTime,
+      largestShiftValue: attribution.largestShiftValue,
+      loadState: attribution.loadState
+    };
     cumulativeLayoutShift.update({
       value,
-      entries
+      attrs
     });
   }, {
     reportAllChanges: true

package/dist/esm/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';
@@ -16,8 +16,7 @@ if (isBrowserScope) {
         paintEntries.forEach(entry => {
           if (entry.name === 'first-contentful-paint') {
             firstContentfulPaint.update({
-              value: Math.floor(entry.startTime),
-              entries: paintEntries
+              value: Math.floor(entry.startTime)
             });
           }
         });
@@ -29,12 +28,17 @@ if (isBrowserScope) {
     onFCP(_ref => {
       let {
         value,
-        entries
+        attribution
       } = _ref;
       if (initiallyHidden || firstContentfulPaint.isValid) return;
+      const attrs = {
+        timeToFirstByte: attribution.timeToFirstByte,
+        firstByteToFCP: attribution.firstByteToFCP,
+        loadState: attribution.loadState
+      };
       firstContentfulPaint.update({
         value,
-        entries
+        attrs
       });
     });
   }

package/dist/esm/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';
@@ -7,18 +7,20 @@ if (isBrowserScope) {
   onFID(_ref => {
     let {
       value,
-      entries
+      attribution
     } = _ref;
-    if (initiallyHidden || firstInputDelay.isValid || entries.length === 0) return;
+    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/dist/esm/common/vitals/first-paint.js

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

package/dist/esm/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';
@@ -8,15 +8,19 @@ if (isBrowserScope) {
   onINP(_ref => {
     let {
       value,
-      entries,
+      attribution,
       id
     } = _ref;
+    const attrs = {
+      metricId: id,
+      eventTarget: attribution.eventTarget,
+      eventType: attribution.eventType,
+      eventTime: attribution.eventTime,
+      loadState: attribution.loadState
+    };
     interactionToNextPaint.update({
       value,
-      entries,
-      attrs: {
-        metricId: id
-      }
+      attrs
     });
   });
 }

package/dist/esm/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';
@@ -8,26 +8,28 @@ if (isBrowserScope) {
   onLCP(_ref => {
     let {
       value,
-      entries
+      attribution
     } = _ref;
     /* 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...
+    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,
-      entries,
-      ...(entries.length > 0 && {
-        attrs: {
-          size: lcpEntry.size,
-          eid: lcpEntry.id,
-          ...(!!lcpEntry.url && {
-            elUrl: cleanURL(lcpEntry.url)
-          }),
-          ...(!!lcpEntry.element?.tagName && {
-            elTag: lcpEntry.element.tagName
-          })
-        }
-      })
+      attrs
     });
   });
 }

package/dist/esm/common/vitals/long-task.js

@@ -8,7 +8,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

package/dist/esm/common/vitals/time-to-first-byte.js

@@ -1,17 +1,20 @@
 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(_ref => {
     let {
       value,
-      entries
+      attribution
     } = _ref;
-    if (!timeToFirstByte.isValid) timeToFirstByte.update({
+    if (timeToFirstByte.isValid) return;
+    timeToFirstByte.update({
       value,
-      entries
+      attrs: {
+        navigationEntry: attribution.navigationEntry
+      }
     });
   });
 } else {
@@ -23,7 +26,9 @@ if (isBrowserScope && typeof PerformanceNavigationTiming !== 'undefined' && !isi
     // 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]
+      attrs: {
+        navigationEntry: entry
+      }
     });
   }
 }

package/dist/esm/common/vitals/vital-metric.js

@@ -9,20 +9,18 @@ export class VitalMetric {
   update(_ref) {
     let {
       value,
-      entries = [],
       attrs = {}
     } = _ref;
     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
       }
@@ -32,7 +30,6 @@ export class VitalMetric {
     return this.history[this.history.length - 1] || {
       value: undefined,
       name: this.name,
-      entries: [],
       attrs: {}
     };
   }

package/dist/esm/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',
   errorBeacon: 'bam.nr-data.net'

package/dist/esm/features/ajax/aggregate/index.js

@@ -29,7 +29,8 @@ export class Aggregate extends AggregateBase {
       scheduler.startTimer(harvestTimeSeconds);
       this.drain();
     });
-    const denyList = getRuntime(agentIdentifier).denyList;
+    const agentRuntime = getRuntime(agentIdentifier);
+    const denyList = agentRuntime.denyList;
     setDenyList(denyList);
     let ajaxEvents = [];
     let spaAjaxEvents = {};
@@ -115,7 +116,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/dist/esm/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;
 var origRequest = originals.REQ;

package/dist/esm/features/jserrors/aggregate/index.js

@@ -13,13 +13,13 @@ 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';
 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
@@ -167,7 +167,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);
     }
@@ -184,6 +184,7 @@ export class Aggregate extends AggregateBase {
     }
     if (agentRuntime?.session?.state?.sessionReplayMode) params.hasReplay = true;
     params.firstOccurrenceTimestamp = this.observedAt[bucketHash];
+    params.timestamp = this.observedAt[bucketHash];
     var type = internal ? 'ierr' : 'err';
     var newMetrics = {
       time

package/dist/esm/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,6 +11,7 @@ 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';
 export class Instrument extends InstrumentBase {
   static featureName = FEATURE_NAME;
   #seenErrors = new Set();

package/dist/esm/features/page_action/aggregate/index.js

@@ -89,14 +89,15 @@ export class Aggregate extends AggregateBase {
       width = window.document.documentElement.clientWidth;
       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'
     };
     mapOwn(defaults, set);

package/dist/esm/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;
   constructor(agentIdentifier, aggregator) {
@@ -27,9 +29,9 @@ export class Aggregate extends AggregateBase {
       timeToFirstByte.subscribe(_ref => {
         let {
           value,
-          entries
+          attrs
         } = _ref;
-        const navEntry = entries[0];
+        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
@@ -108,6 +110,7 @@ export class Aggregate extends AggregateBase {
     }
     queryParameters.fp = firstPaint.current.value;
     queryParameters.fcp = firstContentfulPaint.current.value;
+    const rumStartTime = now();
     harvester.send({
       endpoint: 'rum',
       payload: {
@@ -122,16 +125,19 @@ export class Aggregate extends AggregateBase {
         let {
           status,
           responseText,
-          xhr,
-          fullUrl
+          xhr
         } = _ref3;
+        const rumEndTime = now();
         if (status >= 400 || status === 0) {
           // Adding retry logic for the rum call will be a separate change
           this.ee.abort();
           return;
         }
         try {
-          this.timeKeeper.processRumRequest(xhr, fullUrl);
+          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/dist/esm/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;
   #handleVitalMetric = _ref => {
@@ -38,15 +40,13 @@ export class Aggregate extends AggregateBase {
     this.timingsSent = [];
     this.curSessEndRecorded = false;
     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);
     const initialHarvestSeconds = getConfigurationValue(this.agentIdentifier, 'page_view_timing.initialHarvestSeconds') || 10;
     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);
@@ -54,10 +54,23 @@ export class Aggregate extends AggregateBase {
       interactionToNextPaint.subscribe(this.#handleVitalMetric);
       timeToFirstByte.subscribe(_ref2 => {
         let {
-          entries
+          attrs
         } = _ref2;
-        this.addTiming('load', Math.round(entries[0].loadEventEnd));
+        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: function () {
           return _this.onHarvestFinished(...arguments);
@@ -107,8 +120,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;
     }
     this.timings.push({

package/dist/esm/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;
   constructor(agentIdentifier, aggregator) {