@newrelic/browser-agent 1.317.0-rc.2 → 1.317.0-rc.4

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.317.0-rc.2";
+const VERSION = exports.VERSION = "1.317.0-rc.4";
 
 /**
  * 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.317.0-rc.2";
+const VERSION = exports.VERSION = "1.317.0-rc.4";
 
 /**
  * Exposes the build type of the agent

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.trackMFEVitals = trackMFEVitals;
 var _runtime = require("../constants/runtime");
 var _now = require("../timing/now");
-var _cleanUrl = require("../url/clean-url");
 /**
  * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
@@ -16,48 +15,6 @@ var _cleanUrl = require("../url/clean-url");
  * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
  */
 
-/**
- * Generate a simple CSS selector for an element
- * @param {Element} elem - The element to generate selector for
- * @returns {string|null} CSS selector or null if element is invalid
- */
-const getElementSelector = elem => {
-  try {
-    if (!elem || !elem.tagName) return null;
-    let selector = elem.tagName.toLowerCase();
-    if (elem.id) selector += "#".concat(elem.id);else if (elem.className && typeof elem.className === 'string') {
-      const classes = elem.className.trim().split(/\s+/).slice(0, 2).join('.');
-      if (classes) selector += ".".concat(classes);
-    }
-    return selector;
-  } catch (e) {
-    return null;
-  }
-};
-
-/**
- * Extract URL from an element (for images, videos, etc.)
- * @param {Element} elem - The element to extract URL from
- * @returns {string|null} Cleaned URL or null
- */
-const getElementURL = elem => {
-  try {
-    if (!elem) return null;
-
-    // For images and videos
-    if (elem.src) return (0, _cleanUrl.cleanURL)(elem.src);
-
-    // For elements with background images
-    const bgImage = _runtime.globalScope.getComputedStyle?.(elem)?.backgroundImage;
-    if (bgImage && bgImage !== 'none') {
-      const match = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-      if (match?.[1]) return (0, _cleanUrl.cleanURL)(match[1]);
-    }
-    return null;
-  } catch (e) {
-    return null;
-  }
-};
 const isObservable = node => {
   try {
     return node?.textContent?.trim() || ['img', 'video', 'canvas', 'svg'].includes(node?.nodeName?.toLowerCase());
@@ -73,6 +30,7 @@ const isObservable = node => {
  * @returns {boolean}
  */
 const isInMFE = (node, id) => {
+  if (!node || !id) return false;
   try {
     let curr = node.nodeType === 1 ? node : node.parentElement;
     while (curr?.tagName) {
@@ -86,18 +44,38 @@ const isInMFE = (node, id) => {
 /**
  * Create mutation observer for MFE nodes
  * @param {string} id - MFE ID to track
- * @param {Function} onMatch - Callback when matching node is added
+ * @param {Function} onMatch - Callback when matching node is *added*
  * @returns {MutationObserver}
  */
 const observeMutations = (id, onMatch) => {
+  // Try to find existing MFE root
+  const mfeRoot = _runtime.globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"));
+  let observingRoot = !!mfeRoot;
   const obs = new _runtime.globalScope.MutationObserver(mutations => {
-    mutations.forEach(m => m.addedNodes.forEach(node => {
-      if (isObservable(node) && isInMFE(node, id)) {
-        onMatch(node, obs);
-      }
-    }));
+    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) {
+          // Found the root! Lets switch to observing just this subtree for performance reasons
+          obs.disconnect();
+          obs.observe(elem, {
+            childList: true,
+            subtree: true
+          });
+          observingRoot = true;
+        }
+
+        // Only check isInMFE if we're observing the whole document; skip expensive ancestor walk when observing root
+        if (isObservable(node) && (observingRoot || isInMFE(node, id))) {
+          onMatch(node, obs);
+        }
+      });
+    });
   });
-  obs.observe(_runtime.globalScope.document, {
+
+  // If root exists, observe just that subtree; otherwise observe document to catch when root is added
+  obs.observe(mfeRoot || _runtime.globalScope.document, {
     childList: true,
     subtree: true
   });
@@ -129,122 +107,155 @@ const observePerformance = (observers, config, onEntry) => {
  * @param {string} id - The MFE ID to track
  * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
  */
-function trackMFEVitals(id) {
+function trackMFEVitals(id, timings) {
+  let fcpObservedAt = null;
+  let lcpObservedAt = null;
+  const getTimeRelativeToScriptStart = capturedAt => {
+    if (capturedAt === null) return null;
+    return capturedAt - (timings?.scriptStart || timings?.registeredAt || 0);
+  };
   const vitals = {
-    fcp: null,
-    lcp: null,
-    cls: null,
-    inp: null,
+    fcp: {
+      get value() {
+        return getTimeRelativeToScriptStart(fcpObservedAt);
+      }
+    },
+    lcp: {
+      get value() {
+        return getTimeRelativeToScriptStart(lcpObservedAt);
+      }
+    },
+    cls: {
+      value: null
+    },
+    inp: {
+      value: null
+    },
     disconnect: () => {}
   };
   if (!id || !_runtime.isBrowserScope || !_runtime.globalScope.MutationObserver || !_runtime.globalScope.PerformanceObserver) return vitals;
   const observers = [];
+  const populateVitalMinimums = () => {
+    fcpObservedAt ??= (0, _now.now)();
+    lcpObservedAt ??= (0, _now.now)();
+    vitals.cls.value ??= 0;
+  };
+
+  // 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();
 
   // Track FCP - first contentful paint
-  observeMutations(id, (node, obs) => {
-    if (vitals.fcp === null) {
-      vitals.fcp = {
-        value: (0, _now.now)(),
-        loadState: _runtime.globalScope.document?.readyState || null
-      };
-      obs.disconnect();
-    }
+  observeMutations(id, (_, obs) => {
+    // An observed "FCP" means _something_ rendered, so at minimum we can populate all the baseline values for the vitals
+    populateVitalMinimums();
+    obs.disconnect();
   });
 
   // Track LCP - largest contentful paint
   let largestSize = 0;
+  let resizeObs = null;
+  const observedElements = new Set();
+  try {
+    resizeObs = new _runtime.globalScope.ResizeObserver(entries => {
+      entries.forEach(entry => {
+        try {
+          const size = entry.contentRect.width * entry.contentRect.height;
+          if (size > largestSize) {
+            largestSize = size;
+            lcpObservedAt = (0, _now.now)();
+          }
+          resizeObs.unobserve(entry.target);
+        } catch (e) {
+          // Element may be detached from DOM
+        }
+      });
+    });
+  } catch (e) {
+    // ResizeObserver not supported
+  }
   const lcpObs = observeMutations(id, node => {
-    try {
-      const elem = node.nodeType === 1 ? node : node.parentElement;
-      if (!elem) return;
-      const rect = elem.getBoundingClientRect();
-      const size = rect.width * rect.height;
-      if (size > largestSize) {
-        largestSize = size;
-        vitals.lcp = {
-          value: (0, _now.now)(),
-          size,
-          elTag: elem.tagName || null,
-          eid: elem.id || null,
-          elUrl: getElementURL(elem)
-        };
+    // 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) {
+      try {
+        const elem = node.nodeType === 1 ? node : node.parentElement;
+        if (elem && !observedElements.has(elem)) {
+          observedElements.add(elem);
+
+          // For media elements, wait for content to load before observing size
+          if (elem.tagName === 'IMG') {
+            if (elem.complete) {
+              resizeObs.observe(elem);
+            } else {
+              elem.addEventListener('load', () => {
+                resizeObs.observe(elem);
+              }, {
+                once: true
+              });
+            }
+          } else if (elem.tagName === 'VIDEO') {
+            // For video, wait for first frame (HAVE_CURRENT_DATA = 2)
+            if (elem.readyState >= 2) {
+              resizeObs.observe(elem);
+            } else {
+              elem.addEventListener('loadeddata', () => {
+                resizeObs.observe(elem);
+              }, {
+                once: true
+              });
+            }
+          } else {
+            // For other elements, observe immediately
+            resizeObs.observe(elem);
+          }
+        }
+      } catch (e) {
+        // Element may not be observable
       }
-    } catch (e) {
-      // Element may be detached from DOM
     }
   });
+  if (resizeObs) observers.push(resizeObs);
   observers.push(lcpObs);
 
   // Track CLS - cumulative layout shift
-  // Initialize CLS to 0 if browser supports it AND the MFE container exists in the DOM
-  let clsValue = 0;
-  const clsObs = observePerformance(observers, {
+  // Initialize CLS to 0 if browser supports it
+  observePerformance(observers, {
     type: 'layout-shift',
     buffered: true
   }, entry => {
-    if (entry.hadRecentInput || !vitals.cls) return;
+    if (entry.hadRecentInput) return;
     (entry.sources || []).some(source => {
       if (isInMFE(source.node, id)) {
-        clsValue += entry.value;
-        vitals.cls ??= {
-          value: 0,
-          largestShiftValue: null,
-          largestShiftTime: null,
-          largestShiftTarget: null,
-          loadState: null
-        };
-        vitals.cls.value = clsValue;
-
-        // Track largest shift
-        if (entry.value > (vitals.cls.largestShiftValue || 0)) {
-          vitals.cls.largestShiftValue = entry.value;
-          vitals.cls.largestShiftTime = entry.startTime;
-          vitals.cls.largestShiftTarget = getElementSelector(source.node);
-          vitals.cls.loadState = _runtime.globalScope.document?.readyState || null;
-        }
+        // 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;
         return true;
       }
       return false;
     });
   });
-  if (clsObs) {
-    try {
-      const mfeContainer = _runtime.globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"));
-      if (mfeContainer) {
-        vitals.cls ??= {
-          value: 0,
-          largestShiftValue: null,
-          largestShiftTime: null,
-          largestShiftTarget: null,
-          loadState: null
-        };
-      }
-    } catch (e) {
-      // querySelector may fail, leave CLS as null
-    }
-  }
 
   // Track INP - interaction to next paint
   observePerformance(observers, {
     type: 'event',
     buffered: true,
-    durationThreshold: 16
+    durationThreshold: 40
   }, entry => {
-    if (!entry.interactionId || !entry.target || !isInMFE(entry.target, id)) return;
-    if (vitals.inp === null || entry.duration > vitals.inp.value) {
-      vitals.inp = {
-        value: entry.duration,
-        interactionTarget: getElementSelector(entry.target),
-        interactionTime: entry.startTime,
-        interactionType: entry.name,
-        inputDelay: entry.processingStart ? entry.processingStart - entry.startTime : null,
-        processingDuration: entry.processingStart && entry.processingEnd ? entry.processingEnd - entry.processingStart : null,
-        presentationDelay: entry.processingEnd && entry.duration ? entry.duration - (entry.processingEnd - entry.startTime) : null,
-        nextPaintTime: entry.startTime + entry.duration,
-        loadState: _runtime.globalScope.document?.readyState || null
-      };
+    if (!entry.interactionId || !isInMFE(entry.target, id)) return;
+    if (vitals.inp.value === null || 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;
     }
   });
+  const interactionEvents = ['pointerdown', 'keydown'];
+  const disconnectInteractionListeners = () => {
+    interactionEvents.forEach(type => {
+      _runtime.globalScope.removeEventListener(type, handleInteraction, {
+        passive: true
+      });
+    });
+  };
 
   // Disconnect all observers
   vitals.disconnect = () => {
@@ -256,6 +267,7 @@ function trackMFEVitals(id) {
         // Observer may already be disconnected
       }
     });
+    disconnectInteractionListeners();
   };
 
   // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
@@ -263,19 +275,24 @@ function trackMFEVitals(id) {
   const disconnectLCP = () => {
     try {
       lcpObs?.disconnect();
+      resizeObs?.disconnect();
     } catch (e) {
       // Observer may already be disconnected
     }
   };
-  ['click', 'keydown', 'scroll'].forEach(type => {
-    _runtime.globalScope.addEventListener(type, disconnectLCP, {
-      once: true,
+  const handleInteraction = event => {
+    if (!isInMFE(event?.target, id)) return;
+    disconnectLCP();
+    disconnectInteractionListeners();
+  };
+  interactionEvents.forEach(type => {
+    _runtime.globalScope.addEventListener(type, handleInteraction, {
       passive: true
     });
   })
 
   // Disconnect all observers on visibility change or page unload
-  ;
+;
   ['visibilitychange', 'pagehide'].forEach(type => {
     _runtime.globalScope.addEventListener(type, vitals.disconnect, {
       once: true,

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);
+  const vitals = (0, _mfeVitals.trackMFEVitals)(target.id, timings);
   const attrs = {};
 
   // Only define attributes getter if it doesn't already exist
@@ -232,13 +232,14 @@ function register(agentRef, target) {
       // fetch time and script time together
       timeToRegister: timings.registeredAt,
       // timestamp when register() was called
-      'nr.vitals.fcp': vitals.fcp || null,
+      // 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': vitals.lcp || null,
+      'nr.vitals.lcp.value': vitals.lcp?.value ?? null,
       // LCP vital object with value and metadata
-      'nr.vitals.cls': vitals.cls || null,
+      'nr.vitals.cls.value': vitals.cls?.value ?? null,
       // CLS vital object with value and metadata
-      'nr.vitals.inp': vitals.inp || null // INP 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);
   }

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

@@ -11,7 +11,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.317.0-rc.2";
+export const VERSION = "1.317.0-rc.4";
 
 /**
  * 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.317.0-rc.2";
+export const VERSION = "1.317.0-rc.4";
 
 /**
  * Exposes the build type of the agent

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

@@ -5,54 +5,11 @@
 
 import { globalScope, isBrowserScope } from '../constants/runtime';
 import { now } from '../timing/now';
-import { cleanURL } from '../url/clean-url';
 
 /**
  * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
  */
 
-/**
- * Generate a simple CSS selector for an element
- * @param {Element} elem - The element to generate selector for
- * @returns {string|null} CSS selector or null if element is invalid
- */
-const getElementSelector = elem => {
-  try {
-    if (!elem || !elem.tagName) return null;
-    let selector = elem.tagName.toLowerCase();
-    if (elem.id) selector += "#".concat(elem.id);else if (elem.className && typeof elem.className === 'string') {
-      const classes = elem.className.trim().split(/\s+/).slice(0, 2).join('.');
-      if (classes) selector += ".".concat(classes);
-    }
-    return selector;
-  } catch (e) {
-    return null;
-  }
-};
-
-/**
- * Extract URL from an element (for images, videos, etc.)
- * @param {Element} elem - The element to extract URL from
- * @returns {string|null} Cleaned URL or null
- */
-const getElementURL = elem => {
-  try {
-    if (!elem) return null;
-
-    // For images and videos
-    if (elem.src) return cleanURL(elem.src);
-
-    // For elements with background images
-    const bgImage = globalScope.getComputedStyle?.(elem)?.backgroundImage;
-    if (bgImage && bgImage !== 'none') {
-      const match = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-      if (match?.[1]) return cleanURL(match[1]);
-    }
-    return null;
-  } catch (e) {
-    return null;
-  }
-};
 const isObservable = node => {
   try {
     return node?.textContent?.trim() || ['img', 'video', 'canvas', 'svg'].includes(node?.nodeName?.toLowerCase());
@@ -68,6 +25,7 @@ const isObservable = node => {
  * @returns {boolean}
  */
 const isInMFE = (node, id) => {
+  if (!node || !id) return false;
   try {
     let curr = node.nodeType === 1 ? node : node.parentElement;
     while (curr?.tagName) {
@@ -81,18 +39,38 @@ const isInMFE = (node, id) => {
 /**
  * Create mutation observer for MFE nodes
  * @param {string} id - MFE ID to track
- * @param {Function} onMatch - Callback when matching node is added
+ * @param {Function} onMatch - Callback when matching node is *added*
  * @returns {MutationObserver}
  */
 const observeMutations = (id, onMatch) => {
+  // Try to find existing MFE root
+  const mfeRoot = globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"));
+  let observingRoot = !!mfeRoot;
   const obs = new globalScope.MutationObserver(mutations => {
-    mutations.forEach(m => m.addedNodes.forEach(node => {
-      if (isObservable(node) && isInMFE(node, id)) {
-        onMatch(node, obs);
-      }
-    }));
+    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) {
+          // Found the root! Lets switch to observing just this subtree for performance reasons
+          obs.disconnect();
+          obs.observe(elem, {
+            childList: true,
+            subtree: true
+          });
+          observingRoot = true;
+        }
+
+        // Only check isInMFE if we're observing the whole document; skip expensive ancestor walk when observing root
+        if (isObservable(node) && (observingRoot || isInMFE(node, id))) {
+          onMatch(node, obs);
+        }
+      });
+    });
   });
-  obs.observe(globalScope.document, {
+
+  // If root exists, observe just that subtree; otherwise observe document to catch when root is added
+  obs.observe(mfeRoot || globalScope.document, {
     childList: true,
     subtree: true
   });
@@ -124,122 +102,155 @@ const observePerformance = (observers, config, onEntry) => {
  * @param {string} id - The MFE ID to track
  * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
  */
-export function trackMFEVitals(id) {
+export function trackMFEVitals(id, timings) {
+  let fcpObservedAt = null;
+  let lcpObservedAt = null;
+  const getTimeRelativeToScriptStart = capturedAt => {
+    if (capturedAt === null) return null;
+    return capturedAt - (timings?.scriptStart || timings?.registeredAt || 0);
+  };
   const vitals = {
-    fcp: null,
-    lcp: null,
-    cls: null,
-    inp: null,
+    fcp: {
+      get value() {
+        return getTimeRelativeToScriptStart(fcpObservedAt);
+      }
+    },
+    lcp: {
+      get value() {
+        return getTimeRelativeToScriptStart(lcpObservedAt);
+      }
+    },
+    cls: {
+      value: null
+    },
+    inp: {
+      value: null
+    },
     disconnect: () => {}
   };
   if (!id || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals;
   const observers = [];
+  const populateVitalMinimums = () => {
+    fcpObservedAt ??= now();
+    lcpObservedAt ??= now();
+    vitals.cls.value ??= 0;
+  };
+
+  // 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();
 
   // Track FCP - first contentful paint
-  observeMutations(id, (node, obs) => {
-    if (vitals.fcp === null) {
-      vitals.fcp = {
-        value: now(),
-        loadState: globalScope.document?.readyState || null
-      };
-      obs.disconnect();
-    }
+  observeMutations(id, (_, obs) => {
+    // An observed "FCP" means _something_ rendered, so at minimum we can populate all the baseline values for the vitals
+    populateVitalMinimums();
+    obs.disconnect();
   });
 
   // Track LCP - largest contentful paint
   let largestSize = 0;
+  let resizeObs = null;
+  const observedElements = new Set();
+  try {
+    resizeObs = new globalScope.ResizeObserver(entries => {
+      entries.forEach(entry => {
+        try {
+          const size = entry.contentRect.width * entry.contentRect.height;
+          if (size > largestSize) {
+            largestSize = size;
+            lcpObservedAt = now();
+          }
+          resizeObs.unobserve(entry.target);
+        } catch (e) {
+          // Element may be detached from DOM
+        }
+      });
+    });
+  } catch (e) {
+    // ResizeObserver not supported
+  }
   const lcpObs = observeMutations(id, node => {
-    try {
-      const elem = node.nodeType === 1 ? node : node.parentElement;
-      if (!elem) return;
-      const rect = elem.getBoundingClientRect();
-      const size = rect.width * rect.height;
-      if (size > largestSize) {
-        largestSize = size;
-        vitals.lcp = {
-          value: now(),
-          size,
-          elTag: elem.tagName || null,
-          eid: elem.id || null,
-          elUrl: getElementURL(elem)
-        };
+    // 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) {
+      try {
+        const elem = node.nodeType === 1 ? node : node.parentElement;
+        if (elem && !observedElements.has(elem)) {
+          observedElements.add(elem);
+
+          // For media elements, wait for content to load before observing size
+          if (elem.tagName === 'IMG') {
+            if (elem.complete) {
+              resizeObs.observe(elem);
+            } else {
+              elem.addEventListener('load', () => {
+                resizeObs.observe(elem);
+              }, {
+                once: true
+              });
+            }
+          } else if (elem.tagName === 'VIDEO') {
+            // For video, wait for first frame (HAVE_CURRENT_DATA = 2)
+            if (elem.readyState >= 2) {
+              resizeObs.observe(elem);
+            } else {
+              elem.addEventListener('loadeddata', () => {
+                resizeObs.observe(elem);
+              }, {
+                once: true
+              });
+            }
+          } else {
+            // For other elements, observe immediately
+            resizeObs.observe(elem);
+          }
+        }
+      } catch (e) {
+        // Element may not be observable
       }
-    } catch (e) {
-      // Element may be detached from DOM
     }
   });
+  if (resizeObs) observers.push(resizeObs);
   observers.push(lcpObs);
 
   // Track CLS - cumulative layout shift
-  // Initialize CLS to 0 if browser supports it AND the MFE container exists in the DOM
-  let clsValue = 0;
-  const clsObs = observePerformance(observers, {
+  // Initialize CLS to 0 if browser supports it
+  observePerformance(observers, {
     type: 'layout-shift',
     buffered: true
   }, entry => {
-    if (entry.hadRecentInput || !vitals.cls) return;
+    if (entry.hadRecentInput) return;
     (entry.sources || []).some(source => {
       if (isInMFE(source.node, id)) {
-        clsValue += entry.value;
-        vitals.cls ??= {
-          value: 0,
-          largestShiftValue: null,
-          largestShiftTime: null,
-          largestShiftTarget: null,
-          loadState: null
-        };
-        vitals.cls.value = clsValue;
-
-        // Track largest shift
-        if (entry.value > (vitals.cls.largestShiftValue || 0)) {
-          vitals.cls.largestShiftValue = entry.value;
-          vitals.cls.largestShiftTime = entry.startTime;
-          vitals.cls.largestShiftTarget = getElementSelector(source.node);
-          vitals.cls.loadState = globalScope.document?.readyState || null;
-        }
+        // 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;
         return true;
       }
       return false;
     });
   });
-  if (clsObs) {
-    try {
-      const mfeContainer = globalScope.document?.querySelector("[data-nr-mfe-id=\"".concat(id, "\"]"));
-      if (mfeContainer) {
-        vitals.cls ??= {
-          value: 0,
-          largestShiftValue: null,
-          largestShiftTime: null,
-          largestShiftTarget: null,
-          loadState: null
-        };
-      }
-    } catch (e) {
-      // querySelector may fail, leave CLS as null
-    }
-  }
 
   // Track INP - interaction to next paint
   observePerformance(observers, {
     type: 'event',
     buffered: true,
-    durationThreshold: 16
+    durationThreshold: 40
   }, entry => {
-    if (!entry.interactionId || !entry.target || !isInMFE(entry.target, id)) return;
-    if (vitals.inp === null || entry.duration > vitals.inp.value) {
-      vitals.inp = {
-        value: entry.duration,
-        interactionTarget: getElementSelector(entry.target),
-        interactionTime: entry.startTime,
-        interactionType: entry.name,
-        inputDelay: entry.processingStart ? entry.processingStart - entry.startTime : null,
-        processingDuration: entry.processingStart && entry.processingEnd ? entry.processingEnd - entry.processingStart : null,
-        presentationDelay: entry.processingEnd && entry.duration ? entry.duration - (entry.processingEnd - entry.startTime) : null,
-        nextPaintTime: entry.startTime + entry.duration,
-        loadState: globalScope.document?.readyState || null
-      };
+    if (!entry.interactionId || !isInMFE(entry.target, id)) return;
+    if (vitals.inp.value === null || 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;
     }
   });
+  const interactionEvents = ['pointerdown', 'keydown'];
+  const disconnectInteractionListeners = () => {
+    interactionEvents.forEach(type => {
+      globalScope.removeEventListener(type, handleInteraction, {
+        passive: true
+      });
+    });
+  };
 
   // Disconnect all observers
   vitals.disconnect = () => {
@@ -251,6 +262,7 @@ export function trackMFEVitals(id) {
         // Observer may already be disconnected
       }
     });
+    disconnectInteractionListeners();
   };
 
   // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
@@ -258,19 +270,24 @@ export function trackMFEVitals(id) {
   const disconnectLCP = () => {
     try {
       lcpObs?.disconnect();
+      resizeObs?.disconnect();
     } catch (e) {
       // Observer may already be disconnected
     }
   };
-  ['click', 'keydown', 'scroll'].forEach(type => {
-    globalScope.addEventListener(type, disconnectLCP, {
-      once: true,
+  const handleInteraction = event => {
+    if (!isInMFE(event?.target, id)) return;
+    disconnectLCP();
+    disconnectInteractionListeners();
+  };
+  interactionEvents.forEach(type => {
+    globalScope.addEventListener(type, handleInteraction, {
       passive: true
     });
   })
 
   // Disconnect all observers on visibility change or page unload
-  ;
+;
   ['visibilitychange', 'pagehide'].forEach(type => {
     globalScope.addEventListener(type, vitals.disconnect, {
       once: true,

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);
+  const vitals = trackMFEVitals(target.id, timings);
   const attrs = {};
 
   // Only define attributes getter if it doesn't already exist
@@ -225,13 +225,14 @@ function register(agentRef, target) {
       // fetch time and script time together
       timeToRegister: timings.registeredAt,
       // timestamp when register() was called
-      'nr.vitals.fcp': vitals.fcp || null,
+      // 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': vitals.lcp || null,
+      'nr.vitals.lcp.value': vitals.lcp?.value ?? null,
       // LCP vital object with value and metadata
-      'nr.vitals.cls': vitals.cls || null,
+      'nr.vitals.cls.value': vitals.cls?.value ?? null,
       // CLS vital object with value and metadata
-      'nr.vitals.inp': vitals.inp || null // INP 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);
   }

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

@@ -3,7 +3,7 @@
  * @param {string} id - The MFE ID to track
  * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
  */
-export function trackMFEVitals(id: string): {
+export function trackMFEVitals(id: string, timings: any): {
     fcp: object | null;
     lcp: object | null;
     cls: object | null;

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":"AA0HA;;;;GAIG;AACH,mCAHW,MAAM,GACJ;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,CAsI1G"}
+{"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"}

package/package.json

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

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

@@ -5,58 +5,11 @@
 
 import { globalScope, isBrowserScope } from '../constants/runtime'
 import { now } from '../timing/now'
-import { cleanURL } from '../url/clean-url'
 
 /**
  * @typedef {import('./register-api-types').RegisterAPITimings} RegisterAPITimings
  */
 
-/**
- * Generate a simple CSS selector for an element
- * @param {Element} elem - The element to generate selector for
- * @returns {string|null} CSS selector or null if element is invalid
- */
-const getElementSelector = (elem) => {
-  try {
-    if (!elem || !elem.tagName) return null
-
-    let selector = elem.tagName.toLowerCase()
-    if (elem.id) selector += `#${elem.id}`
-    else if (elem.className && typeof elem.className === 'string') {
-      const classes = elem.className.trim().split(/\s+/).slice(0, 2).join('.')
-      if (classes) selector += `.${classes}`
-    }
-    return selector
-  } catch (e) {
-    return null
-  }
-}
-
-/**
- * Extract URL from an element (for images, videos, etc.)
- * @param {Element} elem - The element to extract URL from
- * @returns {string|null} Cleaned URL or null
- */
-const getElementURL = (elem) => {
-  try {
-    if (!elem) return null
-
-    // For images and videos
-    if (elem.src) return cleanURL(elem.src)
-
-    // For elements with background images
-    const bgImage = globalScope.getComputedStyle?.(elem)?.backgroundImage
-    if (bgImage && bgImage !== 'none') {
-      const match = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/)
-      if (match?.[1]) return cleanURL(match[1])
-    }
-
-    return null
-  } catch (e) {
-    return null
-  }
-}
-
 const isObservable = (node) => {
   try {
     return node?.textContent?.trim() || ['img', 'video', 'canvas', 'svg'].includes(node?.nodeName?.toLowerCase())
@@ -72,6 +25,7 @@ const isObservable = (node) => {
  * @returns {boolean}
  */
 const isInMFE = (node, id) => {
+  if (!node || !id) return false
   try {
     let curr = node.nodeType === 1 ? node : node.parentElement
     while (curr?.tagName) {
@@ -85,18 +39,37 @@ const isInMFE = (node, id) => {
 /**
  * Create mutation observer for MFE nodes
  * @param {string} id - MFE ID to track
- * @param {Function} onMatch - Callback when matching node is added
+ * @param {Function} onMatch - Callback when matching node is *added*
  * @returns {MutationObserver}
  */
 const observeMutations = (id, onMatch) => {
+  // Try to find existing MFE root
+  const mfeRoot = globalScope.document?.querySelector(`[data-nr-mfe-id="${id}"]`)
+  let observingRoot = !!mfeRoot
+
   const obs = new globalScope.MutationObserver(mutations => {
-    mutations.forEach(m => m.addedNodes.forEach(node => {
-      if (isObservable(node) && isInMFE(node, id)) {
-        onMatch(node, obs)
-      }
-    }))
+    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) {
+          // Found the root! Lets switch to observing just this subtree for performance reasons
+          obs.disconnect()
+          obs.observe(elem, { childList: true, subtree: true })
+          observingRoot = true
+        }
+
+        // Only check isInMFE if we're observing the whole document; skip expensive ancestor walk when observing root
+        if (isObservable(node) && (observingRoot || isInMFE(node, id))) {
+          onMatch(node, obs)
+        }
+      })
+    })
   })
-  obs.observe(globalScope.document, { childList: true, subtree: true })
+
+  // If root exists, observe just that subtree; otherwise observe document to catch when root is added
+  obs.observe(mfeRoot || globalScope.document, { childList: true, subtree: true })
+
   return obs
 }
 
@@ -125,12 +98,28 @@ const observePerformance = (observers, config, onEntry) => {
  * @param {string} id - The MFE ID to track
  * @returns {{fcp: object|null, lcp: object|null, cls: object|null, inp: object|null, disconnect: Function}}
  */
-export function trackMFEVitals (id) {
+export function trackMFEVitals (id, timings) {
+  let fcpObservedAt = null
+  let lcpObservedAt = null
+
+  const getTimeRelativeToScriptStart = (capturedAt) => {
+    if (capturedAt === null) return null
+    return capturedAt - (timings?.scriptStart || timings?.registeredAt || 0)
+  }
+
   const vitals = {
-    fcp: null,
-    lcp: null,
-    cls: null,
-    inp: null,
+    fcp: {
+      get value () { return getTimeRelativeToScriptStart(fcpObservedAt) }
+    },
+    lcp: {
+      get value () { return getTimeRelativeToScriptStart(lcpObservedAt) }
+    },
+    cls: {
+      value: null
+    },
+    inp: {
+      value: null
+    },
     disconnect: () => {}
   }
 
@@ -138,94 +127,120 @@ export function trackMFEVitals (id) {
 
   const observers = []
 
+  const populateVitalMinimums = () => {
+    fcpObservedAt ??= now()
+    lcpObservedAt ??= now()
+    vitals.cls.value ??= 0
+  }
+
+  // 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()
+
   // Track FCP - first contentful paint
-  observeMutations(id, (node, obs) => {
-    if (vitals.fcp === null) {
-      vitals.fcp = {
-        value: now(),
-        loadState: globalScope.document?.readyState || null
-      }
-      obs.disconnect()
-    }
+  observeMutations(id, (_, obs) => {
+    // An observed "FCP" means _something_ rendered, so at minimum we can populate all the baseline values for the vitals
+    populateVitalMinimums()
+    obs.disconnect()
   })
 
   // Track LCP - largest contentful paint
   let largestSize = 0
+  let resizeObs = null
+  const observedElements = new Set()
+
+  try {
+    resizeObs = new globalScope.ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        try {
+          const size = entry.contentRect.width * entry.contentRect.height
+          if (size > largestSize) {
+            largestSize = size
+            lcpObservedAt = now()
+          }
+          resizeObs.unobserve(entry.target)
+        } catch (e) {
+          // Element may be detached from DOM
+        }
+      })
+    })
+  } catch (e) {
+    // ResizeObserver not supported
+  }
+
   const lcpObs = observeMutations(id, (node) => {
-    try {
-      const elem = node.nodeType === 1 ? node : node.parentElement
-      if (!elem) return
-      const rect = elem.getBoundingClientRect()
-      const size = rect.width * rect.height
-      if (size > largestSize) {
-        largestSize = size
-        vitals.lcp = {
-          value: now(),
-          size,
-          elTag: elem.tagName || null,
-          eid: elem.id || null,
-          elUrl: getElementURL(elem)
+    // 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) {
+      try {
+        const elem = node.nodeType === 1 ? node : node.parentElement
+        if (elem && !observedElements.has(elem)) {
+          observedElements.add(elem)
+
+          // For media elements, wait for content to load before observing size
+          if (elem.tagName === 'IMG') {
+            if (elem.complete) {
+              resizeObs.observe(elem)
+            } else {
+              elem.addEventListener('load', () => {
+                resizeObs.observe(elem)
+              }, { once: true })
+            }
+          } else if (elem.tagName === 'VIDEO') {
+            // For video, wait for first frame (HAVE_CURRENT_DATA = 2)
+            if (elem.readyState >= 2) {
+              resizeObs.observe(elem)
+            } else {
+              elem.addEventListener('loadeddata', () => {
+                resizeObs.observe(elem)
+              }, { once: true })
+            }
+          } else {
+            // For other elements, observe immediately
+            resizeObs.observe(elem)
+          }
         }
+      } catch (e) {
+        // Element may not be observable
       }
-    } catch (e) {
-      // Element may be detached from DOM
     }
   })
+
+  if (resizeObs) observers.push(resizeObs)
   observers.push(lcpObs)
 
   // Track CLS - cumulative layout shift
-  // Initialize CLS to 0 if browser supports it AND the MFE container exists in the DOM
-  let clsValue = 0
-  const clsObs = observePerformance(observers, { type: 'layout-shift', buffered: true }, (entry) => {
-    if (entry.hadRecentInput || !vitals.cls) return
-    (entry.sources || []).some(source => {
+  // Initialize CLS to 0 if browser supports it
+  observePerformance(observers, { type: 'layout-shift', buffered: true }, (entry) => {
+    if (entry.hadRecentInput) return
+    ;(entry.sources || []).some(source => {
       if (isInMFE(source.node, id)) {
-        clsValue += entry.value
-        vitals.cls ??= { value: 0, largestShiftValue: null, largestShiftTime: null, largestShiftTarget: null, loadState: null }
-        vitals.cls.value = clsValue
-
-        // Track largest shift
-        if (entry.value > (vitals.cls.largestShiftValue || 0)) {
-          vitals.cls.largestShiftValue = entry.value
-          vitals.cls.largestShiftTime = entry.startTime
-          vitals.cls.largestShiftTarget = getElementSelector(source.node)
-          vitals.cls.loadState = globalScope.document?.readyState || null
-        }
+        // 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
         return true
       }
       return false
     })
   })
 
-  if (clsObs) {
-    try {
-      const mfeContainer = globalScope.document?.querySelector(`[data-nr-mfe-id="${id}"]`)
-      if (mfeContainer) {
-        vitals.cls ??= { value: 0, largestShiftValue: null, largestShiftTime: null, largestShiftTarget: null, loadState: null }
-      }
-    } catch (e) {
-      // querySelector may fail, leave CLS as null
-    }
-  }
-
   // Track INP - interaction to next paint
-  observePerformance(observers, { type: 'event', buffered: true, durationThreshold: 16 }, (entry) => {
-    if (!entry.interactionId || !entry.target || !isInMFE(entry.target, id)) return
-    if (vitals.inp === null || entry.duration > vitals.inp.value) {
-      vitals.inp = {
-        value: entry.duration,
-        interactionTarget: getElementSelector(entry.target),
-        interactionTime: entry.startTime,
-        interactionType: entry.name,
-        inputDelay: entry.processingStart ? entry.processingStart - entry.startTime : null,
-        processingDuration: (entry.processingStart && entry.processingEnd) ? entry.processingEnd - entry.processingStart : null,
-        presentationDelay: (entry.processingEnd && entry.duration) ? entry.duration - (entry.processingEnd - entry.startTime) : null,
-        nextPaintTime: entry.startTime + entry.duration,
-        loadState: globalScope.document?.readyState || null
-      }
+  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) {
+      // 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
     }
   })
 
+  const interactionEvents = ['pointerdown', 'keydown']
+  const disconnectInteractionListeners = () => {
+    interactionEvents.forEach(type => {
+      globalScope.removeEventListener(type, handleInteraction, { passive: true })
+    })
+  }
+
   // Disconnect all observers
   vitals.disconnect = () => {
     // Disconnect all observers
@@ -236,6 +251,7 @@ export function trackMFEVitals (id) {
         // Observer may already be disconnected
       }
     })
+    disconnectInteractionListeners()
   }
 
   // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
@@ -243,12 +259,21 @@ export function trackMFEVitals (id) {
   const disconnectLCP = () => {
     try {
       lcpObs?.disconnect()
+      resizeObs?.disconnect()
     } catch (e) {
       // Observer may already be disconnected
     }
   }
-  ;['click', 'keydown', 'scroll'].forEach(type => {
-    globalScope.addEventListener(type, disconnectLCP, { once: true, passive: true })
+
+  const handleInteraction = (event) => {
+    if (!isInMFE(event?.target, id)) return
+
+    disconnectLCP()
+    disconnectInteractionListeners()
+  }
+
+  interactionEvents.forEach(type => {
+    globalScope.addEventListener(type, handleInteraction, { passive: true })
   })
 
   // Disconnect all observers on visibility change or page unload

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)
+  const vitals = trackMFEVitals(target.id, timings)
 
   const attrs = {}
 
@@ -202,10 +202,11 @@ function register (agentRef, target) {
       timeToFetch, // fetchStart to fetchEnd
       timeToLoad: timeToFetch + timeToExecute, // fetch time and script time together
       timeToRegister: timings.registeredAt, // timestamp when register() was called
-      'nr.vitals.fcp': vitals.fcp || null, // FCP vital object with value and metadata
-      'nr.vitals.lcp': vitals.lcp || null, // LCP vital object with value and metadata
-      'nr.vitals.cls': vitals.cls || null, // CLS vital object with value and metadata
-      'nr.vitals.inp': vitals.inp || null // INP vital object with value and metadata
+      // 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)