@coralogix/browser 3.9.0 → 3.15.1

package/CHANGELOG.md

@@ -1,3 +1,60 @@
+## 3.15.1 (2026-06-23)
+
+### 🩹 Fixes
+
+-  Improve user-interaction tracking accuracy
+
+## 3.15.0 (2026-06-22)
+
+### 🚀 Features
+
+- Improved user-interaction tracking: smarter element fingerprinting and more accurate screenshot capture on clicks and navigation.
+
+
+## 3.14.0 (2026-06-14)
+
+### 🚀 Features
+
+- Flush telemetry data on tab close with fetch keepalive support
+
+## 3.13.0 (2026-06-11)
+
+### 🚀 Features
+
+- Improve user interaction with click and scroll coordinates, and viewport context
+
+
+## 3.12.0 (2026-06-09)
+
+### 🚀 Features
+
+- Improve: capture screenshot on each unique view navigation
+
+## 3.11.1 (2026-06-08)
+
+### 🩹 Fixes
+
+- SVG element support in session recording
+- session recording after refreshing the page
+
+## 3.11.0 (2026-06-04)
+
+### 🚀 Features
+
+- Add view number tracking for product analytics support
+
+## 3.10.1 (2026-06-02)
+
+### 🩹 Fixes
+
+- Improve beforeSend to correctly reflect modifications in OpenTelemetry span attributes
+
+## 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

@@ -227,6 +227,7 @@ var SESSION_EXPIRATION_TIME = MILLISECONDS_PER_HOUR;
 var SESSION_MANAGER_KEY = 'rumSessionManager';
 var SESSION_RECORDER_KEY = 'rumSessionRecorder';
 var SESSION_RECORDER_SEGMENTS_MAP = 'rumSessionRecorderSegmentsMap';
+var VIEW_NUMBER_KEY = 'rum_view_number';
 
 var SNAPSHOT_MANAGER_KEY = 'rumSnapshotManager';
 var INITIAL_SNAPSHOT_CONTEXT = {
@@ -264,6 +265,8 @@ function getCxGlobal() {
 }
 var CxGlobal = getCxGlobal();
 
+var CLICK_SCREENSHOT_MANAGER_KEY = 'rumClickScreenshotManager';
+
 function getSnapshotManager() {
     return CxGlobal[SNAPSHOT_MANAGER_KEY];
 }
@@ -273,12 +276,28 @@ function getSessionManager() {
 function getSessionRecorder() {
     return CxGlobal[SESSION_RECORDER_KEY];
 }
+function getClickScreenshotManager() {
+    return CxGlobal[CLICK_SCREENSHOT_MANAGER_KEY];
+}
 function getSdkConfig() {
     return CxGlobal[SDK_CONFIG_KEY];
 }
 function getUserAgentData() {
     return CxGlobal[USER_AGENT_KEY];
 }
+var TRACER_PROVIDER_KEY = '__cx_tracer_provider__';
+function setTracerProvider(provider) {
+    CxGlobal[TRACER_PROVIDER_KEY] = provider;
+}
+function getTracerProvider() {
+    return CxGlobal[TRACER_PROVIDER_KEY];
+}
+function flush() {
+    var tracerProvider = getTracerProvider();
+    if (!tracerProvider)
+        return;
+    tracerProvider.forceFlush();
+}
 
 var GLOBAL_SPAN_KEY = '__globalSpan__';
 var GLOBAL_SPAN_MAP_KEY = '__globalSpanMap__';
@@ -2122,8 +2141,55 @@ function addEventListeners(eventTarget, eventNames, listener, _a) {
     };
 }
 
+var CX_ACTION_NAME_ATTRIBUTE = 'data-cx-action-name';
+var DATA_TEST_ATTRIBUTE = 'data-test';
+var DATA_TESTID_ATTRIBUTE = 'data-testid';
+var DATA_TEST_ID_ATTRIBUTE = 'data-test-id';
+
 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) {
+    var clickableElement = findClickableElement(element, PARENT_SEARCH_DEPTH);
+    if (!clickableElement)
+        return '';
+    return clickableElement instanceof HTMLElement
+        ? clickableElement.innerText || ''
+        : '';
+}
 function extractMaskedOrTextContent(element, config) {
     if (!element)
         return '';
@@ -2132,14 +2198,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 +2209,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 +2241,201 @@ 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 SHADOW_DOM_MARKER = '::shadow ';
+var STABLE_ATTRIBUTES = [
+    CX_ACTION_NAME_ATTRIBUTE,
+    DATA_TEST_ATTRIBUTE,
+    DATA_TESTID_ATTRIBUTE,
+    DATA_TEST_ID_ATTRIBUTE,
+];
+var ESCAPE_FREE_CLASS_NAME = /^[a-zA-Z_-][a-zA-Z0-9_-]*$/;
+var GENERATED_VALUE_PATTERNS = [
+    /^\d/,
+    /\d{3,}/,
+    /__[a-zA-Z0-9]/,
+    /(?:[a-z]\d|\d[a-z]){3,}/i,
+];
+function getElementFingerprint(target) {
+    try {
+        if (!target.isConnected) {
+            return undefined;
+        }
+        var selectors = [];
+        var element = target;
+        while (element) {
+            var root = element.getRootNode();
+            var selector = getSubtreeSelector(element, root);
+            if (!selector) {
+                return undefined;
+            }
+            selectors.unshift(selector);
+            element = isShadowRoot(root) ? root.host : null;
+        }
+        return selectors.join(SHADOW_DOM_MARKER);
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+function isShadowRoot(node) {
+    return (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node.host);
+}
+function getSubtreeSelector(target, root) {
+    var selector = '';
+    for (var element = target; element && element.nodeName !== 'HTML'; element = element.parentElement) {
+        var unique = getUniqueSegment(element, root, selector);
+        if (unique) {
+            return joinWithChild(unique, selector);
+        }
+        selector = joinWithChild(getLevelSegment(element, selector), selector);
+    }
+    return selector;
+}
+function getUniqueSegment(element, root, childSelector) {
+    var e_1, _a;
+    try {
+        for (var _b = __values$1([getAttributeSegment(element), getIdSegment(element)]), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var segment = _c.value;
+            if (segment && isUnique(root, joinWithChild(segment, childSelector))) {
+                return segment;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return undefined;
+}
+function getLevelSegment(element, childSelector) {
+    var e_2, _a;
+    var candidates = [
+        getAttributeSegment(element),
+        getStableClassSegment(element),
+        element.tagName,
+    ];
+    try {
+        for (var candidates_1 = __values$1(candidates), candidates_1_1 = candidates_1.next(); !candidates_1_1.done; candidates_1_1 = candidates_1.next()) {
+            var segment = candidates_1_1.value;
+            if (segment && isUniqueAmongSiblings(element, segment, childSelector)) {
+                return segment;
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (candidates_1_1 && !candidates_1_1.done && (_a = candidates_1.return)) _a.call(candidates_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return "".concat(element.tagName, ":nth-of-type(").concat(nthOfTypeIndex(element), ")");
+}
+function getAttributeSegment(element) {
+    var e_3, _a;
+    try {
+        for (var STABLE_ATTRIBUTES_1 = __values$1(STABLE_ATTRIBUTES), STABLE_ATTRIBUTES_1_1 = STABLE_ATTRIBUTES_1.next(); !STABLE_ATTRIBUTES_1_1.done; STABLE_ATTRIBUTES_1_1 = STABLE_ATTRIBUTES_1.next()) {
+            var attribute = STABLE_ATTRIBUTES_1_1.value;
+            var value = element.getAttribute(attribute);
+            if (value) {
+                return "".concat(element.tagName, "[").concat(attribute, "=\"").concat(CSS.escape(value), "\"]");
+            }
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (STABLE_ATTRIBUTES_1_1 && !STABLE_ATTRIBUTES_1_1.done && (_a = STABLE_ATTRIBUTES_1.return)) _a.call(STABLE_ATTRIBUTES_1);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    return undefined;
+}
+function getIdSegment(element) {
+    return element.id && !isUnstableValue(element.id)
+        ? "#".concat(CSS.escape(element.id))
+        : undefined;
+}
+function getStableClassSegment(element) {
+    var _a, _b;
+    if (element.tagName === 'BODY') {
+        return undefined;
+    }
+    var classNames = (_b = (_a = element.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.split(/\s+/)) !== null && _b !== void 0 ? _b : [];
+    var stable = classNames.find(function (name) { return name && !isUnstableValue(name) && ESCAPE_FREE_CLASS_NAME.test(name); });
+    return stable ? "".concat(element.tagName, ".").concat(stable) : undefined;
+}
+function isUnstableValue(value) {
+    return GENERATED_VALUE_PATTERNS.some(function (pattern) { return pattern.test(value); });
+}
+function isUnique(root, selector) {
+    return root.querySelectorAll(selector).length === 1;
+}
+function isUniqueAmongSiblings(element, segment, childSelector) {
+    var e_4, _a;
+    var _b, _c;
+    var siblings = (_c = (_b = element.parentElement) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : [];
+    try {
+        for (var siblings_1 = __values$1(siblings), siblings_1_1 = siblings_1.next(); !siblings_1_1.done; siblings_1_1 = siblings_1.next()) {
+            var sibling = siblings_1_1.value;
+            if (sibling === element) {
+                continue;
+            }
+            if (sibling.matches(segment) &&
+                (!childSelector || sibling.querySelector(childSelector) !== null)) {
+                return false;
+            }
+        }
+    }
+    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+    finally {
+        try {
+            if (siblings_1_1 && !siblings_1_1.done && (_a = siblings_1.return)) _a.call(siblings_1);
+        }
+        finally { if (e_4) throw e_4.error; }
+    }
+    return true;
+}
+function nthOfTypeIndex(element) {
+    var index = 1;
+    for (var s = element.previousElementSibling; s; s = s.previousElementSibling) {
+        if (s.tagName === element.tagName) {
+            index += 1;
+        }
+    }
+    return index;
+}
+function joinWithChild(parent, child) {
+    return child ? "".concat(parent, ">").concat(child) : parent;
 }
 
 var _a$3;
@@ -2215,6 +2456,7 @@ var CoralogixUserInteractionInstrumentation = (function (_super) {
         var _this = this;
         var _a;
         this.handler = function (e) {
+            var _a;
             var span;
             if (shouldAttachSpanToGlobalSpan(CoralogixEventType.USER_INTERACTION)) {
                 span = attachChildSpanToGlobalSpan(CoralogixEventType.USER_INTERACTION);
@@ -2225,10 +2467,34 @@ 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);
+            var clickKey = generateUUID();
             span.setAttribute(CoralogixAttributes.EVENT_TYPE, CoralogixEventType.USER_INTERACTION);
             span.setAttribute(CoralogixAttributes.INTERACTION_EVENT_NAME, e.type);
+            span.setAttribute(CoralogixAttributes.CX_ID, clickKey);
+            if (e instanceof MouseEvent) {
+                span.setAttribute(CoralogixAttributes.CLICK_X, e.clientX);
+                span.setAttribute(CoralogixAttributes.CLICK_Y, e.clientY);
+                span.setAttribute(CoralogixAttributes.ELEMENT_RELATIVE_X, e.offsetX);
+                span.setAttribute(CoralogixAttributes.ELEMENT_RELATIVE_Y, e.offsetY);
+            }
             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,
+                });
+                var _b = eventTarget.getBoundingClientRect(), width = _b.width, height = _b.height;
+                span.setAttribute(CoralogixAttributes.ELEMENT_WIDTH, width);
+                span.setAttribute(CoralogixAttributes.ELEMENT_HEIGHT, height);
+                var fingerprint = getElementFingerprint(eventTarget);
+                if (fingerprint) {
+                    span.setAttribute(CoralogixAttributes.ELEMENT_FINGERPRINT, fingerprint);
+                }
                 [
                     [CoralogixAttributes.ELEMENT_ID, id],
                     [CoralogixAttributes.ELEMENT_CLASSES, className],
@@ -2238,12 +2504,20 @@ 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);
                 });
             }
             span.end();
+            (_a = getClickScreenshotManager()) === null || _a === void 0 ? void 0 : _a.handleClick();
         };
         var eventsMap = __assign(__assign({}, DEFAULT_INSTRUMENTED_EVENTS), (_a = this._config) === null || _a === void 0 ? void 0 : _a['events']);
         var eventNames = Object.entries(eventsMap)
@@ -2541,13 +2815,20 @@ var CoralogixDOMInstrumentation = (function (_super) {
         var _this = _super.call(this, DOM_INSTRUMENTATION_NAME, DOM_INSTRUMENTATION_VERSION, config) || this;
         _this.visibilityChangeHandler = function () {
             if (document.hidden) {
-                var domSpan = _this.tracer.startSpan(DOM_INSTRUMENTATION_NAME);
-                domSpan.setAttribute(CoralogixAttributes.EVENT_TYPE, CoralogixEventType.DOM);
-                domSpan.end();
+                _this.createDOMSpan();
+                flush();
             }
         };
         return _this;
     }
+    CoralogixDOMInstrumentation.prototype.createDOMSpan = function () {
+        var domSpan = this.tracer.startSpan(DOM_INSTRUMENTATION_NAME);
+        domSpan.setAttribute(CoralogixAttributes.EVENT_TYPE, CoralogixEventType.DOM);
+        domSpan[CoralogixAttributes.DOM_CONTEXT] = {
+            visibility_state: document.visibilityState,
+        };
+        domSpan.end();
+    };
     CoralogixDOMInstrumentation.prototype.registerToDOMEvents = function () {
         var originalAddEventListener = getZoneJsOriginalDom(document, 'addEventListener');
         originalAddEventListener.call(document, 'visibilitychange', this.visibilityChangeHandler);
@@ -2656,6 +2937,8 @@ 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_PREFIX = 'cx';
+var ARIA_LABEL_ATTRIBUTE = 'aria-label';
 var MASK_INPUT_TYPES_DEFAULT = [
     'password',
     'email',
@@ -2796,11 +3079,24 @@ var CoralogixAttributes = {
     ELEMENT_CLASSES: 'element_classes',
     TARGET_ELEMENT: 'target_element',
     TARGET_ELEMENT_TYPE: 'target_element_type',
+    CX_ACTION_NAME: 'cx_action_name',
+    CX_ID: 'cx_id',
+    ARIA_LABEL: 'element_aria_label',
+    TEST_ID: 'element_test_id',
+    RESOLVED_NAME: 'element_resolved_name',
+    CLICK_X: 'click_x',
+    CLICK_Y: 'click_y',
+    ELEMENT_RELATIVE_X: 'element_relative_x',
+    ELEMENT_RELATIVE_Y: 'element_relative_y',
+    ELEMENT_WIDTH: 'element_width',
+    ELEMENT_HEIGHT: 'element_height',
+    ELEMENT_FINGERPRINT: 'element_fingerprint',
     TIMESTAMP: 'timestamp',
     INTERNAL: 'internal',
     PAGE_CONTEXT: 'page_context',
     IS_NAVIGATION_EVENT: 'is_navigation_event',
     SCREENSHOT_CONTEXT: 'screenshot_context',
+    DOM_CONTEXT: 'dom_context',
 };
 var CoralogixDomainsApiUrlMap = {
     EU1: 'https://ingress.eu1.rum-ingress-coralogix.com',
@@ -3456,6 +3752,8 @@ var DEFAULT_MS_RECORD_TIME = 10000;
         _a$1),
 });
 
+var KEEPALIVE_MAX_BYTES = 65536;
+var encoder = new TextEncoder();
 var Request = (function () {
     function Request(requestConfig) {
         this.requestConfig = requestConfig;
@@ -3486,14 +3784,19 @@ var Request = (function () {
         this.resolvedHeaders = headers;
     };
     Request.prototype.send = function (body) {
+        var useKeepalive = document.hidden && this.isWithinKeepaliveQuota(body);
         return fetch(this.resolvedUrl, {
             method: 'POST',
             headers: this.resolvedHeaders,
             body: body,
+            keepalive: useKeepalive,
         }).catch(function (e) {
             return e;
         });
     };
+    Request.prototype.isWithinKeepaliveQuota = function (body) {
+        return typeof body === 'string' && encoder.encode(body).length <= KEEPALIVE_MAX_BYTES;
+    };
     return Request;
 }());
 
@@ -3969,7 +4272,7 @@ function isInstrumentationCompatible(confKey) {
 var SessionManager = (function (_super) {
     __extends(SessionManager, _super);
     function SessionManager(recordConfig) {
-        var _a;
+        var _a, _b;
         var _this = _super.call(this, {
             timeoutDelay: SESSION_IDLE_TIME,
             onIdle: function () { return _this.clearSessionWhenIdle(); },
@@ -3979,6 +4282,7 @@ var SessionManager = (function (_super) {
         _this._sessionHasError = false;
         _this._cachedLogsSent = false;
         _this._currentPageTimestamp = getNowTime();
+        _this._viewNumber = 0;
         _this.debugMode = !!((_a = getSdkConfig()) === null || _a === void 0 ? void 0 : _a.debug);
         _this.getPrevSession = function () {
             var _a;
@@ -4022,6 +4326,9 @@ var SessionManager = (function (_super) {
             return _this.activeSession;
         };
         _this.initializeSession(recordConfig);
+        if ((_b = _this._sessionConfig) === null || _b === void 0 ? void 0 : _b.keepSessionAfterReload) {
+            _this.loadViewNumber();
+        }
         return _this;
     }
     Object.defineProperty(SessionManager.prototype, "currentPageTimestamp", {
@@ -4100,6 +4407,13 @@ var SessionManager = (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SessionManager.prototype, "viewNumber", {
+        get: function () {
+            return this._viewNumber;
+        },
+        enumerable: false,
+        configurable: true
+    });
     SessionManager.prototype.updateCurrentPage = function (fragment) {
         if (this.isIdleActive) {
             this._currentPageFragment = undefined;
@@ -4108,6 +4422,26 @@ var SessionManager = (function (_super) {
         this._currentPageFragment = fragment;
         this._currentPageTimestamp = getNowTime();
     };
+    SessionManager.prototype.incrementViewNumber = function () {
+        this._viewNumber++;
+        this.persistViewNumber();
+    };
+    SessionManager.prototype.persistViewNumber = function () {
+        var _a, _b;
+        if ((_a = this._sessionConfig) === null || _a === void 0 ? void 0 : _a.keepSessionAfterReload) {
+            (_b = CxGlobal.sessionStorage) === null || _b === void 0 ? void 0 : _b.setItem(VIEW_NUMBER_KEY, String(this._viewNumber));
+        }
+    };
+    SessionManager.prototype.loadViewNumber = function () {
+        var _a;
+        var storedViewNumber = (_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(VIEW_NUMBER_KEY);
+        this._viewNumber = Number(storedViewNumber) || 0;
+    };
+    SessionManager.prototype.resetViewNumber = function () {
+        var _a;
+        this._viewNumber = 0;
+        (_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(VIEW_NUMBER_KEY);
+    };
     SessionManager.prototype.getSessionKey = function () {
         return SESSION_KEY;
     };
@@ -4162,7 +4496,7 @@ var SessionManager = (function (_super) {
         (_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(PREV_SESSION_KEY);
     };
     SessionManager.prototype.clearSession = function () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (this.debugMode) {
             console.debug('Coralogix Browser SDK - Session expired, clearing session');
         }
@@ -4170,9 +4504,11 @@ var SessionManager = (function (_super) {
         this.clearGlobalSpans();
         this.clearSessionWithErrorMode();
         (_d = getSnapshotManager()) === null || _d === void 0 ? void 0 : _d.resetSnapshot();
+        (_e = getClickScreenshotManager()) === null || _e === void 0 ? void 0 : _e.reset();
         this._currentPageFragment = undefined;
-        (_e = this.sessionRecorder) === null || _e === void 0 ? void 0 : _e.stopRecording();
-        (_f = CxGlobal.sessionStorage) === null || _f === void 0 ? void 0 : _f.removeItem(SESSION_KEY);
+        this.resetViewNumber();
+        (_f = this.sessionRecorder) === null || _f === void 0 ? void 0 : _f.stopRecording();
+        (_g = CxGlobal.sessionStorage) === null || _g === void 0 ? void 0 : _g.removeItem(SESSION_KEY);
     };
     SessionManager.prototype.clearGlobalSpans = function () {
         var _a;
@@ -4185,13 +4521,8 @@ var SessionManager = (function (_super) {
         this.cachedLogsSent = false;
     };
     SessionManager.prototype.handleRefreshedSessions = function () {
-        var _a, _b;
         this.activeSession = this.getSession();
-        var recordingSegmentMapFromStorage = JSON.parse(((_a = CxGlobal.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(SESSION_RECORDER_SEGMENTS_MAP)) || '{}');
-        if (this.activeSession) {
-            (_b = getSessionRecorder()) === null || _b === void 0 ? void 0 : _b.updateSegmentIndexCounter(recordingSegmentMapFromStorage);
-        }
-        else {
+        if (!this.activeSession) {
             this.createNewSession();
         }
     };
@@ -4376,7 +4707,7 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '3.9.0';
+var SDK_VERSION = '3.15.1';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -4514,6 +4845,9 @@ var CoralogixSpanMapProcessor = (function () {
                     getSessionManager().sessionHasError = true;
                     resolvedCxSpan.text.cx_rum.session_context.hasError = true;
                 }
+                if (shouldAddOtelAttr(span)) {
+                    this.addOtelInstrumentationData(span, resolvedCxSpan);
+                }
                 span[CX_MAPPED_SPAN] = resolvedCxSpan;
             }
         }
@@ -4527,21 +4861,19 @@ var CoralogixSpanMapProcessor = (function () {
         return Promise.resolve(undefined);
     };
     CoralogixSpanMapProcessor.prototype._mapToCxSpan = function (span, session, prevSession, sessionHasRecording, sessionHasScreenshot, onlySessionWithErrorMode) {
-        var _a, _b;
-        var _c = session || {}, sessionId = _c.sessionId, sessionCreationDate = _c.sessionCreationDate;
-        var _d = prevSession || {}, prevSessionId = _d.sessionId, prevSessionCreationDate = _d.sessionCreationDate, prevSessionHasRecording = _d.hasRecording, prevSessionHasScreenshot = _d.hasScreenshot;
-        var attributes = span.attributes, startTime = span.startTime, parentSpanId = span.parentSpanId, name = span.name, endTime = span.endTime, status = span.status, duration = span.duration, kind = span.kind;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _l = session || {}, sessionId = _l.sessionId, sessionCreationDate = _l.sessionCreationDate;
+        var _m = prevSession || {}, prevSessionId = _m.sessionId, prevSessionCreationDate = _m.sessionCreationDate, prevSessionHasRecording = _m.hasRecording, prevSessionHasScreenshot = _m.hasScreenshot;
+        var attributes = span.attributes;
         var user_context = JSON.parse(attributes[CoralogixAttributes.USER_CONTEXT]);
         var application_context = JSON.parse(attributes[CoralogixAttributes.APPLICATION_CONTEXT]);
         var application = application_context.application, version = application_context.version;
         var eventType = attributes[CoralogixAttributes.EVENT_TYPE] ||
             span[CoralogixAttributes.EVENT_TYPE];
         var eventTypeContext = this._getEventTypeContext(attributes, eventType, span);
-        var _e = span.spanContext(), spanId = _e.spanId, traceId = _e.traceId;
-        var resourceAttributes = __assign(__assign({}, (_a = span.resource) === null || _a === void 0 ? void 0 : _a.attributes), { 'service.name': application });
         var fingerPrint = getSessionManager().fingerPrint;
         var labels = JSON.parse(attributes[CoralogixAttributes.CUSTOM_LABELS]);
-        var isErrorWithStacktrace = !!((_b = eventTypeContext === null || eventTypeContext === void 0 ? void 0 : eventTypeContext.error_context) === null || _b === void 0 ? void 0 : _b.original_stacktrace);
+        var isErrorWithStacktrace = !!((_a = eventTypeContext === null || eventTypeContext === void 0 ? void 0 : eventTypeContext.error_context) === null || _a === void 0 ? void 0 : _a.original_stacktrace);
         var version_metadata = {
             app_name: application,
             app_version: version,
@@ -4573,34 +4905,18 @@ var CoralogixSpanMapProcessor = (function () {
                         type: eventType,
                         source: attributes[CoralogixAttributes.SOURCE],
                         severity: severity,
-                    }, labels: labels, environment: attributes[CoralogixAttributes.ENVIRONMENT] || '' }),
+                    }, labels: labels, environment: attributes[CoralogixAttributes.ENVIRONMENT] || '', view_number: getSessionManager().viewNumber, layout_context: {
+                        viewport_width: (_b = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _b !== void 0 ? _b : 0,
+                        viewport_height: (_c = window === null || window === void 0 ? void 0 : window.innerHeight) !== null && _c !== void 0 ? _c : 0,
+                        view_width: (_e = (_d = document === null || document === void 0 ? void 0 : document.documentElement) === null || _d === void 0 ? void 0 : _d.scrollWidth) !== null && _e !== void 0 ? _e : 0,
+                        view_height: (_g = (_f = document === null || document === void 0 ? void 0 : document.documentElement) === null || _f === void 0 ? void 0 : _f.scrollHeight) !== null && _g !== void 0 ? _g : 0,
+                        device_pixel_ratio: (_h = window === null || window === void 0 ? void 0 : window.devicePixelRatio) !== null && _h !== void 0 ? _h : 1,
+                        scroll_x: (_j = window === null || window === void 0 ? void 0 : window.scrollX) !== null && _j !== void 0 ? _j : 0,
+                        scroll_y: (_k = window === null || window === void 0 ? void 0 : window.scrollY) !== null && _k !== void 0 ? _k : 0,
+                    } }),
             },
         };
         var resolvedLabels = this.resolveLabels(cxSpan.text.cx_rum);
-        if (shouldAddOtelAttr(span)) {
-            cxSpan.text.cx_rum.spanId = spanId;
-            cxSpan.text.cx_rum.traceId = traceId;
-            cxSpan.text.cx_rum.parentSpanId = parentSpanId;
-            cxSpan.instrumentation_data = {
-                otelSpan: {
-                    spanId: spanId,
-                    traceId: traceId,
-                    parentSpanId: parentSpanId,
-                    startTime: startTime,
-                    endTime: endTime,
-                    status: severity === CoralogixLogSeverity.Error
-                        ? __assign(__assign({}, status), { code: SpanStatusCode.ERROR }) : status,
-                    kind: kind,
-                    duration: duration,
-                    sessionId: sessionId,
-                    name: name,
-                    attributes: buildRumContextAttributes(cxSpan.text.cx_rum, resolvedLabels),
-                },
-                otelResource: {
-                    attributes: resourceAttributes,
-                },
-            };
-        }
         this.resolveContextFromSpan(cxSpan, span, eventType);
         cxSpan.text.cx_rum.labels = resolvedLabels;
         return cxSpan;
@@ -4622,8 +4938,42 @@ var CoralogixSpanMapProcessor = (function () {
                     span[CoralogixAttributes.SCREENSHOT_CONTEXT];
                 break;
             }
+            case CoralogixEventType.DOM: {
+                cxSpan.text.cx_rum.dom_context = span[CoralogixAttributes.DOM_CONTEXT];
+                break;
+            }
         }
     };
+    CoralogixSpanMapProcessor.prototype.addOtelInstrumentationData = function (span, cxSpan) {
+        var _a;
+        var _b = span.spanContext(), spanId = _b.spanId, traceId = _b.traceId;
+        var parentSpanId = span.parentSpanId, startTime = span.startTime, endTime = span.endTime, status = span.status, kind = span.kind, duration = span.duration, name = span.name;
+        var cxRum = cxSpan.text.cx_rum;
+        var sessionId = cxRum.session_context.session_id;
+        cxRum.spanId = spanId;
+        cxRum.traceId = traceId;
+        cxRum.parentSpanId = parentSpanId;
+        var resourceAttributes = __assign(__assign({}, (_a = span.resource) === null || _a === void 0 ? void 0 : _a.attributes), { 'service.name': cxSpan.applicationName });
+        cxSpan.instrumentation_data = {
+            otelSpan: {
+                spanId: spanId,
+                traceId: traceId,
+                parentSpanId: parentSpanId,
+                startTime: startTime,
+                endTime: endTime,
+                status: cxSpan.severity === CoralogixLogSeverity.Error
+                    ? __assign(__assign({}, status), { code: SpanStatusCode.ERROR }) : status,
+                kind: kind,
+                duration: duration,
+                sessionId: sessionId,
+                name: name,
+                attributes: buildRumContextAttributes(cxRum, cxRum.labels),
+            },
+            otelResource: {
+                attributes: resourceAttributes,
+            },
+        };
+    };
     CoralogixSpanMapProcessor.prototype._getEventTypeContext = function (spanAttributes, eventType, span) {
         var _a;
         switch (eventType) {
@@ -4697,10 +5047,22 @@ var CoralogixSpanMapProcessor = (function () {
                     interaction_context: {
                         target_element: spanAttributes[CoralogixAttributes.TARGET_ELEMENT],
                         event_name: spanAttributes[CoralogixAttributes.INTERACTION_EVENT_NAME],
+                        cx_id: spanAttributes[CoralogixAttributes.CX_ID],
                         target_element_inner_text: spanAttributes[CoralogixAttributes.ELEMENT_INNER_TEXT],
                         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],
+                        click_x: spanAttributes[CoralogixAttributes.CLICK_X],
+                        click_y: spanAttributes[CoralogixAttributes.CLICK_Y],
+                        element_relative_x: spanAttributes[CoralogixAttributes.ELEMENT_RELATIVE_X],
+                        element_relative_y: spanAttributes[CoralogixAttributes.ELEMENT_RELATIVE_Y],
+                        element_width: spanAttributes[CoralogixAttributes.ELEMENT_WIDTH],
+                        element_height: spanAttributes[CoralogixAttributes.ELEMENT_HEIGHT],
+                        element_fingerprint: spanAttributes[CoralogixAttributes.ELEMENT_FINGERPRINT],
                     },
                 };
             }
@@ -4908,6 +5270,7 @@ var CoralogixNavigationProcessor = (function () {
     };
     CoralogixNavigationProcessor.prototype.onEnd = function (span) { };
     CoralogixNavigationProcessor.prototype.onStart = function (span) {
+        var _a;
         if (this.isResolving) {
             return;
         }
@@ -4921,6 +5284,8 @@ var CoralogixNavigationProcessor = (function () {
                 if (currentPageFragment !== page_fragments) {
                     getSessionManager().updateCurrentPage(page_fragments);
                     span[CoralogixAttributes.IS_NAVIGATION_EVENT] = true;
+                    this.handlePageNavigation(currentPageFragment);
+                    (_a = getClickScreenshotManager()) === null || _a === void 0 ? void 0 : _a.onNavigation();
                 }
             }
         }
@@ -4928,6 +5293,11 @@ var CoralogixNavigationProcessor = (function () {
             this.isResolving = false;
         }
     };
+    CoralogixNavigationProcessor.prototype.handlePageNavigation = function (currentPageFragment) {
+        if (currentPageFragment) {
+            getSessionManager().incrementViewNumber();
+        }
+    };
     CoralogixNavigationProcessor.prototype.shutdown = function () {
         return Promise.resolve();
     };
@@ -4941,6 +5311,42 @@ function getTiming(duration) {
     return getNowTime() - getSessionManager().currentPageTimestamp;
 }
 
+var FIRST_CAPTURE_CLICK = 1;
+var MIN_SECOND_CAPTURE_CLICK = 2;
+var TOTAL_CAPTURE_OPTIONS = 9;
+function sampleSecondCaptureClick() {
+    return (MIN_SECOND_CAPTURE_CLICK + Math.floor(Math.random() * TOTAL_CAPTURE_OPTIONS));
+}
+var ClickScreenshotManager = (function () {
+    function ClickScreenshotManager() {
+        var _this = this;
+        this.secondCaptureClick = sampleSecondCaptureClick();
+        this.clickCount = 0;
+        this.reset = function () {
+            _this.secondCaptureClick = sampleSecondCaptureClick();
+            _this.clickCount = 0;
+        };
+        this.onNavigation = function () {
+            _this.clickCount = 0;
+        };
+        this.handleClick = function () {
+            if (!getSessionRecorder()) {
+                return;
+            }
+            _this.clickCount += 1;
+            if (_this.clickCount === FIRST_CAPTURE_CLICK ||
+                _this.clickCount === _this.secondCaptureClick) {
+                CoralogixRum.screenshot(CX_PREFIX);
+            }
+        };
+        CxGlobal[CLICK_SCREENSHOT_MANAGER_KEY] = this;
+    }
+    ClickScreenshotManager.unregister = function () {
+        CxGlobal[CLICK_SCREENSHOT_MANAGER_KEY] = undefined;
+    };
+    return ClickScreenshotManager;
+}());
+
 if (supportedPerformanceTypes === null || supportedPerformanceTypes === void 0 ? void 0 : supportedPerformanceTypes.has(PerformanceTypes.LongTask)) {
     var ttiHandler_1 = (CxGlobal.__tti = {
         e: [],
@@ -4971,6 +5377,7 @@ var CoralogixRum = {
     init: function (options) {
         var _a, _b;
         var _this = this;
+        var _c;
         try {
             if (isInited) {
                 if (options === null || options === void 0 ? void 0 : options.debug) {
@@ -5002,6 +5409,7 @@ var CoralogixRum = {
             tracerProvider = new CoralogixWebTracerProvider({
                 sampler: sampler,
             });
+            setTracerProvider(tracerProvider);
             var pluginDefaults_1 = {};
             var instrumentations = INSTRUMENTATIONS.map(function (_a) {
                 var _b, _c;
@@ -5087,6 +5495,9 @@ var CoralogixRum = {
             spanMapProcessor = new CoralogixSpanMapProcessor();
             tracerProvider.addSpanProcessor(spanMapProcessor);
             new SnapshotManager();
+            if ((_c = resolvedOptions_1.sessionRecordingConfig) === null || _c === void 0 ? void 0 : _c.enable) {
+                new ClickScreenshotManager();
+            }
             snapshotProcessor = new CoralogixSnapshotSpanProcessor();
             tracerProvider.addSpanProcessor(snapshotProcessor);
             tracerProvider.addSpanProcessor(new BatchSpanProcessor((exporter = new CoralogixExporter()), {
@@ -5098,10 +5509,10 @@ var CoralogixRum = {
                 tracerProvider: tracerProvider,
                 instrumentations: instrumentations,
             });
-            var _c = __read$1(partition(resolvedOptions_1.labelProviders || [], function (_a) {
+            var _d = __read$1(partition(resolvedOptions_1.labelProviders || [], function (_a) {
                 var urlType = _a.urlType;
                 return urlType === UrlType.PAGE || !urlType;
-            }), 2), pageUrlLabelProviders = _c[0], networkUrlLabelProviders = _c[1];
+            }), 2), pageUrlLabelProviders = _d[0], networkUrlLabelProviders = _d[1];
             saveInternalRumData(PAGE_URL_LABEL_PROVIDERS_KEY, pageUrlLabelProviders);
             saveInternalRumData(NETWORK_URL_LABEL_PROVIDERS_KEY, networkUrlLabelProviders);
             isInited = true;
@@ -5187,6 +5598,7 @@ var CoralogixRum = {
         _deregisterInstrumentations = undefined;
         this.stopSessionRecording();
         (_a = getSessionManager()) === null || _a === void 0 ? void 0 : _a.stop();
+        ClickScreenshotManager.unregister();
         attributesProcessor === null || attributesProcessor === void 0 ? void 0 : attributesProcessor.shutdown();
         navigationProcessor === null || navigationProcessor === void 0 ? void 0 : navigationProcessor.shutdown();
         spanMapProcessor === null || spanMapProcessor === void 0 ? void 0 : spanMapProcessor.shutdown();

package/package.json

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

package/sessionRecorder.esm.js

@@ -1,5 +1,5 @@
 import { __values, __spreadArray, __read, __assign, __awaiter, __generator, __rest } from 'tslib';
-import { c as cxSetTimeout, a as cxClearTimeout, g as getZoneJsOriginalDom, b as createCxMutationObserver, d as cxRequestAnimationFrame, e as cxCancelAnimationFrame, C as CxGlobal, f as getSdkConfig, h as cxClearInterval, S as SESSION_RECORDER_SEGMENTS_MAP, i as getNowTime, j as SESSION_RECORDING_NETWORK_ERR0R_MESSAGE, k as cxSetInterval, R as Request, l as SESSION_RECORDING_DEFAULT_HEADERS, m as SESSION_RECORDING_POSTFIX_URL, B as BATCH_TIME_DELAY, n as SESSION_RECORDER_KEY, o as SESSION_RECORDING_DEFAULT_ERROR_MESSAGE, M as MAX_BATCH_TIME_MS } from './index.esm2.js';
+import { c as cxSetTimeout, a as cxClearTimeout, g as getZoneJsOriginalDom, b as createCxMutationObserver, d as cxRequestAnimationFrame, e as cxCancelAnimationFrame, C as CxGlobal, S as SESSION_RECORDER_SEGMENTS_MAP, f as getSdkConfig, h as cxClearInterval, i as getNowTime, j as SESSION_RECORDING_NETWORK_ERR0R_MESSAGE, k as cxSetInterval, R as Request, l as SESSION_RECORDING_DEFAULT_HEADERS, m as SESSION_RECORDING_POSTFIX_URL, B as BATCH_TIME_DELAY, n as SESSION_RECORDER_KEY, o as SESSION_RECORDING_DEFAULT_ERROR_MESSAGE, M as MAX_BATCH_TIME_MS } from './index.esm2.js';
 import '@opentelemetry/sdk-trace-base';
 import '@opentelemetry/sdk-trace-web';
 import '@opentelemetry/instrumentation';
@@ -492,6 +492,9 @@ function absolutifyURLs(cssText, href) {
         if (!filePath) {
             return origin;
         }
+        if (filePath[0] === '#') {
+            return "url(".concat(maybeQuote).concat(filePath).concat(maybeQuote, ")");
+        }
         if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
             return "url(".concat(maybeQuote).concat(filePath).concat(maybeQuote, ")");
         }
@@ -712,8 +715,11 @@ function absoluteToDoc(doc, attributeValue) {
     }
     return getHref(doc, attributeValue);
 }
+var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 function isSVGElement(el) {
-    return Boolean(el.tagName === 'svg' || el.ownerSVGElement);
+    return Boolean(el.namespaceURI === SVG_NAMESPACE ||
+        el.tagName === 'svg' ||
+        el.ownerSVGElement);
 }
 function getHref(doc, customHref) {
     var a = cachedDocument.get(doc);
@@ -1166,12 +1172,13 @@ function serializeElementNode(n, options) {
     }
     catch (e) {
     }
+    var isSVG = isSVGElement(n);
     return {
         type: NodeType.Element,
-        tagName: tagName,
+        tagName: isSVG ? n.tagName : tagName,
         attributes: attributes,
         childNodes: [],
-        isSVG: isSVGElement(n) || undefined,
+        isSVG: isSVG || undefined,
         needBlock: needBlock,
         rootId: rootId,
         isCustom: isCustomElement,
@@ -5710,7 +5717,7 @@ var WorkerManager = (function () {
 var SessionRecorder = (function () {
     function SessionRecorder(sessionManager, recordConfig) {
         var _this = this;
-        var _a;
+        var _a, _b;
         this.isAutoStartRecording = false;
         this.onlySessionWithErrorMode = false;
         this.recordEvents = [];
@@ -5788,6 +5795,9 @@ var SessionRecorder = (function () {
         };
         CxGlobal[SESSION_RECORDER_KEY] = this;
         this.sessionManager = sessionManager;
+        if ((_b = getSdkConfig().sessionConfig) === null || _b === void 0 ? void 0 : _b.keepSessionAfterReload) {
+            this.restoreSegmentIndexCounter();
+        }
         var onlySessionWithErrorMode = sessionManager.onlySessionWithErrorMode, maxRecordTimeForSessionWithError = sessionManager.maxRecordTimeForSessionWithError;
         var autoStartSessionRecording = recordConfig.autoStartSessionRecording, workerUrl = recordConfig.workerUrl;
         this.onlySessionWithErrorMode = onlySessionWithErrorMode;
@@ -5812,15 +5822,22 @@ var SessionRecorder = (function () {
         return (this.hasRecording &&
             !!this.segmentIndexCounter[(_a = this.sessionManager.getActiveSession()) === null || _a === void 0 ? void 0 : _a.sessionId]);
     };
-    SessionRecorder.prototype.updateSegmentIndexCounter = function (segmentIndexCounter) {
-        this.segmentIndexCounter = segmentIndexCounter;
+    SessionRecorder.prototype.getSegmentIndexCounter = function () {
+        return this.segmentIndexCounter;
+    };
+    SessionRecorder.prototype.restoreSegmentIndexCounter = function () {
+        var stored = CxGlobal.sessionStorage.getItem(SESSION_RECORDER_SEGMENTS_MAP);
+        if (stored) {
+            this.segmentIndexCounter = JSON.parse(stored);
+        }
     };
     SessionRecorder.prototype.getIsAutoStartRecording = function () {
         return this.isAutoStartRecording;
     };
     SessionRecorder.prototype.isConsoleRecordingActive = function () {
         var _a;
-        return !!this.recordRef && ((_a = getSdkConfig().sessionRecordingConfig) === null || _a === void 0 ? void 0 : _a.recordConsoleEvents) === true;
+        return (!!this.recordRef &&
+            ((_a = getSdkConfig().sessionRecordingConfig) === null || _a === void 0 ? void 0 : _a.recordConsoleEvents) === true);
     };
     Object.defineProperty(SessionRecorder.prototype, "recordingStopDueToTimeout", {
         get: function () {

package/src/Request.d.ts

@@ -10,5 +10,6 @@ export declare class Request {
     private getResolvedUrl;
     private init;
     send(body: BodyInit): Promise<Response>;
+    private isWithinKeepaliveQuota;
 }
 export {};

package/src/constants.d.ts

@@ -16,6 +16,8 @@ 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_PREFIX = "cx";
+export declare const ARIA_LABEL_ATTRIBUTE = "aria-label";
 export declare const MASK_INPUT_TYPES_DEFAULT: InputType[];
 export declare const FINGER_PRINT_KEY = "cx-fingerprint";
 export declare const OPTIONS_DEFAULTS: Partial<CoralogixBrowserSdkConfig>;
@@ -43,11 +45,24 @@ export declare const CoralogixAttributes: {
     ELEMENT_CLASSES: string;
     TARGET_ELEMENT: string;
     TARGET_ELEMENT_TYPE: string;
+    CX_ACTION_NAME: string;
+    CX_ID: string;
+    ARIA_LABEL: string;
+    TEST_ID: string;
+    RESOLVED_NAME: string;
+    CLICK_X: string;
+    CLICK_Y: string;
+    ELEMENT_RELATIVE_X: string;
+    ELEMENT_RELATIVE_Y: string;
+    ELEMENT_WIDTH: string;
+    ELEMENT_HEIGHT: string;
+    ELEMENT_FINGERPRINT: string;
     TIMESTAMP: string;
     INTERNAL: string;
     PAGE_CONTEXT: string;
     IS_NAVIGATION_EVENT: string;
     SCREENSHOT_CONTEXT: string;
+    DOM_CONTEXT: string;
 };
 export declare const CoralogixDomainsApiUrlMap: {
     EU1: string;

package/src/dom-attributes.consts.d.ts

@@ -0,0 +1,4 @@
+export declare const CX_ACTION_NAME_ATTRIBUTE = "data-cx-action-name";
+export declare const DATA_TEST_ATTRIBUTE = "data-test";
+export declare const DATA_TESTID_ATTRIBUTE = "data-testid";
+export declare const DATA_TEST_ID_ATTRIBUTE = "data-test-id";

package/src/helpers.d.ts

@@ -2,9 +2,15 @@ import { SessionManager } from './session/sessionManager';
 import { SessionRecorder } from './session/sessionRecorder';
 import { CoralogixBrowserSdkConfig, UserAgentData } from './types';
 import { SnapshotManager } from './snapshot/snapshotManager';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import type { ClickScreenshotManager } from './instrumentations/screenshot/click-screenshot-manager';
 export declare function getSnapshotManager(): SnapshotManager;
 export declare function getSessionManager(): SessionManager;
 export declare function getSessionRecorder(): SessionRecorder | undefined;
+export declare function getClickScreenshotManager(): ClickScreenshotManager | undefined;
 export declare function getSdkConfig(): CoralogixBrowserSdkConfig;
 export declare function getUserAgentData(): UserAgentData;
 export declare function clearMemoryFrom(keys: string[]): void;
+export declare function setTracerProvider(provider: WebTracerProvider): void;
+export declare function getTracerProvider(): WebTracerProvider | undefined;
+export declare function flush(): void;

package/src/instrumentations/CoralogixDOMInstrumentation.d.ts

@@ -1,6 +1,7 @@
 import { InstrumentationBase, InstrumentationConfig } from '@opentelemetry/instrumentation';
 export declare class CoralogixDOMInstrumentation extends InstrumentationBase {
     constructor(config: InstrumentationConfig);
+    private createDOMSpan;
     private visibilityChangeHandler;
     private registerToDOMEvents;
     private unregisterFromDOMEvents;

package/src/instrumentations/screenshot/click-screenshot-manager.d.ts

@@ -0,0 +1,9 @@
+export declare class ClickScreenshotManager {
+    private secondCaptureClick;
+    private clickCount;
+    static unregister(): void;
+    constructor();
+    reset: () => void;
+    onNavigation: () => void;
+    handleClick: () => void;
+}

package/src/instrumentations/screenshot/click-screenshot.consts.d.ts

@@ -0,0 +1 @@
+export declare const CLICK_SCREENSHOT_MANAGER_KEY = "rumClickScreenshotManager";

package/src/instrumentations/user-interaction/element-fingerprint.d.ts

@@ -0,0 +1,2 @@
+export declare const SHADOW_DOM_MARKER = "::shadow ";
+export declare function getElementFingerprint(target: Element): string | undefined;

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/processors/CoralogixNavigationProcessor.d.ts

@@ -4,5 +4,6 @@ export declare class CoralogixNavigationProcessor implements SpanProcessor {
     forceFlush(): Promise<void>;
     onEnd(span: ReadableSpan): void;
     onStart(span: Span): void;
+    private handlePageNavigation;
     shutdown(): Promise<void>;
 }

package/src/processors/CoralogixSpanMapProcessor.d.ts

@@ -9,6 +9,7 @@ export declare class CoralogixSpanMapProcessor implements SpanProcessor, Process
     forceFlush(): Promise<void>;
     private _mapToCxSpan;
     private resolveContextFromSpan;
+    private addOtelInstrumentationData;
     private _getEventTypeContext;
     private resolveLabels;
     private getLabelsByLabelProviders;

package/src/session/session.consts.d.ts

@@ -16,3 +16,4 @@ export declare const SESSION_EXPIRATION_TIME: number;
 export declare const SESSION_MANAGER_KEY = "rumSessionManager";
 export declare const SESSION_RECORDER_KEY = "rumSessionRecorder";
 export declare const SESSION_RECORDER_SEGMENTS_MAP = "rumSessionRecorderSegmentsMap";
+export declare const VIEW_NUMBER_KEY = "rum_view_number";

package/src/session/sessionManager.d.ts

@@ -11,6 +11,7 @@ export declare class SessionManager extends SessionIdle {
     private _currentPageFragment;
     private _currentPageTimestamp;
     private _fingerPrint;
+    private _viewNumber;
     private debugMode;
     constructor(recordConfig?: SessionRecordingConfig);
     get currentPageTimestamp(): number;
@@ -23,9 +24,14 @@ export declare class SessionManager extends SessionIdle {
     get cachedLogsSent(): boolean;
     get sessionHasError(): boolean;
     get fingerPrint(): string | undefined;
+    get viewNumber(): number;
     set sessionHasError(value: boolean);
     set cachedLogsSent(val: boolean);
     updateCurrentPage(fragment: string): void;
+    incrementViewNumber(): void;
+    private persistViewNumber;
+    private loadViewNumber;
+    private resetViewNumber;
     getSessionKey(): string;
     getActiveSession(): Session;
     start(): void;

package/src/session/sessionRecorder.d.ts

@@ -26,7 +26,8 @@ export declare class SessionRecorder {
     constructor(sessionManager: SessionManager, recordConfig: SessionRecordingConfig);
     getSessionHasScreenshot(): boolean;
     getSessionHasRecording(): boolean;
-    updateSegmentIndexCounter(segmentIndexCounter: Record<string, number>): void;
+    getSegmentIndexCounter(): Record<string, number>;
+    private restoreSegmentIndexCounter;
     getIsAutoStartRecording(): boolean;
     isConsoleRecordingActive(): boolean;
     set recordingStopDueToTimeout(value: boolean);

package/src/types.d.ts

@@ -75,6 +75,9 @@ export interface ScreenshotContext {
     id: string;
     description?: string;
 }
+export interface DomContext {
+    visibility_state: DocumentVisibilityState;
+}
 export interface ApplicationContextConfig {
     application: string;
     version: string;
@@ -221,8 +224,29 @@ export interface InteractionContext {
     target_element_inner_text: string;
     target_element_type: string;
     event_name: string;
+    cx_id: string;
     element_id: string;
     element_classes: string;
+    cx_action_name?: string;
+    element_aria_label?: string;
+    element_test_id?: string;
+    resolved_name: string;
+    click_x?: number;
+    click_y?: number;
+    element_relative_x?: number;
+    element_relative_y?: number;
+    element_width?: number;
+    element_height?: number;
+    element_fingerprint?: string;
+}
+export interface LayoutContext {
+    viewport_width: number;
+    viewport_height: number;
+    view_width: number;
+    view_height: number;
+    device_pixel_ratio: number;
+    scroll_x: number;
+    scroll_y: number;
 }
 export interface LongTaskContext extends Omit<PerformanceEntry, 'toJSON'> {
     id: string;
@@ -254,6 +278,7 @@ export interface EventTypeContext {
     custom_measurement_context?: CustomMeasurementContext;
     screenshot_context?: ScreenshotContext;
     memory_usage_context?: MemoryUsageContext;
+    dom_context?: DomContext;
 }
 export interface UserMetadata {
     user_id: string;
@@ -331,6 +356,8 @@ export interface CxRumEvent extends EventTypeContext {
     screenshot_context?: ScreenshotContext;
     screenshotId?: string;
     fingerPrint: string;
+    view_number: number;
+    layout_context: LayoutContext;
 }
 export interface CxSpan {
     version_metadata: VersionMetaData;

package/src/version.d.ts

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