feat: Automatically Detect MFE User Actions (#1723)

metal-messiah · web-flow · commit 2c2024e3cbb4 · 2026-05-01T10:34:30.000-06:00
diff --git a/src/common/dom/selector-path.js b/src/common/dom/selector-path.js
@@ -1,8 +1,10 @@
 /**
- * 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 { getRegisteredTargetsFromId } from '../v2/utils'
+
 /**
  * Generates a CSS selector path for the given element, if possible.
  * Also gather metadata about the element's nearest fields, and whether there are any links or buttons in the path.
@@ -12,10 +14,11 @@
  *
  * @param {HTMLElement} elem
  * @param {Array<string>} [targetFields=[]] specifies which fields to gather from the nearest element in the path
- * @returns {{path: (undefined|string), nearestFields: {}, hasButton: boolean, hasLink: boolean}}
+ * @returns {{path: (undefined|string), nearestFields: {}, targets: Array, hasButton: boolean, hasLink: boolean}}
  */
-export const analyzeElemPath = (elem, targetFields = []) => {
-  const result = { path: undefined, nearestFields: {}, hasButton: false, hasLink: false }
+export const analyzeElemPath = (elem, targetFields = [], agentRef) => {
+  const targets = []
+  const result = { path: undefined, nearestFields: {}, get targets () { return targets.length ? targets : [undefined] }, hasButton: false, hasLink: false }
   if (!elem) return result
   if (elem === window) { result.path = 'window'; return result }
   if (elem === document) { result.path = 'document'; return result }
@@ -30,6 +33,12 @@ export const analyzeElemPath = (elem, targetFields = []) => {
       result.hasButton ||= tagName === 'button' || (tagName === 'input' && elem.type.toLowerCase() === 'button')
 
       targetFields.forEach(field => { result.nearestFields[nearestAttrName(field)] ||= (elem[field]?.baseVal || elem[field]) })
+
+      const dataAttrs = elem?.dataset
+      if (dataAttrs.nrMfeId) {
+        targets.push(...getRegisteredTargetsFromId(dataAttrs.nrMfeId, agentRef))
+      }
+
       pathSelector = buildPathSelector(elem, pathSelector)
       elem = elem.parentNode
     }
diff --git a/src/features/generic_events/aggregate/index.js b/src/features/generic_events/aggregate/index.js
@@ -14,7 +14,7 @@ import { applyFnToProps } from '../../../common/util/traverse'
 import { UserActionsAggregator } from './user-actions/user-actions-aggregator'
 import { isIFrameWindow } from '../../../common/dom/iframe'
 import { isPureObject } from '../../../common/util/type-check'
-import { getVersion2Attributes } from '../../../common/v2/utils'
+import { getVersion2Attributes, getVersion2DuplicationAttributes, shouldDuplicate } from '../../../common/v2/utils'
 
 export class Aggregate extends AggregateBase {
   static featureName = FEATURE_NAME
@@ -61,7 +61,7 @@ export class Aggregate extends AggregateBase {
 
       let addUserAction = () => { /** no-op */ }
       if (isBrowserScope && agentRef.init.user_actions.enabled) {
-        this.#userActionAggregator = new UserActionsAggregator()
+        this.#userActionAggregator = new UserActionsAggregator(this.agentRef)
         this.harvestOpts.beforeUnload = () => addUserAction?.(this.#userActionAggregator.aggregationEvent)
 
         addUserAction = (aggregatedUserAction) => {
@@ -70,50 +70,54 @@ export class Aggregate extends AggregateBase {
              * so we still need to validate that an event was given to this method before we try to add */
             if (aggregatedUserAction?.event) {
               const { target, timeStamp, type } = aggregatedUserAction.event
-              const userActionEvent = {
-                eventType: 'UserAction',
-                timestamp: this.#toEpoch(timeStamp),
-                action: type,
-                actionCount: aggregatedUserAction.count,
-                actionDuration: aggregatedUserAction.relativeMs[aggregatedUserAction.relativeMs.length - 1],
-                actionMs: aggregatedUserAction.relativeMs,
-                rageClick: aggregatedUserAction.rageClick,
-                target: aggregatedUserAction.selectorPath,
-                currentUrl: aggregatedUserAction.currentUrl,
-                ...(isIFrameWindow(window) && { iframe: true }),
-                ...(this.agentRef.init.user_actions.elementAttributes.reduce((acc, field) => {
+
+              aggregatedUserAction.targets.forEach(mfeTarget => {
+                const userActionEvent = {
+                  eventType: 'UserAction',
+                  timestamp: this.#toEpoch(timeStamp),
+                  action: type,
+                  actionCount: aggregatedUserAction.count,
+                  actionDuration: aggregatedUserAction.relativeMs[aggregatedUserAction.relativeMs.length - 1],
+                  actionMs: aggregatedUserAction.relativeMs,
+                  rageClick: aggregatedUserAction.rageClick,
+                  target: aggregatedUserAction.selectorPath,
+                  currentUrl: aggregatedUserAction.currentUrl,
+                  ...(isIFrameWindow(window) && { iframe: true }),
+                  ...(this.agentRef.init.user_actions.elementAttributes.reduce((acc, field) => {
                   /** prevent us from capturing an obscenely long value */
-                  if (canTrustTargetAttribute(field)) acc[targetAttrName(field)] = String(target[field]).trim().slice(0, 128)
-                  return acc
-                }, {})),
-                ...aggregatedUserAction.nearestTargetFields,
-                ...(aggregatedUserAction.deadClick && { deadClick: true }),
-                ...(aggregatedUserAction.errorClick && { errorClick: true })
-              }
-              this.addEvent(userActionEvent)
-              this.#trackUserActionSM(userActionEvent)
-
-              /**
+                    if (canTrustTargetAttribute(field)) acc[targetAttrName(field)] = String(target[field]).trim().slice(0, 128)
+                    return acc
+                  }, {})),
+                  ...aggregatedUserAction.nearestTargetFields,
+                  ...(aggregatedUserAction.deadClick && { deadClick: true }),
+                  ...(aggregatedUserAction.errorClick && { errorClick: true })
+                }
+                this.addEvent(userActionEvent, mfeTarget)
+
+                this.#trackUserActionSM(userActionEvent)
+
+                /**
                * Returns the original target field name with `target` prepended and camelCased
                * @param {string} originalFieldName
                * @returns {string} the target field name
                */
-              function targetAttrName (originalFieldName) {
+                function targetAttrName (originalFieldName) {
                 /** preserve original renaming structure for pre-existing field maps */
-                if (originalFieldName === 'tagName') originalFieldName = 'tag'
-                if (originalFieldName === 'className') originalFieldName = 'class'
-                /** return the original field name, cap'd and prepended with target to match formatting */
-                return `target${originalFieldName.charAt(0).toUpperCase() + originalFieldName.slice(1)}`
-              }
+                  if (originalFieldName === 'tagName') originalFieldName = 'tag'
+                  if (originalFieldName === 'className') originalFieldName = 'class'
+                  /** return the original field name, cap'd and prepended with target to match formatting */
+                  return `target${originalFieldName.charAt(0).toUpperCase() + originalFieldName.slice(1)}`
+                }
 
-              /**
+                /**
                * Only trust attributes that exist on HTML element targets, which excludes the window and the document targets
                * @param {string} attribute The attribute to check for on the target element
                * @returns {boolean} Whether the target element has the attribute and can be trusted
                */
-              function canTrustTargetAttribute (attribute) {
-                return !!(aggregatedUserAction.selectorPath !== 'window' && aggregatedUserAction.selectorPath !== 'document' && target instanceof HTMLElement && target?.[attribute])
-              }
+                function canTrustTargetAttribute (attribute) {
+                  return !!(aggregatedUserAction.selectorPath !== 'window' && aggregatedUserAction.selectorPath !== 'document' && target instanceof HTMLElement && target?.[attribute])
+                }
+              })
             }
           } catch (e) {
             // do nothing for now
@@ -314,9 +318,7 @@ export class Aggregate extends AggregateBase {
       timestamp: this.#toEpoch(now()),
       /** all generic events require pageUrl(s) */
       pageUrl: cleanURL('' + initialLocation),
-      currentUrl: cleanURL('' + location),
-      /** Specific attributes only supplied if harvesting to endpoint version 2 */
-      ...(getVersion2Attributes(target, this))
+      currentUrl: cleanURL('' + location)
     }
 
     const eventAttributes = {
@@ -328,7 +330,8 @@ export class Aggregate extends AggregateBase {
       ...obj
     }
 
-    this.events.add(eventAttributes)
+    this.events.add({ ...eventAttributes, ...getVersion2Attributes(target, this) })
+    if (shouldDuplicate(target, this.agentRef)) this.addEvent({ ...eventAttributes, ...getVersion2DuplicationAttributes(target, this) })
   }
 
   serializer (eventBuffer) {
diff --git a/src/features/generic_events/aggregate/user-actions/aggregated-user-action.js b/src/features/generic_events/aggregate/user-actions/aggregated-user-action.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 { RAGE_CLICK_THRESHOLD_EVENTS, RAGE_CLICK_THRESHOLD_MS } from '../../constants'
@@ -17,6 +17,7 @@ export class AggregatedUserAction {
     this.currentUrl = cleanURL('' + location)
     this.deadClick = false
     this.errorClick = false
+    this.targets = selectorInfo.targets
   }
 
   /**
diff --git a/src/features/generic_events/aggregate/user-actions/user-actions-aggregator.js b/src/features/generic_events/aggregate/user-actions/user-actions-aggregator.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 { analyzeElemPath } from '../../../../common/dom/selector-path'
@@ -16,7 +16,8 @@ export class UserActionsAggregator {
   #domObserver = undefined
   #errorClickTimer = undefined
 
-  constructor () {
+  constructor (agentRef) {
+    this.agentRef = agentRef
     if (gosNREUMOriginals().o.MO) {
       this.#domObserver = new MutationObserver(this.isLiveClick.bind(this))
     }
@@ -40,7 +41,7 @@ export class UserActionsAggregator {
   process (evt, targetFields) {
     if (!evt) return
     const targetElem = OBSERVED_WINDOW_EVENTS.includes(evt.type) ? window : evt.target
-    const selectorInfo = analyzeElemPath(targetElem, targetFields)
+    const selectorInfo = analyzeElemPath(targetElem, targetFields, this.agentRef)
 
     // if selectorInfo.path is undefined, aggregation will be skipped for this event
     const aggregationKey = getAggregationKey(evt, selectorInfo.path)
diff --git a/tests/specs/api/register/auto-detection-user-actions.e2e.js b/tests/specs/api/register/auto-detection-user-actions.e2e.js
@@ -0,0 +1,140 @@
+import {
+  testMFEInsRequest
+} from '../../../../tools/testing-server/utils/expect-tests'
+
+describe('Register API - Auto-Detection - User Actions', () => {
+  beforeEach(async () => {
+    await browser.enableLogging()
+  })
+
+  afterEach(async () => {
+    await browser.destroyAgentSession()
+  })
+
+  async function interactWithPage () {
+    // Click the button in the main MFE (id: vite-main-mfe)
+    const button = await $('#mfe-main-button')
+    await button.click().catch(() => {})
+
+    // Click the div created by 2nd-mfe (id: vite-second-mfe)
+    const secondMfeDiv = await $('#second-mfe-div')
+    await secondMfeDiv.click()
+
+    // Wait for lazy content to load, then click it
+    async function clickLazyButton () {
+      const lazyButton = await $('#lazy-button')
+      if (await lazyButton.isExisting()) {
+        await lazyButton.click()
+      } else {
+        await browser.pause(500)
+        await clickLazyButton()
+      }
+    }
+    await clickLazyButton()
+    await browser.pause(1000)
+    await browser.refresh() // force any pending useractions or bIxn requests to release and harvest
+  }
+
+  it('should auto-detect multiple MFEs from different script sources for UserAction events', async () => {
+    const [insCapture] = await browser.testHandle.createNetworkCaptures('bamServer', [
+      { test: testMFEInsRequest }
+    ])
+
+    await browser.url(await browser.testHandle.assetURL('test-builds/vite-react-mfe/index.html', {
+      init: {
+        api: {
+          allow_registered_children: true
+        },
+        logging: {
+          enabled: true
+        }
+      }
+    }))
+
+    await browser.waitForAgentLoad()
+
+    // trigger all the events
+    await interactWithPage()
+
+    const [insHarvests] = await Promise.all([
+      insCapture.waitForResult({ timeout: 10000 })
+    ])
+
+    // Verify UserAction events from both MFEs (INS endpoint)
+    const allUserActions = insHarvests.flatMap(harvest => (harvest.request.body.ins || []))
+    expect(allUserActions.length).toBeGreaterThan(0)
+
+    // 2nd-mfe UserAction
+    const secondMfeUserAction = allUserActions.find(e => e['source.id'] === 'vite-second-mfe' && e.eventType === 'UserAction')
+    expect(secondMfeUserAction).toBeDefined()
+    expect(secondMfeUserAction['source.name']).toEqual('2nd-mfe')
+    expect(secondMfeUserAction['source.type']).toEqual('MFE')
+
+    // main MFE UserAction
+    const mainMfeUserAction = allUserActions.find(e => e['source.id'] === 'vite-main-mfe' && e.eventType === 'UserAction')
+    expect(mainMfeUserAction).toBeDefined()
+    expect(mainMfeUserAction['source.name']).toEqual('Main MFE')
+    expect(mainMfeUserAction['source.type']).toEqual('MFE')
+
+    // lazy loaded UserAction (should also report as vite-main-mfe)
+    const lazyUserAction = allUserActions.find(e => e['source.id'] === 'vite-main-mfe' && e.eventType === 'UserAction' && e.targetId === 'lazy-button')
+    expect(lazyUserAction).toBeDefined()
+    expect(lazyUserAction['source.name']).toEqual('Main MFE')
+    expect(lazyUserAction['source.type']).toEqual('MFE')
+  })
+
+  it('should support duplicate_registered_data with auto-detection for UserAction events', async () => {
+    const [mfeInsCapture] = await browser.testHandle.createNetworkCaptures('bamServer', [
+      { test: testMFEInsRequest }
+    ])
+
+    await browser.url(await browser.testHandle.assetURL('test-builds/vite-react-mfe/index.html', {
+      init: {
+        api: {
+          allow_registered_children: true,
+          duplicate_registered_data: true
+        }
+      },
+      loader: 'spa'
+    }))
+
+    await browser.waitForAgentLoad()
+
+    // trigger all the events
+    await interactWithPage()
+
+    // Verify MFE events exist at /events/2/ endpoint
+    const [mfeInsHarvests] = await Promise.all([
+      mfeInsCapture.waitForResult({ timeout: 10000 })
+    ])
+
+    // MFE UserAction events (/ins/2/)
+    const allMfeUserActions = mfeInsHarvests.flatMap(harvest => (harvest.request.body.ins || []))
+    expect(allMfeUserActions.length).toBeGreaterThan(0)
+
+    // UserAction duplication
+    const secondMfeUserAction = allMfeUserActions.find(e => e['source.id'] === 'vite-second-mfe' && e.eventType === 'UserAction')
+    expect(secondMfeUserAction).toBeDefined()
+    expect(secondMfeUserAction['source.name']).toEqual('2nd-mfe')
+    expect(secondMfeUserAction['source.type']).toEqual('MFE')
+    const duplicatedSecondMfeUserAction = allMfeUserActions.find(e => e['child.id'] === 'vite-second-mfe' && e.eventType === 'UserAction')
+    expect(duplicatedSecondMfeUserAction['entity.guid']).toBeDefined()
+    expect(duplicatedSecondMfeUserAction['child.type']).toEqual('MFE')
+
+    const mainMfeUserAction = allMfeUserActions.find(e => e['source.id'] === 'vite-main-mfe' && e.eventType === 'UserAction')
+    expect(mainMfeUserAction).toBeDefined()
+    expect(mainMfeUserAction['source.name']).toEqual('Main MFE')
+    expect(mainMfeUserAction['source.type']).toEqual('MFE')
+    const duplicatedMainMfeUserAction = allMfeUserActions.find(e => e['child.id'] === 'vite-main-mfe' && e.eventType === 'UserAction')
+    expect(duplicatedMainMfeUserAction['entity.guid']).toBeDefined()
+    expect(duplicatedMainMfeUserAction['child.type']).toEqual('MFE')
+
+    const lazyUserAction = allMfeUserActions.find(e => e['source.id'] === 'vite-main-mfe' && e.eventType === 'UserAction' && e.targetId === 'lazy-button')
+    expect(lazyUserAction).toBeDefined()
+    expect(lazyUserAction['source.name']).toEqual('Main MFE')
+    expect(lazyUserAction['source.type']).toEqual('MFE')
+    const duplicatedLazyUserAction = allMfeUserActions.find(e => e['child.id'] === 'vite-main-mfe' && e.eventType === 'UserAction' && e.targetId === 'lazy-button')
+    expect(duplicatedLazyUserAction['entity.guid']).toBeDefined()
+    expect(duplicatedLazyUserAction['child.type']).toEqual('MFE')
+  })
+})
