@newrelic/browser-agent 1.280.0 → 1.281.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.281.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.280.0...v1.281.0) (2025-02-04)
+
+
+### Features
+
+* Capture Nearest UserAction Fields ([#1267](https://github.com/newrelic/newrelic-browser-agent/issues/1267)) ([d410937](https://github.com/newrelic/newrelic-browser-agent/commit/d410937983545a6a6aa39c52c3762f621acf1110))
+
 ## [1.280.0](https://github.com/newrelic/newrelic-browser-agent/compare/v1.279.1...v1.280.0) (2025-01-31)
 
 

package/dist/cjs/common/config/init.js

@@ -211,7 +211,8 @@ const model = () => {
     },
     ssl: undefined,
     user_actions: {
-      enabled: true
+      enabled: true,
+      elementAttributes: ['id', 'className', 'tagName', 'type']
     }
   };
 };

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

@@ -17,7 +17,7 @@ exports.VERSION = exports.RRWEB_VERSION = exports.DIST_METHOD = exports.BUILD_EN
 /**
  * Exposes the version of the agent
  */
-const VERSION = exports.VERSION = "1.280.0";
+const VERSION = exports.VERSION = "1.281.0";
 
 /**
  * Exposes the build type of the agent

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

@@ -17,7 +17,7 @@ exports.VERSION = exports.RRWEB_VERSION = exports.DIST_METHOD = exports.BUILD_EN
 /**
  * Exposes the version of the agent
  */
-const VERSION = exports.VERSION = "1.280.0";
+const VERSION = exports.VERSION = "1.281.0";
 
 /**
  * Exposes the build type of the agent

package/dist/cjs/common/dom/selector-path.js

@@ -16,8 +16,11 @@ exports.generateSelectorPath = void 0;
  * @param {boolean} includeClass
  * @returns {string|undefined}
  */
-const generateSelectorPath = elem => {
-  if (!elem) return;
+const generateSelectorPath = (elem, targetFields = []) => {
+  if (!elem) return {
+    path: undefined,
+    nearestFields: {}
+  };
   const getNthOfTypeIndex = node => {
     try {
       let i = 1;
@@ -35,12 +38,16 @@ const generateSelectorPath = elem => {
   };
   let pathSelector = '';
   let index = getNthOfTypeIndex(elem);
+  const nearestFields = {};
   try {
     while (elem?.tagName) {
       const {
         id,
         localName
       } = elem;
+      targetFields.forEach(field => {
+        nearestFields[nearestAttrName(field)] ||= elem[field];
+      });
       const selector = [localName, id ? "#".concat(id) : '', pathSelector ? ">".concat(pathSelector) : ''].join('');
       pathSelector = selector;
       elem = elem.parentNode;
@@ -48,6 +55,16 @@ const generateSelectorPath = elem => {
   } catch (err) {
     // do nothing for now
   }
-  return pathSelector ? index ? "".concat(pathSelector, ":nth-of-type(").concat(index, ")") : pathSelector : undefined;
+  const path = pathSelector ? index ? "".concat(pathSelector, ":nth-of-type(").concat(index, ")") : pathSelector : undefined;
+  return {
+    path,
+    nearestFields
+  };
+  function nearestAttrName(originalFieldName) {
+    /** preserve original renaming structure for pre-existing field maps */
+    if (originalFieldName === 'tagName') originalFieldName = 'tag';
+    if (originalFieldName === 'className') originalFieldName = 'class';
+    return "nearest".concat(originalFieldName.charAt(0).toUpperCase() + originalFieldName.slice(1));
+  }
 };
 exports.generateSelectorPath = generateSelectorPath;

package/dist/cjs/features/generic_events/aggregate/index.js

@@ -61,7 +61,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
           });
         }, this.featureName, this.ee);
       }
-      let addUserAction;
+      let addUserAction = () => {/** no-op */};
       if (_runtime.isBrowserScope && agentRef.init.user_actions.enabled) {
         this.userActionAggregator = new _userActionsAggregator.UserActionsAggregator();
         this.harvestOpts.beforeUnload = () => addUserAction?.(this.userActionAggregator.aggregationEvent);
@@ -87,20 +87,27 @@ class Aggregate extends _aggregateBase.AggregateBase {
                 ...((0, _iframe.isIFrameWindow)(window) && {
                   iframe: true
                 }),
-                ...(canTrustTargetAttribute('id') && {
-                  targetId: target.id
-                }),
-                ...(canTrustTargetAttribute('tagName') && {
-                  targetTag: target.tagName
-                }),
-                ...(canTrustTargetAttribute('type') && {
-                  targetType: target.type
-                }),
-                ...(canTrustTargetAttribute('className') && {
-                  targetClass: target.className
-                })
+                ...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
               });
 
+              /**
+               * Returns the original target field name with `target` prepended and camelCased
+               * @param {string} originalFieldName
+               * @returns {string} the target field name
+               */
+              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".concat(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
@@ -116,7 +123,7 @@ class Aggregate extends _aggregateBase.AggregateBase {
         };
         (0, _registerHandler.registerHandler)('ua', evt => {
           /** the processor will return the previously aggregated event if it has been completed by processing the current event */
-          addUserAction(this.userActionAggregator.process(evt));
+          addUserAction(this.userActionAggregator.process(evt, this.agentRef.init.user_actions.elementAttributes));
         }, this.featureName, this.ee);
       }
 

package/dist/cjs/features/generic_events/aggregate/user-actions/aggregated-user-action.js

@@ -11,13 +11,14 @@ var _constants = require("../../constants");
  */
 
 class AggregatedUserAction {
-  constructor(evt, selectorPath) {
+  constructor(evt, selectorPath, nearestTargetFields) {
     this.event = evt;
     this.count = 1;
     this.originMs = Math.floor(evt.timeStamp);
     this.relativeMs = [0];
     this.selectorPath = selectorPath;
     this.rageClick = undefined;
+    this.nearestTargetFields = nearestTargetFields;
   }
 
   /**

package/dist/cjs/features/generic_events/aggregate/user-actions/user-actions-aggregator.js

@@ -31,9 +31,12 @@ class UserActionsAggregator {
    * @param {Event} evt The event supplied by the addEventListener callback
    * @returns {AggregatedUserAction|undefined} The previous aggregation set if it has been completed by processing the current event
    */
-  process(evt) {
+  process(evt, targetFields) {
     if (!evt) return;
-    const selectorPath = getSelectorPath(evt);
+    const {
+      selectorPath,
+      nearestTargetFields
+    } = getSelectorPath(evt, targetFields);
     const aggregationKey = getAggregationKey(evt, selectorPath);
     if (!!aggregationKey && aggregationKey === this.#aggregationKey) {
       // an aggregation exists already, so lets just continue to increment
@@ -43,7 +46,7 @@ class UserActionsAggregator {
       const finishedEvent = this.#aggregationEvent;
       // then set as this new event aggregation
       this.#aggregationKey = aggregationKey;
-      this.#aggregationEvent = new _aggregatedUserAction.AggregatedUserAction(evt, selectorPath);
+      this.#aggregationEvent = new _aggregatedUserAction.AggregatedUserAction(evt, selectorPath, nearestTargetFields);
       return finishedEvent;
     }
   }
@@ -56,13 +59,24 @@ class UserActionsAggregator {
  * @returns {string}
  */
 exports.UserActionsAggregator = UserActionsAggregator;
-function getSelectorPath(evt) {
+function getSelectorPath(evt, targetFields) {
   let selectorPath;
+  let nearestTargetFields = {};
   if (_constants.OBSERVED_WINDOW_EVENTS.includes(evt.type) || evt.target === window) selectorPath = 'window';else if (evt.target === document) selectorPath = 'document';
   // if still no selectorPath, generate one from target tree that includes elem ids
-  else selectorPath = (0, _selectorPath.generateSelectorPath)(evt.target);
+  else {
+    const {
+      path,
+      nearestFields
+    } = (0, _selectorPath.generateSelectorPath)(evt.target, targetFields);
+    selectorPath = path;
+    nearestTargetFields = nearestFields;
+  }
   // if STILL no selectorPath, it will return undefined which will skip aggregation for this event
-  return selectorPath;
+  return {
+    selectorPath,
+    nearestTargetFields
+  };
 }
 
 /**

package/dist/esm/common/config/init.js

@@ -202,7 +202,8 @@ const model = () => {
     },
     ssl: undefined,
     user_actions: {
-      enabled: true
+      enabled: true,
+      elementAttributes: ['id', 'className', 'tagName', 'type']
     }
   };
 };

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

@@ -11,7 +11,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.280.0";
+export const VERSION = "1.281.0";
 
 /**
  * Exposes the build type of the agent

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

@@ -11,7 +11,7 @@
 /**
  * Exposes the version of the agent
  */
-export const VERSION = "1.280.0";
+export const VERSION = "1.281.0";
 
 /**
  * Exposes the build type of the agent

package/dist/esm/common/dom/selector-path.js

@@ -10,8 +10,11 @@
  * @param {boolean} includeClass
  * @returns {string|undefined}
  */
-export const generateSelectorPath = elem => {
-  if (!elem) return;
+export const generateSelectorPath = (elem, targetFields = []) => {
+  if (!elem) return {
+    path: undefined,
+    nearestFields: {}
+  };
   const getNthOfTypeIndex = node => {
     try {
       let i = 1;
@@ -29,12 +32,16 @@ export const generateSelectorPath = elem => {
   };
   let pathSelector = '';
   let index = getNthOfTypeIndex(elem);
+  const nearestFields = {};
   try {
     while (elem?.tagName) {
       const {
         id,
         localName
       } = elem;
+      targetFields.forEach(field => {
+        nearestFields[nearestAttrName(field)] ||= elem[field];
+      });
       const selector = [localName, id ? "#".concat(id) : '', pathSelector ? ">".concat(pathSelector) : ''].join('');
       pathSelector = selector;
       elem = elem.parentNode;
@@ -42,5 +49,15 @@ export const generateSelectorPath = elem => {
   } catch (err) {
     // do nothing for now
   }
-  return pathSelector ? index ? "".concat(pathSelector, ":nth-of-type(").concat(index, ")") : pathSelector : undefined;
+  const path = pathSelector ? index ? "".concat(pathSelector, ":nth-of-type(").concat(index, ")") : pathSelector : undefined;
+  return {
+    path,
+    nearestFields
+  };
+  function nearestAttrName(originalFieldName) {
+    /** preserve original renaming structure for pre-existing field maps */
+    if (originalFieldName === 'tagName') originalFieldName = 'tag';
+    if (originalFieldName === 'className') originalFieldName = 'class';
+    return "nearest".concat(originalFieldName.charAt(0).toUpperCase() + originalFieldName.slice(1));
+  }
 };

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

@@ -54,7 +54,7 @@ export class Aggregate extends AggregateBase {
           });
         }, this.featureName, this.ee);
       }
-      let addUserAction;
+      let addUserAction = () => {/** no-op */};
       if (isBrowserScope && agentRef.init.user_actions.enabled) {
         this.userActionAggregator = new UserActionsAggregator();
         this.harvestOpts.beforeUnload = () => addUserAction?.(this.userActionAggregator.aggregationEvent);
@@ -80,20 +80,27 @@ export class Aggregate extends AggregateBase {
                 ...(isIFrameWindow(window) && {
                   iframe: true
                 }),
-                ...(canTrustTargetAttribute('id') && {
-                  targetId: target.id
-                }),
-                ...(canTrustTargetAttribute('tagName') && {
-                  targetTag: target.tagName
-                }),
-                ...(canTrustTargetAttribute('type') && {
-                  targetType: target.type
-                }),
-                ...(canTrustTargetAttribute('className') && {
-                  targetClass: target.className
-                })
+                ...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
               });
 
+              /**
+               * Returns the original target field name with `target` prepended and camelCased
+               * @param {string} originalFieldName
+               * @returns {string} the target field name
+               */
+              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".concat(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
@@ -109,7 +116,7 @@ export class Aggregate extends AggregateBase {
         };
         registerHandler('ua', evt => {
           /** the processor will return the previously aggregated event if it has been completed by processing the current event */
-          addUserAction(this.userActionAggregator.process(evt));
+          addUserAction(this.userActionAggregator.process(evt, this.agentRef.init.user_actions.elementAttributes));
         }, this.featureName, this.ee);
       }
 

package/dist/esm/features/generic_events/aggregate/user-actions/aggregated-user-action.js

@@ -4,13 +4,14 @@
  */
 import { RAGE_CLICK_THRESHOLD_EVENTS, RAGE_CLICK_THRESHOLD_MS } from '../../constants';
 export class AggregatedUserAction {
-  constructor(evt, selectorPath) {
+  constructor(evt, selectorPath, nearestTargetFields) {
     this.event = evt;
     this.count = 1;
     this.originMs = Math.floor(evt.timeStamp);
     this.relativeMs = [0];
     this.selectorPath = selectorPath;
     this.rageClick = undefined;
+    this.nearestTargetFields = nearestTargetFields;
   }
 
   /**

package/dist/esm/features/generic_events/aggregate/user-actions/user-actions-aggregator.js

@@ -24,9 +24,12 @@ export class UserActionsAggregator {
    * @param {Event} evt The event supplied by the addEventListener callback
    * @returns {AggregatedUserAction|undefined} The previous aggregation set if it has been completed by processing the current event
    */
-  process(evt) {
+  process(evt, targetFields) {
     if (!evt) return;
-    const selectorPath = getSelectorPath(evt);
+    const {
+      selectorPath,
+      nearestTargetFields
+    } = getSelectorPath(evt, targetFields);
     const aggregationKey = getAggregationKey(evt, selectorPath);
     if (!!aggregationKey && aggregationKey === this.#aggregationKey) {
       // an aggregation exists already, so lets just continue to increment
@@ -36,7 +39,7 @@ export class UserActionsAggregator {
       const finishedEvent = this.#aggregationEvent;
       // then set as this new event aggregation
       this.#aggregationKey = aggregationKey;
-      this.#aggregationEvent = new AggregatedUserAction(evt, selectorPath);
+      this.#aggregationEvent = new AggregatedUserAction(evt, selectorPath, nearestTargetFields);
       return finishedEvent;
     }
   }
@@ -48,13 +51,24 @@ export class UserActionsAggregator {
  * @param {Event} evt
  * @returns {string}
  */
-function getSelectorPath(evt) {
+function getSelectorPath(evt, targetFields) {
   let selectorPath;
+  let nearestTargetFields = {};
   if (OBSERVED_WINDOW_EVENTS.includes(evt.type) || evt.target === window) selectorPath = 'window';else if (evt.target === document) selectorPath = 'document';
   // if still no selectorPath, generate one from target tree that includes elem ids
-  else selectorPath = generateSelectorPath(evt.target);
+  else {
+    const {
+      path,
+      nearestFields
+    } = generateSelectorPath(evt.target, targetFields);
+    selectorPath = path;
+    nearestTargetFields = nearestFields;
+  }
   // if STILL no selectorPath, it will return undefined which will skip aggregation for this event
-  return selectorPath;
+  return {
+    selectorPath,
+    nearestTargetFields
+  };
 }
 
 /**

package/dist/types/common/dom/selector-path.d.ts

@@ -1,2 +1,2 @@
-export function generateSelectorPath(elem: HTMLElement): string | undefined;
+export function generateSelectorPath(elem: HTMLElement, targetFields?: any[]): string | undefined;
 //# sourceMappingURL=selector-path.d.ts.map

package/dist/types/common/dom/selector-path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selector-path.d.ts","sourceRoot":"","sources":["../../../../src/common/dom/selector-path.js"],"names":[],"mappings":"AAYO,2CALI,WAAW,GAGT,MAAM,GAAC,SAAS,CAuC5B"}
+{"version":3,"file":"selector-path.d.ts","sourceRoot":"","sources":["../../../../src/common/dom/selector-path.js"],"names":[],"mappings":"AAYO,2CALI,WAAW,yBAGT,MAAM,GAAC,SAAS,CAmD5B"}

package/dist/types/features/generic_events/aggregate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/generic_events/aggregate/index.js"],"names":[],"mappings":"AAoBA;IACE,2BAAiC;IACjC,2BA4LC;IA1LC,yBAA4B;IAC5B,gCAAkG;IAuC9F,4CAAuD;IAqJ7D;;;;;;;;;;;OAWG;IACH,eAHW,MAAM,YAAC,QA0CjB;IAED,qCAEC;IAED;;;MAEC;IAED,gCAEC;IAED,mCASC;CACF;8BAxR6B,4BAA4B;sCAMpB,wCAAwC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/generic_events/aggregate/index.js"],"names":[],"mappings":"AAoBA;IACE,2BAAiC;IACjC,2BA2MC;IAzMC,yBAA4B;IAC5B,gCAAkG;IAuC9F,4CAAuD;IAoK7D;;;;;;;;;;;OAWG;IACH,eAHW,MAAM,YAAC,QA0CjB;IAED,qCAEC;IAED;;;MAEC;IAED,gCAEC;IAED,mCASC;CACF;8BAvS6B,4BAA4B;sCAMpB,wCAAwC"}

package/dist/types/features/generic_events/aggregate/user-actions/aggregated-user-action.d.ts

@@ -1,11 +1,12 @@
 export class AggregatedUserAction {
-    constructor(evt: any, selectorPath: any);
+    constructor(evt: any, selectorPath: any, nearestTargetFields: any);
     event: any;
     count: number;
     originMs: number;
     relativeMs: number[];
     selectorPath: any;
     rageClick: boolean | undefined;
+    nearestTargetFields: any;
     /**
      * Aggregates the count and maintains the relative MS array for matching events
      * Will determine if a rage click was observed as part of the aggregation

package/dist/types/features/generic_events/aggregate/user-actions/aggregated-user-action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aggregated-user-action.d.ts","sourceRoot":"","sources":["../../../../../../src/features/generic_events/aggregate/user-actions/aggregated-user-action.js"],"names":[],"mappings":"AAMA;IACE,yCAOC;IANC,WAAgB;IAChB,cAAc;IACd,iBAAyC;IACzC,qBAAqB;IACrB,kBAAgC;IAChC,+BAA0B;IAG5B;;;;;OAKG;IACH,eAHW,KAAK,GACH,IAAI,CAMhB;IAED;;;OAGG;IACH,eAFa,OAAO,CAKnB;CACF"}
+{"version":3,"file":"aggregated-user-action.d.ts","sourceRoot":"","sources":["../../../../../../src/features/generic_events/aggregate/user-actions/aggregated-user-action.js"],"names":[],"mappings":"AAMA;IACE,mEAQC;IAPC,WAAgB;IAChB,cAAc;IACd,iBAAyC;IACzC,qBAAqB;IACrB,kBAAgC;IAChC,+BAA0B;IAC1B,yBAA8C;IAGhD;;;;;OAKG;IACH,eAHW,KAAK,GACH,IAAI,CAMhB;IAED;;;OAGG;IACH,eAFa,OAAO,CAKnB;CACF"}

package/dist/types/features/generic_events/aggregate/user-actions/user-actions-aggregator.d.ts

@@ -5,7 +5,7 @@ export class UserActionsAggregator {
      * @param {Event} evt The event supplied by the addEventListener callback
      * @returns {AggregatedUserAction|undefined} The previous aggregation set if it has been completed by processing the current event
      */
-    process(evt: Event): AggregatedUserAction | undefined;
+    process(evt: Event, targetFields: any): AggregatedUserAction | undefined;
     #private;
 }
 import { AggregatedUserAction } from './aggregated-user-action';

package/dist/types/features/generic_events/aggregate/user-actions/user-actions-aggregator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-actions-aggregator.d.ts","sourceRoot":"","sources":["../../../../../../src/features/generic_events/aggregate/user-actions/user-actions-aggregator.js"],"names":[],"mappings":"AAQA;IAKE,yDAQC;IAED;;;;OAIG;IACH,aAHW,KAAK,GACH,oBAAoB,GAAC,SAAS,CAiB1C;;CACF;qCAtCoC,0BAA0B"}
+{"version":3,"file":"user-actions-aggregator.d.ts","sourceRoot":"","sources":["../../../../../../src/features/generic_events/aggregate/user-actions/user-actions-aggregator.js"],"names":[],"mappings":"AAQA;IAKE,yDAQC;IAED;;;;OAIG;IACH,aAHW,KAAK,sBACH,oBAAoB,GAAC,SAAS,CAiB1C;;CACF;qCAtCoC,0BAA0B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "1.280.0",
+  "version": "1.281.0",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "New Relic Browser Agent",
@@ -172,7 +172,7 @@
     "start": "npm-run-all --parallel cdn:watch test-server",
     "lint": "eslint -c .eslintrc.js --ext .js,.cjs,.mjs .",
     "lint:fix": "npm run lint -- --fix",
-    "test": "jest",
+    "test": " NODE_OPTIONS=--max-old-space-size=8192 jest",
     "test:unit": "jest --selectProjects unit",
     "test:component": "jest --selectProjects component",
     "test:types": "tsd -f ./tests/dts/**/*.ts",

package/src/common/config/init.js

@@ -131,7 +131,7 @@ const model = () => {
     soft_navigations: { enabled: true, autoStart: true },
     spa: { enabled: true, autoStart: true },
     ssl: undefined,
-    user_actions: { enabled: true }
+    user_actions: { enabled: true, elementAttributes: ['id', 'className', 'tagName', 'type'] }
   }
 }
 

package/src/common/dom/selector-path.js

@@ -10,8 +10,8 @@
  * @param {boolean} includeClass
  * @returns {string|undefined}
  */
-export const generateSelectorPath = (elem) => {
-  if (!elem) return
+export const generateSelectorPath = (elem, targetFields = []) => {
+  if (!elem) return { path: undefined, nearestFields: {} }
 
   const getNthOfTypeIndex = (node) => {
     try {
@@ -30,9 +30,13 @@ export const generateSelectorPath = (elem) => {
   let pathSelector = ''
   let index = getNthOfTypeIndex(elem)
 
+  const nearestFields = {}
   try {
     while (elem?.tagName) {
       const { id, localName } = elem
+      targetFields.forEach(field => {
+        nearestFields[nearestAttrName(field)] ||= elem[field]
+      })
       const selector = [
         localName,
         id ? `#${id}` : '',
@@ -46,5 +50,13 @@ export const generateSelectorPath = (elem) => {
   // do nothing for now
   }
 
-  return pathSelector ? index ? `${pathSelector}:nth-of-type(${index})` : pathSelector : undefined
+  const path = pathSelector ? index ? `${pathSelector}:nth-of-type(${index})` : pathSelector : undefined
+  return { path, nearestFields }
+
+  function nearestAttrName (originalFieldName) {
+    /** preserve original renaming structure for pre-existing field maps */
+    if (originalFieldName === 'tagName') originalFieldName = 'tag'
+    if (originalFieldName === 'className') originalFieldName = 'class'
+    return `nearest${originalFieldName.charAt(0).toUpperCase() + originalFieldName.slice(1)}`
+  }
 }

package/src/features/generic_events/aggregate/index.js

@@ -60,7 +60,7 @@ export class Aggregate extends AggregateBase {
         }, this.featureName, this.ee)
       }
 
-      let addUserAction
+      let addUserAction = () => { /** no-op */ }
       if (isBrowserScope && agentRef.init.user_actions.enabled) {
         this.userActionAggregator = new UserActionsAggregator()
         this.harvestOpts.beforeUnload = () => addUserAction?.(this.userActionAggregator.aggregationEvent)
@@ -81,12 +81,27 @@ export class Aggregate extends AggregateBase {
                 rageClick: aggregatedUserAction.rageClick,
                 target: aggregatedUserAction.selectorPath,
                 ...(isIFrameWindow(window) && { iframe: true }),
-                ...(canTrustTargetAttribute('id') && { targetId: target.id }),
-                ...(canTrustTargetAttribute('tagName') && { targetTag: target.tagName }),
-                ...(canTrustTargetAttribute('type') && { targetType: target.type }),
-                ...(canTrustTargetAttribute('className') && { targetClass: target.className })
+                ...(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
               })
 
+              /**
+               * Returns the original target field name with `target` prepended and camelCased
+               * @param {string} originalFieldName
+               * @returns {string} the target field name
+               */
+              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)}`
+              }
+
               /**
                * 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
@@ -103,7 +118,7 @@ export class Aggregate extends AggregateBase {
 
         registerHandler('ua', (evt) => {
           /** the processor will return the previously aggregated event if it has been completed by processing the current event */
-          addUserAction(this.userActionAggregator.process(evt))
+          addUserAction(this.userActionAggregator.process(evt, this.agentRef.init.user_actions.elementAttributes))
         }, this.featureName, this.ee)
       }
 

package/src/features/generic_events/aggregate/user-actions/aggregated-user-action.js

@@ -5,13 +5,14 @@
 import { RAGE_CLICK_THRESHOLD_EVENTS, RAGE_CLICK_THRESHOLD_MS } from '../../constants'
 
 export class AggregatedUserAction {
-  constructor (evt, selectorPath) {
+  constructor (evt, selectorPath, nearestTargetFields) {
     this.event = evt
     this.count = 1
     this.originMs = Math.floor(evt.timeStamp)
     this.relativeMs = [0]
     this.selectorPath = selectorPath
     this.rageClick = undefined
+    this.nearestTargetFields = nearestTargetFields
   }
 
   /**

package/src/features/generic_events/aggregate/user-actions/user-actions-aggregator.js

@@ -26,9 +26,9 @@ export class UserActionsAggregator {
    * @param {Event} evt The event supplied by the addEventListener callback
    * @returns {AggregatedUserAction|undefined} The previous aggregation set if it has been completed by processing the current event
    */
-  process (evt) {
+  process (evt, targetFields) {
     if (!evt) return
-    const selectorPath = getSelectorPath(evt)
+    const { selectorPath, nearestTargetFields } = getSelectorPath(evt, targetFields)
     const aggregationKey = getAggregationKey(evt, selectorPath)
     if (!!aggregationKey && aggregationKey === this.#aggregationKey) {
       // an aggregation exists already, so lets just continue to increment
@@ -38,7 +38,7 @@ export class UserActionsAggregator {
       const finishedEvent = this.#aggregationEvent
       // then set as this new event aggregation
       this.#aggregationKey = aggregationKey
-      this.#aggregationEvent = new AggregatedUserAction(evt, selectorPath)
+      this.#aggregationEvent = new AggregatedUserAction(evt, selectorPath, nearestTargetFields)
       return finishedEvent
     }
   }
@@ -50,14 +50,18 @@ export class UserActionsAggregator {
  * @param {Event} evt
  * @returns {string}
  */
-function getSelectorPath (evt) {
-  let selectorPath
+function getSelectorPath (evt, targetFields) {
+  let selectorPath; let nearestTargetFields = {}
   if (OBSERVED_WINDOW_EVENTS.includes(evt.type) || evt.target === window) selectorPath = 'window'
   else if (evt.target === document) selectorPath = 'document'
   // if still no selectorPath, generate one from target tree that includes elem ids
-  else selectorPath = generateSelectorPath(evt.target)
+  else {
+    const { path, nearestFields } = generateSelectorPath(evt.target, targetFields)
+    selectorPath = path
+    nearestTargetFields = nearestFields
+  }
   // if STILL no selectorPath, it will return undefined which will skip aggregation for this event
-  return selectorPath
+  return { selectorPath, nearestTargetFields }
 }
 
 /**