clarity-js 0.8.19 → 0.8.21

package/build/clarity.js

@@ -2,9 +2,9 @@
 
 var dom = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    get add () { return add; },
+    get add () { return add$1; },
     get get () { return get; },
-    get getId () { return getId; },
+    get getId () { return getId$1; },
     get getNode () { return getNode; },
     get getValue () { return getValue; },
     get has () { return has$1; },
@@ -166,24 +166,30 @@ function api(method) {
 }
 
 var startTime = 0;
+function computeStartTime() {
+    return performance.now() + performance.timeOrigin;
+}
 function start$I() {
-    startTime = performance.now() + performance.timeOrigin;
+    startTime = computeStartTime();
 }
-// event.timestamp is number of milliseconds elapsed since the document was loaded 
+// event.timestamp is number of milliseconds elapsed since the document was loaded
 // since iframes can be loaded later the event timestamp is not the same as performance.now()
 // converting everything to absolute time by adding timeorigin of the event view
 // to synchronize times before calculating the difference with start time
 function time(event) {
     if (event === void 0) { event = null; }
+    // If startTime is 0, Clarity hasn't been started or has been stopped
+    // Use a local baseline to maintain relative timing semantics without affecting global state
+    var baseline = startTime === 0 ? computeStartTime() : startTime;
     var ts = event && event.timeStamp > 0 ? event.timeStamp : performance.now();
     var origin = event && event.view ? event.view.performance.timeOrigin : performance.timeOrigin;
-    return Math.max(Math.round(ts + origin - startTime), 0);
+    return Math.max(Math.round(ts + origin - baseline), 0);
 }
 function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.8.19";
+var version$1 = "0.8.21";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -655,7 +661,7 @@ function reset$r() {
 function setTimeout$1(handler, timeout, event) {
     return window.setTimeout(measure(handler), timeout, event);
 }
-function clearTimeout(handle) {
+function clearTimeout$1(handle) {
     return window.clearTimeout(handle);
 }
 
@@ -669,7 +675,7 @@ function start$F() {
 }
 function reset$q() {
     if (timeout$7) {
-        clearTimeout(timeout$7);
+        clearTimeout$1(timeout$7);
     }
     timeout$7 = setTimeout$1(ping, interval);
     last = time();
@@ -686,7 +692,7 @@ function ping() {
     }
 }
 function stop$C() {
-    clearTimeout(timeout$7);
+    clearTimeout$1(timeout$7);
     last = 0;
     interval = 0;
 }
@@ -1253,7 +1259,7 @@ function recompute$8(evt) {
         var value = element.value;
         var checksum = value && value.length >= 5 /* Setting.WordLength */ && config$2.fraud && "password,secret,pass,social,ssn,code,hidden" /* Mask.Exclude */.indexOf(element.type) === -1 ? hash(value, 28 /* Setting.ChecksumPrecision */) : "" /* Constant.Empty */;
         state$a.push({ time: time(evt), event: 42 /* Event.Change */, data: { target: target(evt), type: element.type, value: value, checksum: checksum } });
-        schedule(encode$3.bind(this, 42 /* Event.Change */));
+        schedule(encode$4.bind(this, 42 /* Event.Change */));
     }
 }
 function reset$m() {
@@ -1286,11 +1292,12 @@ function start$y() {
 }
 function observe$b(root) {
     bind(root, "click", handler$3.bind(this, 9 /* Event.Click */, root), true);
+    bind(root, "contextmenu", handler$3.bind(this, 48 /* Event.ContextMenu */, root), true);
 }
 function handler$3(event, root, evt) {
     handler$3.dn = 6 /* FunctionNames.ClickHandler */;
     var frame = iframe(root);
-    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    var d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
     var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
     var y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
     // In case of iframe, we adjust (x,y) to be relative to top parent's origin
@@ -1336,7 +1343,7 @@ function handler$3(event, root, evt) {
                 isFullText: textInfo.isFullText,
             }
         });
-        schedule(encode$3.bind(this, event));
+        schedule(encode$4.bind(this, event));
     }
 }
 function link(node) {
@@ -1427,7 +1434,7 @@ function observe$a(root) {
 function recompute$7(action, evt) {
     recompute$7.dn = 7 /* FunctionNames.ClipboardRecompute */;
     state$8.push({ time: time(evt), event: 38 /* Event.Clipboard */, data: { target: target(evt), action: action } });
-    schedule(encode$3.bind(this, 38 /* Event.Clipboard */));
+    schedule(encode$4.bind(this, 38 /* Event.Clipboard */));
 }
 function reset$k() {
     state$8 = [];
@@ -1463,18 +1470,18 @@ function recompute$6(evt) {
             state$7.pop();
         }
         state$7.push({ time: time(evt), event: 27 /* Event.Input */, data: data });
-        clearTimeout(timeout$6);
+        clearTimeout$1(timeout$6);
         timeout$6 = setTimeout$1(process$7, 1000 /* Setting.InputLookAhead */, 27 /* Event.Input */);
     }
 }
 function process$7(event) {
-    schedule(encode$3.bind(this, event));
+    schedule(encode$4.bind(this, event));
 }
 function reset$j() {
     state$7 = [];
 }
 function stop$u() {
-    clearTimeout(timeout$6);
+    clearTimeout$1(timeout$6);
     reset$j();
 }
 
@@ -1500,7 +1507,7 @@ function observe$8(root) {
 function mouse(event, root, evt) {
     mouse.dn = 10 /* FunctionNames.PointerMouse */;
     var frame = iframe(root);
-    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    var d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
     var x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
     var y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
     // In case of iframe, we adjust (x,y) to be relative to top parent's origin
@@ -1517,7 +1524,7 @@ function mouse(event, root, evt) {
 function touch(event, root, evt) {
     touch.dn = 11 /* FunctionNames.PointerTouch */;
     var frame = iframe(root);
-    var d = frame ? frame.contentDocument.documentElement : document.documentElement;
+    var d = frame && frame.contentDocument ? frame.contentDocument.documentElement : document.documentElement;
     var touches = evt.changedTouches;
     var t = time(evt);
     if (touches) {
@@ -1569,7 +1576,7 @@ function handler$2(current) {
                 state$6.pop();
             }
             state$6.push(current);
-            clearTimeout(timeout$5);
+            clearTimeout$1(timeout$5);
             timeout$5 = setTimeout$1(process$6, 500 /* Setting.LookAhead */, current.event);
             break;
         default:
@@ -1579,7 +1586,7 @@ function handler$2(current) {
     }
 }
 function process$6(event) {
-    schedule(encode$3.bind(this, event));
+    schedule(encode$4.bind(this, event));
 }
 function reset$i() {
     state$6 = [];
@@ -1594,7 +1601,7 @@ function similar$1(last, current) {
     return current.event === last.event && match && distance < 20 /* Setting.Distance */ && gap < 25 /* Setting.PointerInterval */ && sameId;
 }
 function stop$t() {
-    clearTimeout(timeout$5);
+    clearTimeout$1(timeout$5);
     // Send out any pending pointer events in the pipeline
     if (state$6.length > 0) {
         process$6(state$6[state$6.length - 1].event);
@@ -1619,20 +1626,20 @@ function recompute$5() {
         height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
     };
     if (initialStateLogged) {
-        clearTimeout(timeout$4);
+        clearTimeout$1(timeout$4);
         timeout$4 = setTimeout$1(process$5, 500 /* Setting.LookAhead */, 11 /* Event.Resize */);
     }
     else {
-        encode$3(11 /* Event.Resize */);
+        encode$4(11 /* Event.Resize */);
         initialStateLogged = true;
     }
 }
 function process$5(event) {
-    schedule(encode$3.bind(this, event));
+    schedule(encode$4.bind(this, event));
 }
 function reset$h() {
     data$c = null;
-    clearTimeout(timeout$4);
+    clearTimeout$1(timeout$4);
 }
 function stop$s() {
     reset$h();
@@ -1643,13 +1650,13 @@ function stop$s() {
  * every specified duration in milliseconds, ensuring the last event is not lost.
  * @param func - The function to throttle.
  * @param duration - The duration in milliseconds to wait before allowing the next execution.
- * @returns A throttled version of the provided function.
+ * @returns A throttled version of the provided function with a cleanup method.
  */
 function throttle(func, duration) {
     var lastExecutionTime = 0;
     var timeoutId = null;
     var lastArgs = null;
-    return function () {
+    function throttledFunction() {
         var _this = this;
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -1674,7 +1681,16 @@ function throttle(func, duration) {
             lastExecutionTime = now;
             func.apply(this, args);
         }
+    }
+    // Add cleanup method to clear pending timeouts
+    throttledFunction.cleanup = function () {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+            lastArgs = null;
+        }
     };
+    return throttledFunction;
 }
 
 var state$5 = [];
@@ -1733,7 +1749,7 @@ function recompute$4(event) {
         state$5.pop();
     }
     state$5.push(current);
-    clearTimeout(timeout$3);
+    clearTimeout$1(timeout$3);
     timeout$3 = setTimeout$1(process$4, 500 /* Setting.LookAhead */, 10 /* Event.Scroll */);
 }
 var throttledRecompute = throttle(recompute$4, 25 /* Setting.Throttle */);
@@ -1760,7 +1776,7 @@ function reset$g() {
     initialBottom = null;
 }
 function process$4(event) {
-    schedule(encode$3.bind(this, event));
+    schedule(encode$4.bind(this, event));
 }
 function similar(last, current) {
     var dx = last.data.x - current.data.x;
@@ -1780,7 +1796,8 @@ function compute$8() {
     }
 }
 function stop$r() {
-    clearTimeout(timeout$3);
+    clearTimeout$1(timeout$3);
+    throttledRecompute.cleanup();
     state$5 = [];
     initialTop = null;
     initialBottom = null;
@@ -1814,7 +1831,7 @@ function recompute$3(root) {
     }
     var startNode = data$b.start ? data$b.start : null;
     if (previous !== null && data$b.start !== null && startNode !== current.anchorNode) {
-        clearTimeout(timeout$2);
+        clearTimeout$1(timeout$2);
         process$3(21 /* Event.Selection */);
     }
     data$b = {
@@ -1824,11 +1841,11 @@ function recompute$3(root) {
         endOffset: current.focusOffset
     };
     previous = current;
-    clearTimeout(timeout$2);
+    clearTimeout$1(timeout$2);
     timeout$2 = setTimeout$1(process$3, 500 /* Setting.LookAhead */, 21 /* Event.Selection */);
 }
 function process$3(event) {
-    schedule(encode$3.bind(this, event));
+    schedule(encode$4.bind(this, event));
 }
 function reset$f() {
     previous = null;
@@ -1836,7 +1853,7 @@ function reset$f() {
 }
 function stop$q() {
     reset$f();
-    clearTimeout(timeout$2);
+    clearTimeout$1(timeout$2);
 }
 
 var state$4 = [];
@@ -1849,7 +1866,7 @@ function observe$5(root) {
 function recompute$2(evt) {
     recompute$2.dn = 16 /* FunctionNames.SubmitRecompute */;
     state$4.push({ time: time(evt), event: 39 /* Event.Submit */, data: { target: target(evt) } });
-    schedule(encode$3.bind(this, 39 /* Event.Submit */));
+    schedule(encode$4.bind(this, 39 /* Event.Submit */));
 }
 function reset$e() {
     state$4 = [];
@@ -1865,7 +1882,7 @@ function start$q() {
 function recompute$1(evt) {
     recompute$1.dn = 17 /* FunctionNames.UnloadRecompute */;
     data$a = { name: evt.type, persisted: evt.persisted ? 1 /* BooleanFlag.True */ : 0 /* BooleanFlag.False */ };
-    encode$3(26 /* Event.Unload */, time(evt));
+    encode$4(26 /* Event.Unload */, time(evt));
     stop();
 }
 function reset$d() {
@@ -1884,7 +1901,7 @@ function recompute(evt) {
     if (evt === void 0) { evt = null; }
     recompute.dn = 18 /* FunctionNames.VisibilityRecompute */;
     data$9 = { visible: "visibilityState" in document ? document.visibilityState : "default" };
-    encode$3(28 /* Event.Visibility */, time(evt));
+    encode$4(28 /* Event.Visibility */, time(evt));
 }
 function reset$c() {
     data$9 = null;
@@ -2063,13 +2080,13 @@ function checkDocumentStyles(documentNode, timestamp) {
         }
         currentStyleSheets.push(styleSheet[styleSheetId]);
     }
-    var documentId = getId(documentNode, true);
+    var documentId = getId$1(documentNode, true);
     if (!styleSheetMap[documentId]) {
         styleSheetMap[documentId] = [];
     }
     if (!arraysEqual(currentStyleSheets, styleSheetMap[documentId])) {
         // Using -1 to signify the root document node as we don't track that as part of our nodeMap
-        trackStyleAdoption(timestamp, documentNode == document ? -1 : getId(documentNode), 3 /* StyleSheetOperation.SetAdoptedStyles */, currentStyleSheets);
+        trackStyleAdoption(timestamp, documentNode == document ? -1 : getId$1(documentNode), 3 /* StyleSheetOperation.SetAdoptedStyles */, currentStyleSheets);
         styleSheetMap[documentId] = currentStyleSheets;
         styleTimeMap[documentId] = timestamp;
     }
@@ -2077,7 +2094,7 @@ function checkDocumentStyles(documentNode, timestamp) {
 function compute$7() {
     for (var _i = 0, documentNodes_1 = documentNodes; _i < documentNodes_1.length; _i++) {
         var documentNode = documentNodes_1[_i];
-        var docId = documentNode == document ? -1 : getId(documentNode);
+        var docId = documentNode == document ? -1 : getId$1(documentNode);
         var ts = docId in styleTimeMap ? styleTimeMap[docId] : null;
         checkDocumentStyles(documentNode, ts);
     }
@@ -2103,7 +2120,7 @@ function trackStyleChange(time, id, operation, cssRules) {
             cssRules: cssRules
         }
     });
-    encode$4(46 /* Event.StyleSheetUpdate */);
+    encode$5(46 /* Event.StyleSheetUpdate */);
 }
 function trackStyleAdoption(time, id, operation, newIds) {
     sheetAdoptionState.push({
@@ -2115,7 +2132,7 @@ function trackStyleAdoption(time, id, operation, newIds) {
             newIds: newIds
         }
     });
-    encode$4(45 /* Event.StyleSheetAdoption */);
+    encode$5(45 /* Event.StyleSheetAdoption */);
 }
 function arraysEqual(a, b) {
     if (a.length !== b.length) {
@@ -2187,7 +2204,7 @@ function track$6(time, id, operation, keyFrames, timing, targetId, timeline) {
             timeline: timeline
         }
     });
-    encode$4(44 /* Event.Animation */);
+    encode$5(44 /* Event.Animation */);
 }
 function stop$k() {
     reset$a();
@@ -2204,7 +2221,7 @@ function overrideAnimationHelper(functionToOverride, name) {
 function trackAnimationOperation(animation, name) {
     if (active()) {
         var effect = animation.effect;
-        var target = (effect === null || effect === void 0 ? void 0 : effect.target) ? getId(effect.target) : null;
+        var target = (effect === null || effect === void 0 ? void 0 : effect.target) ? getId$1(effect.target) : null;
         if (target !== null && effect.getKeyframes && effect.getTiming) {
             if (!animation[animationId]) {
                 animation[animationId] = shortid();
@@ -2240,7 +2257,7 @@ function trackAnimationOperation(animation, name) {
     }
 }
 
-function encode$4 (type, timer, ts) {
+function encode$5 (type, timer, ts) {
     if (timer === void 0) { timer = null; }
     if (ts === void 0) { ts = null; }
     return __awaiter(this, void 0, void 0, function () {
@@ -2365,7 +2382,7 @@ function encode$4 (type, timer, ts) {
                                 case "attributes":
                                     for (attr in data[key]) {
                                         if (data[key][attr] !== undefined) {
-                                            tokens.push(attribute(attr, data[key][attr], privacy));
+                                            tokens.push(attribute$1(attr, data[key][attr], privacy));
                                         }
                                     }
                                     break;
@@ -2408,7 +2425,7 @@ function size(value) {
 function str(input) {
     return input.toString(36);
 }
-function attribute(key, value, privacy) {
+function attribute$1(key, value, privacy) {
     return "".concat(key, "=").concat(text$1(value, key.indexOf("data-" /* Constant.DataAttribute */) === 0 ? "data-" /* Constant.DataAttribute */ : key, privacy));
 }
 
@@ -2441,14 +2458,14 @@ function compute$6() {
     // Check that width or height has changed from before, and also that width & height are not null values
     if ((data$8 === null || width !== data$8.width || height !== data$8.height) && width !== null && height !== null) {
         data$8 = { width: width, height: height };
-        encode$4(8 /* Event.Document */);
+        encode$5(8 /* Event.Document */);
     }
 }
 function stop$j() {
     reset$9();
 }
 
-function traverse (root, timer, source, timestamp) {
+function traverse$1 (root, timer, source, timestamp) {
     return __awaiter(this, void 0, void 0, function () {
         var queue, entry, next, state$1, subnode;
         return __generator(this, function (_a) {
@@ -2641,7 +2658,7 @@ function process$2() {
                 case 4:
                     _i++;
                     return [3 /*break*/, 2];
-                case 5: return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, record.time)];
+                case 5: return [4 /*yield*/, encode$5(6 /* Event.Mutation */, timer, record.time)];
                 case 6:
                     _d.sent();
                     return [3 /*break*/, 1];
@@ -2667,7 +2684,7 @@ function process$2() {
                         processThrottledMutations();
                     }
                     if (!(Object.keys(throttledMutations).length === 0 && processedMutations)) return [3 /*break*/, 13];
-                    return [4 /*yield*/, encode$4(6 /* Event.Mutation */, timer, time())];
+                    return [4 /*yield*/, encode$5(6 /* Event.Mutation */, timer, time())];
                 case 12:
                     _d.sent();
                     _d.label = 13;
@@ -2754,7 +2771,7 @@ function processNodeList(list, source, timer, timestamp) {
                     if (!(i < length)) return [3 /*break*/, 6];
                     node = list[i];
                     if (!(source === 1 /* Source.ChildListAdd */)) return [3 /*break*/, 2];
-                    traverse(node, timer, source, timestamp);
+                    traverse$1(node, timer, source, timestamp);
                     return [3 /*break*/, 5];
                 case 2:
                     state$1 = state(timer);
@@ -2779,7 +2796,7 @@ function processNodeList(list, source, timer, timestamp) {
 }
 function processThrottledMutations() {
     if (throttleDelay) {
-        clearTimeout(throttleDelay);
+        clearTimeout$1(throttleDelay);
     }
     throttleDelay = setTimeout$1(function () {
         schedule(process$2, 1 /* Priority.High */);
@@ -2794,7 +2811,7 @@ function schedule$1(node) {
     // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
     // And in those cases we do not wish to monitor changes multiple times for the same node.
     if (timeout$1) {
-        clearTimeout(timeout$1);
+        clearTimeout$1(timeout$1);
     }
     timeout$1 = setTimeout$1(function () {
         trigger$1();
@@ -3040,7 +3057,7 @@ function processNode (node, source, timestamp) {
         case Node.ELEMENT_NODE:
             var element = node;
             var tag = element.tagName;
-            var attributes = getAttributes(element);
+            var attributes = getAttributes$1(element);
             // In some cases, external libraries like vue-fragment, can modify parentNode property to not be in sync with the DOM
             // For correctness, we first look at parentElement and if it not present then fall back to using parentNode
             parent = node.parentElement ? node.parentElement : (node.parentNode ? node.parentNode : null);
@@ -3220,7 +3237,7 @@ function getCssRules(sheet) {
     }
     return value;
 }
-function getAttributes(element) {
+function getAttributes$1(element) {
     var output = {};
     var attributes = element.attributes;
     if (attributes && attributes.length > 0) {
@@ -3332,9 +3349,9 @@ var selector = /*#__PURE__*/Object.freeze({
     reset: reset$8
 });
 
-var index = 1;
+var index$1 = 1;
 var nodesMap = null; // Maps id => node to retrieve further node details using id.
-var values = [];
+var values$1 = [];
 var updateMap = [];
 var hashMap = {};
 var override = [];
@@ -3344,7 +3361,7 @@ var maskExclude = [];
 var maskDisable = [];
 var maskTags = [];
 // The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
-var idMap = null; // Maps node => id.
+var idMap$1 = null; // Maps node => id.
 var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
 var iframeContentMap = null; // Maps parent iframe element => iframe's contentDocument & contentWindow
 var privacyMap = null; // Maps node => Privacy (enum)
@@ -3357,8 +3374,8 @@ function stop$h() {
     reset$7();
 }
 function reset$7() {
-    index = 1;
-    values = [];
+    index$1 = 1;
+    values$1 = [];
     updateMap = [];
     hashMap = {};
     override = [];
@@ -3368,7 +3385,7 @@ function reset$7() {
     maskDisable = "radio,checkbox,range,button,reset,submit" /* Mask.Disable */.split("," /* Constant.Comma */);
     maskTags = "INPUT,SELECT,TEXTAREA" /* Mask.Tags */.split("," /* Constant.Comma */);
     nodesMap = new Map();
-    idMap = new WeakMap();
+    idMap$1 = new WeakMap();
     iframeMap = new WeakMap();
     iframeContentMap = new WeakMap();
     privacyMap = new WeakMap();
@@ -3399,32 +3416,32 @@ function parse(root, init) {
         log$1(5 /* Code.Selector */, 1 /* Severity.Warning */, e ? e.name : null);
     }
 }
-function getId(node, autogen) {
+function getId$1(node, autogen) {
     if (autogen === void 0) { autogen = false; }
     if (node === null) {
         return null;
     }
-    var id = idMap.get(node);
+    var id = idMap$1.get(node);
     if (!id && autogen) {
-        id = index++;
-        idMap.set(node, id);
+        id = index$1++;
+        idMap$1.set(node, id);
     }
     return id ? id : null;
 }
-function add(node, parent, data, source) {
-    var parentId = parent ? getId(parent) : null;
+function add$1(node, parent, data, source) {
+    var parentId = parent ? getId$1(parent) : null;
     // Do not add detached nodes
     if ((!parent || !parentId) && node.host == null && node.nodeType !== Node.DOCUMENT_TYPE_NODE) {
         return;
     }
-    var id = getId(node, true);
+    var id = getId$1(node, true);
     var previousId = getPreviousId(node);
     var parentValue = null;
     var regionId = exists(node) ? id : null;
     var fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
     var privacyId = config$2.content ? 1 /* Privacy.Sensitive */ : 3 /* Privacy.TextImage */;
-    if (parentId >= 0 && values[parentId]) {
-        parentValue = values[parentId];
+    if (parentId >= 0 && values$1[parentId]) {
+        parentValue = values$1[parentId];
         parentValue.children.push(id);
         regionId = regionId === null ? parentValue.region : regionId;
         fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
@@ -3436,7 +3453,7 @@ function add(node, parent, data, source) {
         regionId = id;
     }
     nodesMap.set(id, node);
-    values[id] = {
+    values$1[id] = {
         id: id,
         parent: parentId,
         previous: previousId,
@@ -3447,19 +3464,19 @@ function add(node, parent, data, source) {
         region: regionId,
         metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
     };
-    privacy(node, values[id], parentValue);
-    updateSelector(values[id]);
-    updateImageSize(values[id]);
+    privacy(node, values$1[id], parentValue);
+    updateSelector(values$1[id]);
+    updateImageSize(values$1[id]);
     track$4(id, source);
 }
 function update(node, parent, data, source) {
-    var id = getId(node);
-    var parentId = parent ? getId(parent) : null;
+    var id = getId$1(node);
+    var parentId = parent ? getId$1(parent) : null;
     var previousId = getPreviousId(node);
     var changed = false;
     var parentChanged = false;
-    if (id in values) {
-        var value = values[id];
+    if (id in values$1) {
+        var value = values$1[id];
         value.metadata.active = true;
         // Handle case where internal ordering may have changed
         if (value.previous !== previousId) {
@@ -3473,10 +3490,10 @@ function update(node, parent, data, source) {
             value.parent = parentId;
             // Move this node to the right location under new parent
             if (parentId !== null && parentId >= 0) {
-                var childIndex = previousId === null ? 0 : values[parentId].children.indexOf(previousId) + 1;
-                values[parentId].children.splice(childIndex, 0, id);
+                var childIndex = previousId === null ? 0 : values$1[parentId].children.indexOf(previousId) + 1;
+                values$1[parentId].children.splice(childIndex, 0, id);
                 // Update region after the move
-                value.region = exists(node) ? id : values[parentId].region;
+                value.region = exists(node) ? id : values$1[parentId].region;
             }
             else {
                 // Mark this element as deleted if the parent has been updated to null
@@ -3484,9 +3501,9 @@ function update(node, parent, data, source) {
             }
             // Remove reference to this node from the old parent
             if (oldParentId !== null && oldParentId >= 0) {
-                var nodeIndex = values[oldParentId].children.indexOf(id);
+                var nodeIndex = values$1[oldParentId].children.indexOf(id);
                 if (nodeIndex >= 0) {
-                    values[oldParentId].children.splice(nodeIndex, 1);
+                    values$1[oldParentId].children.splice(nodeIndex, 1);
                 }
             }
             parentChanged = true;
@@ -3616,7 +3633,7 @@ function position(parent, child) {
     child.metadata.position = 1;
     var idx = parent ? parent.children.indexOf(child.id) : -1;
     while (idx-- > 0) {
-        var sibling = values[parent.children[idx]];
+        var sibling = values$1[parent.children[idx]];
         if (child.data.tag === sibling.data.tag) {
             child.metadata.position = sibling.metadata.position + 1;
             break;
@@ -3625,7 +3642,7 @@ function position(parent, child) {
     return child.metadata.position;
 }
 function updateSelector(value) {
-    var parent = value.parent && value.parent in values ? values[value.parent] : null;
+    var parent = value.parent && value.parent in values$1 ? values$1[value.parent] : null;
     var prefix = parent ? parent.selector : null;
     var d = value.data;
     var p = position(parent, value);
@@ -3643,35 +3660,35 @@ function getNode(id) {
     return nodesMap.has(id) ? nodesMap.get(id) : null;
 }
 function getValue(id) {
-    if (id in values) {
-        return values[id];
+    if (id in values$1) {
+        return values$1[id];
     }
     return null;
 }
 function get(node) {
-    var id = getId(node);
-    return id in values ? values[id] : null;
+    var id = getId$1(node);
+    return id in values$1 ? values$1[id] : null;
 }
 function lookup(hash) {
     return hash in hashMap ? hashMap[hash] : null;
 }
 function has$1(node) {
-    return nodesMap.has(getId(node));
+    return nodesMap.has(getId$1(node));
 }
 function updates$2() {
     var output = [];
     for (var _i = 0, updateMap_1 = updateMap; _i < updateMap_1.length; _i++) {
         var id = updateMap_1[_i];
-        if (id in values) {
-            output.push(values[id]);
+        if (id in values$1) {
+            output.push(values$1[id]);
         }
     }
     updateMap = [];
     return output;
 }
 function remove(id, source) {
-    if (id in values) {
-        var value = values[id];
+    if (id in values$1) {
+        var value = values$1[id];
         value.metadata.active = false;
         value.parent = null;
         track$4(id, source);
@@ -3691,7 +3708,7 @@ function removeNodeFromNodesMap(id) {
         removeObserver(iframe_1);
     }
     nodesMap.delete(id);
-    var value = id in values ? values[id] : null;
+    var value = id in values$1 ? values$1[id] : null;
     if (value && value.children) {
         for (var _i = 0, _a = value.children; _i < _a.length; _i++) {
             var childId = _a[_i];
@@ -3718,7 +3735,7 @@ function getPreviousId(node) {
     // Some nodes may not have an ID by design since Clarity skips over tags like SCRIPT, NOSCRIPT, META, COMMENTS, etc..
     // In that case, we keep going back and check for their sibling until we find a sibling with ID or no more sibling nodes are left.
     while (id === null && node.previousSibling) {
-        id = getId(node.previousSibling);
+        id = getId$1(node.previousSibling);
         node = node.previousSibling;
     }
     return id;
@@ -3801,7 +3818,7 @@ function compute$5() {
     var q = [];
     for (var _i = 0, queue_1 = queue$1; _i < queue_1.length; _i++) {
         var r = queue_1[_i];
-        var id = getId(r.node);
+        var id = getId$1(r.node);
         if (id) {
             r.state.data.id = id;
             regions[id] = r.state.data;
@@ -3814,7 +3831,7 @@ function compute$5() {
     queue$1 = q;
     // Schedule encode only when we have at least one valid data entry
     if (state$2.length > 0) {
-        encode$4(7 /* Event.Region */);
+        encode$5(7 /* Event.Region */);
     }
 }
 function handler$1(entries) {
@@ -3829,7 +3846,7 @@ function handler$1(entries) {
         // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
         // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
         if (regionMap.has(target) && rect.width + rect.height > 0 && viewport && viewport.width > 0 && viewport.height > 0) {
-            var id = target ? getId(target) : null;
+            var id = target ? getId$1(target) : null;
             var data = id in regions ? regions[id] : { id: id, name: regionMap.get(target), interaction: 16 /* InteractionState.None */, visibility: 0 /* RegionVisibility.Rendered */ };
             // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
             // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
@@ -3850,7 +3867,7 @@ function handler$1(entries) {
         }
     }
     if (state$2.length > 0) {
-        encode$4(7 /* Event.Region */);
+        encode$5(7 /* Event.Region */);
     }
 }
 function process$1(n, d, s, v) {
@@ -3917,7 +3934,7 @@ function metadata$2(node, event, text) {
     return output;
 }
 
-function encode$3 (type, ts) {
+function encode$4 (type, ts) {
     if (ts === void 0) { ts = null; }
     return __awaiter(this, void 0, void 0, function () {
         var t, tokens, _i, _a, entry, pTarget, _b, _c, entry, cTarget, cHash, _d, _e, entry, target, r, u, _f, _g, entry, iTarget, s, startTarget, endTarget, _h, _j, entry, sTarget, top_1, bottom, sTopHash, sBottomHash, _k, _l, entry, target, _m, _o, entry, target, _p, _q, entry, v;
@@ -3957,6 +3974,7 @@ function encode$3 (type, ts) {
                     reset$i();
                     break;
                 case 9 /* Event.Click */:
+                case 48 /* Event.ContextMenu */:
                     for (_b = 0, _c = state$9; _b < _c.length; _b++) {
                         entry = _c[_b];
                         cTarget = metadata$2(entry.data.target, entry.event, entry.data.text);
@@ -4155,13 +4173,146 @@ function compute$4() {
         }
     }
     state$1 = temp; // Drop events less than the min time
-    encode$3(22 /* Event.Timeline */);
+    encode$4(22 /* Event.Timeline */);
 }
 function stop$f() {
     state$1 = [];
     reset$5();
 }
 
+function encode$3 (type) {
+    return __awaiter(this, void 0, void 0, function () {
+        var eventTime, tokens, d, values$1, _i, values_1, value, privacy, data, _a, _b, key, attr;
+        return __generator(this, function (_c) {
+            eventTime = time();
+            tokens = [eventTime, type];
+            switch (type) {
+                case 8 /* Event.Document */:
+                    d = data$8;
+                    tokens.push(d.width);
+                    tokens.push(d.height);
+                    track$8(type, d.width, d.height);
+                    queue(tokens);
+                    break;
+                case 43 /* Event.Snapshot */:
+                    values$1 = values;
+                    // Only encode and queue DOM updates if we have valid updates to report back
+                    if (values$1.length > 0) {
+                        for (_i = 0, values_1 = values$1; _i < values_1.length; _i++) {
+                            value = values_1[_i];
+                            privacy = value.metadata.privacy;
+                            data = value.data;
+                            for (_a = 0, _b = ["tag", "attributes", "value"]; _a < _b.length; _a++) {
+                                key = _b[_a];
+                                if (data[key]) {
+                                    switch (key) {
+                                        case "tag":
+                                            tokens.push(value.id);
+                                            if (value.parent) {
+                                                tokens.push(value.parent);
+                                            }
+                                            if (value.previous) {
+                                                tokens.push(value.previous);
+                                            }
+                                            tokens.push(data[key]);
+                                            break;
+                                        case "attributes":
+                                            for (attr in data[key]) {
+                                                if (data[key][attr] !== undefined) {
+                                                    tokens.push(attribute(attr, data[key][attr], privacy));
+                                                }
+                                            }
+                                            break;
+                                        case "value":
+                                            tokens.push(text$1(data[key], data.tag, privacy));
+                                            break;
+                                    }
+                                }
+                            }
+                        }
+                        queue(tokenize(tokens), true);
+                    }
+                    break;
+            }
+            return [2 /*return*/];
+        });
+    });
+}
+function attribute(key, value, privacy) {
+    return "".concat(key, "=").concat(text$1(value, key.indexOf("data-" /* Constant.DataAttribute */) === 0 ? "data-" /* Constant.DataAttribute */ : key, privacy));
+}
+
+var values = [];
+var index = 1;
+var idMap = null; // Maps node => id.
+function snapshot() {
+    values = [];
+    traverse(document);
+    encode$3(43 /* Event.Snapshot */);
+}
+function traverse(root) {
+    var queue = [root];
+    while (queue.length > 0) {
+        var attributes = null, tag = null, value = null;
+        var node = queue.shift();
+        var next = node.firstChild;
+        var parent_1 = node.parentElement ? node.parentElement : (node.parentNode ? node.parentNode : null);
+        while (next) {
+            queue.push(next);
+            next = next.nextSibling;
+        }
+        // Process the node
+        var type = node.nodeType;
+        switch (type) {
+            case Node.DOCUMENT_TYPE_NODE:
+                var doctype = node;
+                tag = "*D" /* Constant.DocumentTag */;
+                attributes = { name: doctype.name, publicId: doctype.publicId, systemId: doctype.systemId };
+                break;
+            case Node.TEXT_NODE:
+                value = node.nodeValue;
+                tag = idMap.get(parent_1) ? "*T" /* Constant.TextTag */ : tag;
+                break;
+            case Node.ELEMENT_NODE:
+                var element = node;
+                attributes = getAttributes(element);
+                tag = ["NOSCRIPT", "SCRIPT", "STYLE"].indexOf(element.tagName) < 0 ? element.tagName : tag;
+                break;
+        }
+        add(node, parent_1, { tag: tag, attributes: attributes, value: value });
+    }
+}
+/* Helper Functions - Snapshot Traversal */
+function getAttributes(element) {
+    var output = {};
+    var attributes = element.attributes;
+    if (attributes && attributes.length > 0) {
+        for (var i = 0; i < attributes.length; i++) {
+            output[attributes[i].name] = attributes[i].value;
+        }
+    }
+    return output;
+}
+function getId(node) {
+    if (node === null) {
+        return null;
+    }
+    if (idMap.has(node)) {
+        return idMap.get(node);
+    }
+    idMap.set(node, index);
+    return index++;
+}
+function add(node, parent, data) {
+    if (node && data && data.tag) {
+        var id = getId(node);
+        var parentId = parent ? idMap.get(parent) : null;
+        var previous = node.previousSibling ? idMap.get(node.previousSibling) : null;
+        var metadata_1 = { active: true, suspend: false, privacy: 5 /* Privacy.Snapshot */, position: null, fraud: null, size: null };
+        values.push({ id: id, parent: parentId, previous: previous, children: [], data: data, selector: null, hash: null, region: null, metadata: metadata_1 });
+    }
+}
+
 var discoverBytes = 0;
 var playbackBytes = 0;
 var playback;
@@ -4226,7 +4377,7 @@ function queue(tokens, transmit) {
     // reset the timer. This allows Clarity to attempt an upload again.
     var gap = delay();
     if (now - queuedTime > (gap * 2)) {
-        clearTimeout(timeout);
+        clearTimeout$1(timeout);
         timeout = null;
     }
     // Transmit Check: When transmit is set to true (default), it indicates that we should schedule an upload
@@ -4242,7 +4393,7 @@ function queue(tokens, transmit) {
     }
 }
 function stop$e() {
-    clearTimeout(timeout);
+    clearTimeout$1(timeout);
     upload(true);
     discoverBytes = 0;
     playbackBytes = 0;
@@ -4312,6 +4463,7 @@ function stringify(encoded) {
     return encoded.p.length > 0 ? "{\"e\":".concat(encoded.e, ",\"a\":").concat(encoded.a, ",\"p\":").concat(encoded.p, "}") : "{\"e\":".concat(encoded.e, ",\"a\":").concat(encoded.a, "}");
 }
 function send(payload, zipped, sequence, beacon) {
+    var _a;
     if (beacon === void 0) { beacon = false; }
     // Upload data if a valid URL is defined in the config
     if (typeof config$2.upload === "string" /* Constant.String */) {
@@ -4328,8 +4480,15 @@ function send(payload, zipped, sequence, beacon) {
                 if (dispatched) {
                     done(sequence);
                 }
+                else {
+                    // If sendBeacon fails, we report the error and continue with XHR upload
+                    report(new Error("".concat("BeaconError" /* Constant.BeaconError */, ": ").concat(payload.length)));
+                }
+            }
+            catch (error) {
+                // If sendBeacon fails, we report the error and continue with XHR upload
+                report(new Error("".concat("BeaconError" /* Constant.BeaconError */, ": ").concat((_a = error === null || error === void 0 ? void 0 : error.message) === null || _a === void 0 ? void 0 : _a.substring(0, 50), " : ").concat(payload.length)));
             }
-            catch ( /* do nothing - and we will automatically fallback to XHR below */_a) { /* do nothing - and we will automatically fallback to XHR below */ }
         }
         // Before initiating XHR upload, we check if the data has already been uploaded using sendBeacon
         // There are two cases when dispatched could still be false:
@@ -4389,6 +4548,9 @@ function check$3(xhr, sequence) {
                 if (xhr.status === 0) {
                     config$2.upload = config$2.fallback ? config$2.fallback : config$2.upload;
                 }
+                // Capture the status code and number of attempts so we can report it back to the server
+                track$1 = { sequence: sequence, attempts: transitData.attempts, status: xhr.status };
+                encode$1(2 /* Event.Upload */);
                 // In all other cases, re-attempt sending the same data
                 // For retry we always fallback to string payload, even though we may have attempted
                 // sending zipped payload earlier
@@ -4464,6 +4626,10 @@ function response(payload) {
                     signalsEvent(parts[1]);
                 }
                 break;
+            case "SNAPSHOT" /* Constant.Snapshot */:
+                config$2.lean = false; // Disable lean mode to ensure we can send playback information to server.
+                snapshot();
+                break;
         }
     }
 }
@@ -4780,11 +4946,11 @@ function discover() {
                     ts = time();
                     timer = { id: id(), cost: 3 /* Metric.LayoutCost */ };
                     start$d(timer);
-                    return [4 /*yield*/, traverse(document, timer, 0 /* Source.Discover */, ts)];
+                    return [4 /*yield*/, traverse$1(document, timer, 0 /* Source.Discover */, ts)];
                 case 1:
                     _a.sent();
                     checkDocumentStyles(document, ts);
-                    return [4 /*yield*/, encode$4(5 /* Event.Discover */, timer, ts)];
+                    return [4 /*yield*/, encode$5(5 /* Event.Discover */, timer, ts)];
                 case 2:
                     _a.sent();
                     stop$c(timer);
@@ -4834,7 +5000,7 @@ function encode$1 (event) {
     switch (event) {
         case 4 /* Event.Baseline */: {
             var b = state$b;
-            if (b) {
+            if (b && b.data) {
                 tokens = [b.time, b.event];
                 tokens.push(b.data.visible);
                 tokens.push(b.data.docWidth);
@@ -4948,7 +5114,7 @@ function encode$1 (event) {
         }
         case 40 /* Event.Extract */: {
             var extractKeys = keys;
-            extractKeys.forEach((function (e) {
+            extractKeys.forEach(function (e) {
                 tokens.push(e);
                 var token = [];
                 for (var d in data$e[e]) {
@@ -4957,7 +5123,7 @@ function encode$1 (event) {
                     token.push(data$e[e][d]);
                 }
                 tokens.push(token);
-            }));
+            });
             reset$n();
             queue(tokens, false);
             break;
@@ -5062,7 +5228,7 @@ function start$8() {
     var _a, _b, _c;
     rootDomain = null;
     var ua = navigator && "userAgent" in navigator ? navigator.userAgent : "" /* Constant.Empty */;
-    var timezone = (_c = (_b = (_a = Intl === null || Intl === void 0 ? void 0 : Intl.DateTimeFormat()) === null || _a === void 0 ? void 0 : _a.resolvedOptions()) === null || _b === void 0 ? void 0 : _b.timeZone) !== null && _c !== void 0 ? _c : '';
+    var timezone = (_c = (typeof Intl !== 'undefined' && ((_b = (_a = Intl === null || Intl === void 0 ? void 0 : Intl.DateTimeFormat()) === null || _a === void 0 ? void 0 : _a.resolvedOptions()) === null || _b === void 0 ? void 0 : _b.timeZone))) !== null && _c !== void 0 ? _c : '';
     var timezoneOffset = new Date().getTimezoneOffset().toString();
     var ancestorOrigins = window.location.ancestorOrigins ? Array.from(window.location.ancestorOrigins).toString() : '';
     var title = document && document.title ? document.title : "" /* Constant.Empty */;
@@ -5904,7 +6070,7 @@ var observer;
 var types = ["navigation" /* Constant.Navigation */, "resource" /* Constant.Resource */, "longtask" /* Constant.LongTask */, "first-input" /* Constant.FID */, "layout-shift" /* Constant.CLS */, "largest-contentful-paint" /* Constant.LCP */, "event" /* Constant.PerformanceEventTiming */];
 function start$2() {
     // Capture connection properties, if available
-    if (navigator && "connection" in navigator) {
+    if (navigator && navigator["connection"]) {
         log(27 /* Dimension.ConnectionType */, navigator["connection"]["effectiveType"]);
     }
     // Check the browser support performance observer as a pre-requisite for any performance measurement