@newrelic/browser-agent 1.317.0 → 1.318.0-rc.0

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

@@ -15,8 +15,9 @@ import { firstPaint } from '../../../common/vitals/first-paint'
 import { timeToFirstByte } from '../../../common/vitals/time-to-first-byte'
 import { now } from '../../../common/timing/now'
 import { TimeKeeper } from '../../../common/timing/time-keeper'
+import { send } from '../../../common/harvest/send'
+import { canEnableSessionTracking } from '../../utils/feature-gates'
 import { Obfuscator } from '../../../common/util/obfuscate'
-import { send } from '../../../common/harvest/harvester'
 import { FEATURE_NAMES, FEATURE_TO_ENDPOINT } from '../../../loaders/features/features'
 import { getSubmitMethod } from '../../../common/util/submit-data'
 import { webdriverDetected } from '../../../common/util/webdriver-detection'
@@ -28,6 +29,7 @@ export class Aggregate extends AggregateBase {
   constructor (agentRef) {
     super(agentRef, CONSTANTS.FEATURE_NAME)
 
+    this.isSessionTrackingEnabled = canEnableSessionTracking(agentRef.init) && !!agentRef.runtime.session
     this.sentRum = false // flag to facilitate calling sendRum() once externally (by the consent API in agent-session.js)
 
     this.timeToFirstByte = 0
@@ -41,6 +43,17 @@ export class Aggregate extends AggregateBase {
     agentRef.runtime.timeKeeper = new TimeKeeper(agentRef.runtime.session)
 
     if (isBrowserScope) {
+      const cached = this.isSessionTrackingEnabled && agentRef.runtime.session?.state.cachedRumResponse
+      if (cached) {
+        const { app: cachedApp, ...cachedFlags } = cached
+
+        // set the agent runtime objects that require the rum response or entity guid
+        if (!Object.keys(this.agentRef.runtime.appMetadata).length) agentRef.runtime.appMetadata = cachedApp
+        this.drain()
+        agentRef.runtime.harvester.startTimer()
+        activateFeatures(cachedFlags, agentRef)
+      }
+
       timeToFirstByte.subscribe(({ value, attrs }) => {
         const navEntry = attrs.navigationEntry
         this.timeToFirstByte = Math.max(value, this.timeToFirstByte)
@@ -85,7 +98,7 @@ export class Aggregate extends AggregateBase {
       at: info.atts
     }
 
-    if (this.agentRef.runtime.session) queryParameters.fsh = Number(this.agentRef.runtime.session.isNew) // "first session harvest" aka RUM request or PageView event of a session
+    if (this.agentRef.runtime.session) queryParameters.fsh = Number(!this.agentRef.runtime.session.state.cachedRumResponse)
 
     let body = this.obfuscator.traverseAndObfuscateEvents({ ja: { ...customAttributes, webdriverDetected } })
 
@@ -131,6 +144,7 @@ export class Aggregate extends AggregateBase {
   postHarvestCleanup ({ sent, status, responseText, xhr, retry }) {
     const rumEndTime = now()
     let app, flags
+    const hasCachedRumResponse = !!this.agentRef.runtime.session?.state.cachedRumResponse
     try {
       ({ app, ...flags } = JSON.parse(responseText))
     } catch (error) {
@@ -138,16 +152,24 @@ export class Aggregate extends AggregateBase {
       warn(53, error)
     }
 
-    super.postHarvestCleanup({ sent, retry }) // this will set isRetrying & re-buffer the body if request is to be retried
+    const shouldCacheResponse = this.isSessionTrackingEnabled && !hasCachedRumResponse && !!app
+    if (hasCachedRumResponse) {
+      let { app: cachedApp, ...cachedFlags } = this.agentRef.runtime.session.state.cachedRumResponse
+      app ??= cachedApp
+      flags = cachedFlags
+    }
+
+    super.postHarvestCleanup({ sent, retry: retry && !hasCachedRumResponse }) // this will set isRetrying & re-buffer the body if request is to be retried
+
     if (this.isRetrying && this.retries++ < 1) { // Only retry once
       setTimeout(() => this.agentRef.runtime.harvester.triggerHarvestFor(this, {
         sendEmptyBody: true
       }), 5000) // Retry sending the RUM event after 5 seconds
       return
     }
+
     if (status >= 400 || status === 0) {
       warn(18, status)
-      this.blocked = true
 
       // Get estimated payload size of our backlog
       const textEncoder = new TextEncoder()
@@ -159,16 +181,24 @@ export class Aggregate extends AggregateBase {
       }, 0)
       const BCSError = 'BCS/Error/'
       // Send SMs about failed RUM request
-      const body = {
-        sm: [{
-          params: {
-            name: BCSError + status
-          },
-          stats: {
-            c: 1
-          }
+      const sm = [{
+        params: {
+          name: BCSError + status
         },
-        {
+        stats: {
+          c: 1
+        }
+      }, {
+        params: {
+          name: BCSError + 'Duration/Ms'
+        },
+        stats: {
+          c: 1,
+          t: rumEndTime - this.rumStartTime
+        }
+      }]
+      if (!hasCachedRumResponse) {
+        sm.push({
           params: {
             name: BCSError + 'Dropped/Bytes'
           },
@@ -176,28 +206,23 @@ export class Aggregate extends AggregateBase {
             c: 1,
             t: payloadSize
           }
-        },
-        {
-          params: {
-            name: BCSError + 'Duration/Ms'
-          },
-          stats: {
-            c: 1,
-            t: rumEndTime - this.rumStartTime
-          }
-        }]
+        })
       }
 
       send(this.agentRef, {
         endpoint: FEATURE_TO_ENDPOINT[FEATURE_NAMES.metrics],
-        payload: { body },
+        payload: { body: { sm } },
         submitMethod: getSubmitMethod(),
         featureName: FEATURE_NAMES.metrics
       })
 
-      // Adding retry logic for the rum call will be a separate change; this.blocked will need to be changed since that prevents another triggerHarvestFor()
-      this.ee.abort()
-      return
+      if (!hasCachedRumResponse) {
+        this.blocked = true
+        this.ee.abort()
+        return
+      }
+    } else if (shouldCacheResponse) {
+      this.agentRef.runtime.session.write({ cachedRumResponse: { app, ...flags } })
     }
 
     try {

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

@@ -27,7 +27,7 @@ import { Obfuscator } from '../../../common/util/obfuscate'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
-  mode = MODE.OFF
+  mode = null
 
   // pass the recorder into the aggregator
   constructor (agentRef, args) {
@@ -74,7 +74,7 @@ export class Aggregate extends AggregateBase {
       if (!this.recorder) return
       // if the mode changed on a different tab, it needs to update this instance to match
       this.mode = agentRef.runtime.session.state.sessionReplayMode
-      if (!this.initialized || this.mode === MODE.OFF) return
+      if (!this.initialized || this.mode === MODE.OFF || !this.mode) return
       this.recorder?.startRecording(TRIGGERS.RESUME, this.mode)
     })
 
@@ -97,6 +97,8 @@ export class Aggregate extends AggregateBase {
     this.waitForFlags(['srs', 'sr']).then(([srMode, entitled]) => {
       this.entitled = !!entitled
       if (!this.entitled) {
+        this.mode = MODE.OFF
+        this.#writeToStorage({ sessionReplayMode: this.mode })
         this.deregisterDrain()
         if (this.agentRef.runtime.isRecording) {
           this.abort(ABORT_REASONS.ENTITLEMENTS)
@@ -106,7 +108,7 @@ export class Aggregate extends AggregateBase {
       }
       this.initializeRecording(srMode).then(() => { this.drain() })
     }).then(() => {
-      if (this.mode === MODE.OFF) {
+      if (!this.mode) {
         this.recorder?.stopRecording() // stop any conservative preload recording launched by instrument
         while (this.recorder?.getEvents().events.length) this.recorder?.clearBuffer?.()
       }
@@ -143,7 +145,7 @@ export class Aggregate extends AggregateBase {
     // if the error was noticed AFTER the recorder was already imported....
     if (this.recorder && this.initialized) {
       if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(TRIGGERS.SWITCH_TO_FULL, this.mode) // off --> full
-      this.syncWithSessionManager({ sessionReplayMode: this.mode })
+      this.#writeToStorage({ sessionReplayMode: this.mode })
     } else {
       this.initializeRecording(MODE.FULL, true, TRIGGERS.SWITCH_TO_FULL)
     }
@@ -171,35 +173,36 @@ export class Aggregate extends AggregateBase {
 
     if (this.recorder?.trigger === TRIGGERS.API && this.agentRef.runtime.isRecording) {
       this.mode = MODE.FULL
-    } else if (!session.isNew && !ignoreSession) { // inherit the mode of the existing session
+    } else if (session.state.sessionReplayMode !== null && !ignoreSession) { // inherit the mode of the existing session
       this.mode = session.state.sessionReplayMode
     } else {
       // The session is new... determine the mode the new session should start in
       this.mode = srMode
     }
-    // If off, then don't record (early return)
-    if (this.mode === MODE.OFF) return
 
-    try {
-      /** will return a recorder instance if already imported, otherwise, will fetch the recorder and initialize it */
-      this.recorder ??= await this.instrumentClass.importRecorder()
-    } catch (err) {
-      /** if the recorder fails to import, abort the feature */
-      return this.abort(ABORT_REASONS.IMPORT, err)
-    }
-
-    // If an error was noticed before the mode could be set (like in the early lifecycle of the page), immediately set to FULL mode
-    if (this.mode === MODE.ERROR && this.instrumentClass.errorNoticed) { this.mode = MODE.FULL }
+    if (this.mode !== MODE.OFF) {
+      try {
+        /** will return a recorder instance if already imported, otherwise, will fetch the recorder and initialize it */
+        this.recorder ??= await this.instrumentClass.importRecorder()
+      } catch (err) {
+        /** if the recorder fails to import, abort the feature */
+        return this.abort(ABORT_REASONS.IMPORT, err)
+      }
 
-    // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
-    // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
-    // The makeHarvestPayload should ensure that no payload is returned if we're not in FULL mode...
+      // If an error was noticed before the mode could be set (like in the early lifecycle of the page), immediately set to FULL mode
+      if (this.mode === MODE.ERROR && this.instrumentClass.errorNoticed) {
+        this.mode = MODE.FULL
+      }
 
-    await this.prepUtils()
+      // FULL mode records AND reports from the beginning, while ERROR mode only records (but does not report).
+      // ERROR mode will do this until an error is thrown, and then switch into FULL mode.
+      // The makeHarvestPayload should ensure that no payload is returned if we're not in FULL mode...
 
-    if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(trigger, this.mode)
+      await this.prepUtils()
 
-    this.syncWithSessionManager({ sessionReplayMode: this.mode })
+      if (!this.agentRef.runtime.isRecording) this.recorder.startRecording(trigger, this.mode)
+    }
+    this.#writeToStorage({ sessionReplayMode: this.mode })
   }
 
   async prepUtils () {
@@ -246,7 +249,7 @@ export class Aggregate extends AggregateBase {
       return
     }
 
-    if (!this.agentRef.runtime.session.state.sessionReplaySentFirstChunk) this.syncWithSessionManager({ sessionReplaySentFirstChunk: true })
+    if (!this.agentRef.runtime.session.state.sessionReplaySentFirstChunk) this.#writeToStorage({ sessionReplaySentFirstChunk: true })
     this.recorder.clearBuffer()
 
     if (!this.agentRef.runtime.session.state.traceHarvestStarted) {
@@ -370,7 +373,7 @@ export class Aggregate extends AggregateBase {
     if (forceHarvest) this.agentRef.runtime.harvester.triggerHarvestFor(this)
     this.mode = MODE.OFF
     this.recorder?.stopRecording?.()
-    this.syncWithSessionManager({ sessionReplayMode: this.mode })
+    this.#writeToStorage({ sessionReplayMode: this.mode })
   }
 
   /** Abort the feature, once aborted it will not resume */
@@ -380,12 +383,12 @@ export class Aggregate extends AggregateBase {
     this.blocked = true
     this.mode = MODE.OFF
     this.recorder?.stopRecording?.()
-    this.syncWithSessionManager({ sessionReplayMode: this.mode })
+    this.#writeToStorage({ sessionReplayMode: this.mode })
     this.recorder?.clearTimestamps?.()
     while (this.recorder?.getEvents().events.length) this.recorder?.clearBuffer?.()
   }
 
-  syncWithSessionManager (state = {}) {
+  #writeToStorage (state = {}) {
     if (this.isSessionTrackingEnabled) {
       this.agentRef.runtime.session.write(state)
     }

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { registerHandler } from '../../../common/event-emitter/register-handler'
-import { FEATURE_NAME } from '../constants'
+import { ABORT_REASONS, FEATURE_NAME } from '../constants'
 import { AggregateBase } from '../../utils/aggregate-base'
 import { TraceStorage } from './trace/storage'
 import { obj as encodeObj } from '../../../common/url/encode'
@@ -43,8 +43,10 @@ export class Aggregate extends AggregateBase {
   /** Sets up event listeners, and initializes this module to run in the correct "mode".  Can be triggered from a few places, but makes an effort to only set up listeners once */
   initialize (stMode, stEntitled, ignoreSession) {
     this.entitled ??= stEntitled
-    if (!this.entitled) this.blocked = true
-    if (this.blocked) return this.deregisterDrain()
+    if (!this.entitled) {
+      this.abort(ABORT_REASONS.ENTITLEMENTS)
+      return this.deregisterDrain()
+    }
     this.timeKeeper ??= this.agentRef.runtime.timeKeeper
 
     if (!this.initialized) {
@@ -55,7 +57,7 @@ export class Aggregate extends AggregateBase {
       // The SessionEntity class can emit a message indicating the session was cleared and reset (expiry, inactivity). This feature must abort and never resume if that occurs.
       this.ee.on(SESSION_EVENTS.RESET, () => {
         if (this.blocked) return
-        this.abort(1)
+        this.abort(ABORT_REASONS.RESET)
       })
       // The SessionEntity can have updates (locally or across tabs for SR mode changes), (across tabs for ST mode changes).
       // Those updates should be sync'd here to ensure this page also honors the mode after initialization
@@ -64,7 +66,7 @@ export class Aggregate extends AggregateBase {
         // this will only have an effect if ST is NOT already in full mode
         if (this.mode !== MODE.FULL && (sessionState.sessionReplayMode === MODE.FULL || sessionState.sessionTraceMode === MODE.FULL)) this.switchToFull()
         // if another page's session entity has expired, or another page has transitioned to off and this one hasn't... we can just abort straight away here
-        if (this.sessionId !== sessionState.value || (eventType === 'cross-tab' && sessionState.sessionTraceMode === MODE.OFF)) this.abort(2)
+        if (this.sessionId !== sessionState.value || (eventType === 'cross-tab' && sessionState.sessionTraceMode === MODE.OFF)) this.abort(ABORT_REASONS.CROSS_TAB)
       })
 
       if (typeof PerformanceNavigationTiming !== 'undefined' && globalScope.performance?.getEntriesByType('navigation')?.length > 0) {
@@ -76,30 +78,31 @@ export class Aggregate extends AggregateBase {
 
     /** ST/SR sampling flow in BCS - https://drive.google.com/file/d/19hwt2oft-8Hh4RrjpLqEXfpP_9wYBLcq/view?usp=sharing */
     /** ST will run in the mode provided by BCS if the session IS NEW.  If not... it will use the state of the session entity to determine what mode to run in */
-    if (!this.agentRef.runtime.session.isNew && !ignoreSession) this.mode = this.agentRef.runtime.session.state.sessionTraceMode
+    if (this.agentRef.runtime.session.state.sessionTraceMode !== null && !ignoreSession) this.mode = this.agentRef.runtime.session.state.sessionTraceMode
     else this.mode = stMode
 
-    /** If the mode is off, we do not want to hold up draining for other features, so we deregister the feature for now.
-     * If it drains later (due to a mode change), data and handlers will instantly drain instead of waiting for the registry. */
-    if (this.mode === MODE.OFF) return this.deregisterDrain()
-
-    /** The handlers set up by the Inst file */
-    registerHandler('bst', (...args) => this.traceStorage.storeEvent(...args), this.featureName, this.ee)
-    registerHandler('bstResource', (...args) => this.traceStorage.storeResources(...args), this.featureName, this.ee)
-    registerHandler('bstHist', (...args) => this.traceStorage.storeHist(...args), this.featureName, this.ee)
-    registerHandler('bstXhrAgg', (...args) => this.traceStorage.storeXhrAgg(...args), this.featureName, this.ee)
-    registerHandler('bstApi', (...args) => this.traceStorage.storeNode(...args), this.featureName, this.ee)
-    registerHandler('trace-jserror', (...args) => this.traceStorage.storeErrorAgg(...args), this.featureName, this.ee)
-    registerHandler('pvtAdded', (...args) => this.traceStorage.processPVT(...args), this.featureName, this.ee)
-
-    if (this.mode !== MODE.FULL) {
-      /** A separate handler for noticing errors, and switching to "full" mode if running in "error" mode */
-      registerHandler('trace-jserror', () => {
-        if (this.mode === MODE.ERROR) this.switchToFull()
-      }, this.featureName, this.ee)
+    if (this.mode !== MODE.OFF) {
+      /** The handlers set up by the Inst file */
+      registerHandler('bst', (...args) => this.traceStorage.storeEvent(...args), this.featureName, this.ee)
+      registerHandler('bstResource', (...args) => this.traceStorage.storeResources(...args), this.featureName, this.ee)
+      registerHandler('bstHist', (...args) => this.traceStorage.storeHist(...args), this.featureName, this.ee)
+      registerHandler('bstXhrAgg', (...args) => this.traceStorage.storeXhrAgg(...args), this.featureName, this.ee)
+      registerHandler('bstApi', (...args) => this.traceStorage.storeNode(...args), this.featureName, this.ee)
+      registerHandler('trace-jserror', (...args) => this.traceStorage.storeErrorAgg(...args), this.featureName, this.ee)
+      registerHandler('pvtAdded', (...args) => this.traceStorage.processPVT(...args), this.featureName, this.ee)
+
+      if (this.mode === MODE.ERROR) {
+        /** A separate handler for noticing errors, and switching to "full" mode if running in "error" mode */
+        registerHandler('trace-jserror', () => {
+          if (this.mode === MODE.ERROR) this.switchToFull()
+        }, this.featureName, this.ee)
+      }
     }
     this.agentRef.runtime.session.write({ sessionTraceMode: this.mode })
-    this.drain()
+
+    /** If the mode is off, we do not want to hold up draining for other features, so we deregister the feature for now.
+     * If it drains later (due to a mode change), data and handlers will instantly drain instead of waiting for the registry. */
+    this.mode === MODE.OFF ? this.deregisterDrain() : this.drain()
   }
 
   preHarvestChecks () {
@@ -108,7 +111,7 @@ export class Aggregate extends AggregateBase {
     if (!this.agentRef.runtime.session) return // session entity is required for trace to run and continue running
     if (this.sessionId !== this.agentRef.runtime.session.state.value || this.ptid !== this.agentRef.runtime.ptid) {
       // If something unexpected happened and we somehow still got to harvesting after a session identifier changed, we should force-exit instead of harvesting:
-      this.abort(3)
+      this.abort(ABORT_REASONS.SESSION_CHANGED)
       return
     }
 
@@ -185,8 +188,8 @@ export class Aggregate extends AggregateBase {
   }
 
   /** Stop running for the remainder of the page lifecycle */
-  abort (code) {
-    warn(60, code)
+  abort (reason = {}) {
+    warn(60, reason.message)
     this.blocked = true
     this.mode = MODE.OFF
     this.agentRef.runtime.session.write({ sessionTraceMode: this.mode })

package/src/features/session_trace/constants.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 import { FEATURE_NAMES } from '../../loaders/features/features'
@@ -14,3 +14,9 @@ export const FN_END = 'fn' + END
 export const PUSH_STATE = 'pushState'
 export const MAX_NODES_PER_HARVEST = 1000
 export const ERROR_MODE_SECONDS_WINDOW = 30 * 1000 // sliding window of nodes to track when simply monitoring (but not harvesting) in error mode
+export const ABORT_REASONS = {
+  CROSS_TAB: { message: 'Session Entity was set to OFF on another tab' },
+  ENTITLEMENTS: { message: 'Session Trace is not allowed and will not be started' },
+  RESET: { message: 'Session was reset' },
+  SESSION_CHANGED: { message: 'Session identifier changed unexpectedly' }
+}

package/src/features/utils/aggregate-base.js

@@ -11,6 +11,7 @@ import { handle } from '../../common/event-emitter/handle'
 import { SUPPORTABILITY_METRIC_CHANNEL } from '../metrics/constants'
 import { EventAggregator } from '../../common/aggregate/event-aggregator'
 import { MAX_PAYLOAD_SIZE, IDEAL_PAYLOAD_SIZE, SUPPORTS_REGISTERED_ENTITIES } from '../../common/constants/agent-constants'
+import { warn } from '../../common/util/console'
 
 export class AggregateBase extends FeatureBase {
   /**
@@ -114,6 +115,7 @@ export class AggregateBase extends FeatureBase {
       }
       function buildOutput (ref) {
         return flagNames.map(flag => {
+          if (ref[flag] === undefined || ref[flag] === null) warn(71, flag)
           if (!ref[flag]) return 0
           return ref[flag]
         })

package/src/loaders/api/register.js

@@ -18,6 +18,7 @@ import { measure } from './measure'
 import { recordCustomEvent } from './recordCustomEvent'
 import { subscribeToPageUnload } from '../../common/window/page-visibility'
 import { findScriptTimings } from '../../common/v2/script-tracker'
+import { trackMFEVitals } from '../../common/v2/mfe-vitals'
 import { generateRandomHexString } from '../../common/ids/unique-id'
 
 /**
@@ -83,6 +84,9 @@ function register (agentRef, target) {
 
   const timings = findScriptTimings()
 
+  // Track MFE vitals for this entity
+  const vitals = trackMFEVitals(target.id, timings)
+
   const attrs = {}
 
   // Only define attributes getter if it doesn't already exist
@@ -149,7 +153,8 @@ function register (agentRef, target) {
     metadata: {
       get customAttributes () { return attrs },
       target,
-      timings
+      timings,
+      vitals
     }
   }
 
@@ -177,9 +182,18 @@ function register (agentRef, target) {
     // only ever report the timings the first time this is called
     if (timings.reportedAt) return
     timings.reportedAt = now()
+
+    // Disconnect observers and capture current values, store in timings obj for visibility
+    vitals.disconnect()
+    timings.fcp = vitals.fcp
+    timings.lcp = vitals.lcp
+    timings.cls = vitals.cls
+    timings.inp = vitals.inp
+
     const timeToFetch = timings.fetchEnd - timings.fetchStart // fetchStart to fetchEnd
     const timeToExecute = timings.scriptEnd - timings.scriptStart // scriptStart to scriptEnd
-    api.recordCustomEvent('MicroFrontEndTiming', {
+
+    const eventData = {
       assetUrl: timings.asset, // the url of the script that was registered, or undefined if it could not be determined (inline or no match)
       assetType: timings.type, // the type of asset that was associated with the timings, one of 'script', 'link' (if preloaded and found in the resource timing buffer), 'preload' (if preloaded but not found in the resource timing buffer), or "unknown" if it could not be determined
       timeAlive: timings.reportedAt - timings.registeredAt, // registeredAt to reportedAt
@@ -187,8 +201,15 @@ function register (agentRef, target) {
       timeToExecute, // scriptStart to scriptEnd
       timeToFetch, // fetchStart to fetchEnd
       timeToLoad: timeToFetch + timeToExecute, // fetch time and script time together
-      timeToRegister: timings.registeredAt // timestamp when register() was called
-    })
+      timeToRegister: timings.registeredAt, // timestamp when register() was called
+      // leave room to extend these with more data keys as needed
+      'nr.vitals.fcp.value': vitals.fcp?.value ?? null, // FCP vital object with value and metadata
+      'nr.vitals.lcp.value': vitals.lcp?.value ?? null, // LCP vital object with value and metadata
+      'nr.vitals.cls.value': vitals.cls?.value ?? null, // CLS vital object with value and metadata
+      'nr.vitals.inp.value': vitals.inp?.value ?? null // INP vital object with value and metadata
+    }
+
+    api.recordCustomEvent('MicroFrontEndTiming', eventData)
   }
 
   /**