@coralogix/browser 3.9.0 → 3.10.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 3.10.0 (2026-05-25)
+
+### 🚀 Features
+
+- Improve user interaction instrumentation with richer element metadata
+
 ## 3.9.0 (2026-05-19)
 
 ### 🚀 Features

package/README.md

@@ -559,6 +559,28 @@ Examples of masked elements:
 
 ```
 
+### Action Attributes
+
+The SDK uses various strategies to name click actions. For more control, define a `data-cx-action-name` attribute on clickable elements (or any of their parents) to set the action name.
+
+```html
+<button data-cx-action-name="add-to-cart">
+  Add to Cart
+</button>
+
+<form data-cx-action-name="checkout-form">
+  <input type="text" placeholder="Card number" />
+  <button type="submit">Complete Purchase</button>
+</form>
+
+<nav data-cx-action-name="main-navigation">
+  <a href="/products">Products</a>
+  <a href="/pricing">Pricing</a>
+</nav>
+```
+
+> **Note:** The `data-cx-action-name` attribute is never masked, even when the element has a mask class applied. This ensures your custom action names are always captured for tracking purposes.
+
 ### Label Providers
 
 Provide labels based on url or event

package/index.esm2.js

@@ -2124,6 +2124,43 @@ function addEventListeners(eventTarget, eventNames, listener, _a) {
 
 var PARENT_SEARCH_DEPTH = 5;
 var CLICKABLE_ELEMENTS = ['BUTTON', 'LABEL', 'A', 'INPUT', 'OPTION'];
+function getAttributeFromAncestors(element, attr, depth) {
+    if (depth === void 0) { depth = PARENT_SEARCH_DEPTH; }
+    if (!element || depth <= 0)
+        return '';
+    var value = element.getAttribute(attr);
+    if (value)
+        return value;
+    return getAttributeFromAncestors(element.parentElement, attr, depth - 1);
+}
+function extractActionName(el) {
+    return getAttributeFromAncestors(el, CX_ACTION_NAME_ATTRIBUTE);
+}
+function extractAriaLabel(el) {
+    return getAttributeFromAncestors(el, ARIA_LABEL_ATTRIBUTE);
+}
+function extractTestId(el) {
+    return (el === null || el === void 0 ? void 0 : el.getAttribute(DATA_TEST_ATTRIBUTE)) || '';
+}
+function extractResolvedName(_a) {
+    var element = _a.element, config = _a.config, actionName = _a.actionName, ariaLabel = _a.ariaLabel;
+    if (!element)
+        return '';
+    if (actionName)
+        return actionName;
+    if (isElementMasked(element, config))
+        return MASKED_TEXT;
+    return ariaLabel || getPlaceholder(element) || getInnerText(element) || '';
+}
+function getPlaceholder(element) {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+        return element.placeholder || '';
+    }
+    return '';
+}
+function getInnerText(element) {
+    return element instanceof HTMLElement ? element.innerText || '' : '';
+}
 function extractMaskedOrTextContent(element, config) {
     if (!element)
         return '';
@@ -2132,14 +2169,6 @@ function extractMaskedOrTextContent(element, config) {
         return '';
     return getMaskedOrTextualContent(clickableElement, config);
 }
-function findClickableElement(element, maxDepth) {
-    if (!element || maxDepth <= 0) {
-        return null;
-    }
-    if (CLICKABLE_ELEMENTS.includes(element.nodeName))
-        return element;
-    return findClickableElement(element.parentElement, maxDepth - 1);
-}
 function getMaskedOrTextualContent(element, config) {
     if (shouldMaskElement(element, config.maskInputTypes, config.maskClass) ||
         isParentMasked(element, config.maskClass, PARENT_SEARCH_DEPTH)) {
@@ -2151,22 +2180,15 @@ function getMaskedOrTextualContent(element, config) {
     }
     return getTextualContent(element);
 }
-function isParentMasked(element, maskClass, maxDepth) {
-    if (maxDepth === void 0) { maxDepth = PARENT_SEARCH_DEPTH; }
-    if (!element || maxDepth <= 0) {
-        return false;
-    }
-    if (isMaskedByClass(element.className, maskClass)) {
-        return true;
+function getTextualContent(element) {
+    if (element instanceof HTMLInputElement) {
+        return element.value || '';
     }
-    return isParentMasked(element.parentElement, maskClass, maxDepth - 1);
+    return 'innerText' in element ? element.innerText : '';
 }
-function findMaskedChildren(element, config) {
-    if (!element.children)
-        return null;
-    return Array.from(element.children).find(function (child) {
-        return shouldMaskElement(child, config.maskInputTypes, config.maskClass);
-    });
+function isElementMasked(element, config) {
+    return (shouldMaskElement(element, config.maskInputTypes, config.maskClass) ||
+        isParentMasked(element, config.maskClass, PARENT_SEARCH_DEPTH));
 }
 function shouldMaskElement(element, maskInputTypes, maskClass) {
     if (!element)
@@ -2190,11 +2212,30 @@ function isMaskedByClass(className, maskClass) {
     }
     return className.includes(maskClass);
 }
-function getTextualContent(element) {
-    if (element instanceof HTMLInputElement) {
-        return element.value || '';
+function isParentMasked(element, maskClass, maxDepth) {
+    if (maxDepth === void 0) { maxDepth = PARENT_SEARCH_DEPTH; }
+    if (!element || maxDepth <= 0) {
+        return false;
     }
-    return 'innerText' in element ? element.innerText : '';
+    if (isMaskedByClass(element.className, maskClass)) {
+        return true;
+    }
+    return isParentMasked(element.parentElement, maskClass, maxDepth - 1);
+}
+function findMaskedChildren(element, config) {
+    if (!element.children)
+        return null;
+    return Array.from(element.children).find(function (child) {
+        return shouldMaskElement(child, config.maskInputTypes, config.maskClass);
+    });
+}
+function findClickableElement(element, maxDepth) {
+    if (!element || maxDepth <= 0) {
+        return null;
+    }
+    if (CLICKABLE_ELEMENTS.includes(element.nodeName))
+        return element;
+    return findClickableElement(element.parentElement, maxDepth - 1);
 }
 
 var _a$3;
@@ -2225,10 +2266,19 @@ var CoralogixUserInteractionInstrumentation = (function (_super) {
             var eventTarget = e.target;
             var config = getSdkConfig();
             var id = eventTarget.id, type = eventTarget.type, className = eventTarget.className, nodeName = eventTarget.nodeName;
-            var elementText = extractMaskedOrTextContent(eventTarget, config);
             span.setAttribute(CoralogixAttributes.EVENT_TYPE, CoralogixEventType.USER_INTERACTION);
             span.setAttribute(CoralogixAttributes.INTERACTION_EVENT_NAME, e.type);
             if (eventTarget && eventTarget instanceof HTMLElement) {
+                var elementText = extractMaskedOrTextContent(eventTarget, config);
+                var cxActionName = extractActionName(eventTarget);
+                var ariaLabel = extractAriaLabel(eventTarget);
+                var testId = extractTestId(eventTarget);
+                var resolvedName = extractResolvedName({
+                    element: eventTarget,
+                    config: config,
+                    actionName: cxActionName,
+                    ariaLabel: ariaLabel,
+                });
                 [
                     [CoralogixAttributes.ELEMENT_ID, id],
                     [CoralogixAttributes.ELEMENT_CLASSES, className],
@@ -2238,6 +2288,13 @@ var CoralogixUserInteractionInstrumentation = (function (_super) {
                         elementText === null || elementText === void 0 ? void 0 : elementText.slice(0, MAX_INTERACTION_ELEMENT_SIZE),
                     ],
                     [CoralogixAttributes.TARGET_ELEMENT, nodeName],
+                    [
+                        CoralogixAttributes.RESOLVED_NAME,
+                        resolvedName === null || resolvedName === void 0 ? void 0 : resolvedName.slice(0, MAX_INTERACTION_ELEMENT_SIZE),
+                    ],
+                    [CoralogixAttributes.CX_ACTION_NAME, cxActionName],
+                    [CoralogixAttributes.ARIA_LABEL, ariaLabel],
+                    [CoralogixAttributes.TEST_ID, testId],
                 ].forEach(function (_a) {
                     var _b = __read$1(_a, 2), key = _b[0], value = _b[1];
                     span.setAttribute(key, value);
@@ -2656,6 +2713,9 @@ var NETWORK_URL_LABEL_PROVIDERS_KEY = 'NETWORK_URL_LABEL_PROVIDERS';
 var RUM_INTERNAL_DATA_KEY = 'rumInternalData';
 var MASKED_TEXT = '***';
 var MASK_CLASS_DEFAULT = 'cx-mask';
+var CX_ACTION_NAME_ATTRIBUTE = 'data-cx-action-name';
+var ARIA_LABEL_ATTRIBUTE = 'aria-label';
+var DATA_TEST_ATTRIBUTE = 'data-test';
 var MASK_INPUT_TYPES_DEFAULT = [
     'password',
     'email',
@@ -2796,6 +2856,10 @@ var CoralogixAttributes = {
     ELEMENT_CLASSES: 'element_classes',
     TARGET_ELEMENT: 'target_element',
     TARGET_ELEMENT_TYPE: 'target_element_type',
+    CX_ACTION_NAME: 'cx_action_name',
+    ARIA_LABEL: 'element_aria_label',
+    TEST_ID: 'element_test_id',
+    RESOLVED_NAME: 'element_resolved_name',
     TIMESTAMP: 'timestamp',
     INTERNAL: 'internal',
     PAGE_CONTEXT: 'page_context',
@@ -4376,7 +4440,7 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '3.9.0';
+var SDK_VERSION = '3.10.0';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -4701,6 +4765,10 @@ var CoralogixSpanMapProcessor = (function () {
                         element_id: spanAttributes[CoralogixAttributes.ELEMENT_ID],
                         element_classes: spanAttributes[CoralogixAttributes.ELEMENT_CLASSES],
                         target_element_type: spanAttributes[CoralogixAttributes.TARGET_ELEMENT_TYPE],
+                        resolved_name: spanAttributes[CoralogixAttributes.RESOLVED_NAME],
+                        cx_action_name: spanAttributes[CoralogixAttributes.CX_ACTION_NAME],
+                        element_aria_label: spanAttributes[CoralogixAttributes.ARIA_LABEL],
+                        element_test_id: spanAttributes[CoralogixAttributes.TEST_ID],
                     },
                 };
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/browser",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Official Coralogix SDK for browsers",
   "license": "Apache-2.0",
   "author": "Coralogix",

package/src/constants.d.ts

@@ -16,6 +16,9 @@ export declare const NETWORK_URL_LABEL_PROVIDERS_KEY = "NETWORK_URL_LABEL_PROVID
 export declare const RUM_INTERNAL_DATA_KEY = "rumInternalData";
 export declare const MASKED_TEXT = "***";
 export declare const MASK_CLASS_DEFAULT = "cx-mask";
+export declare const CX_ACTION_NAME_ATTRIBUTE = "data-cx-action-name";
+export declare const ARIA_LABEL_ATTRIBUTE = "aria-label";
+export declare const DATA_TEST_ATTRIBUTE = "data-test";
 export declare const MASK_INPUT_TYPES_DEFAULT: InputType[];
 export declare const FINGER_PRINT_KEY = "cx-fingerprint";
 export declare const OPTIONS_DEFAULTS: Partial<CoralogixBrowserSdkConfig>;
@@ -43,6 +46,10 @@ export declare const CoralogixAttributes: {
     ELEMENT_CLASSES: string;
     TARGET_ELEMENT: string;
     TARGET_ELEMENT_TYPE: string;
+    CX_ACTION_NAME: string;
+    ARIA_LABEL: string;
+    TEST_ID: string;
+    RESOLVED_NAME: string;
     TIMESTAMP: string;
     INTERNAL: string;
     PAGE_CONTEXT: string;

package/src/instrumentations/user-interaction/user-interaction.utils.d.ts

@@ -1,2 +1,11 @@
 import { CoralogixBrowserSdkConfig } from '../../types';
+export declare function extractActionName(el: Element | HTMLElement | null): string;
+export declare function extractAriaLabel(el: Element | HTMLElement | null): string;
+export declare function extractTestId(el: Element | HTMLElement | null): string;
+export declare function extractResolvedName({ element, config, actionName, ariaLabel, }: {
+    element: Element | HTMLElement | null;
+    config: CoralogixBrowserSdkConfig;
+    actionName: string;
+    ariaLabel: string;
+}): string;
 export declare function extractMaskedOrTextContent(element: Element | HTMLElement, config: CoralogixBrowserSdkConfig): string;

package/src/types.d.ts

@@ -223,6 +223,10 @@ export interface InteractionContext {
     event_name: string;
     element_id: string;
     element_classes: string;
+    cx_action_name?: string;
+    element_aria_label?: string;
+    element_test_id?: string;
+    resolved_name: string;
 }
 export interface LongTaskContext extends Omit<PerformanceEntry, 'toJSON'> {
     id: string;

package/src/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.9.0";
+export declare const SDK_VERSION = "3.10.0";