@coralogix/browser 3.10.0 → 3.16.0

package/CHANGELOG.md

@@ -1,3 +1,60 @@
+## 3.16.0 (2026-06-24)
+
+### 🚀 Features
+
+- Add support for configuring fetch priority on SDK network requests
+
+## 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

package/README.md

@@ -22,46 +22,60 @@
    - [Worker URL](#worker-url)
    - [Screenshots](#screenshots)
 
-10. [Network Extra Configuration](#network-extra-configuration)
-11. [Multi Page Application](#multi-page-application)
-12. [Ignore Errors](#ignore-errors)
-13. [Ignore URLs](#ignore-urls)
-14. [Stack Trace Limit](#stack-trace-limit)
-15. [Mask Elements](#mask-elements)
-16. [Label Providers](#label-providers)
-17. [URL Blueprinters](#url-blueprinters)
-18. [Traces](#traces)
+10. [Unique Users](#unique-users)
+11. [Network Extra Configuration](#network-extra-configuration)
+12. [Multi Page Application](#multi-page-application)
+13. [Ignore Errors](#ignore-errors)
+14. [Ignore URLs](#ignore-urls)
+15. [Stack Trace Limit](#stack-trace-limit)
+16. [Mask Elements](#mask-elements)
+17. [Custom Action Names](#custom-action-names)
+18. [Label Providers](#label-providers)
+19. [URL Blueprinters](#url-blueprinters)
+20. [Traces](#traces)
 
     - [Propagate Trace Header for CORS URLs](#propagatetraceheadercorsurls)
     - [Allowed Tracing URLs](#allowedtracingurls)
     - [Extra Propagators (B3 / AWS X-Ray)](#b3--aws-x-ray-propagation)
+    - [Custom Propagation](#custom-propagation)
+    - [Traces Exporter](#traces-exporter)
 
-19. [Before Send](#before-send)
-20. [Proxy URL](#proxy-url)
-21. [Collect IP Data](#collect-ip-data)
-22. [Custom Measurement](#custom-measurement)
-23. [Add Timing](#add-timing)
-24. [Custom Time Measurement](#custom-time-measurement)
-25. [Microfrontend Support](#microfrontend-support)
+21. [Before Send](#before-send)
+22. [Proxy URL](#proxy-url)
+
+    - [ignoreProxyUrlParams](#ignoreproxyurlparams)
+
+23. [Collect IP Data](#collect-ip-data)
+24. [SDK Fetch Priority](#sdk-fetch-priority)
+25. [Custom Measurement](#custom-measurement)
+26. [Add Timing](#add-timing)
+27. [Custom Time Measurement](#custom-time-measurement)
+28. [Microfrontend Support](#microfrontend-support)
 
     - [Pre Requisites](#pre-requisites)
 
-26. [Custom Spans](#custom-spans)
+29. [Custom Spans](#custom-spans)
 
     - [Ignored Instruments](#ignored-instruments)
 
-27. [Soft Navigations (Experimental)](#soft-navigations--experimental)
-28. [Memory Usage (Experimental)](#memory-usage---experimental)
-29. [Angular Zone.js Configuration](#angular-zonejs-configuration)
-30. [CDN](#cdn)
+30. [Soft Navigations (Experimental)](#soft-navigations--experimental)
+31. [Memory Usage (Experimental)](#memory-usage---experimental)
+32. [Web Worker Support](#web-worker-support)
+
+    - [Enabling Web Worker Support](#enabling-web-worker-support)
+    - [Examples](#examples)
+
+33. [Angular Zone.js Configuration](#angular-zonejs-configuration)
+34. [CDN](#cdn)
 
     - [Specific Version](#specific-version-recommended)
+    - [ES5](#es5)
     - [Add the CDN Script to Your Application](#add-the-cdn-script-to-your-application)
     - [Initialization](#initialization)
       - [Via JS File](#via-js-file)
       - [Via TS File](#via-ts-file)
 
-31. [Flutter Web](#flutter-web)
+35. [Flutter Web](#flutter-web)
 
 ---
 
@@ -559,7 +573,7 @@ Examples of masked elements:
 
 ```
 
-### Action Attributes
+### Custom Action Names
 
 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.
 
@@ -854,6 +868,19 @@ CoralogixRum.init({
 });
 ```
 
+### SDK Fetch Priority
+
+Controls the [`priority`](https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#priority) hint applied to the SDK's own network requests — the internal calls it makes to send logs and recordings to Coralogix. This is unrelated to your application's requests. When omitted, the browser uses its default (Chromium treats this as `high`), which can cause SDK traffic to compete with your application's critical requests. Set `sdkFetchPriority: 'low'` to deprioritize SDK traffic.
+
+Accepted values: `'low'`, `'high'`, or `'auto'` (default).
+
+```javascript
+CoralogixRum.init({
+  // ...
+  sdkFetchPriority: 'low',
+});
+```
+
 ### Custom Measurement
 
 Custom measurement allows you to send numeric data to Coralogix for precise monitoring and analysis.

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,13 @@ 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'];
+var CLICKABLE_ELEMENTS = ['BUTTON', 'LABEL', 'A', 'INPUT', 'OPTION', 'LI'];
 function getAttributeFromAncestors(element, attr, depth) {
     if (depth === void 0) { depth = PARENT_SEARCH_DEPTH; }
     if (!element || depth <= 0)
@@ -2159,7 +2183,12 @@ function getPlaceholder(element) {
     return '';
 }
 function getInnerText(element) {
-    return element instanceof HTMLElement ? element.innerText || '' : '';
+    var clickableElement = findClickableElement(element, PARENT_SEARCH_DEPTH);
+    if (!clickableElement)
+        return '';
+    return clickableElement instanceof HTMLElement
+        ? clickableElement.innerText || ''
+        : '';
 }
 function extractMaskedOrTextContent(element, config) {
     if (!element)
@@ -2238,6 +2267,177 @@ function findClickableElement(element, maxDepth) {
     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;
 var USER_INTERACTION_INSTRUMENTATION_NAME = 'interactions';
 var USER_INTERACTION_INSTRUMENTATION_VERSION = '1';
@@ -2256,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);
@@ -2266,8 +2467,16 @@ 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 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);
@@ -2279,6 +2488,13 @@ var CoralogixUserInteractionInstrumentation = (function (_super) {
                     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],
@@ -2301,6 +2517,7 @@ var CoralogixUserInteractionInstrumentation = (function (_super) {
                 });
             }
             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)
@@ -2598,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);
@@ -2713,9 +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_ACTION_NAME_ATTRIBUTE = 'data-cx-action-name';
+var CX_PREFIX = 'cx';
 var ARIA_LABEL_ATTRIBUTE = 'aria-label';
-var DATA_TEST_ATTRIBUTE = 'data-test';
 var MASK_INPUT_TYPES_DEFAULT = [
     'password',
     'email',
@@ -2857,14 +3080,23 @@ var CoralogixAttributes = {
     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',
@@ -3520,11 +3752,14 @@ 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;
         this.resolvedUrl = '';
         this.resolvedHeaders = {};
+        this.fetchPriority = 'auto';
         this.init();
     }
     Request.prototype.getResolvedUrl = function (config) {
@@ -3537,7 +3772,7 @@ var Request = (function () {
         return "".concat(proxyUrl, "?").concat(PROXY_CX_FORWARD_PARAMETER, "=").concat(encodeURIComponent(cxEndpoint));
     };
     Request.prototype.init = function () {
-        var _a = getSdkConfig(), proxyUrl = _a.proxyUrl, ignoreProxyUrlParams = _a.ignoreProxyUrlParams, coralogixDomain = _a.coralogixDomain, public_key = _a.public_key;
+        var _a = getSdkConfig(), proxyUrl = _a.proxyUrl, ignoreProxyUrlParams = _a.ignoreProxyUrlParams, coralogixDomain = _a.coralogixDomain, public_key = _a.public_key, sdkFetchPriority = _a.sdkFetchPriority;
         var headers = this.requestConfig.headers;
         this.resolvedUrl = this.getResolvedUrl({
             proxyUrl: proxyUrl,
@@ -3548,16 +3783,25 @@ var Request = (function () {
             headers['Authorization'] = "Bearer ".concat(public_key);
         }
         this.resolvedHeaders = headers;
+        if (sdkFetchPriority) {
+            this.fetchPriority = sdkFetchPriority;
+        }
     };
     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,
+            priority: this.fetchPriority,
         }).catch(function (e) {
             return e;
         });
     };
+    Request.prototype.isWithinKeepaliveQuota = function (body) {
+        return typeof body === 'string' && encoder.encode(body).length <= KEEPALIVE_MAX_BYTES;
+    };
     return Request;
 }());
 
@@ -4033,7 +4277,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(); },
@@ -4043,6 +4287,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;
@@ -4086,6 +4331,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", {
@@ -4164,6 +4412,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;
@@ -4172,6 +4427,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;
     };
@@ -4226,7 +4501,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');
         }
@@ -4234,9 +4509,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;
@@ -4249,13 +4526,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();
         }
     };
@@ -4440,7 +4712,7 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '3.10.0';
+var SDK_VERSION = '3.16.0';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -4578,6 +4850,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;
             }
         }
@@ -4591,21 +4866,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,
@@ -4637,34 +4910,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;
@@ -4686,8 +4943,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) {
@@ -4761,6 +5052,7 @@ 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],
@@ -4769,6 +5061,13 @@ var CoralogixSpanMapProcessor = (function () {
                         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],
                     },
                 };
             }
@@ -4976,6 +5275,7 @@ var CoralogixNavigationProcessor = (function () {
     };
     CoralogixNavigationProcessor.prototype.onEnd = function (span) { };
     CoralogixNavigationProcessor.prototype.onStart = function (span) {
+        var _a;
         if (this.isResolving) {
             return;
         }
@@ -4989,6 +5289,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();
                 }
             }
         }
@@ -4996,6 +5298,11 @@ var CoralogixNavigationProcessor = (function () {
             this.isResolving = false;
         }
     };
+    CoralogixNavigationProcessor.prototype.handlePageNavigation = function (currentPageFragment) {
+        if (currentPageFragment) {
+            getSessionManager().incrementViewNumber();
+        }
+    };
     CoralogixNavigationProcessor.prototype.shutdown = function () {
         return Promise.resolve();
     };
@@ -5009,6 +5316,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: [],
@@ -5039,6 +5382,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) {
@@ -5070,6 +5414,7 @@ var CoralogixRum = {
             tracerProvider = new CoralogixWebTracerProvider({
                 sampler: sampler,
             });
+            setTracerProvider(tracerProvider);
             var pluginDefaults_1 = {};
             var instrumentations = INSTRUMENTATIONS.map(function (_a) {
                 var _b, _c;
@@ -5155,6 +5500,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()), {
@@ -5166,10 +5514,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;
@@ -5255,6 +5603,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.10.0",
+  "version": "3.16.0",
   "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

@@ -6,9 +6,11 @@ export declare class Request {
     private requestConfig;
     private resolvedUrl;
     private resolvedHeaders;
+    private fetchPriority;
     constructor(requestConfig: RequestConfig);
     private getResolvedUrl;
     private init;
     send(body: BodyInit): Promise<Response>;
+    private isWithinKeepaliveQuota;
 }
 export {};

package/src/constants.d.ts

@@ -16,9 +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_ACTION_NAME_ATTRIBUTE = "data-cx-action-name";
+export declare const CX_PREFIX = "cx";
 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>;
@@ -47,14 +46,23 @@ export declare const CoralogixAttributes: {
     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/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;
@@ -161,6 +164,7 @@ export interface CoralogixBrowserSdkConfig {
     workerSupport?: boolean;
     tracesExporter?: (data: TraceExporterData) => void;
     runOutsideAngularZone?: boolean;
+    sdkFetchPriority?: RequestPriority;
 }
 export interface CoralogixOtelWebType extends SendLog {
     init: (options: CoralogixBrowserSdkConfig) => void;
@@ -221,12 +225,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;
@@ -258,6 +279,7 @@ export interface EventTypeContext {
     custom_measurement_context?: CustomMeasurementContext;
     screenshot_context?: ScreenshotContext;
     memory_usage_context?: MemoryUsageContext;
+    dom_context?: DomContext;
 }
 export interface UserMetadata {
     user_id: string;
@@ -335,6 +357,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.10.0";
+export declare const SDK_VERSION = "3.16.0";