clarity-js 0.8.20 → 0.8.22

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; },
@@ -189,7 +189,7 @@ function stop$F() {
     startTime = 0;
 }
 
-var version$1 = "0.8.20";
+var version$1 = "0.8.22";
 
 // tslint:disable: no-bitwise
 function hash (input, precision) {
@@ -1259,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() {
@@ -1297,7 +1297,7 @@ function observe$b(root) {
 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
@@ -1343,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) {
@@ -1434,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 = [];
@@ -1475,7 +1475,7 @@ function recompute$6(evt) {
     }
 }
 function process$7(event) {
-    schedule(encode$3.bind(this, event));
+    schedule(encode$4.bind(this, event));
 }
 function reset$j() {
     state$7 = [];
@@ -1507,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
@@ -1524,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) {
@@ -1586,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 = [];
@@ -1608,43 +1608,6 @@ function stop$t() {
     }
 }
 
-var data$c;
-var timeout$4 = null;
-var initialStateLogged = false;
-function start$u() {
-    initialStateLogged = false;
-    bind(window, "resize", recompute$5);
-    recompute$5();
-}
-function recompute$5() {
-    recompute$5.dn = 12 /* FunctionNames.ResizeRecompute */;
-    var de = document.documentElement;
-    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
-    // Therefore, when possible, use documentElement's clientWidth property.
-    data$c = {
-        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
-        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
-    };
-    if (initialStateLogged) {
-        clearTimeout$1(timeout$4);
-        timeout$4 = setTimeout$1(process$5, 500 /* Setting.LookAhead */, 11 /* Event.Resize */);
-    }
-    else {
-        encode$3(11 /* Event.Resize */);
-        initialStateLogged = true;
-    }
-}
-function process$5(event) {
-    schedule(encode$3.bind(this, event));
-}
-function reset$h() {
-    data$c = null;
-    clearTimeout$1(timeout$4);
-}
-function stop$s() {
-    reset$h();
-}
-
 /**
  * Creates a throttled version of the provided function that only executes at most once
  * every specified duration in milliseconds, ensuring the last event is not lost.
@@ -1693,6 +1656,45 @@ function throttle(func, duration) {
     return throttledFunction;
 }
 
+var data$c;
+var timeout$4 = null;
+var initialStateLogged = false;
+var throttledRecompute$1 = throttle(recompute$5, 500 /* Setting.LookAhead */);
+function start$u() {
+    initialStateLogged = false;
+    bind(window, "resize", throttledRecompute$1);
+    recompute$5();
+}
+function recompute$5() {
+    recompute$5.dn = 12 /* FunctionNames.ResizeRecompute */;
+    var de = document.documentElement;
+    // window.innerWidth includes width of the scrollbar and is not a true representation of the viewport width.
+    // Therefore, when possible, use documentElement's clientWidth property.
+    data$c = {
+        width: de && "clientWidth" in de ? Math.min(de.clientWidth, window.innerWidth) : window.innerWidth,
+        height: de && "clientHeight" in de ? Math.min(de.clientHeight, window.innerHeight) : window.innerHeight,
+    };
+    if (initialStateLogged) {
+        clearTimeout$1(timeout$4);
+        timeout$4 = setTimeout$1(process$5, 500 /* Setting.LookAhead */, 11 /* Event.Resize */);
+    }
+    else {
+        encode$4(11 /* Event.Resize */);
+        initialStateLogged = true;
+    }
+}
+function process$5(event) {
+    schedule(encode$4.bind(this, event));
+}
+function reset$h() {
+    data$c = null;
+    clearTimeout$1(timeout$4);
+    throttledRecompute$1.cleanup();
+}
+function stop$s() {
+    reset$h();
+}
+
 var state$5 = [];
 var initialTop = null;
 var initialBottom = null;
@@ -1776,7 +1778,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;
@@ -1845,7 +1847,7 @@ function recompute$3(root) {
     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;
@@ -1866,7 +1868,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 = [];
@@ -1882,7 +1884,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() {
@@ -1901,7 +1903,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;
@@ -2080,13 +2082,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;
     }
@@ -2094,7 +2096,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);
     }
@@ -2120,7 +2122,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({
@@ -2132,7 +2134,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) {
@@ -2204,7 +2206,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();
@@ -2221,7 +2223,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();
@@ -2257,7 +2259,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 () {
@@ -2382,7 +2384,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;
@@ -2425,7 +2427,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));
 }
 
@@ -2458,14 +2460,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) {
@@ -2658,7 +2660,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];
@@ -2684,7 +2686,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;
@@ -2771,7 +2773,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);
@@ -3057,7 +3059,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);
@@ -3237,7 +3239,7 @@ function getCssRules(sheet) {
     }
     return value;
 }
-function getAttributes(element) {
+function getAttributes$1(element) {
     var output = {};
     var attributes = element.attributes;
     if (attributes && attributes.length > 0) {
@@ -3349,9 +3351,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 = [];
@@ -3361,7 +3363,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)
@@ -3374,8 +3376,8 @@ function stop$h() {
     reset$7();
 }
 function reset$7() {
-    index = 1;
-    values = [];
+    index$1 = 1;
+    values$1 = [];
     updateMap = [];
     hashMap = {};
     override = [];
@@ -3385,7 +3387,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();
@@ -3416,32 +3418,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;
@@ -3453,7 +3455,7 @@ function add(node, parent, data, source) {
         regionId = id;
     }
     nodesMap.set(id, node);
-    values[id] = {
+    values$1[id] = {
         id: id,
         parent: parentId,
         previous: previousId,
@@ -3464,19 +3466,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) {
@@ -3490,10 +3492,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
@@ -3501,9 +3503,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;
@@ -3633,7 +3635,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;
@@ -3642,7 +3644,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);
@@ -3660,35 +3662,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);
@@ -3708,7 +3710,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];
@@ -3735,7 +3737,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;
@@ -3818,7 +3820,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;
@@ -3831,7 +3833,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) {
@@ -3846,7 +3848,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
@@ -3867,7 +3869,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) {
@@ -3934,7 +3936,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;
@@ -4173,13 +4175,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;
@@ -4330,6 +4465,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 */) {
@@ -4339,15 +4475,22 @@ function send(payload, zipped, sequence, beacon) {
         // The advantage to using sendBeacon is that browser can decide to upload asynchronously, improving chances of success
         // However, we don't want to rely on it for every payload, since we have no ability to retry if the upload failed.
         // Also, in case of sendBeacon, we do not have a way to alter HTTP headers and therefore can't send compressed payload
-        if (beacon && "sendBeacon" in navigator) {
+        if (beacon && navigator && navigator["sendBeacon"]) {
             try {
                 // Navigator needs to be bound to sendBeacon before it is used to avoid errors in some browsers
                 dispatched = navigator.sendBeacon.bind(navigator)(url_1, payload);
                 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:
@@ -4407,6 +4550,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
@@ -4482,6 +4628,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;
         }
     }
 }
@@ -4798,11 +4948,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);
@@ -5080,7 +5230,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 */;
@@ -5922,7 +6072,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