@coralogix/browser 3.23.6 → 3.24.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+## 3.24.0 (2026-09-23)
+
+### 🚀 Features
+
+- Take an extra screenshot for Coralogix Product Analytics when a user action leads to a meaningful application state — a dialog, drawer or menu opening, a view being replaced — on top of the screenshots already taken on the first click and one random later click of each view. On by default whenever session recording is running; set `sessionRecordingConfig.captureScreenshotOnDomChange: false` to turn it off. Expect a small rise in upload volume: one to four extra screenshots per page view, measured on real applications
+- List the actions available on the captured view in each Product Analytics screenshot event (`screenshot_context.actions`, up to 100 names): the page's `data-cx-action-name` values first, then the same names a click on the page's controls would report as `resolved_name`
+
+### 🩹 Fixes
+
+- In `onlyWithErrorConfig` mode, hold automatic Product Analytics screenshots until the session has an error. Previously the screenshot payload was uploaded straight away while the event describing it was withheld, so sessions that never errored paid for screenshots that could not be queried
+
+## 3.23.8 (2026-09-17)
+
+### 🩹 Fixes
+
+- Report a clicked button's own text as its interaction name (`resolved_name`) when the button sits inside a container that has an `aria-label`, such as a `role="dialog"` panel. The container's label was reported instead
+- Name a click on an SVG chart shape by the shape's own `<text>` label instead of by the text of the whole page section around the chart
+- Stop naming an icon-only control after the labels of the other buttons in its toolbar; such controls now take their `title` or `alt` attribute, and report no name when they have neither
+- Name a `<select>` by its first option instead of by all its options joined together, and name `<input type="submit">`, `"button"` and `"reset"` by their `value`
+- Exclude text under a masked element (`maskClass`) from `resolved_name` instead of leaking it when the clicked control contains masked content
+- Cap `resolved_name` and `element_inner_text` at 100 characters, ending with ` [...]` when cut, so a container's content can no longer produce a very long interaction name
+- Run only the first SDK copy loaded on a page: a second copy (another bundle importing the SDK, or a CDN script next to an npm install) no longer replaces `window.CoralogixRum`, and its `init` is ignored with a debug message
+
+## 3.23.7 (2026-09-14)
+
+### 🩹 Fixes
+
+- Mask a page URL segment as `{id}` only when the whole segment is digits, so route names such as `/apm-v2` and `/oauth2` keep their real value
+- Run your own `pageUrlBlueprinters` after the built-in ID masking, so the SDK defaults no longer overwrite them
+- Keep the fragment when masking a numeric segment: `/user/123#details` now reports as `/user/{id}#details`
+
 ## 3.23.6 (2026-09-09)
 
 ### 🩹 Fixes

package/README.md

@@ -352,6 +352,18 @@ CoralogixRum.init({
     recordConsoleEvents: true, // Will record all console events from dev tools. Levels: log, debug, warn, error, info, table etc..
     sessionRecordingSampleRate: 100, // Percentage of overall sessions recording being tracked, defaults to 100% and applied after the overall sessionSampleRate.
     immediateFlush: false, // Flush recording events immediately on start to capture short-duration sessions (<10s). Defaults to false.
+    /**
+     * Take an extra screenshot when the page changes in a way that looks like a meaningful
+     * application state, such as a dialog opening or a view being replaced. These are in addition
+     * to the screenshots taken on the first click and one random later click of each view.
+     *
+     * On by default whenever session recording is running. Detection reads the session recorder's
+     * event stream, so with autoStartSessionRecording: false it stays dormant until you call
+     * CoralogixRum.startSessionRecording(). Set it to false to turn it off.
+     *
+     * Available from version 3.24.0.
+     **/
+    captureScreenshotOnDomChange: true, // Defaults to true.
   },
 });
 ```
@@ -702,6 +714,13 @@ CoralogixRum.init({
 });
 ```
 
+The SDK applies its own built-in blueprinting first, then your functions, in the order you list
+them, so your blueprinter has the final word on the URL it returns.
+
+The built-in page blueprinting replaces UUIDs and all-digit path segments with `{id}`, so
+`/orders/1234` becomes `/orders/{id}`. A segment that only happens to contain a digit keeps its
+real value, which leaves route names such as `/apm-v2`, `/oauth2` and `/v1` untouched.
+
 ### Traces
 
 Add trace context propagation in headers across service boundaries

package/index.esm.js

@@ -1,4 +1,4 @@
-export { t as CoralogixEventType, q as CoralogixLogSeverity, p as CoralogixRum, O as OtelNetworkAttrs, P as PerformanceTypes, r as SessionRecordingEventType, U as UrlBasedLabelProvider, u as UrlType } from './index.esm2.js';
+export { x as CoralogixEventType, v as CoralogixLogSeverity, u as CoralogixRum, O as OtelNetworkAttrs, y as PerformanceTypes, w as SessionRecordingEventType, U as UrlBasedLabelProvider, z as UrlType } from './index.esm2.js';
 import 'tslib';
 import '@opentelemetry/sdk-trace-base';
 import '@opentelemetry/sdk-trace-web';

package/index.esm2.js

@@ -284,6 +284,25 @@ function deleteSdkState(key) {
 
 var CLICK_SCREENSHOT_MANAGER_KEY = 'rumClickScreenshotManager';
 
+var DOM_CHANGE_SCREENSHOT_TRIGGER_KEY = 'rumDomChangeScreenshotTrigger';
+var SETTLE_QUIET_MS = 500;
+var CONTENT_ELEMENT_FLOOR = 50;
+var CHANGE_DEBOUNCE_MS = 400;
+var INTERACTION_TIGHT_MS = 150;
+var INTERACTION_TIGHT_MIN_ELEMENTS = 1;
+var INTERACTION_LOOSE_MS = 1500;
+var INTERACTION_LOOSE_MIN_ELEMENTS = 3;
+var OVERLAY_MAX_DEPTH = 3;
+var MAX_DEPTH_WALK = 40;
+var OVERLAY_MAX_REMOVES_ABSOLUTE = 2;
+var OVERLAY_MAX_REMOVES_FRACTION = 0.1;
+var VIEW_CHANGE_FRACTION = 0.02;
+var VIEW_CHANGE_MIN_WEIGHT = 25;
+var NODE_COUNT_REFRESH_MS = 2000;
+var MIN_CAPTURE_INTERVAL_MS = 2000;
+var MAX_CAPTURES_PER_VIEW = 10;
+var MAX_NODES_FOR_CAPTURE = 20000;
+
 function getSnapshotManager() {
     return sdkStore[SNAPSHOT_MANAGER_KEY];
 }
@@ -296,6 +315,9 @@ function getSessionRecorder() {
 function getClickScreenshotManager() {
     return sdkStore[CLICK_SCREENSHOT_MANAGER_KEY];
 }
+function getDomChangeScreenshotTrigger() {
+    return sdkStore[DOM_CHANGE_SCREENSHOT_TRIGGER_KEY];
+}
 function getSdkConfig() {
     return sdkStore[SDK_CONFIG_KEY];
 }
@@ -2313,6 +2335,29 @@ var ANCESTOR_SEARCH_DEPTH = 5;
 var POINTER_CURSOR = 'pointer';
 var TEXT_CURSOR = 'text';
 var BODY_NODE_NAME = 'BODY';
+var INPUT_BUTTON_TYPES = ['button', 'submit', 'reset'];
+var LINE_BREAK_NODE_NAMES = ['BR', 'P'];
+var BLOCK_DISPLAY_VALUES = [
+    'block',
+    'flex',
+    'grid',
+    'list-item',
+    'table',
+    'table-caption',
+];
+var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+var SVG_ROOT_LOCAL_NAME = 'svg';
+var NON_RENDERED_SVG_LOCAL_NAMES = [
+    'title',
+    'desc',
+    'metadata',
+    'defs',
+    'symbol',
+    'clipPath',
+    'mask',
+    'pattern',
+    'marker',
+];
 var CLICKABLE_SELECTOR = 'a, button, input, select, textarea, label, summary, option, li, ' +
     '[role="button"], [role="link"], [role="tab"], ' +
     '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], ' +
@@ -2339,39 +2384,125 @@ function extractActionName(el) {
 function extractAriaLabel(el) {
     return getAttributeFromAncestors(el, ARIA_LABEL_ATTRIBUTE);
 }
+function getOwnAriaLabel(element) {
+    return getOwnAttribute(element, ARIA_LABEL_ATTRIBUTE);
+}
 function extractTestId(el) {
     return (el === null || el === void 0 ? void 0 : el.getAttribute(DATA_TEST_ATTRIBUTE)) || '';
 }
 function extractResolvedName(_a) {
-    var isDeadClick = _a.isDeadClick, element = _a.element, config = _a.config, actionName = _a.actionName, ariaLabel = _a.ariaLabel;
+    var isDeadClick = _a.isDeadClick, element = _a.element, config = _a.config, actionName = _a.actionName;
     if (!element)
         return '';
     if (isDeadClick)
         return '';
     var resolveName = actionName ||
         maskedTextIfMasked(element, config) ||
-        resolveFallbackName(element, ariaLabel, ANCESTOR_SEARCH_DEPTH);
+        resolveFallbackName(element, config, ANCESTOR_SEARCH_DEPTH);
     return normalizeInteractionText(resolveName);
 }
 function maskedTextIfMasked(element, config) {
     return isElementMasked(element, config) ? MASKED_TEXT : '';
 }
-function resolveFallbackName(element, ariaLabel, depth) {
+function resolveFallbackName(element, config, depth) {
     var _a;
     if (!element || element.nodeName === BODY_NODE_NAME)
         return '';
+    var isSvgRoot = isSvgRootElement(element);
+    var readText = !isSvgRoot && !isControlContainer(element);
     var resolvedName = getLabelText(element) ||
-        ariaLabel ||
+        getOwnAriaLabel(element) ||
+        getInputButtonValue(element) ||
+        getOwnAttribute(element, ALT_ATTRIBUTE) ||
         getPlaceholder(element) ||
-        getInnerText(element);
+        getSelectFirstOptionText(element) ||
+        (readText ? getUnmaskedInnerText(element, config) : '') ||
+        getOwnAttribute(element, TITLE_ATTRIBUTE);
     if (resolvedName)
         return resolvedName;
     if ((_a = element.matches) === null || _a === void 0 ? void 0 : _a.call(element, CLICKABLE_SELECTOR))
         return '';
+    if (isSvgRoot && !hasClickableAncestor(element))
+        return '';
     var parent = element.parentElement;
     if (depth <= 0 || !parent || parent.nodeName === BODY_NODE_NAME)
         return '';
-    return resolveFallbackName(parent, ariaLabel, depth - 1);
+    return resolveFallbackName(parent, config, depth - 1);
+}
+function isControlContainer(element) {
+    var _a, _b;
+    if ((_a = element.matches) === null || _a === void 0 ? void 0 : _a.call(element, CLICKABLE_SELECTOR))
+        return false;
+    return !!((_b = element.querySelector) === null || _b === void 0 ? void 0 : _b.call(element, CLICKABLE_SELECTOR));
+}
+function getOwnAttribute(element, attribute) {
+    return element.getAttribute(attribute) || '';
+}
+function isSvgElement(element) {
+    return element.namespaceURI === SVG_NAMESPACE;
+}
+function isSvgRootElement(element) {
+    return isSvgElement(element) && element.localName === SVG_ROOT_LOCAL_NAME;
+}
+function hasClickableAncestor(element) {
+    var _a, _b;
+    return !!((_b = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, CLICKABLE_SELECTOR));
+}
+function getInputButtonValue(element) {
+    if (!(element instanceof HTMLInputElement))
+        return '';
+    return INPUT_BUTTON_TYPES.includes(element.type) ? element.value || '' : '';
+}
+function getSelectFirstOptionText(element) {
+    var _a;
+    if (!(element instanceof HTMLSelectElement))
+        return '';
+    return ((_a = element.options[0]) === null || _a === void 0 ? void 0 : _a.text) || '';
+}
+function getUnmaskedInnerText(element, config) {
+    var maskClass = config.maskClass;
+    if (isSvgElement(element)) {
+        return normalizeInteractionText(collectUnmaskedText(element, maskClass));
+    }
+    if (!(element instanceof HTMLElement))
+        return '';
+    if (!hasMaskedDescendant(element, maskClass))
+        return getInnerText(element);
+    return normalizeInteractionText(collectUnmaskedText(element, maskClass));
+}
+function hasMaskedDescendant(element, maskClass) {
+    var descendants = element.getElementsByTagName('*');
+    for (var i = 0; i < descendants.length; i++) {
+        if (isMaskedByClass(getClassName(descendants[i]), maskClass))
+            return true;
+    }
+    return false;
+}
+function collectUnmaskedText(node, maskClass) {
+    if (node.nodeType === Node.TEXT_NODE)
+        return node.textContent || '';
+    if (node.nodeType !== Node.ELEMENT_NODE)
+        return '';
+    var element = node;
+    if (isMaskedByClass(getClassName(element), maskClass))
+        return '';
+    if (isSvgElement(element) &&
+        NON_RENDERED_SVG_LOCAL_NAMES.includes(element.localName)) {
+        return '';
+    }
+    var style = CxGlobal.getComputedStyle(element);
+    if (style.display === 'none' || style.visibility === 'hidden')
+        return '';
+    var text = isBlockBoundary(element, style.display) ? ' ' : '';
+    var children = element.childNodes;
+    for (var i = 0; i < children.length; i++) {
+        text += collectUnmaskedText(children[i], maskClass);
+    }
+    return text;
+}
+function isBlockBoundary(element, display) {
+    return (LINE_BREAK_NODE_NAMES.includes(element.nodeName) ||
+        BLOCK_DISPLAY_VALUES.includes(display));
 }
 function getLabelText(element) {
     var _a;
@@ -2398,10 +2529,15 @@ function getInnerText(element) {
         : '';
 }
 function normalizeInteractionText(text) {
-    return text
-        .slice(0, MAX_INTERACTION_ELEMENT_SIZE)
+    var normalized = text
+        .slice(0, MAX_INTERACTION_ELEMENT_SIZE + 1)
         .replace(/\s+/g, ' ')
         .trim();
+    if (normalized.length <= MAX_INTERACTION_ELEMENT_SIZE)
+        return normalized;
+    var maxTextBeforeMarker = MAX_INTERACTION_ELEMENT_SIZE - INTERACTION_TEXT_TRUNCATION_MARKER.length;
+    return (normalized.slice(0, maxTextBeforeMarker).trim() +
+        INTERACTION_TEXT_TRUNCATION_MARKER);
 }
 function extractMaskedOrTextContent(clickableElement, config) {
     if (!clickableElement)
@@ -2463,6 +2599,7 @@ function wasPasswordInput(element) {
 }
 function isMaskedByClass(className, maskClass) {
     if (maskClass instanceof RegExp) {
+        maskClass.lastIndex = 0;
         return maskClass.test(className);
     }
     return className.includes(maskClass);
@@ -2763,7 +2900,6 @@ var CoralogixUserInteractionInstrumentation = (function (_super) {
                     element: eventTarget,
                     config: config,
                     actionName: cxActionName,
-                    ariaLabel: ariaLabel,
                 });
                 span.setAttribute(CoralogixAttributes.IS_DEAD_CLICK, isDeadClick);
                 var _b = eventTarget.getBoundingClientRect(), width = _b.width, height = _b.height;
@@ -2960,6 +3096,162 @@ var CoralogixMemoryUsageInstrumentation = (function (_super) {
 
 var SCREENSHOT_INSTRUMENTATION_NAME = 'screenshot';
 var SCREENSHOT_INSTRUMENTATION_VERSION = '1.0.0';
+var MAX_SCREENSHOT_ACTIONS = 100;
+var FILL_ATTEMPTS_PER_SLOT = 2;
+var LABELLED_SELECTOR = '[aria-label], [data-testid], [data-test], [data-test-id], [role]';
+var NON_INTERACTIVE_TAGS = new Set([
+    'html', 'body', 'main', 'header', 'footer', 'nav', 'aside', 'section', 'article', 'form',
+    'table', 'thead', 'tbody', 'tr', 'ul', 'ol', 'dl', 'p', 'hr', 'br',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img', 'picture', 'svg', 'video', 'audio', 'iframe',
+]);
+var NON_INTERACTIVE_ROLES = new Set([
+    'dialog', 'alertdialog', 'navigation', 'region', 'main', 'banner', 'contentinfo',
+    'complementary', 'search', 'form', 'application', 'document', 'article', 'group', 'toolbar',
+    'tabpanel', 'tablist', 'list', 'listitem', 'table', 'row', 'rowgroup', 'cell', 'gridcell',
+    'columnheader', 'rowheader', 'heading', 'img', 'figure', 'presentation', 'none', 'status',
+    'alert', 'log', 'marquee', 'timer', 'tooltip', 'progressbar', 'separator', 'note', 'definition',
+    'term', 'directory', 'feed', 'math', 'meter', 'scrollbar',
+]);
+var MAX_CANDIDATE_DESCENDANTS = 50;
+function collectDomActionNames(limit) {
+    if (limit === void 0) { limit = MAX_SCREENSHOT_ACTIONS; }
+    try {
+        var doc = CxGlobal.document;
+        if (!(doc === null || doc === void 0 ? void 0 : doc.querySelectorAll)) {
+            return [];
+        }
+        var actions = collectExplicitActionNames(doc, limit);
+        if (actions.length >= limit) {
+            return actions;
+        }
+        var config = getSdkConfig();
+        if (!config) {
+            return actions;
+        }
+        fillFromCandidates(doc, LABELLED_SELECTOR, isLabelledCandidate, actions, limit, config);
+        if (actions.length < limit) {
+            fillFromCandidates(doc, CLICKABLE_SELECTOR, isSemanticCandidate, actions, limit, config);
+        }
+        return actions;
+    }
+    catch (_a) {
+        return [];
+    }
+}
+function collectExplicitActionNames(doc, limit) {
+    var elements = doc.querySelectorAll("[".concat(CX_ACTION_NAME_ATTRIBUTE, "]"));
+    var seen = new Set();
+    var names = [];
+    for (var i = 0; i < elements.length; i++) {
+        var value = elements[i].getAttribute(CX_ACTION_NAME_ATTRIBUTE);
+        if (value && !seen.has(value)) {
+            seen.add(value);
+            names.push(value);
+        }
+    }
+    return names.length > limit ? takeRun(names, limit) : names;
+}
+function fillFromCandidates(doc, selector, isCandidate, actions, limit, config) {
+    var candidates = usableCandidates(doc, selector, isCandidate);
+    var total = candidates.length;
+    if (total === 0) {
+        return;
+    }
+    var attempts = Math.min(total, (limit - actions.length) * FILL_ATTEMPTS_PER_SLOT);
+    var start = randomIndex(total);
+    var seen = new Set(actions);
+    for (var step = 0; step < attempts && actions.length < limit; step++) {
+        var name_1 = resolveClickableName(candidates[(start + step) % total], config);
+        if (name_1 && !seen.has(name_1)) {
+            seen.add(name_1);
+            actions.push(name_1);
+        }
+    }
+}
+function usableCandidates(doc, selector, isCandidate) {
+    var matches = doc.querySelectorAll(selector);
+    var usable = [];
+    for (var i = 0; i < matches.length; i++) {
+        var element = matches[i];
+        if (!isUnderExplicitActionName(element) &&
+            (!isCandidate || isCandidate(element)) &&
+            isRendered(element)) {
+            usable.push(element);
+        }
+    }
+    return usable;
+}
+function isContentRegion(element) {
+    return element.getElementsByTagName('*').length > MAX_CANDIDATE_DESCENDANTS;
+}
+function isUnderExplicitActionName(element) {
+    return typeof element.closest === 'function'
+        ? !!element.closest("[".concat(CX_ACTION_NAME_ATTRIBUTE, "]"))
+        : !!extractActionName(element);
+}
+function isSemanticCandidate(element) {
+    switch (element.localName) {
+        case 'label':
+            return hasAssociatedControl(element);
+        case 'li':
+        case 'option': {
+            var role = element.getAttribute('role');
+            return !!role && !NON_INTERACTIVE_ROLES.has(role);
+        }
+        case 'input':
+            return element.type !== 'hidden';
+        default:
+            return true;
+    }
+}
+function hasAssociatedControl(label) {
+    if (label.control) {
+        return true;
+    }
+    if (label.htmlFor) {
+        return !!label.ownerDocument.getElementById(label.htmlFor);
+    }
+    return !!label.querySelector('input, select, textarea, button, meter, output, progress');
+}
+function isLabelledCandidate(element) {
+    var _a;
+    if (NON_INTERACTIVE_TAGS.has(element.localName)) {
+        return false;
+    }
+    var role = element.getAttribute('role');
+    if (role && NON_INTERACTIVE_ROLES.has(role)) {
+        return false;
+    }
+    return !((_a = element.matches) === null || _a === void 0 ? void 0 : _a.call(element, CLICKABLE_SELECTOR));
+}
+function resolveClickableName(element, config) {
+    if (isContentRegion(element)) {
+        return '';
+    }
+    var name = extractResolvedName({
+        isDeadClick: false,
+        element: element,
+        config: config,
+        actionName: '',
+    });
+    return name === MASKED_TEXT ? '' : name;
+}
+function isRendered(element) {
+    return typeof element.checkVisibility === 'function'
+        ? element.checkVisibility()
+        : true;
+}
+function takeRun(items, count) {
+    var start = randomIndex(items.length);
+    var run = [];
+    for (var step = 0; step < count; step++) {
+        run.push(items[(start + step) % items.length]);
+    }
+    return run;
+}
+function randomIndex(length) {
+    return Math.floor(Math.random() * length);
+}
 
 var CoralogixScreenshotInstrumentation = (function (_super) {
     __extends(CoralogixScreenshotInstrumentation, _super);
@@ -2979,6 +3271,7 @@ var CoralogixScreenshotInstrumentation = (function (_super) {
         span[CoralogixAttributes.SCREENSHOT_CONTEXT] = {
             id: id,
             description: description,
+            actions: collectDomActionNames(),
         };
         span.end();
     };
@@ -3208,7 +3501,8 @@ var CORALOGIX_LOGS_URL_SUFFIX = '/browser/v1beta/logs';
 var CORALOGIX_RECORDING_URL_SUFFIX = '/sessionrecording';
 var MFE_METADATA_FILE = 'cx-metadata.json';
 var MFE_METADATA_URL_PATTERN = /cx-metadata\.json$/;
-var MAX_INTERACTION_ELEMENT_SIZE = 1024;
+var MAX_INTERACTION_ELEMENT_SIZE = 100;
+var INTERACTION_TEXT_TRUNCATION_MARKER = ' [...]';
 var MAX_CHARACTERS = 1024;
 var REQUIRED_CONFIG_KEYS = [
     'application',
@@ -3224,6 +3518,8 @@ var MASKED_TEXT = '***';
 var MASK_CLASS_DEFAULT = 'cx-mask';
 var CX_PREFIX = 'cx';
 var ARIA_LABEL_ATTRIBUTE = 'aria-label';
+var TITLE_ATTRIBUTE = 'title';
+var ALT_ATTRIBUTE = 'alt';
 var PASSWORD_INPUT_TYPE = 'password';
 var MASK_INPUT_TYPES_DEFAULT = [PASSWORD_INPUT_TYPE];
 var FINGER_PRINT_KEY = 'cx-fingerprint';
@@ -3238,7 +3534,7 @@ var idPatterns = [
     },
 ];
 var PATH_ID_PLACEHOLDER = '/{id}';
-var NUMERIC_PATH_SEGMENT_REGEX = /\/(?![vV]\d{1,2}\/)([^/\d?]*\d+[^/?]*)/g;
+var NUMERIC_PATH_SEGMENT_REGEX = /\/\d+(?=$|[/?#])/g;
 function replaceNumericPathSegments(url) {
     var replacePath = function (s) {
         return s.replace(NUMERIC_PATH_SEGMENT_REGEX, PATH_ID_PLACEHOLDER);
@@ -4210,9 +4506,9 @@ function resolveSessionConfig(config) {
     return __assign(__assign({}, config), { sessionSampleRate: (_a = config.sessionSampleRate) !== null && _a !== void 0 ? _a : 100, onlyWithErrorConfig: resolveSessionWithErrorsConfig(config.onlyWithErrorConfig) });
 }
 function resolveSessionRecordingConfig(config) {
-    var _a;
+    var _a, _b;
     if (config) {
-        return __assign(__assign({}, config), { sessionRecordingSampleRate: (_a = config.sessionRecordingSampleRate) !== null && _a !== void 0 ? _a : 100 });
+        return __assign(__assign({}, config), { sessionRecordingSampleRate: (_a = config.sessionRecordingSampleRate) !== null && _a !== void 0 ? _a : 100, captureScreenshotOnDomChange: (_b = config.captureScreenshotOnDomChange) !== null && _b !== void 0 ? _b : true });
     }
     return;
 }
@@ -4988,7 +5284,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, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (this.debugMode) {
             console.debug('Coralogix Browser SDK - Session expired, clearing session');
         }
@@ -4998,10 +5294,11 @@ var SessionManager = (function (_super) {
         (_d = getSnapshotManager()) === null || _d === void 0 ? void 0 : _d.resetSnapshot();
         clearStoredSnapshotState();
         (_e = getClickScreenshotManager()) === null || _e === void 0 ? void 0 : _e.reset();
+        (_f = getDomChangeScreenshotTrigger()) === null || _f === void 0 ? void 0 : _f.reset();
         this.resetCurrentPageFragment();
         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);
+        (_g = this.sessionRecorder) === null || _g === void 0 ? void 0 : _g.stopRecording();
+        (_h = CxGlobal.sessionStorage) === null || _h === void 0 ? void 0 : _h.removeItem(SESSION_KEY);
     };
     SessionManager.prototype.clearGlobalSpans = function () {
         var _a;
@@ -5253,28 +5550,14 @@ function resolveUrlBlueprinters(urlBlueprinters) {
     if (!urlBlueprinters) {
         return OPTIONS_DEFAULTS.urlBlueprinters;
     }
-    var resolvedUrlBlueprinters = {
-        pageUrlBlueprinters: [],
-        networkUrlBlueprinters: [],
-    };
-    var concatBlueprinters = function (urlBlueprinters) {
-        var _a, _b;
-        var _c = urlBlueprinters || {}, pageUrlBlueprinters = _c.pageUrlBlueprinters, networkUrlBlueprinters = _c.networkUrlBlueprinters;
-        if (pageUrlBlueprinters) {
-            (_a = resolvedUrlBlueprinters.pageUrlBlueprinters).push.apply(_a, __spreadArray([], __read$1(pageUrlBlueprinters), false));
-        }
-        if (networkUrlBlueprinters) {
-            (_b = resolvedUrlBlueprinters.networkUrlBlueprinters).push.apply(_b, __spreadArray([], __read$1(networkUrlBlueprinters), false));
-        }
+    var defaults = OPTIONS_DEFAULTS.urlBlueprinters || {};
+    return {
+        pageUrlBlueprinters: __spreadArray(__spreadArray([], __read$1((defaults.pageUrlBlueprinters || [])), false), __read$1((urlBlueprinters.pageUrlBlueprinters || [])), false),
+        networkUrlBlueprinters: __spreadArray(__spreadArray([], __read$1((defaults.networkUrlBlueprinters || [])), false), __read$1((urlBlueprinters.networkUrlBlueprinters || [])), false),
     };
-    concatBlueprinters(urlBlueprinters);
-    if (OPTIONS_DEFAULTS.urlBlueprinters) {
-        concatBlueprinters(OPTIONS_DEFAULTS.urlBlueprinters);
-    }
-    return resolvedUrlBlueprinters;
 }
 
-var SDK_VERSION = '3.23.6';
+var SDK_VERSION = '3.24.0';
 
 function shouldDropEvent(cxRumEvent, options) {
     if (isDocumentErrorWithoutMessage(cxRumEvent)) {
@@ -5797,7 +6080,7 @@ var CoralogixNavigationProcessor = (function () {
     };
     CoralogixNavigationProcessor.prototype.onEnd = function (span) { };
     CoralogixNavigationProcessor.prototype.onStart = function (span) {
-        var _a;
+        var _a, _b;
         if (this.isResolving) {
             return;
         }
@@ -5814,6 +6097,7 @@ var CoralogixNavigationProcessor = (function () {
                     span[CoralogixAttributes.IS_NAVIGATION_EVENT] = true;
                     this.handlePageNavigation(previousPageFragment);
                     (_a = getClickScreenshotManager()) === null || _a === void 0 ? void 0 : _a.onNavigation();
+                    (_b = getDomChangeScreenshotTrigger()) === null || _b === void 0 ? void 0 : _b.onNavigation();
                 }
                 span[CoralogixAttributes.VIEW_NUMBER] = sessionManager.viewNumber;
             }
@@ -5841,6 +6125,14 @@ function getTiming(duration) {
     return getNowTime() - getSessionManager().currentPageTimestamp;
 }
 
+function canCaptureAutomaticScreenshot() {
+    var sessionManager = getSessionManager();
+    if (!(sessionManager === null || sessionManager === void 0 ? void 0 : sessionManager.onlySessionWithErrorMode)) {
+        return true;
+    }
+    return sessionManager.sessionHasError;
+}
+
 var FIRST_CAPTURE_CLICK = 1;
 var MIN_SECOND_CAPTURE_CLICK = 2;
 var TOTAL_CAPTURE_OPTIONS = 9;
@@ -5860,12 +6152,16 @@ var ClickScreenshotManager = (function () {
             _this.clickCount = 0;
         };
         this.handleClick = function () {
-            if (!getSessionRecorder()) {
+            var _a;
+            if (!((_a = getSessionRecorder()) === null || _a === void 0 ? void 0 : _a.isRecordingActive())) {
                 return;
             }
             _this.clickCount += 1;
             if (_this.clickCount === FIRST_CAPTURE_CLICK ||
                 _this.clickCount === _this.secondCaptureClick) {
+                if (!canCaptureAutomaticScreenshot()) {
+                    return;
+                }
                 CoralogixRum.screenshot(CX_PREFIX);
             }
         };
@@ -5877,6 +6173,312 @@ var ClickScreenshotManager = (function () {
     return ClickScreenshotManager;
 }());
 
+var EventType;
+(function (EventType) {
+    EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
+    EventType[EventType["Load"] = 1] = "Load";
+    EventType[EventType["FullSnapshot"] = 2] = "FullSnapshot";
+    EventType[EventType["IncrementalSnapshot"] = 3] = "IncrementalSnapshot";
+    EventType[EventType["Meta"] = 4] = "Meta";
+    EventType[EventType["Custom"] = 5] = "Custom";
+    EventType[EventType["Plugin"] = 6] = "Plugin";
+    EventType[EventType["Asset"] = 7] = "Asset";
+})(EventType || (EventType = {}));
+var IncrementalSource;
+(function (IncrementalSource) {
+    IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
+    IncrementalSource[IncrementalSource["MouseMove"] = 1] = "MouseMove";
+    IncrementalSource[IncrementalSource["MouseInteraction"] = 2] = "MouseInteraction";
+    IncrementalSource[IncrementalSource["Scroll"] = 3] = "Scroll";
+    IncrementalSource[IncrementalSource["ViewportResize"] = 4] = "ViewportResize";
+    IncrementalSource[IncrementalSource["Input"] = 5] = "Input";
+    IncrementalSource[IncrementalSource["TouchMove"] = 6] = "TouchMove";
+    IncrementalSource[IncrementalSource["MediaInteraction"] = 7] = "MediaInteraction";
+    IncrementalSource[IncrementalSource["StyleSheetRule"] = 8] = "StyleSheetRule";
+    IncrementalSource[IncrementalSource["CanvasMutation"] = 9] = "CanvasMutation";
+    IncrementalSource[IncrementalSource["Font"] = 10] = "Font";
+    IncrementalSource[IncrementalSource["Log"] = 11] = "Log";
+    IncrementalSource[IncrementalSource["Drag"] = 12] = "Drag";
+    IncrementalSource[IncrementalSource["StyleDeclaration"] = 13] = "StyleDeclaration";
+    IncrementalSource[IncrementalSource["Selection"] = 14] = "Selection";
+    IncrementalSource[IncrementalSource["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet";
+    IncrementalSource[IncrementalSource["CustomElement"] = 16] = "CustomElement";
+})(IncrementalSource || (IncrementalSource = {}));
+var MouseInteractions;
+(function (MouseInteractions) {
+    MouseInteractions[MouseInteractions["MouseUp"] = 0] = "MouseUp";
+    MouseInteractions[MouseInteractions["MouseDown"] = 1] = "MouseDown";
+    MouseInteractions[MouseInteractions["Click"] = 2] = "Click";
+    MouseInteractions[MouseInteractions["ContextMenu"] = 3] = "ContextMenu";
+    MouseInteractions[MouseInteractions["DblClick"] = 4] = "DblClick";
+    MouseInteractions[MouseInteractions["Focus"] = 5] = "Focus";
+    MouseInteractions[MouseInteractions["Blur"] = 6] = "Blur";
+    MouseInteractions[MouseInteractions["TouchStart"] = 7] = "TouchStart";
+    MouseInteractions[MouseInteractions["TouchMove_Departed"] = 8] = "TouchMove_Departed";
+    MouseInteractions[MouseInteractions["TouchEnd"] = 9] = "TouchEnd";
+    MouseInteractions[MouseInteractions["TouchCancel"] = 10] = "TouchCancel";
+})(MouseInteractions || (MouseInteractions = {}));
+var PointerTypes;
+(function (PointerTypes) {
+    PointerTypes[PointerTypes["Mouse"] = 0] = "Mouse";
+    PointerTypes[PointerTypes["Pen"] = 1] = "Pen";
+    PointerTypes[PointerTypes["Touch"] = 2] = "Touch";
+})(PointerTypes || (PointerTypes = {}));
+var CanvasContext;
+(function (CanvasContext) {
+    CanvasContext[CanvasContext["2D"] = 0] = "2D";
+    CanvasContext[CanvasContext["WebGL"] = 1] = "WebGL";
+    CanvasContext[CanvasContext["WebGL2"] = 2] = "WebGL2";
+})(CanvasContext || (CanvasContext = {}));
+var MediaInteractions;
+(function (MediaInteractions) {
+    MediaInteractions[MediaInteractions["Play"] = 0] = "Play";
+    MediaInteractions[MediaInteractions["Pause"] = 1] = "Pause";
+    MediaInteractions[MediaInteractions["Seeked"] = 2] = "Seeked";
+    MediaInteractions[MediaInteractions["VolumeChange"] = 3] = "VolumeChange";
+    MediaInteractions[MediaInteractions["RateChange"] = 4] = "RateChange";
+})(MediaInteractions || (MediaInteractions = {}));
+var NodeType;
+(function (NodeType) {
+    NodeType[NodeType["Document"] = 0] = "Document";
+    NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
+    NodeType[NodeType["Element"] = 2] = "Element";
+    NodeType[NodeType["Text"] = 3] = "Text";
+    NodeType[NodeType["CDATA"] = 4] = "CDATA";
+    NodeType[NodeType["Comment"] = 5] = "Comment";
+})(NodeType || (NodeType = {}));
+
+var NEVER = 0;
+var UNRESOLVED_DEPTH = MAX_DEPTH_WALK + 1;
+var DomChangeScreenshotTrigger = (function () {
+    function DomChangeScreenshotTrigger() {
+        var _this = this;
+        this.settled = false;
+        this.lastInteractionAt = NEVER;
+        this.cachedElementCount = 0;
+        this.elementCountRefreshedAt = NEVER;
+        this.lastCaptureAt = NEVER;
+        this.capturesThisView = 0;
+        this.reset = function () {
+            _this.clearTimers();
+            _this.settled = false;
+            _this.lastInteractionAt = NEVER;
+            _this.lastCaptureAt = NEVER;
+            _this.onNavigation();
+        };
+        this.onNavigation = function () {
+            _this.clearTimers();
+            _this.settled = false;
+            _this.pendingReason = undefined;
+            _this.capturesThisView = 0;
+            _this.elementCountRefreshedAt = NEVER;
+        };
+        this.handleRecordEvent = function (event, resolveNode) {
+            var _a;
+            try {
+                if ((event === null || event === void 0 ? void 0 : event.type) === EventType.FullSnapshot) {
+                    _this.armSettleTimer();
+                    return;
+                }
+                if ((event === null || event === void 0 ? void 0 : event.type) !== EventType.IncrementalSnapshot) {
+                    return;
+                }
+                var source = (_a = event.data) === null || _a === void 0 ? void 0 : _a.source;
+                if (_this.isUserInteraction(event)) {
+                    _this.lastInteractionAt = event.timestamp;
+                    return;
+                }
+                if (source !== IncrementalSource.Mutation) {
+                    return;
+                }
+                if (!_this.settled) {
+                    _this.armSettleTimer();
+                    return;
+                }
+                _this.handleMutation(event.data, event.timestamp, resolveNode);
+            }
+            catch (_b) {
+            }
+        };
+        this.capture = function () {
+            var reason = _this.pendingReason;
+            _this.pendingReason = undefined;
+            if (!reason) {
+                return;
+            }
+            var now = Date.now();
+            if (_this.capturesThisView >= MAX_CAPTURES_PER_VIEW ||
+                now - _this.lastCaptureAt < MIN_CAPTURE_INTERVAL_MS ||
+                _this.cachedElementCount > MAX_NODES_FOR_CAPTURE ||
+                !canCaptureAutomaticScreenshot()) {
+                return;
+            }
+            _this.lastCaptureAt = now;
+            _this.capturesThisView += 1;
+            _this.lastInteractionAt = NEVER;
+            CoralogixRum.screenshot(reason);
+        };
+        this.markSettled = function () {
+            var _a;
+            var elementCount = ((_a = CxGlobal.document) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('*').length) || 0;
+            if (elementCount < CONTENT_ELEMENT_FLOOR) {
+                return;
+            }
+            _this.settled = true;
+            _this.cachedElementCount = elementCount;
+            _this.elementCountRefreshedAt = Date.now();
+        };
+        setSdkState(DOM_CHANGE_SCREENSHOT_TRIGGER_KEY, this);
+    }
+    DomChangeScreenshotTrigger.unregister = function () {
+        var instance = sdkStore[DOM_CHANGE_SCREENSHOT_TRIGGER_KEY];
+        instance === null || instance === void 0 ? void 0 : instance.clearTimers();
+        deleteSdkState(DOM_CHANGE_SCREENSHOT_TRIGGER_KEY);
+    };
+    DomChangeScreenshotTrigger.prototype.isUserInteraction = function (event) {
+        var data = event.data;
+        if ((data === null || data === void 0 ? void 0 : data.source) === IncrementalSource.Input) {
+            return true;
+        }
+        if ((data === null || data === void 0 ? void 0 : data.source) !== IncrementalSource.MouseInteraction) {
+            return false;
+        }
+        return (data.type === MouseInteractions.MouseDown ||
+            data.type === MouseInteractions.Click ||
+            data.type === MouseInteractions.DblClick ||
+            data.type === MouseInteractions.TouchStart);
+    };
+    DomChangeScreenshotTrigger.prototype.handleMutation = function (data, timestamp, resolveNode) {
+        var _a;
+        var adds = data.adds || [];
+        var removes = data.removes || [];
+        var weight = adds.length + removes.length + (((_a = data.texts) === null || _a === void 0 ? void 0 : _a.length) || 0);
+        if (!weight) {
+            return;
+        }
+        var elementCount = this.getElementCount(timestamp);
+        var reason = this.classify(adds, removes, weight, elementCount, timestamp, resolveNode);
+        if (!reason) {
+            return;
+        }
+        this.pendingReason = reason;
+        this.clearDebounceTimer();
+        this.debounceTimer = cxSetTimeout(this.capture, CHANGE_DEBOUNCE_MS);
+    };
+    DomChangeScreenshotTrigger.prototype.classify = function (adds, removes, weight, elementCount, timestamp, resolveNode) {
+        var sinceInteraction = timestamp - this.lastInteractionAt;
+        var withinTightWindow = sinceInteraction <= INTERACTION_TIGHT_MS;
+        var withinLooseWindow = sinceInteraction <= INTERACTION_LOOSE_MS;
+        if (withinLooseWindow && removesTolerable(adds.length, removes.length)) {
+            var addedElements_1 = adds.filter(function (add) { return containsElement(add.node); }).length;
+            var looksLikeOverlay = function () {
+                return addedElements_1 > 0 &&
+                    shallowestDepth(adds, resolveNode) <= OVERLAY_MAX_DEPTH;
+            };
+            var bigEnough = withinTightWindow
+                ? addedElements_1 >= INTERACTION_TIGHT_MIN_ELEMENTS
+                : addedElements_1 >= INTERACTION_LOOSE_MIN_ELEMENTS;
+            if (bigEnough && looksLikeOverlay()) {
+                return "dom-overlay";
+            }
+        }
+        if (withinLooseWindow &&
+            weight >= threshold(VIEW_CHANGE_MIN_WEIGHT, VIEW_CHANGE_FRACTION, elementCount)) {
+            return "dom-view-change";
+        }
+        return undefined;
+    };
+    DomChangeScreenshotTrigger.prototype.getElementCount = function (timestamp) {
+        var _a;
+        if (timestamp - this.elementCountRefreshedAt < NODE_COUNT_REFRESH_MS) {
+            return this.cachedElementCount;
+        }
+        this.cachedElementCount =
+            ((_a = CxGlobal.document) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('*').length) || 0;
+        this.elementCountRefreshedAt = timestamp;
+        return this.cachedElementCount;
+    };
+    DomChangeScreenshotTrigger.prototype.armSettleTimer = function () {
+        this.clearSettleTimer();
+        this.quietTimer = cxSetTimeout(this.markSettled, SETTLE_QUIET_MS);
+    };
+    DomChangeScreenshotTrigger.prototype.clearTimers = function () {
+        this.clearSettleTimer();
+        this.clearDebounceTimer();
+    };
+    DomChangeScreenshotTrigger.prototype.clearSettleTimer = function () {
+        if (this.quietTimer) {
+            cxClearTimeout(this.quietTimer);
+            this.quietTimer = undefined;
+        }
+    };
+    DomChangeScreenshotTrigger.prototype.clearDebounceTimer = function () {
+        if (this.debounceTimer) {
+            cxClearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+    };
+    return DomChangeScreenshotTrigger;
+}());
+function shallowestDepth(adds, resolveNode) {
+    var e_1, _a;
+    if (!resolveNode) {
+        return UNRESOLVED_DEPTH;
+    }
+    var shallowest = UNRESOLVED_DEPTH;
+    try {
+        for (var adds_1 = __values$1(adds), adds_1_1 = adds_1.next(); !adds_1_1.done; adds_1_1 = adds_1.next()) {
+            var add = adds_1_1.value;
+            var parent_1 = resolveNode(add.parentId);
+            if (parent_1) {
+                shallowest = Math.min(shallowest, depthFromBody(parent_1));
+            }
+            if (shallowest <= OVERLAY_MAX_DEPTH) {
+                break;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (adds_1_1 && !adds_1_1.done && (_a = adds_1.return)) _a.call(adds_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return shallowest;
+}
+function removesTolerable(added, removed) {
+    return (removed <=
+        Math.max(OVERLAY_MAX_REMOVES_ABSOLUTE, added * OVERLAY_MAX_REMOVES_FRACTION));
+}
+function threshold(minimum, fraction, elementCount) {
+    return Math.max(minimum, elementCount * fraction);
+}
+function containsElement(node) {
+    if (!node) {
+        return false;
+    }
+    if (node.type === NodeType.Element) {
+        return true;
+    }
+    var children = node.childNodes;
+    return !!(children === null || children === void 0 ? void 0 : children.some(containsElement));
+}
+function depthFromBody(node) {
+    var _a;
+    var body = (_a = CxGlobal.document) === null || _a === void 0 ? void 0 : _a.body;
+    var depth = 0;
+    var current = node;
+    while (current && current !== body) {
+        current = current.parentElement;
+        depth += 1;
+        if (depth > MAX_DEPTH_WALK) {
+            return UNRESOLVED_DEPTH;
+        }
+    }
+    return current ? depth : UNRESOLVED_DEPTH;
+}
+
 if (supportedPerformanceTypes === null || supportedPerformanceTypes === void 0 ? void 0 : supportedPerformanceTypes.has(PerformanceTypes.LongTask)) {
     var ttiHandler_1 = (CxGlobal.__tti = {
         e: [],
@@ -5915,7 +6517,6 @@ function getResolvedName(element, fullData) {
             element: element,
             config: getSdkConfig(),
             actionName: actionName,
-            ariaLabel: ariaLabel,
         });
         return fullData
             ? { resolvedName: resolvedName, isDeadClick: isDeadClick, actionName: actionName, ariaLabel: ariaLabel }
@@ -5932,9 +6533,14 @@ var CoralogixRum = {
     init: function (options) {
         var _a, _b;
         var _this = this;
-        var _c, _d;
+        var _c;
         try {
-            if (isInited || ((_c = CxGlobal === null || CxGlobal === void 0 ? void 0 : CxGlobal.CoralogixRum) === null || _c === void 0 ? void 0 : _c.isInited)) {
+            var owner = CxGlobal === null || CxGlobal === void 0 ? void 0 : CxGlobal.CoralogixRum;
+            if (owner && owner !== CoralogixRum) {
+                console.debug('CoralogixRum: another SDK copy on this page owns the global, ignoring init');
+                return;
+            }
+            if (isInited) {
                 if (options === null || options === void 0 ? void 0 : options.debug) {
                     console.debug('CoralogixRum already initialized, skipping init');
                 }
@@ -6050,8 +6656,11 @@ var CoralogixRum = {
             spanMapProcessor = new CoralogixSpanMapProcessor();
             tracerProvider.addSpanProcessor(spanMapProcessor);
             new SnapshotManager();
-            if ((_d = resolvedOptions_1.sessionRecordingConfig) === null || _d === void 0 ? void 0 : _d.enable) {
+            if ((_c = resolvedOptions_1.sessionRecordingConfig) === null || _c === void 0 ? void 0 : _c.enable) {
                 new ClickScreenshotManager();
+                if (resolvedOptions_1.sessionRecordingConfig.captureScreenshotOnDomChange) {
+                    new DomChangeScreenshotTrigger();
+                }
             }
             snapshotProcessor = new CoralogixSnapshotSpanProcessor();
             tracerProvider.addSpanProcessor(snapshotProcessor);
@@ -6061,10 +6670,10 @@ var CoralogixRum = {
                 tracerProvider: tracerProvider,
                 instrumentations: instrumentations,
             });
-            var _e = __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 = _e[0], networkUrlLabelProviders = _e[1];
+            }), 2), pageUrlLabelProviders = _d[0], networkUrlLabelProviders = _d[1];
             saveInternalRumData(PAGE_URL_LABEL_PROVIDERS_KEY, pageUrlLabelProviders);
             saveInternalRumData(NETWORK_URL_LABEL_PROVIDERS_KEY, networkUrlLabelProviders);
             isInited = true;
@@ -6151,6 +6760,7 @@ var CoralogixRum = {
         this.stopSessionRecording();
         (_a = getSessionManager()) === null || _a === void 0 ? void 0 : _a.stop();
         ClickScreenshotManager.unregister();
+        DomChangeScreenshotTrigger.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();
@@ -6327,7 +6937,9 @@ var CoralogixRum = {
         }
     },
 };
-CxGlobal.CoralogixRum = CoralogixRum;
+if (!CxGlobal.CoralogixRum) {
+    CxGlobal.CoralogixRum = CoralogixRum;
+}
 
 var UrlBasedLabelProvider = (function () {
     function UrlBasedLabelProvider(config) {
@@ -6378,4 +6990,4 @@ var SessionRecordingEventType;
     SessionRecordingEventType[SessionRecordingEventType["Plugin"] = 6] = "Plugin";
 })(SessionRecordingEventType || (SessionRecordingEventType = {}));
 
-export { BATCH_TIME_DELAY as B, CxGlobal as C, MAX_BATCH_TIME_MS as M, OtelNetworkAttrs as O, PerformanceTypes as P, Request as R, SESSION_RECORDER_SEGMENTS_MAP as S, UrlBasedLabelProvider as U, cxClearTimeout as a, createCxMutationObserver as b, cxSetTimeout as c, cxRequestAnimationFrame as d, cxCancelAnimationFrame as e, getSdkConfig as f, getZoneJsOriginalDom as g, cxClearInterval as h, getNowTime as i, SESSION_RECORDING_NETWORK_ERR0R_MESSAGE as j, cxSetInterval as k, SESSION_RECORDING_DEFAULT_HEADERS as l, SESSION_RECORDING_POSTFIX_URL as m, SESSION_RECORDER_KEY as n, SESSION_RECORDING_DEFAULT_ERROR_MESSAGE as o, CoralogixRum as p, CoralogixLogSeverity as q, SessionRecordingEventType as r, setSdkState as s, CoralogixEventType as t, UrlType as u };
+export { BATCH_TIME_DELAY as B, CanvasContext as C, EventType as E, IncrementalSource as I, MouseInteractions as M, NodeType as N, OtelNetworkAttrs as O, PointerTypes as P, Request as R, SESSION_RECORDER_SEGMENTS_MAP as S, UrlBasedLabelProvider as U, cxClearTimeout as a, createCxMutationObserver as b, cxSetTimeout as c, MediaInteractions as d, cxRequestAnimationFrame as e, cxCancelAnimationFrame as f, getZoneJsOriginalDom as g, CxGlobal as h, getSdkConfig as i, cxClearInterval as j, getNowTime as k, SESSION_RECORDING_NETWORK_ERR0R_MESSAGE as l, cxSetInterval as m, SESSION_RECORDING_DEFAULT_HEADERS as n, SESSION_RECORDING_POSTFIX_URL as o, getDomChangeScreenshotTrigger as p, SESSION_RECORDER_KEY as q, SESSION_RECORDING_DEFAULT_ERROR_MESSAGE as r, setSdkState as s, MAX_BATCH_TIME_MS as t, CoralogixRum as u, CoralogixLogSeverity as v, SessionRecordingEventType as w, CoralogixEventType as x, PerformanceTypes as y, UrlType as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/browser",
-  "version": "3.23.6",
+  "version": "3.24.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, __rest, __awaiter, __generator } from 'tslib';
-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, s as setSdkState, n as SESSION_RECORDER_KEY, o as SESSION_RECORDING_DEFAULT_ERROR_MESSAGE, M as MAX_BATCH_TIME_MS } from './index.esm2.js';
+import { N as NodeType, c as cxSetTimeout, a as cxClearTimeout, g as getZoneJsOriginalDom, b as createCxMutationObserver, M as MouseInteractions, d as MediaInteractions, P as PointerTypes, I as IncrementalSource, E as EventType, C as CanvasContext, e as cxRequestAnimationFrame, f as cxCancelAnimationFrame, h as CxGlobal, S as SESSION_RECORDER_SEGMENTS_MAP, i as getSdkConfig, j as cxClearInterval, k as getNowTime, l as SESSION_RECORDING_NETWORK_ERR0R_MESSAGE, m as cxSetInterval, R as Request, n as SESSION_RECORDING_DEFAULT_HEADERS, o as SESSION_RECORDING_POSTFIX_URL, B as BATCH_TIME_DELAY, p as getDomChangeScreenshotTrigger, s as setSdkState, q as SESSION_RECORDER_KEY, r as SESSION_RECORDING_DEFAULT_ERROR_MESSAGE, t as MAX_BATCH_TIME_MS } from './index.esm2.js';
 import '@opentelemetry/sdk-trace-base';
 import '@opentelemetry/sdk-trace-web';
 import '@opentelemetry/instrumentation';
@@ -12,81 +12,6 @@ import '@opentelemetry/api';
 import '@opentelemetry/propagator-b3';
 import '@opentelemetry/propagator-aws-xray';
 
-var EventType;
-(function (EventType) {
-    EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
-    EventType[EventType["Load"] = 1] = "Load";
-    EventType[EventType["FullSnapshot"] = 2] = "FullSnapshot";
-    EventType[EventType["IncrementalSnapshot"] = 3] = "IncrementalSnapshot";
-    EventType[EventType["Meta"] = 4] = "Meta";
-    EventType[EventType["Custom"] = 5] = "Custom";
-    EventType[EventType["Plugin"] = 6] = "Plugin";
-    EventType[EventType["Asset"] = 7] = "Asset";
-})(EventType || (EventType = {}));
-var IncrementalSource;
-(function (IncrementalSource) {
-    IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
-    IncrementalSource[IncrementalSource["MouseMove"] = 1] = "MouseMove";
-    IncrementalSource[IncrementalSource["MouseInteraction"] = 2] = "MouseInteraction";
-    IncrementalSource[IncrementalSource["Scroll"] = 3] = "Scroll";
-    IncrementalSource[IncrementalSource["ViewportResize"] = 4] = "ViewportResize";
-    IncrementalSource[IncrementalSource["Input"] = 5] = "Input";
-    IncrementalSource[IncrementalSource["TouchMove"] = 6] = "TouchMove";
-    IncrementalSource[IncrementalSource["MediaInteraction"] = 7] = "MediaInteraction";
-    IncrementalSource[IncrementalSource["StyleSheetRule"] = 8] = "StyleSheetRule";
-    IncrementalSource[IncrementalSource["CanvasMutation"] = 9] = "CanvasMutation";
-    IncrementalSource[IncrementalSource["Font"] = 10] = "Font";
-    IncrementalSource[IncrementalSource["Log"] = 11] = "Log";
-    IncrementalSource[IncrementalSource["Drag"] = 12] = "Drag";
-    IncrementalSource[IncrementalSource["StyleDeclaration"] = 13] = "StyleDeclaration";
-    IncrementalSource[IncrementalSource["Selection"] = 14] = "Selection";
-    IncrementalSource[IncrementalSource["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet";
-    IncrementalSource[IncrementalSource["CustomElement"] = 16] = "CustomElement";
-})(IncrementalSource || (IncrementalSource = {}));
-var MouseInteractions;
-(function (MouseInteractions) {
-    MouseInteractions[MouseInteractions["MouseUp"] = 0] = "MouseUp";
-    MouseInteractions[MouseInteractions["MouseDown"] = 1] = "MouseDown";
-    MouseInteractions[MouseInteractions["Click"] = 2] = "Click";
-    MouseInteractions[MouseInteractions["ContextMenu"] = 3] = "ContextMenu";
-    MouseInteractions[MouseInteractions["DblClick"] = 4] = "DblClick";
-    MouseInteractions[MouseInteractions["Focus"] = 5] = "Focus";
-    MouseInteractions[MouseInteractions["Blur"] = 6] = "Blur";
-    MouseInteractions[MouseInteractions["TouchStart"] = 7] = "TouchStart";
-    MouseInteractions[MouseInteractions["TouchMove_Departed"] = 8] = "TouchMove_Departed";
-    MouseInteractions[MouseInteractions["TouchEnd"] = 9] = "TouchEnd";
-    MouseInteractions[MouseInteractions["TouchCancel"] = 10] = "TouchCancel";
-})(MouseInteractions || (MouseInteractions = {}));
-var PointerTypes;
-(function (PointerTypes) {
-    PointerTypes[PointerTypes["Mouse"] = 0] = "Mouse";
-    PointerTypes[PointerTypes["Pen"] = 1] = "Pen";
-    PointerTypes[PointerTypes["Touch"] = 2] = "Touch";
-})(PointerTypes || (PointerTypes = {}));
-var CanvasContext;
-(function (CanvasContext) {
-    CanvasContext[CanvasContext["2D"] = 0] = "2D";
-    CanvasContext[CanvasContext["WebGL"] = 1] = "WebGL";
-    CanvasContext[CanvasContext["WebGL2"] = 2] = "WebGL2";
-})(CanvasContext || (CanvasContext = {}));
-var MediaInteractions;
-(function (MediaInteractions) {
-    MediaInteractions[MediaInteractions["Play"] = 0] = "Play";
-    MediaInteractions[MediaInteractions["Pause"] = 1] = "Pause";
-    MediaInteractions[MediaInteractions["Seeked"] = 2] = "Seeked";
-    MediaInteractions[MediaInteractions["VolumeChange"] = 3] = "VolumeChange";
-    MediaInteractions[MediaInteractions["RateChange"] = 4] = "RateChange";
-})(MediaInteractions || (MediaInteractions = {}));
-var NodeType;
-(function (NodeType) {
-    NodeType[NodeType["Document"] = 0] = "Document";
-    NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
-    NodeType[NodeType["Element"] = 2] = "Element";
-    NodeType[NodeType["Text"] = 3] = "Text";
-    NodeType[NodeType["CDATA"] = 4] = "CDATA";
-    NodeType[NodeType["Comment"] = 5] = "Comment";
-})(NodeType || (NodeType = {}));
-
 var testableAccessors = {
     Node: [
         'childNodes',
@@ -5714,6 +5639,7 @@ var WorkerManager = (function () {
     return WorkerManager;
 }());
 
+var resolveMirrorNode = function (id) { var _a, _b, _c; return (_c = (_b = (_a = record.mirror) === null || _a === void 0 ? void 0 : _a.getNode) === null || _b === void 0 ? void 0 : _b.call(_a, id)) !== null && _c !== void 0 ? _c : null; };
 var SessionRecorder = (function () {
     function SessionRecorder(sessionManager, recordConfig) {
         var _this = this;
@@ -5731,6 +5657,8 @@ var SessionRecorder = (function () {
         this.debugMode = !!((_a = getSdkConfig()) === null || _a === void 0 ? void 0 : _a.debug);
         this._recordingStopDueToTimeout = false;
         this.handleRecordEvent = function (event, isCheckout) {
+            var _a;
+            (_a = getDomChangeScreenshotTrigger()) === null || _a === void 0 ? void 0 : _a.handleRecordEvent(event, resolveMirrorNode);
             if (!_this.recordingStopped) {
                 if (_this.onlySessionWithErrorMode) {
                     _this.handleRecordEventForSessionWithError(event, isCheckout);
@@ -5834,9 +5762,12 @@ var SessionRecorder = (function () {
     SessionRecorder.prototype.getIsAutoStartRecording = function () {
         return this.isAutoStartRecording;
     };
+    SessionRecorder.prototype.isRecordingActive = function () {
+        return !!this.recordRef;
+    };
     SessionRecorder.prototype.isConsoleRecordingActive = function () {
         var _a;
-        return (!!this.recordRef &&
+        return (this.isRecordingActive() &&
             ((_a = getSdkConfig().sessionRecordingConfig) === null || _a === void 0 ? void 0 : _a.recordConsoleEvents) === true);
     };
     Object.defineProperty(SessionRecorder.prototype, "recordingStopDueToTimeout", {

package/src/constants.d.ts

@@ -4,7 +4,8 @@ export declare const CORALOGIX_LOGS_URL_SUFFIX = "/browser/v1beta/logs";
 export declare const CORALOGIX_RECORDING_URL_SUFFIX = "/sessionrecording";
 export declare const MFE_METADATA_FILE = "cx-metadata.json";
 export declare const MFE_METADATA_URL_PATTERN: RegExp;
-export declare const MAX_INTERACTION_ELEMENT_SIZE = 1024;
+export declare const MAX_INTERACTION_ELEMENT_SIZE = 100;
+export declare const INTERACTION_TEXT_TRUNCATION_MARKER = " [...]";
 export declare const MAX_CHARACTERS = 1024;
 export declare const REQUIRED_CONFIG_KEYS: Array<keyof CoralogixBrowserSdkConfig>;
 export { SDK_CONFIG_KEY, USER_AGENT_KEY } from './tools/global-keys';
@@ -18,6 +19,8 @@ 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 TITLE_ATTRIBUTE = "title";
+export declare const ALT_ATTRIBUTE = "alt";
 export declare const PASSWORD_INPUT_TYPE: InputType;
 export declare const MASK_INPUT_TYPES_DEFAULT: InputType[];
 export declare const FINGER_PRINT_KEY = "cx-fingerprint";

package/src/helpers.d.ts

@@ -4,10 +4,12 @@ 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';
+import type { DomChangeScreenshotTrigger } from './instrumentations/screenshot/dom-change-screenshot-trigger';
 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 getDomChangeScreenshotTrigger(): DomChangeScreenshotTrigger | undefined;
 export declare function getSdkConfig(): CoralogixBrowserSdkConfig;
 export declare function getUserAgentData(): UserAgentData;
 export declare function clearMemoryFrom(keys: string[]): void;

package/src/instrumentations/screenshot/dom-change-screenshot-trigger.d.ts

@@ -0,0 +1,28 @@
+import { eventWithTime } from '../../cx-rrweb/rrweb-types';
+import { MirrorNodeResolver } from './dom-change-screenshot.consts';
+export declare class DomChangeScreenshotTrigger {
+    private settled;
+    private quietTimer;
+    private debounceTimer;
+    private lastInteractionAt;
+    private pendingReason;
+    private cachedElementCount;
+    private elementCountRefreshedAt;
+    private lastCaptureAt;
+    private capturesThisView;
+    static unregister(): void;
+    constructor();
+    reset: () => void;
+    onNavigation: () => void;
+    handleRecordEvent: (event: eventWithTime, resolveNode?: MirrorNodeResolver) => void;
+    private isUserInteraction;
+    private handleMutation;
+    private classify;
+    private capture;
+    private getElementCount;
+    private armSettleTimer;
+    private markSettled;
+    private clearTimers;
+    private clearSettleTimer;
+    private clearDebounceTimer;
+}

package/src/instrumentations/screenshot/dom-change-screenshot.consts.d.ts

@@ -0,0 +1,23 @@
+export declare const DOM_CHANGE_SCREENSHOT_TRIGGER_KEY = "rumDomChangeScreenshotTrigger";
+export declare const SETTLE_QUIET_MS = 500;
+export declare const CONTENT_ELEMENT_FLOOR = 50;
+export declare const CHANGE_DEBOUNCE_MS = 400;
+export declare const INTERACTION_TIGHT_MS = 150;
+export declare const INTERACTION_TIGHT_MIN_ELEMENTS = 1;
+export declare const INTERACTION_LOOSE_MS = 1500;
+export declare const INTERACTION_LOOSE_MIN_ELEMENTS = 3;
+export declare const OVERLAY_MAX_DEPTH = 3;
+export declare const MAX_DEPTH_WALK = 40;
+export declare const OVERLAY_MAX_REMOVES_ABSOLUTE = 2;
+export declare const OVERLAY_MAX_REMOVES_FRACTION = 0.1;
+export declare const VIEW_CHANGE_FRACTION = 0.02;
+export declare const VIEW_CHANGE_MIN_WEIGHT = 25;
+export declare const NODE_COUNT_REFRESH_MS = 2000;
+export declare const MIN_CAPTURE_INTERVAL_MS = 2000;
+export declare const MAX_CAPTURES_PER_VIEW = 10;
+export declare const MAX_NODES_FOR_CAPTURE = 20000;
+export type MirrorNodeResolver = (id: number) => Node | null;
+export declare const enum DomChangeReason {
+    Overlay = "dom-overlay",
+    ViewChange = "dom-view-change"
+}

package/src/instrumentations/screenshot/screenshot-gate.d.ts

@@ -0,0 +1 @@
+export declare function canCaptureAutomaticScreenshot(): boolean;

package/src/instrumentations/screenshot/screenshot.utils.d.ts

@@ -1,2 +1,4 @@
 export declare const SCREENSHOT_INSTRUMENTATION_NAME = "screenshot";
 export declare const SCREENSHOT_INSTRUMENTATION_VERSION = "1.0.0";
+export declare const MAX_SCREENSHOT_ACTIONS = 100;
+export declare function collectDomActionNames(limit?: number): string[];

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

@@ -1,13 +1,13 @@
 import { CoralogixBrowserSdkConfig } from '../../types';
+export declare const CLICKABLE_SELECTOR: string;
 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({ isDeadClick, element, config, actionName, ariaLabel, }: {
+export declare function extractResolvedName({ isDeadClick, element, config, actionName, }: {
     isDeadClick: boolean;
     element: Element | HTMLElement | null;
     config: CoralogixBrowserSdkConfig;
     actionName: string;
-    ariaLabel: string;
 }): string;
 export declare function extractMaskedOrTextContent(clickableElement: Element | HTMLElement | null, config: CoralogixBrowserSdkConfig): string;
 export declare function getClassName(element: Element | HTMLElement): string;

package/src/session/session.model.d.ts

@@ -12,6 +12,7 @@ export interface SessionRecordingConfig extends Omit<recordOptions<eventWithTime
     sessionRecordingSampleRate?: number;
     workerUrl?: string;
     immediateFlush?: boolean;
+    captureScreenshotOnDomChange?: boolean;
 }
 export interface SessionWithErrorConfig {
     enable: boolean;

package/src/session/sessionRecorder.d.ts

@@ -29,6 +29,7 @@ export declare class SessionRecorder {
     getSegmentIndexCounter(): Record<string, number>;
     private restoreSegmentIndexCounter;
     getIsAutoStartRecording(): boolean;
+    isRecordingActive(): boolean;
     isConsoleRecordingActive(): boolean;
     set recordingStopDueToTimeout(value: boolean);
     get recordingStopDueToTimeout(): boolean;

package/src/types.d.ts

@@ -73,6 +73,7 @@ export interface CustomTargetElement extends HTMLElement {
 export interface ScreenshotContext {
     id: string;
     description?: string;
+    actions?: string[];
 }
 export interface DomContext {
     visibility_state: DocumentVisibilityState;

package/src/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.23.6";
+export declare const SDK_VERSION = "3.24.0";