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

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

@@ -0,0 +1,281 @@
+/**
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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());
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * 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) => {
+  try {
+    let curr = node.nodeType === 1 ? node : node.parentElement;
+    while (curr?.tagName) {
+      if (curr.dataset?.nrMfeId === id) return true;
+      curr = curr.parentNode;
+    }
+  } catch (e) {}
+  return false;
+};
+
+/**
+ * Create mutation observer for MFE nodes
+ * @param {string} id - MFE ID to track
+ * @param {Function} onMatch - Callback when matching node is added
+ * @returns {MutationObserver}
+ */
+const observeMutations = (id, onMatch) => {
+  const obs = new globalScope.MutationObserver(mutations => {
+    mutations.forEach(m => m.addedNodes.forEach(node => {
+      if (isObservable(node) && isInMFE(node, id)) {
+        onMatch(node, obs);
+      }
+    }));
+  });
+  obs.observe(globalScope.document, {
+    childList: true,
+    subtree: true
+  });
+  return obs;
+};
+
+/**
+ * Create performance observer for MFE entries
+ * @param {Array} observers - Array to track observers
+ * @param {Object} config - Observer configuration
+ * @param {Function} onEntry - Callback for each entry
+ * @returns {PerformanceObserver|null} Observer if successful, null if unsupported
+ */
+const observePerformance = (observers, config, onEntry) => {
+  try {
+    const obs = new globalScope.PerformanceObserver(list => {
+      list.getEntries().forEach(onEntry);
+    });
+    obs.observe(config);
+    observers.push(obs);
+    return obs;
+  } catch (e) {
+    return null;
+  }
+};
+
+/**
+ * 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}}
+ */
+export function trackMFEVitals(id) {
+  const vitals = {
+    fcp: null,
+    lcp: null,
+    cls: null,
+    inp: null,
+    disconnect: () => {}
+  };
+  if (!id || !isBrowserScope || !globalScope.MutationObserver || !globalScope.PerformanceObserver) return vitals;
+  const observers = [];
+
+  // Track FCP - first contentful paint
+  observeMutations(id, (node, obs) => {
+    if (vitals.fcp === null) {
+      vitals.fcp = {
+        value: now(),
+        loadState: globalScope.document?.readyState || null
+      };
+      obs.disconnect();
+    }
+  });
+
+  // Track LCP - largest contentful paint
+  let largestSize = 0;
+  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)
+        };
+      }
+    } catch (e) {
+      // Element may be detached from DOM
+    }
+  });
+  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 => {
+      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;
+        }
+        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
+  }, 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
+      };
+    }
+  });
+
+  // Disconnect all observers
+  vitals.disconnect = () => {
+    // Disconnect all observers
+    observers.forEach(obs => {
+      try {
+        obs?.disconnect();
+      } catch (e) {
+        // Observer may already be disconnected
+      }
+    });
+  };
+
+  // Auto-disconnect LCP observer on user interaction (per Web Vitals spec)
+  // CLS and INP continue tracking until visibility change or deregister
+  const disconnectLCP = () => {
+    try {
+      lcpObs?.disconnect();
+    } catch (e) {
+      // Observer may already be disconnected
+    }
+  };
+  ['click', 'keydown', 'scroll'].forEach(type => {
+    globalScope.addEventListener(type, disconnectLCP, {
+      once: true,
+      passive: true
+    });
+  })
+
+  // Disconnect all observers on visibility change or page unload
+  ;
+  ['visibilitychange', 'pagehide'].forEach(type => {
+    globalScope.addEventListener(type, vitals.disconnect, {
+      once: true,
+      passive: true
+    });
+  });
+  return vitals;
+}

package/dist/esm/common/wrap/wrap-websocket.js

@@ -8,6 +8,7 @@ import { now } from '../timing/now';
 import { cleanURL } from '../url/clean-url';
 import { gosNREUMOriginals } from '../window/nreum';
 import { subscribeToPageUnload } from '../window/page-visibility';
+import { EVENT_TYPES } from '../constants/events';
 const wrapped = {};
 const openWebSockets = new Set(); // track all instances to close out metrics on page unload
 
@@ -33,7 +34,7 @@ export function wrapWebSocket(sharedEE) {
     });
   });
   class WrappedWebSocket extends WebSocket {
-    static name = 'WebSocket';
+    static name = EVENT_TYPES.WS;
     static toString() {
       // fake native WebSocket when static class is stringified
       return 'function WebSocket() { [native code] }';

package/dist/esm/common/wrap/wrap-xhr.js

@@ -16,7 +16,7 @@ import { globalScope } from '../constants/runtime';
 import { warn } from '../util/console';
 import { findTargetsFromStackTrace } from '../v2/utils';
 const wrapped = {};
-const XHR_PROPS = ['open', 'send']; // these are the specific funcs being wrapped on all XMLHttpRequests(.prototype)
+const XHR_PROPS = ['open', 'send', 'setRequestHeader']; // these are the specific funcs being wrapped on all XMLHttpRequests(.prototype)
 
 /**
  * Wraps the native XMLHttpRequest (XHR) object to emit custom events to its readystatechange event and an assortment

package/dist/esm/features/ajax/aggregate/gql.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 { isPureObject } from '../../../common/util/type-check';
@@ -89,4 +89,42 @@ function parseGQLQueryString(gqlQueryString) {
 }
 function validateGQLObject(obj) {
   return !(typeof obj !== 'object' || !obj.query || typeof obj.query !== 'string');
+}
+
+/**
+ * Checks if a response object has valid GraphQL errors.
+ * @param {object} response - A single GraphQL response object
+ * @returns {boolean} True if the response has valid errors
+ */
+function hasValidGQLErrors(response) {
+  return Array.isArray(response?.errors) && response.errors.some(err => err && typeof err === 'object' && typeof err.message === 'string');
+}
+
+/**
+ * Checks if a response body contains GraphQL errors according to the GraphQL spec.
+ * A valid GraphQL error response contains an "errors" array with at least one error object.
+ * Supports both single and batched GraphQL responses.
+ * @param {string|object|array} [responseBody] The response body to check
+ * @returns {boolean} True if the response contains GraphQL errors
+ */
+export function hasGQLErrors(responseBody) {
+  if (!responseBody) return false;
+  try {
+    let parsed = responseBody;
+
+    // Parse string to object if needed
+    if (typeof responseBody === 'string') {
+      parsed = JSON.parse(responseBody);
+    }
+
+    // Handle batched GraphQL responses (array of response objects)
+    if (Array.isArray(parsed)) {
+      return parsed.some(hasValidGQLErrors);
+    }
+
+    // Handle single GraphQL response
+    return hasValidGQLErrors(parsed);
+  } catch (err) {
+    return false;
+  }
 }

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

@@ -6,13 +6,16 @@ import { registerHandler } from '../../../common/event-emitter/register-handler'
 import { stringify } from '../../../common/util/stringify';
 import { handle } from '../../../common/event-emitter/handle';
 import { setDenyList, shouldCollectEvent } from '../../../common/deny-list/deny-list';
-import { AJAX_ID, FEATURE_NAME } from '../constants';
+import { FEATURE_NAME, AJAX_ID } from '../constants';
 import { FEATURE_NAMES } from '../../../loaders/features/features';
 import { AggregateBase } from '../../utils/aggregate-base';
-import { parseGQL } from './gql';
 import { nullable, numeric, getAddStringContext, addCustomAttributes } from '../../../common/serialize/bel-serializer';
 import { gosNREUMOriginals } from '../../../common/window/nreum';
+import { hasGQLErrors, parseGQL } from './gql';
+import { canCapturePayload, isLikelyHumanReadable, parseQueryString, createStringAdders } from '../../../common/payloads/payloads';
+import { Obfuscator } from '../../../common/util/obfuscate';
 import { getVersion2Attributes, getVersion2DuplicationAttributes, shouldDuplicate } from '../../../common/v2/utils';
+import { EVENT_TYPES } from '../../../common/constants/events';
 import { generateUuid } from '../../../common/ids/unique-id';
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME;
@@ -20,6 +23,9 @@ export class Aggregate extends AggregateBase {
     super(agentRef, FEATURE_NAME);
     setDenyList(agentRef.runtime.denyList);
     const classThis = this;
+
+    // Create obfuscator for AJAX requests
+    this.obfuscator = new Obfuscator(agentRef, EVENT_TYPES.AJAX);
     if (!agentRef.init.ajax.block_internal) {
       // if the agent is tracking ITSELF, it can spawn endless ajax requests early if they are large from custom attributes, so we just disable early harvest for ajax in this case.
       super.canHarvestEarly = false;
@@ -84,17 +90,26 @@ export class Aggregate extends AggregateBase {
       callbackDuration: metrics.cbTime,
       [AJAX_ID]: generateUuid() // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
     };
+    event.gql = params.gql = parseGQL({
+      body: ctx.requestBody,
+      query: ctx.parsedOrigin?.search
+    });
+    if (event.gql) event.gql.operationHasErrors = params.gql.operationHasErrors = hasGQLErrors(ctx.responseBody);
+    const capturePayloadSetting = this.agentRef.init.ajax.capture_payloads;
+    const shouldCapturePayload = canCapturePayload(capturePayloadSetting, params.status, event.gql?.operationHasErrors);
+    if (shouldCapturePayload) {
+      // Store raw data; obfuscation and truncation will happen in the serializer
+      params.requestQuery = event.requestQuery = parseQueryString(ctx.parsedOrigin?.search);
+      params.requestHeaders = event.requestHeaders = ctx.requestHeaders;
+      params.responseHeaders = event.responseHeaders = ctx.responseHeaders;
+      if (isLikelyHumanReadable(ctx.requestHeaders, ctx.requestBody)) params.requestBody = event.requestBody = ctx.requestBody;
+      if (isLikelyHumanReadable(ctx.responseHeaders, ctx.responseBody)) params.responseBody = event.responseBody = ctx.responseBody;
+    }
     if (ctx.dt) {
       event.spanId = ctx.dt.spanId;
       event.traceId = ctx.dt.traceId;
       event.spanTimestamp = Math.floor(this.agentRef.runtime.timeKeeper.correctAbsoluteTimestamp(ctx.dt.timestamp));
     }
-
-    // parsed from the AJAX body, looking for operationName param & parsing query for operationType
-    event.gql = params.gql = parseGQL({
-      body: ctx.body,
-      query: ctx.parsedOrigin?.search
-    });
     if (event.gql) this.reportSupportabilityMetric('Ajax/Events/GraphQL/Bytes-Added', stringify(event.gql).length);
 
     /** make a copy of the event for the MFE target if it exists */
@@ -122,7 +137,10 @@ export class Aggregate extends AggregateBase {
   }
   serializer(eventBuffer) {
     if (!eventBuffer.length) return;
-    const addString = getAddStringContext(this.agentRef.runtime.obfuscator);
+    const {
+      addString,
+      addStringWithTruncation
+    } = createStringAdders(getAddStringContext, this.obfuscator);
     let payload = 'bel.7;';
     let firstTimestamp = 0;
     for (let i = 0; i < eventBuffer.length; i++) {
@@ -147,15 +165,35 @@ export class Aggregate extends AggregateBase {
       // Since configuration objects (like info) are created new each time they are set, we have to grab the current pointer to the attr object here.
       const jsAttributes = this.agentRef.info.jsAttributes;
 
-      // add custom attributes
-      // gql decorators are added as custom attributes to alleviate need for new BEL schema
-      const attrParts = addCustomAttributes({
+      // Regular attributes: obfuscate only
+      const regularAttrs = addCustomAttributes({
         ...(jsAttributes || {}),
-        ...(event.gql || {}),
+        [AJAX_ID]: event[AJAX_ID],
+        // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
         ...(event.targetAttributes || {}),
         // used to supply the version 2 attributes, either MFE target or duplication attributes for the main agent app
-        [AJAX_ID]: event[AJAX_ID] // all AjaxRequest events should have a unique identifier to allow for easier grouping and analysis in the UI
+        ...(event.gql || {})
       }, addString);
+
+      // Payload attributes: obfuscate then truncate
+      const payloadAttrs = addCustomAttributes({
+        ...(event.requestBody ? {
+          requestBody: event.requestBody
+        } : {}),
+        ...(event.requestHeaders ? {
+          requestHeaders: event.requestHeaders
+        } : {}),
+        ...(event.requestQuery ? {
+          requestQuery: event.requestQuery
+        } : {}),
+        ...(event.responseBody ? {
+          responseBody: event.responseBody
+        } : {}),
+        ...(event.responseHeaders ? {
+          responseHeaders: event.responseHeaders
+        } : {})
+      }, addStringWithTruncation);
+      const attrParts = [...regularAttrs, ...payloadAttrs];
       fields.unshift(numeric(attrParts.length));
       insert += fields.join(',');
       if (attrParts && attrParts.length > 0) {

package/dist/esm/features/ajax/constants.js

@@ -4,4 +4,9 @@
  */
 import { FEATURE_NAMES } from '../../loaders/features/features';
 export const FEATURE_NAME = FEATURE_NAMES.ajax;
+export const CAPTURE_PAYLOAD_SETTINGS = {
+  NONE: 'none',
+  FAILURES: 'failures',
+  ALL: 'all'
+};
 export const AJAX_ID = 'ajaxRequest.id';