feat: Automatically Detect MFE AJAX (#1722)

Co-authored-by: ptang-nr <ptang@newrelic.com>
Co-authored-by: Chunwai Li <cli@newrelic.com>

Author: 3 people

.github/workflows/publish-experiment.yml

@@ -59,7 +59,7 @@ jobs:
           window.NREUM.init.proxy = {} // Proxy won't work for experiments
           window.NREUM.init.session_replay.enabled = true
           window.NREUM.init.session_trace.enabled = true
-          window.NREUM.init.feature_flags = ['ajax_metrics_deny_list']
+          window.NREUM.init.feature_flags = ['ajax_metrics_deny_list', 'register']
           window.NREUM.init.user_actions = {elementAttributes: ['id', 'className', 'tagName', 'type', 'ariaLabel', 'alt', 'title']}
           EOF
       - name: Upload experiment

src/common/constants/agent-constants.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025 New Relic, Inc. All rights reserved.
+ * Copyright 2020-2026 New Relic, Inc. All rights reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
 import { FEATURE_NAMES } from '../../loaders/features/features'
@@ -11,8 +11,7 @@ export const SESSION_ERROR = 'SESSION_ERROR'
 
 export const SUPPORTS_REGISTERED_ENTITIES = {
   [FEATURE_NAMES.logging]: true,
-  // flip other features here when they are supported by DEM consumers
-  [FEATURE_NAMES.genericEvents]: false,
-  [FEATURE_NAMES.jserrors]: false,
-  [FEATURE_NAMES.ajax]: false
+  [FEATURE_NAMES.genericEvents]: true,
+  [FEATURE_NAMES.jserrors]: true,
+  [FEATURE_NAMES.ajax]: true
 }

src/common/util/script-tracker.js

@@ -54,7 +54,7 @@ if (globalScope.PerformanceObserver?.supportedEntryTypes.includes('resource')) {
  * @param {string} stack The error stack trace
  * @returns {string[]} Array of cleaned URLs found in the stack trace
  */
-function extractUrlsFromStack (stack) {
+export function extractUrlsFromStack (stack) {
   if (!stack || typeof stack !== 'string') return []
 
   const urls = new Set()
@@ -80,7 +80,7 @@ function extractUrlsFromStack (stack) {
  * Returns a deep stack trace by temporarily increasing the stack trace limit.
  * @returns {Error.stack | undefined}
  */
-function getDeepStackTrace () {
+export function getDeepStackTrace () {
   let stack
   try {
     const originalStackLimit = Error.stackTraceLimit

src/common/util/v2.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { extractUrlsFromStack, getDeepStackTrace } from './script-tracker'
+
 /**
  * @enum {string}
  * @readonly
@@ -14,6 +16,30 @@ export const V2_TYPES = {
   BA: 'BA'
 }
 
+/**
+ * Returns the registered target associated with a given ID. Returns undefined if not found.
+ * @param {string|number} id
+ * @param {*} agentRef the agent reference
+ * @returns {import("../../interfaces/registered-entity").RegisterAPIMetadataTarget[]}
+ */
+export function getRegisteredTargetsFromId (id, agentRef) {
+  if (!id || !agentRef?.init.api.allow_registered_children) return []
+  const registeredEntities = agentRef.runtime.registeredEntities
+  return registeredEntities?.filter(entity => String(entity.metadata.target.id) === String(id)).map(entity => entity.metadata.target) || []
+}
+
+/**
+ * Returns the registered target(s) associated with a given filename if found in the resource timing API during registration. Returns an empty array if not found.
+ * @param {string} filename
+ * @param {*} agentRef
+ * @returns {import("../../interfaces/registered-entity").RegisterAPIMetadataTarget[]}
+ */
+export function getRegisteredTargetsFromFilename (filename, agentRef) {
+  if (!filename || !agentRef?.init.api.allow_registered_children) return []
+  const registeredEntities = agentRef.runtime.registeredEntities
+  return registeredEntities?.filter(entity => entity.metadata.timings?.asset?.endsWith(filename)).map(entity => entity.metadata.target) || []
+}
+
 /**
  * When given a valid target, returns an object with the V2 payload attributes.  Returns an empty object otherwise.
  * @note Field names may change as the schema is finalized
@@ -33,11 +59,36 @@ export function getVersion2Attributes (target, aggregateInstance) {
     }
   }
   /** otherwise, the data belongs to the target (MFE) and should be attributed as such */
-  return {
-    'source.id': target.id,
-    'source.name': target.name,
-    'source.type': target.type,
-    'parent.id': target.parent?.id || containerAgentEntityGuid,
-    'parent.type': target.parent?.type || V2_TYPES.BA
+  return target.attributes
+}
+
+/**
+ * Returns the attributes used for duplicating data in version 2 of the harvest endpoint. If not valid for duplication, returns an empty object.
+ * @param {import("../../interfaces/registered-entity").RegisterAPIMetadataTarget} target
+ * @param {*} aggregateInstance the aggregate instance calling the method
+ * @returns {Object}
+ */
+export function getVersion2DuplicationAttributes (target, aggregateInstance) {
+  if (aggregateInstance?.harvestEndpointVersion !== 2 || !shouldDuplicate(target, aggregateInstance?.agentRef)) return {}
+  return { 'child.id': target.id, 'child.type': target.type, ...getVersion2Attributes(undefined, aggregateInstance) }
+}
+
+export function shouldDuplicate (target, agentRef) {
+  return !!target && agentRef.init.api.duplicate_registered_data
+}
+
+export function findTargetsFromStackTrace (agentRef) {
+  if (!agentRef?.init.api.allow_registered_children) return []
+
+  const targets = []
+  try {
+    var urls = extractUrlsFromStack(getDeepStackTrace())
+    let iterator = urls.length - 1
+    while (urls[iterator]) {
+      targets.push(...getRegisteredTargetsFromFilename(urls[iterator--], agentRef))
+    }
+  } catch (err) {
+    // Silent catch to prevent errors from propagating
   }
+  return targets
 }

src/common/wrap/wrap-fetch.js

@@ -9,6 +9,7 @@
  */
 import { ee as baseEE, contextId } from '../event-emitter/contextual-ee'
 import { globalScope } from '../constants/runtime'
+import { findTargetsFromStackTrace } from '../util/v2'
 
 var prefix = 'fetch-'
 var bodyPrefix = prefix + 'body-'
@@ -27,7 +28,7 @@ const wrapped = {}
  *     event emitter will be based.
  * @returns {Object} Scoped event emitter with a debug ID of `fetch`.
  */
-export function wrapFetch (sharedEE) {
+export function wrapFetch (sharedEE, agentRef) {
   const ee = scopedEE(sharedEE)
   if (!(Req && Res && globalScope.fetch)) {
     return ee
@@ -44,13 +45,16 @@ export function wrapFetch (sharedEE) {
   })
   wrapPromiseMethod(globalScope, 'fetch', prefix)
 
-  ee.on(prefix + 'end', function (err, res) {
+  ee.on(prefix + 'end', function (err, res, targets) {
     var ctx = this
+    // undefined target reports to container
+    ctx.targets = targets || [undefined]
     if (res) {
       var size = res.headers.get('content-length')
       if (size !== null) {
         ctx.rxSize = size
       }
+
       ee.emit(prefix + 'done', [null, res], ctx)
     } else {
       ee.emit(prefix + 'done', [err], ctx)
@@ -67,11 +71,16 @@ export function wrapFetch (sharedEE) {
    */
   function wrapPromiseMethod (target, name, prefix) {
     var fn = target[name]
+
     if (typeof fn === 'function') {
       target[name] = function () {
         var args = [...arguments]
 
-        var ctx = {}
+        const ctx = {}
+        const targets = findTargetsFromStackTrace(agentRef)
+        // undefined target reports to container
+        if (!targets.length) targets.push(undefined)
+
         // we are wrapping args in an array so we can preserve the reference
         ee.emit(prefix + 'before-start', [args], ctx)
         var dtPayload
@@ -83,10 +92,10 @@ export function wrapFetch (sharedEE) {
 
         // Note we need to cast the returned (orig) Promise from native APIs into the current global Promise, which may or may not be our WrappedPromise.
         return origPromiseFromFetch.then(function (val) {
-          ee.emit(prefix + 'end', [null, val], origPromiseFromFetch)
+          ee.emit(prefix + 'end', [null, val, targets], origPromiseFromFetch)
           return val
         }, function (err) {
-          ee.emit(prefix + 'end', [err], origPromiseFromFetch)
+          ee.emit(prefix + 'end', [err, undefined, targets], origPromiseFromFetch)
           throw err
         })
       }

src/common/wrap/wrap-function.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
  */
 

src/common/wrap/wrap-xhr.js

@@ -14,6 +14,7 @@ import { eventListenerOpts } from '../event-listener/event-listener-opts'
 import { createWrapperWithEmitter as wfn } from './wrap-function'
 import { globalScope } from '../constants/runtime'
 import { warn } from '../util/console'
+import { findTargetsFromStackTrace } from '../util/v2'
 
 const wrapped = {}
 const XHR_PROPS = ['open', 'send'] // these are the specific funcs being wrapped on all XMLHttpRequests(.prototype)
@@ -25,7 +26,7 @@ const XHR_PROPS = ['open', 'send'] // these are the specific funcs being wrapped
  * @returns {Object} Scoped event emitter with a debug ID of `xhr`.
  */
 // eslint-disable-next-line
-export function wrapXhr (sharedEE) {
+export function wrapXhr (sharedEE, agentRef) {
   var baseEE = sharedEE || contextualEE
   const ee = scopedEE(baseEE)
 
@@ -54,6 +55,9 @@ export function wrapXhr (sharedEE) {
   function newXHR (opts) {
     const xhr = new OrigXHR(opts)
     const context = ee.context(xhr)
+    context.targets = findTargetsFromStackTrace(agentRef)
+    // undefined target reports to container
+    if (!context.targets.length) context.targets.push(undefined)
 
     try {
       ee.emit('new-xhr', [xhr], context)

src/features/ajax/aggregate/index.js

@@ -12,6 +12,7 @@ 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 { getVersion2Attributes, getVersion2DuplicationAttributes, shouldDuplicate } from '../../../common/util/v2'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -30,8 +31,8 @@ export class Aggregate extends AggregateBase {
 
     registerHandler('returnAjax', event => this.events.add(event), this.featureName, this.ee)
 
-    registerHandler('xhr', function () { // the EE-drain system not only switches "this" but also passes a new EventContext with info. Should consider platform refactor to another system which passes a mutable context around separately and predictably to avoid problems like this.
-      classThis.storeXhr(...arguments, this) // this switches the context back to the class instance while passing the NR context as an argument -- see "ctx" in storeXhr
+    registerHandler('xhr', function (params, metrics, startTime, endTime, type, target) { // the EE-drain system not only switches "this" but also passes a new EventContext with info. Should consider platform refactor to another system which passes a mutable context around separately and predictably to avoid problems like this.
+      classThis.storeXhr(params, metrics, startTime, endTime, type, target, this) // this switches the context back to the class instance while passing the NR context as an argument -- see "ctx" in storeXhr
     }, this.featureName, this.ee)
 
     this.ee.on('long-task', (task, originator) => {
@@ -44,7 +45,7 @@ export class Aggregate extends AggregateBase {
     this.waitForFlags(([])).then(() => this.drain())
   }
 
-  storeXhr (params, metrics, startTime, endTime, type, ctx) {
+  storeXhr (params, metrics, startTime, endTime, type, target, ctx) {
     metrics.time = startTime
 
     // send to session traces
@@ -108,11 +109,21 @@ export class Aggregate extends AggregateBase {
     })
     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 */
+    if (target) {
+      this.events.add({ ...event, targetAttributes: getVersion2Attributes(target, this) })
+      if (shouldDuplicate(target, this.agentRef)) this.reportContainerEvent({ ...event, targetAttributes: getVersion2DuplicationAttributes(target, this) }, ctx)
+    } else {
+      this.reportContainerEvent(event, ctx)
+    }
+  }
+
+  reportContainerEvent (evt, ctx) {
     const softNavInUse = Boolean(this.agentRef.features?.[FEATURE_NAMES.softNav])
     if (softNavInUse) { // when SN is running, pass the event w/ info to it for evaluation -- either part of an interaction or is given back
-      handle('ajax', [event, ctx], undefined, FEATURE_NAMES.softNav, this.ee)
+      handle('ajax', [evt, ctx], undefined, FEATURE_NAMES.softNav, this.ee)
     } else {
-      this.events.add(event)
+      this.events.add(evt)
     }
   }
 
@@ -154,7 +165,12 @@ export class Aggregate extends AggregateBase {
 
       // add custom attributes
       // gql decorators are added as custom attributes to alleviate need for new BEL schema
-      const attrParts = addCustomAttributes({ ...(jsAttributes || {}), ...(event.gql || {}) }, addString)
+      const attrParts = addCustomAttributes({
+        ...(jsAttributes || {}),
+        ...(event.gql || {}),
+        ...(event.targetAttributes || {}) // used to supply the version 2 attributes, either MFE target or duplication attributes for the main agent app
+      }, addString)
+
       fields.unshift(numeric(attrParts.length))
 
       insert += fields.join(',')

src/features/ajax/instrument/index.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 { gosNREUMOriginals } from '../../../common/window/nreum'
@@ -59,8 +59,8 @@ export class Instrument extends InstrumentBase {
       // do nothing
     }
 
-    wrapFetch(this.ee)
-    wrapXhr(this.ee)
+    wrapFetch(this.ee, agentRef)
+    wrapXhr(this.ee, agentRef)
     subscribeToEvents(agentRef, this.ee, this.handler, this.dt)
 
     this.importAggregator(agentRef, () => import(/* webpackChunkName: "ajax-aggregate" */ '../aggregate/index.js'))
@@ -314,14 +314,11 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     this.startTime = now()
     this.dt = dtPayload
 
-    if (fetchArguments.length >= 1) this.target = fetchArguments[0]
-    if (fetchArguments.length >= 2) this.opts = fetchArguments[1]
+    let [target, opts = {}] = fetchArguments
 
-    var opts = this.opts || {}
-    var target = this.target
     addUrl(this, extractUrl(target))
 
-    var method = ('' + ((target && target instanceof origRequest && target.method) ||
+    const method = ('' + ((target && target instanceof origRequest && target.method) ||
       opts.method || 'GET')).toUpperCase()
     this.params.method = method
     this.body = opts.body
@@ -350,7 +347,8 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
       duration: now() - this.startTime
     }
 
-    handler('xhr', [this.params, metrics, this.startTime, this.endTime, 'fetch'], this, FEATURE_NAMES.ajax)
+    const payload = [this.params, metrics, this.startTime, this.endTime, 'fetch']
+    this.targets.forEach(target => reportToAgg(payload, this, target))
   }
 
   // Create report for XHR request that has finished
@@ -377,7 +375,12 @@ function subscribeToEvents (agentRef, ee, handler, dt) {
     // Always send cbTime, even if no noticeable time was taken.
     metrics.cbTime = this.cbTime
 
-    handler('xhr', [params, metrics, this.startTime, this.endTime, 'xhr'], this, FEATURE_NAMES.ajax)
+    const payload = [params, metrics, this.startTime, this.endTime, 'xhr']
+    this.targets.forEach(target => reportToAgg(payload, this, target))
+  }
+
+  function reportToAgg (payload, context, target) {
+    handler('xhr', [...payload, target], context, FEATURE_NAMES.ajax)
   }
 
   function captureXhrData (ctx, xhr) {

src/features/generic_events/instrument/index.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
  */
 
@@ -48,8 +48,8 @@ export class Instrument extends InstrumentBase {
     let historyEE, websocketsEE
     if (websocketsEnabled) websocketsEE = wrapWebSocket(this.ee)
     if (isBrowserScope) {
-      wrapFetch(this.ee)
-      wrapXhr(this.ee)
+      wrapFetch(this.ee, agentRef)
+      wrapXhr(this.ee, agentRef)
       historyEE = wrapHistory(this.ee)
 
       if (agentRef.init.user_actions.enabled) {