@newrelic/browser-agent 1.318.0-rc.9 → 1.319.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.319.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.318.0...v1.319.0) (2026-07-28)
+
+
+### Features
+
+* Automatically Detect MFE Web Sockets ([#1726](https://github.com/newrelic/newrelic-browser-agent/issues/1726)) ([746d055](https://github.com/newrelic/newrelic-browser-agent/commit/746d05504c451b954cd0d2b86b92415c22293f2a))
+* Do not obfuscate attribute keys ([#1810](https://github.com/newrelic/newrelic-browser-agent/issues/1810)) ([c5d9a77](https://github.com/newrelic/newrelic-browser-agent/commit/c5d9a773470d670cb27b63777dd035934f1dbfd9))
+* MFE vitals improvements ([#1813](https://github.com/newrelic/newrelic-browser-agent/issues/1813)) ([21f38a9](https://github.com/newrelic/newrelic-browser-agent/commit/21f38a9af35f5204a47be02bfa2a73d41d8ba1f6))
+
+
+### Bug Fixes
+
+* Avoid capturing agent AJAX payloads ([#1812](https://github.com/newrelic/newrelic-browser-agent/issues/1812)) ([ba069fc](https://github.com/newrelic/newrelic-browser-agent/commit/ba069fcea5f381db698044b84064bbba97676cec))
+* Keep Ajax payload out of unrelated events ([#1809](https://github.com/newrelic/newrelic-browser-agent/issues/1809)) ([b0cb098](https://github.com/newrelic/newrelic-browser-agent/commit/b0cb098d0ea36d1d35212355bc51051f3c02c1ae))
+
 ## [1.318.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.317.0...v1.318.0) (2026-07-08)
 
 

package/dist/cjs/common/constants/env.cdn.js

@@ -17,7 +17,7 @@ exports.VERSION = exports.RRWEB_VERSION = exports.RRWEB_PACKAGE_NAME = exports.D
 /**
  * Exposes the version of the agent
  */
-const VERSION = exports.VERSION = "1.318.0-rc.9";
+const VERSION = exports.VERSION = "1.319.0-rc.0";
 
 /**
  * Exposes the build type of the agent

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

@@ -17,7 +17,7 @@ exports.VERSION = exports.RRWEB_VERSION = exports.RRWEB_PACKAGE_NAME = exports.D
 /**
  * Exposes the version of the agent
  */
-const VERSION = exports.VERSION = "1.318.0-rc.9";
+const VERSION = exports.VERSION = "1.319.0-rc.0";
 
 /**
  * Exposes the build type of the agent

package/dist/cjs/common/v2/mfe-vitals.js

@@ -12,7 +12,9 @@ var _now = require("../timing/now");
  */
 
 /**
- * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPITimings} RegisterAPITimings
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPITarget} RegisterAPITarget
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPIVitals} RegisterAPIVitals
  */
 
 const isObservable = node => {
@@ -22,6 +24,15 @@ const isObservable = node => {
     return false;
   }
 };
+const isMatch = (dataset, target) => dataset?.nrMfeId === target.id && (!dataset?.nrMfeObserved || dataset?.nrMfeObserved === target.instance);
+const escapeSelectorValue = value => {
+  try {
+    return _runtime.globalScope.CSS.escape(value);
+  } catch (e) {
+    // give up
+    return value;
+  }
+};
 
 /**
  * Check if node is within a specific MFE
@@ -29,12 +40,17 @@ const isObservable = node => {
  * @param {string} id - MFE ID to match
  * @returns {boolean}
  */
-const isInMFE = (node, id) => {
-  if (!node || !id) return false;
+const isInMFE = (node, target = {}) => {
+  const id = target.id;
+  const instance = target.instance;
+  if (!node || !id || !instance) return false;
   try {
     let curr = node.nodeType === 1 ? node : node.parentElement;
     while (curr?.tagName) {
-      if (curr.dataset?.nrMfeId === id) return true;
+      if (isMatch(curr.dataset, target)) {
+        curr.dataset.nrMfeObserved = instance; // mark that this MFE has been observed for vitals
+        return true;
+      }
       curr = curr.parentNode;
     }
   } catch (e) {}
@@ -47,16 +63,19 @@ const isInMFE = (node, id) => {
  * @param {Function} onMatch - Callback when matching node is *added*
  * @returns {MutationObserver}
  */
-const observeMutations = (id, onMatch) => {
+const observeMutations = (target, onMatch) => {
   // Try to find existing MFE root
-  const mfeRoot = _runtime.globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"));
+  const potentialMatches = _runtime.globalScope.document?.querySelectorAll("[data-nr-mfe-id=\"".concat(escapeSelectorValue(target.id), "\"]"));
+  const mfeRoot = (Array.from(potentialMatches) || []).find(x => isMatch(x.dataset, target));
   let observingRoot = !!mfeRoot;
+  if (observingRoot) mfeRoot.dataset.nrMfeObserved ??= target.instance; // mark that this MFE has been observed for vitals
+
   const obs = new _runtime.globalScope.MutationObserver(mutations => {
     mutations.forEach(m => {
       m.addedNodes.forEach(node => {
         // Check if this is the MFE root being added
         const elem = node.nodeType === 1 ? node : null;
-        if (elem?.dataset?.nrMfeId === id) {
+        if (!observingRoot && isMatch(elem?.dataset, target)) {
           // Found the root! Lets switch to observing just this subtree for performance reasons
           obs.disconnect();
           obs.observe(elem, {
@@ -64,10 +83,11 @@ const observeMutations = (id, onMatch) => {
             subtree: true
           });
           observingRoot = true;
+          elem.dataset.nrMfeObserved = target.instance; // mark that this MFE has been observed for vitals
         }
 
         // Only check isInMFE if we're observing the whole document; skip expensive ancestor walk when observing root
-        if (isObservable(node) && (observingRoot || isInMFE(node, id))) {
+        if (isObservable(node) && (observingRoot || isInMFE(node, target))) {
           onMatch(node, obs);
         }
       });
@@ -104,14 +124,15 @@ const observePerformance = (observers, config, onEntry) => {
 
 /**
  * Tracks all Core Web Vitals for a specific MFE.
- * @param {string} id - The MFE ID to track
- * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
+ * @param {RegisterAPITarget} target - The MFE target to track vitals for
+ * @param {RegisterAPITimings} timings - The timings object to use for relative time calculations
+ * @returns {RegisterAPIVitals} An object containing the vitals values and a disconnect method to stop tracking
  */
-function trackMFEVitals(id, timings) {
-  let fcpObservedAt = null;
-  let lcpObservedAt = null;
+function trackMFEVitals(target, timings) {
+  let fcpObservedAt;
+  let lcpObservedAt;
   const getTimeRelativeToScriptStart = capturedAt => {
-    if (capturedAt === null) return null;
+    if (capturedAt == null) return capturedAt;
     return capturedAt - (timings?.scriptStart || timings?.registeredAt || 0);
   };
   const vitals = {
@@ -126,15 +147,21 @@ function trackMFEVitals(id, timings) {
       }
     },
     cls: {
-      value: null
+      value: undefined
     },
     inp: {
-      value: null
+      value: undefined
     },
     disconnect: () => {}
   };
-  if (!id || !_runtime.isBrowserScope || !_runtime.globalScope.MutationObserver || !_runtime.globalScope.PerformanceObserver) return vitals;
+  if (!target || !_runtime.isBrowserScope || !_runtime.globalScope.MutationObserver || !_runtime.globalScope.PerformanceObserver) return vitals;
   const observers = [];
+
+  // If FCP hasn't been observed within 10 seconds, give up and shut down all observers.
+  // Once FCP is observed, the other vitals are left to record until their natural lifespan ends.
+  setTimeout(() => {
+    if (!fcpObservedAt) vitals.disconnect();
+  }, 10000);
   const populateVitalMinimums = () => {
     fcpObservedAt ??= (0, _now.now)();
     lcpObservedAt ??= (0, _now.now)();
@@ -142,14 +169,16 @@ function trackMFEVitals(id, timings) {
   };
 
   // if the MFE has already rendered something on the page before we could set up listeners, just populate vital minimums immediately
-  if (_runtime.globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"))) populateVitalMinimums();
+  const existingRoots = _runtime.globalScope.document?.querySelectorAll("[data-nr-mfe-id=\"".concat(escapeSelectorValue(target.id), "\"]"));
+  if (Array.from(existingRoots || []).some(x => isMatch(x.dataset, target))) populateVitalMinimums();
 
   // Track FCP - first contentful paint
-  observeMutations(id, (_, obs) => {
+  const fcpObs = observeMutations(target, (_, obs) => {
     // An observed "FCP" means _something_ rendered, so at minimum we can populate all the baseline values for the vitals
     populateVitalMinimums();
     obs.disconnect();
   });
+  observers.push(fcpObs);
 
   // Track LCP - largest contentful paint
   let largestSize = 0;
@@ -173,7 +202,7 @@ function trackMFEVitals(id, timings) {
   } catch (e) {
     // ResizeObserver not supported
   }
-  const lcpObs = observeMutations(id, node => {
+  const lcpObs = observeMutations(target, node => {
     // an observed "LCP" means _something_ rendered, so at minimum we can make sure all the baseline values are populated for the vitals
     populateVitalMinimums();
     if (resizeObs) {
@@ -225,7 +254,7 @@ function trackMFEVitals(id, timings) {
   }, entry => {
     if (entry.hadRecentInput) return;
     (entry.sources || []).some(source => {
-      if (isInMFE(source.node, id)) {
+      if (isInMFE(source.node, target)) {
         // an observed "CLS" means _something_ rendered for the MFE, so at minimum we can make sure all the baseline values are populated for the vitals
         populateVitalMinimums();
         vitals.cls.value += entry.value;
@@ -241,8 +270,8 @@ function trackMFEVitals(id, timings) {
     buffered: true,
     durationThreshold: 40
   }, entry => {
-    if (!entry.interactionId || !isInMFE(entry.target, id)) return;
-    if (vitals.inp.value === null || entry.duration > vitals.inp.value) {
+    if (!entry.interactionId || !isInMFE(entry.target, target)) return;
+    if (vitals.inp.value === undefined || entry.duration > vitals.inp.value) {
       // an observed "INP" means _something_ rendered for the MFE, so at minimum we can make sure all the baseline values are populated for the vitals
       populateVitalMinimums();
       vitals.inp.value = entry.duration;
@@ -268,6 +297,12 @@ function trackMFEVitals(id, timings) {
       }
     });
     disconnectInteractionListeners();
+    ['visibilitychange', 'pagehide'].forEach(type => {
+      _runtime.globalScope.removeEventListener(type, vitals.disconnect, {
+        once: true,
+        passive: true
+      });
+    });
   };
 
   // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
@@ -281,7 +316,7 @@ function trackMFEVitals(id, timings) {
     }
   };
   const handleInteraction = event => {
-    if (!isInMFE(event?.target, id)) return;
+    if (!isInMFE(event?.target, target)) return;
     disconnectLCP();
     disconnectInteractionListeners();
   };

package/dist/cjs/loaders/api/register-api-types.js

@@ -53,4 +53,11 @@ exports.default = void 0;
  * @property {Object} [asset] - The asset path (if found) for the registered entity.
  * @property {string} type - The type of timing associated with the registered entity, 'script' or 'link' if found with the performance resource API, 'fetch' for dynamic imports, 'inline' if found to be associated with the root document URL, or 'unknown' if no associated resource could be found.
  */
+/**
+ * @typedef {Object} RegisterAPIVitals
+ * @property {number} [fcp] - The first contentful paint timing for the registered entity.
+ * @property {number} [lcp] - The largest contentful paint timing for the registered entity.
+ * @property {number} [cls] - The cumulative layout shift score for the registered entity.
+ * @property {number} [inp] - The interaction to next paint timing for the registered entity.
+ */
 var _default = exports.default = {};

package/dist/cjs/loaders/api/register.js

@@ -87,7 +87,7 @@ function register(agentRef, target) {
   const timings = (0, _scriptTracker.findScriptTimings)();
 
   // Track MFE vitals for this entity
-  const vitals = (0, _mfeVitals.trackMFEVitals)(target.id, timings);
+  const vitals = (0, _mfeVitals.trackMFEVitals)(target, timings);
   const attrs = {};
 
   // Only define attributes getter if it doesn't already exist
@@ -233,13 +233,21 @@ function register(agentRef, target) {
       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,
+      ...(vitals.fcp.value >= 0 && {
+        'nr.vitals.fcp.value': vitals.fcp.value
+      }),
       // FCP vital object with value and metadata
-      'nr.vitals.lcp.value': vitals.lcp?.value ?? null,
+      ...(vitals.lcp.value >= 0 && {
+        'nr.vitals.lcp.value': vitals.lcp.value
+      }),
       // LCP vital object with value and metadata
-      'nr.vitals.cls.value': vitals.cls?.value ?? null,
+      ...(vitals.cls.value >= 0 && {
+        'nr.vitals.cls.value': vitals.cls.value
+      }),
       // CLS vital object with value and metadata
-      'nr.vitals.inp.value': vitals.inp?.value ?? null // INP vital object with value and metadata
+      ...(vitals.inp.value >= 0 && {
+        'nr.vitals.inp.value': vitals.inp.value
+      }) // INP vital object with value and metadata
     };
     api.recordCustomEvent('MicroFrontEndTiming', eventData);
   }

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

@@ -11,7 +11,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.318.0-rc.9";
+export const VERSION = "1.319.0-rc.0";
 
 /**
  * Exposes the build type of the agent

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

@@ -11,7 +11,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.318.0-rc.9";
+export const VERSION = "1.319.0-rc.0";
 
 /**
  * Exposes the build type of the agent

package/dist/esm/common/v2/mfe-vitals.js

@@ -7,7 +7,9 @@ import { globalScope, isBrowserScope } from '../constants/runtime';
 import { now } from '../timing/now';
 
 /**
- * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPITimings} RegisterAPITimings
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPITarget} RegisterAPITarget
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPIVitals} RegisterAPIVitals
  */
 
 const isObservable = node => {
@@ -17,6 +19,15 @@ const isObservable = node => {
     return false;
   }
 };
+const isMatch = (dataset, target) => dataset?.nrMfeId === target.id && (!dataset?.nrMfeObserved || dataset?.nrMfeObserved === target.instance);
+const escapeSelectorValue = value => {
+  try {
+    return globalScope.CSS.escape(value);
+  } catch (e) {
+    // give up
+    return value;
+  }
+};
 
 /**
  * Check if node is within a specific MFE
@@ -24,12 +35,17 @@ const isObservable = node => {
  * @param {string} id - MFE ID to match
  * @returns {boolean}
  */
-const isInMFE = (node, id) => {
-  if (!node || !id) return false;
+const isInMFE = (node, target = {}) => {
+  const id = target.id;
+  const instance = target.instance;
+  if (!node || !id || !instance) return false;
   try {
     let curr = node.nodeType === 1 ? node : node.parentElement;
     while (curr?.tagName) {
-      if (curr.dataset?.nrMfeId === id) return true;
+      if (isMatch(curr.dataset, target)) {
+        curr.dataset.nrMfeObserved = instance; // mark that this MFE has been observed for vitals
+        return true;
+      }
       curr = curr.parentNode;
     }
   } catch (e) {}
@@ -42,16 +58,19 @@ const isInMFE = (node, id) => {
  * @param {Function} onMatch - Callback when matching node is *added*
  * @returns {MutationObserver}
  */
-const observeMutations = (id, onMatch) => {
+const observeMutations = (target, onMatch) => {
   // Try to find existing MFE root
-  const mfeRoot = globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"));
+  const potentialMatches = globalScope.document?.querySelectorAll("[data-nr-mfe-id=\"".concat(escapeSelectorValue(target.id), "\"]"));
+  const mfeRoot = (Array.from(potentialMatches) || []).find(x => isMatch(x.dataset, target));
   let observingRoot = !!mfeRoot;
+  if (observingRoot) mfeRoot.dataset.nrMfeObserved ??= target.instance; // mark that this MFE has been observed for vitals
+
   const obs = new globalScope.MutationObserver(mutations => {
     mutations.forEach(m => {
       m.addedNodes.forEach(node => {
         // Check if this is the MFE root being added
         const elem = node.nodeType === 1 ? node : null;
-        if (elem?.dataset?.nrMfeId === id) {
+        if (!observingRoot && isMatch(elem?.dataset, target)) {
           // Found the root! Lets switch to observing just this subtree for performance reasons
           obs.disconnect();
           obs.observe(elem, {
@@ -59,10 +78,11 @@ const observeMutations = (id, onMatch) => {
             subtree: true
           });
           observingRoot = true;
+          elem.dataset.nrMfeObserved = target.instance; // mark that this MFE has been observed for vitals
         }
 
         // Only check isInMFE if we're observing the whole document; skip expensive ancestor walk when observing root
-        if (isObservable(node) && (observingRoot || isInMFE(node, id))) {
+        if (isObservable(node) && (observingRoot || isInMFE(node, target))) {
           onMatch(node, obs);
         }
       });
@@ -99,14 +119,15 @@ const observePerformance = (observers, config, onEntry) => {
 
 /**
  * Tracks all Core Web Vitals for a specific MFE.
- * @param {string} id - The MFE ID to track
- * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
+ * @param {RegisterAPITarget} target - The MFE target to track vitals for
+ * @param {RegisterAPITimings} timings - The timings object to use for relative time calculations
+ * @returns {RegisterAPIVitals} An object containing the vitals values and a disconnect method to stop tracking
  */
-export function trackMFEVitals(id, timings) {
-  let fcpObservedAt = null;
-  let lcpObservedAt = null;
+export function trackMFEVitals(target, timings) {
+  let fcpObservedAt;
+  let lcpObservedAt;
   const getTimeRelativeToScriptStart = capturedAt => {
-    if (capturedAt === null) return null;
+    if (capturedAt == null) return capturedAt;
     return capturedAt - (timings?.scriptStart || timings?.registeredAt || 0);
   };
   const vitals = {
@@ -121,15 +142,21 @@ export function trackMFEVitals(id, timings) {
       }
     },
     cls: {
-      value: null
+      value: undefined
     },
     inp: {
-      value: null
+      value: undefined
     },
     disconnect: () => {}
   };
-  if (!id || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals;
+  if (!target || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals;
   const observers = [];
+
+  // If FCP hasn't been observed within 10 seconds, give up and shut down all observers.
+  // Once FCP is observed, the other vitals are left to record until their natural lifespan ends.
+  setTimeout(() => {
+    if (!fcpObservedAt) vitals.disconnect();
+  }, 10000);
   const populateVitalMinimums = () => {
     fcpObservedAt ??= now();
     lcpObservedAt ??= now();
@@ -137,14 +164,16 @@ export function trackMFEVitals(id, timings) {
   };
 
   // if the MFE has already rendered something on the page before we could set up listeners, just populate vital minimums immediately
-  if (globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"))) populateVitalMinimums();
+  const existingRoots = globalScope.document?.querySelectorAll("[data-nr-mfe-id=\"".concat(escapeSelectorValue(target.id), "\"]"));
+  if (Array.from(existingRoots || []).some(x => isMatch(x.dataset, target))) populateVitalMinimums();
 
   // Track FCP - first contentful paint
-  observeMutations(id, (_, obs) => {
+  const fcpObs = observeMutations(target, (_, obs) => {
     // An observed "FCP" means _something_ rendered, so at minimum we can populate all the baseline values for the vitals
     populateVitalMinimums();
     obs.disconnect();
   });
+  observers.push(fcpObs);
 
   // Track LCP - largest contentful paint
   let largestSize = 0;
@@ -168,7 +197,7 @@ export function trackMFEVitals(id, timings) {
   } catch (e) {
     // ResizeObserver not supported
   }
-  const lcpObs = observeMutations(id, node => {
+  const lcpObs = observeMutations(target, node => {
     // an observed "LCP" means _something_ rendered, so at minimum we can make sure all the baseline values are populated for the vitals
     populateVitalMinimums();
     if (resizeObs) {
@@ -220,7 +249,7 @@ export function trackMFEVitals(id, timings) {
   }, entry => {
     if (entry.hadRecentInput) return;
     (entry.sources || []).some(source => {
-      if (isInMFE(source.node, id)) {
+      if (isInMFE(source.node, target)) {
         // an observed "CLS" means _something_ rendered for the MFE, so at minimum we can make sure all the baseline values are populated for the vitals
         populateVitalMinimums();
         vitals.cls.value += entry.value;
@@ -236,8 +265,8 @@ export function trackMFEVitals(id, timings) {
     buffered: true,
     durationThreshold: 40
   }, entry => {
-    if (!entry.interactionId || !isInMFE(entry.target, id)) return;
-    if (vitals.inp.value === null || entry.duration > vitals.inp.value) {
+    if (!entry.interactionId || !isInMFE(entry.target, target)) return;
+    if (vitals.inp.value === undefined || entry.duration > vitals.inp.value) {
       // an observed "INP" means _something_ rendered for the MFE, so at minimum we can make sure all the baseline values are populated for the vitals
       populateVitalMinimums();
       vitals.inp.value = entry.duration;
@@ -263,6 +292,12 @@ export function trackMFEVitals(id, timings) {
       }
     });
     disconnectInteractionListeners();
+    ['visibilitychange', 'pagehide'].forEach(type => {
+      globalScope.removeEventListener(type, vitals.disconnect, {
+        once: true,
+        passive: true
+      });
+    });
   };
 
   // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
@@ -276,7 +311,7 @@ export function trackMFEVitals(id, timings) {
     }
   };
   const handleInteraction = event => {
-    if (!isInMFE(event?.target, id)) return;
+    if (!isInMFE(event?.target, target)) return;
     disconnectLCP();
     disconnectInteractionListeners();
   };

package/dist/esm/loaders/api/register-api-types.js

@@ -53,4 +53,12 @@
  * @property {string} type - The type of timing associated with the registered entity, 'script' or 'link' if found with the performance resource API, 'fetch' for dynamic imports, 'inline' if found to be associated with the root document URL, or 'unknown' if no associated resource could be found.
  */
 
+/**
+ * @typedef {Object} RegisterAPIVitals
+ * @property {number} [fcp] - The first contentful paint timing for the registered entity.
+ * @property {number} [lcp] - The largest contentful paint timing for the registered entity.
+ * @property {number} [cls] - The cumulative layout shift score for the registered entity.
+ * @property {number} [inp] - The interaction to next paint timing for the registered entity.
+ */
+
 export default {};

package/dist/esm/loaders/api/register.js

@@ -80,7 +80,7 @@ function register(agentRef, target) {
   const timings = findScriptTimings();
 
   // Track MFE vitals for this entity
-  const vitals = trackMFEVitals(target.id, timings);
+  const vitals = trackMFEVitals(target, timings);
   const attrs = {};
 
   // Only define attributes getter if it doesn't already exist
@@ -226,13 +226,21 @@ function register(agentRef, target) {
       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,
+      ...(vitals.fcp.value >= 0 && {
+        'nr.vitals.fcp.value': vitals.fcp.value
+      }),
       // FCP vital object with value and metadata
-      'nr.vitals.lcp.value': vitals.lcp?.value ?? null,
+      ...(vitals.lcp.value >= 0 && {
+        'nr.vitals.lcp.value': vitals.lcp.value
+      }),
       // LCP vital object with value and metadata
-      'nr.vitals.cls.value': vitals.cls?.value ?? null,
+      ...(vitals.cls.value >= 0 && {
+        'nr.vitals.cls.value': vitals.cls.value
+      }),
       // CLS vital object with value and metadata
-      'nr.vitals.inp.value': vitals.inp?.value ?? null // INP vital object with value and metadata
+      ...(vitals.inp.value >= 0 && {
+        'nr.vitals.inp.value': vitals.inp.value
+      }) // INP vital object with value and metadata
     };
     api.recordCustomEvent('MicroFrontEndTiming', eventData);
   }

package/dist/types/common/v2/mfe-vitals.d.ts

@@ -1,14 +1,11 @@
 /**
  * Tracks all Core Web Vitals for a specific MFE.
- * @param {string} id - The MFE ID to track
- * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
+ * @param {RegisterAPITarget} target - The MFE target to track vitals for
+ * @param {RegisterAPITimings} timings - The timings object to use for relative time calculations
+ * @returns {RegisterAPIVitals} An object containing the vitals values and a disconnect method to stop tracking
  */
-export function trackMFEVitals(id: string, timings: any): {
-    fcp: object | null;
-    lcp: object | null;
-    cls: object | null;
-    inp: object | null;
-    disconnect: Function;
-};
-export type RegisterAPITimings = any;
+export function trackMFEVitals(target: RegisterAPITarget, timings: RegisterAPITimings): RegisterAPIVitals;
+export type RegisterAPITimings = import("../../loaders/api/register-api-types").RegisterAPITimings;
+export type RegisterAPITarget = import("../../loaders/api/register-api-types").RegisterAPITarget;
+export type RegisterAPIVitals = import("../../loaders/api/register-api-types").RegisterAPIVitals;
 //# sourceMappingURL=mfe-vitals.d.ts.map

package/dist/types/common/v2/mfe-vitals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mfe-vitals.d.ts","sourceRoot":"","sources":["../../../../src/common/v2/mfe-vitals.js"],"names":[],"mappings":"AA+FA;;;;GAIG;AACH,mCAHW,MAAM,iBACJ;IAAC,GAAG,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,GAAG,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,GAAG,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,GAAG,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,UAAU,WAAU;CAAC,CA0L1G"}
+{"version":3,"file":"mfe-vitals.d.ts","sourceRoot":"","sources":["../../../../src/common/v2/mfe-vitals.js"],"names":[],"mappings":"AAoHA;;;;;GAKG;AACH,uCAJW,iBAAiB,WACjB,kBAAkB,GAChB,iBAAiB,CAqM7B;iCApTY,OAAO,sCAAsC,EAAE,kBAAkB;gCACjE,OAAO,sCAAsC,EAAE,iBAAiB;gCAChE,OAAO,sCAAsC,EAAE,iBAAiB"}

package/dist/types/loaders/api/register-api-types.d.ts

@@ -146,4 +146,22 @@ export type RegisterAPITimings = {
      */
     type: string;
 };
+export type RegisterAPIVitals = {
+    /**
+     * - The first contentful paint timing for the registered entity.
+     */
+    fcp?: number | undefined;
+    /**
+     * - The largest contentful paint timing for the registered entity.
+     */
+    lcp?: number | undefined;
+    /**
+     * - The cumulative layout shift score for the registered entity.
+     */
+    cls?: number | undefined;
+    /**
+     * - The interaction to next paint timing for the registered entity.
+     */
+    inp?: number | undefined;
+};
 //# sourceMappingURL=register-api-types.d.ts.map

package/package.json

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

package/src/common/v2/mfe-vitals.js

@@ -7,7 +7,9 @@ import { globalScope, isBrowserScope } from '../constants/runtime'
 import { now } from '../timing/now'
 
 /**
- * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPITimings} RegisterAPITimings
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPITarget} RegisterAPITarget
+ * @typedef {import('../../loaders/api/register-api-types').RegisterAPIVitals} RegisterAPIVitals
  */
 
 const isObservable = (node) => {
@@ -18,18 +20,34 @@ const isObservable = (node) => {
   }
 }
 
+const isMatch = (dataset, target) => dataset?.nrMfeId === target.id && (!dataset?.nrMfeObserved || dataset?.nrMfeObserved === target.instance)
+
+const escapeSelectorValue = (value) => {
+  try {
+    return globalScope.CSS.escape(value)
+  } catch (e) {
+    // give up
+    return value
+  }
+}
+
 /**
  * Check if node is within a specific MFE
  * @param {Node} node - DOM node to check
  * @param {string} id - MFE ID to match
  * @returns {boolean}
  */
-const isInMFE = (node, id) => {
-  if (!node || !id) return false
+const isInMFE = (node, target = {}) => {
+  const id = target.id
+  const instance = target.instance
+  if (!node || !id || !instance) return false
   try {
     let curr = node.nodeType === 1 ? node : node.parentElement
     while (curr?.tagName) {
-      if (curr.dataset?.nrMfeId === id) return true
+      if (isMatch(curr.dataset, target)) {
+        curr.dataset.nrMfeObserved = instance // mark that this MFE has been observed for vitals
+        return true
+      }
       curr = curr.parentNode
     }
   } catch (e) {}
@@ -42,25 +60,28 @@ const isInMFE = (node, id) => {
  * @param {Function} onMatch - Callback when matching node is *added*
  * @returns {MutationObserver}
  */
-const observeMutations = (id, onMatch) => {
+const observeMutations = (target, onMatch) => {
   // Try to find existing MFE root
-  const mfeRoot = globalScope.document?.querySelector(`[data-nr-mfe-id="${id}"]`)
+  const potentialMatches = globalScope.document?.querySelectorAll(`[data-nr-mfe-id="${escapeSelectorValue(target.id)}"]`)
+  const mfeRoot = (Array.from(potentialMatches) || []).find(x => isMatch(x.dataset, target))
   let observingRoot = !!mfeRoot
+  if (observingRoot) mfeRoot.dataset.nrMfeObserved ??= target.instance // mark that this MFE has been observed for vitals
 
   const obs = new globalScope.MutationObserver(mutations => {
     mutations.forEach(m => {
       m.addedNodes.forEach(node => {
         // Check if this is the MFE root being added
         const elem = node.nodeType === 1 ? node : null
-        if (elem?.dataset?.nrMfeId === id) {
+        if (!observingRoot && isMatch(elem?.dataset, target)) {
           // Found the root! Lets switch to observing just this subtree for performance reasons
           obs.disconnect()
           obs.observe(elem, { childList: true, subtree: true })
           observingRoot = true
+          elem.dataset.nrMfeObserved = target.instance // mark that this MFE has been observed for vitals
         }
 
         // Only check isInMFE if we're observing the whole document; skip expensive ancestor walk when observing root
-        if (isObservable(node) && (observingRoot || isInMFE(node, id))) {
+        if (isObservable(node) && (observingRoot || isInMFE(node, target))) {
           onMatch(node, obs)
         }
       })
@@ -95,15 +116,16 @@ const observePerformance = (observers, config, onEntry) => {
 
 /**
  * Tracks all Core Web Vitals for a specific MFE.
- * @param {string} id - The MFE ID to track
- * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
+ * @param {RegisterAPITarget} target - The MFE target to track vitals for
+ * @param {RegisterAPITimings} timings - The timings object to use for relative time calculations
+ * @returns {RegisterAPIVitals} An object containing the vitals values and a disconnect method to stop tracking
  */
-export function trackMFEVitals (id, timings) {
-  let fcpObservedAt = null
-  let lcpObservedAt = null
+export function trackMFEVitals (target, timings) {
+  let fcpObservedAt
+  let lcpObservedAt
 
   const getTimeRelativeToScriptStart = (capturedAt) => {
-    if (capturedAt === null) return null
+    if (capturedAt == null) return capturedAt
     return capturedAt - (timings?.scriptStart || timings?.registeredAt || 0)
   }
 
@@ -115,18 +137,24 @@ export function trackMFEVitals (id, timings) {
       get value () { return getTimeRelativeToScriptStart(lcpObservedAt) }
     },
     cls: {
-      value: null
+      value: undefined
     },
     inp: {
-      value: null
+      value: undefined
     },
     disconnect: () => {}
   }
 
-  if (!id || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals
+  if (!target || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals
 
   const observers = []
 
+  // If FCP hasn't been observed within 10 seconds, give up and shut down all observers.
+  // Once FCP is observed, the other vitals are left to record until their natural lifespan ends.
+  setTimeout(() => {
+    if (!fcpObservedAt) vitals.disconnect()
+  }, 10000)
+
   const populateVitalMinimums = () => {
     fcpObservedAt ??= now()
     lcpObservedAt ??= now()
@@ -134,14 +162,16 @@ export function trackMFEVitals (id, timings) {
   }
 
   // if the MFE has already rendered something on the page before we could set up listeners, just populate vital minimums immediately
-  if (globalScope.document?.querySelector(`[data-nr-mfe-id="${id}"]`)) populateVitalMinimums()
+  const existingRoots = globalScope.document?.querySelectorAll(`[data-nr-mfe-id="${escapeSelectorValue(target.id)}"]`)
+  if (Array.from(existingRoots || []).some(x => isMatch(x.dataset, target))) populateVitalMinimums()
 
   // Track FCP - first contentful paint
-  observeMutations(id, (_, obs) => {
+  const fcpObs = observeMutations(target, (_, obs) => {
     // An observed "FCP" means _something_ rendered, so at minimum we can populate all the baseline values for the vitals
     populateVitalMinimums()
     obs.disconnect()
   })
+  observers.push(fcpObs)
 
   // Track LCP - largest contentful paint
   let largestSize = 0
@@ -167,7 +197,7 @@ export function trackMFEVitals (id, timings) {
     // ResizeObserver not supported
   }
 
-  const lcpObs = observeMutations(id, (node) => {
+  const lcpObs = observeMutations(target, (node) => {
     // an observed "LCP" means _something_ rendered, so at minimum we can make sure all the baseline values are populated for the vitals
     populateVitalMinimums()
 
@@ -214,7 +244,7 @@ export function trackMFEVitals (id, timings) {
   observePerformance(observers, { type: 'layout-shift', buffered: true }, (entry) => {
     if (entry.hadRecentInput) return
     ;(entry.sources || []).some(source => {
-      if (isInMFE(source.node, id)) {
+      if (isInMFE(source.node, target)) {
         // an observed "CLS" means _something_ rendered for the MFE, so at minimum we can make sure all the baseline values are populated for the vitals
         populateVitalMinimums()
         vitals.cls.value += entry.value
@@ -226,8 +256,8 @@ export function trackMFEVitals (id, timings) {
 
   // Track INP - interaction to next paint
   observePerformance(observers, { type: 'event', buffered: true, durationThreshold: 40 }, (entry) => {
-    if (!entry.interactionId || !isInMFE(entry.target, id)) return
-    if (vitals.inp.value === null || entry.duration > vitals.inp.value) {
+    if (!entry.interactionId || !isInMFE(entry.target, target)) return
+    if (vitals.inp.value === undefined || entry.duration > vitals.inp.value) {
       // an observed "INP" means _something_ rendered for the MFE, so at minimum we can make sure all the baseline values are populated for the vitals
       populateVitalMinimums()
       vitals.inp.value = entry.duration
@@ -252,6 +282,9 @@ export function trackMFEVitals (id, timings) {
       }
     })
     disconnectInteractionListeners()
+    ;['visibilitychange', 'pagehide'].forEach(type => {
+      globalScope.removeEventListener(type, vitals.disconnect, { once: true, passive: true })
+    })
   }
 
   // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
@@ -266,7 +299,7 @@ export function trackMFEVitals (id, timings) {
   }
 
   const handleInteraction = (event) => {
-    if (!isInMFE(event?.target, id)) return
+    if (!isInMFE(event?.target, target)) return
 
     disconnectLCP()
     disconnectInteractionListeners()

package/src/loaders/api/register-api-types.js

@@ -53,4 +53,12 @@
  * @property {string} type - The type of timing associated with the registered entity, 'script' or 'link' if found with the performance resource API, 'fetch' for dynamic imports, 'inline' if found to be associated with the root document URL, or 'unknown' if no associated resource could be found.
  */
 
+/**
+ * @typedef {Object} RegisterAPIVitals
+ * @property {number} [fcp] - The first contentful paint timing for the registered entity.
+ * @property {number} [lcp] - The largest contentful paint timing for the registered entity.
+ * @property {number} [cls] - The cumulative layout shift score for the registered entity.
+ * @property {number} [inp] - The interaction to next paint timing for the registered entity.
+ */
+
 export default {}

package/src/loaders/api/register.js

@@ -85,7 +85,7 @@ function register (agentRef, target) {
   const timings = findScriptTimings()
 
   // Track MFE vitals for this entity
-  const vitals = trackMFEVitals(target.id, timings)
+  const vitals = trackMFEVitals(target, timings)
 
   const attrs = {}
 
@@ -203,10 +203,10 @@ function register (agentRef, target) {
       timeToLoad: timeToFetch + timeToExecute, // fetch time and script time together
       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
+      ...(vitals.fcp.value >= 0 && { 'nr.vitals.fcp.value': vitals.fcp.value }), // FCP vital object with value and metadata
+      ...(vitals.lcp.value >= 0 && { 'nr.vitals.lcp.value': vitals.lcp.value }), // LCP vital object with value and metadata
+      ...(vitals.cls.value >= 0 && { 'nr.vitals.cls.value': vitals.cls.value }), // CLS vital object with value and metadata
+      ...(vitals.inp.value >= 0 && { 'nr.vitals.inp.value': vitals.inp.value }) // INP vital object with value and metadata
     }
 
     api.recordCustomEvent('MicroFrontEndTiming', eventData)