clarity-js 0.6.28 → 0.6.32

package/build/clarity.module.js

@@ -63,6 +63,13 @@ var config$1 = {
     upgrade: null
 };
 
+function api(method) {
+    // Zone.js, a popular package for Angular, overrides native browser APIs which can lead to inconsistent state for single page applications.
+    // Example issue: https://github.com/angular/angular/issues/31712
+    // As a work around, we ensuring Clarity access APIs outside of Zone (and use native implementation instead)
+    return window["Zone" /* Zone */] && "__symbol__" /* Symbol */ in window["Zone" /* Zone */] ? window["Zone" /* Zone */]["__symbol__" /* Symbol */](method) : method;
+}
+
 var startTime = 0;
 function start$E() {
     startTime = performance.now();
@@ -76,7 +83,7 @@ function stop$B() {
     startTime = 0;
 }
 
-var version$1 = "0.6.28";
+var version$1 = "0.6.32";
 
 // tslint:disable: no-bitwise
 function hash (input) {
@@ -610,7 +617,7 @@ function mangleText(value) {
         var index = value.indexOf(first);
         var prefix = value.substr(0, index);
         var suffix = value.substr(index + trimmed.length);
-        return "" + prefix + trimmed.length.toString(36) + suffix;
+        return "".concat(prefix).concat(trimmed.length.toString(36)).concat(suffix);
     }
     return value;
 }
@@ -803,7 +810,7 @@ function suspend$1(timer) {
     });
 }
 function key(timer) {
-    return timer.id + "." + timer.cost;
+    return "".concat(timer.id, ".").concat(timer.cost);
 }
 function wait() {
     return __awaiter(this, void 0, void 0, function () {
@@ -1028,7 +1035,7 @@ function encode$4 (type, timer, ts) {
                                     }
                                     tokens.push(suspend ? "*M" /* SuspendMutationTag */ : data[key]);
                                     if (size && size.length === 2) {
-                                        tokens.push("" + "#" /* Box */ + str$1(size[0]) + "." + str$1(size[1]));
+                                        tokens.push("".concat("#" /* Box */).concat(str$1(size[0]), ".").concat(str$1(size[1])));
                                     }
                                     break;
                                 case "attributes":
@@ -1068,7 +1075,7 @@ function str$1(input) {
     return input.toString(36);
 }
 function attribute(key, value, privacy) {
-    return key + "=" + scrub(value, key, privacy);
+    return "".concat(key, "=").concat(scrub(value, key, privacy));
 }
 
 var data$b = [];
@@ -1221,13 +1228,12 @@ var history$3 = {};
 var data$9;
 function start$s() {
     history$3 = {};
-    bind(document, "securitypolicyviolation", csp);
 }
 function log$1(code, severity, name, message, stack) {
     if (name === void 0) { name = null; }
     if (message === void 0) { message = null; }
     if (stack === void 0) { stack = null; }
-    var key = name ? name + "|" + message : "";
+    var key = name ? "".concat(name, "|").concat(message) : "";
     // While rare, it's possible for code to fail repeatedly during the lifetime of the same page
     // In those cases, we only want to log the failure once and not spam logs with redundant information.
     if (code in history$3 && history$3[code].indexOf(key) >= 0) {
@@ -1243,15 +1249,6 @@ function log$1(code, severity, name, message, stack) {
     }
     encode$3(33 /* Log */);
 }
-function csp(e) {
-    var upload = config$1.upload;
-    var parts = upload ? upload.substr(0, upload.indexOf("/", "https://" /* HTTPS */.length)).split("." /* Dot */) : []; // Look for first "/" starting after initial "https://" string
-    var domain = parts.length >= 2 ? parts.splice(-2).join("." /* Dot */) : null;
-    // Capture content security policy violation only if disposition value is not explicitly set to "report"
-    if (domain && e.blockedURI && e.blockedURI.indexOf(domain) >= 0 && e["disposition"] !== "report" /* Report */) {
-        log$1(7 /* ContentSecurityPolicy */, 1 /* Warning */, e.blockedURI);
-    }
-}
 function stop$r() {
     history$3 = {};
 }
@@ -1290,7 +1287,7 @@ function metrics(root, value) {
                     root.querySelectorAll(match).forEach(function (e) { max(metricId, num$2(e.innerText, scale)); });
                     break;
                 case 2 /* Attribute */:
-                    root.querySelectorAll("[" + match + "]").forEach(function (e) { max(metricId, num$2(e.getAttribute(match), scale, false)); });
+                    root.querySelectorAll("[".concat(match, "]")).forEach(function (e) { max(metricId, num$2(e.getAttribute(match), scale, false)); });
                     break;
                 case 1 /* Javascript */:
                     max(metricId, evaluate(match, "number" /* Number */));
@@ -1312,7 +1309,7 @@ function dimensions(root, value) {
                     root.querySelectorAll(match).forEach(function (e) { log(dimensionId, str(e.innerText)); });
                     break;
                 case 2 /* Attribute */:
-                    root.querySelectorAll("[" + match + "]").forEach(function (e) { log(dimensionId, str(e.getAttribute(match))); });
+                    root.querySelectorAll("[".concat(match, "]")).forEach(function (e) { log(dimensionId, str(e.getAttribute(match))); });
                     break;
                 case 1 /* Javascript */:
                     log(dimensionId, str(evaluate(match, "string" /* String */)));
@@ -1379,7 +1376,7 @@ function selector (input, beta) {
     if (beta === void 0) { beta = false; }
     var a = input.attributes;
     var prefix = input.prefix ? input.prefix[beta ? 1 /* Beta */ : 0 /* Stable */] : null;
-    var suffix = beta || ((a && !("class" /* Class */ in a)) || TAGS.indexOf(input.tag) >= 0) ? ":nth-of-type(" + input.position + ")" : "" /* Empty */;
+    var suffix = beta || ((a && !("class" /* Class */ in a)) || TAGS.indexOf(input.tag) >= 0) ? ":nth-of-type(".concat(input.position, ")") : "" /* Empty */;
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
@@ -1394,28 +1391,36 @@ function selector (input, beta) {
             if (prefix === null) {
                 return "" /* Empty */;
             }
-            prefix = prefix + ">";
+            prefix = "".concat(prefix, ">");
             input.tag = input.tag.indexOf("svg:" /* SvgPrefix */) === 0 ? input.tag.substr("svg:" /* SvgPrefix */.length) : input.tag;
-            var selector = "" + prefix + input.tag + suffix;
+            var selector = "".concat(prefix).concat(input.tag).concat(suffix);
             var classes = "class" /* Class */ in a && a["class" /* Class */].length > 0 ? a["class" /* Class */].trim().split(/\s+/) : null;
             if (beta) {
                 // In beta mode, update selector to use "id" field when available. There are two exceptions:
                 // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
                 // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-                var shadowStart = prefix.lastIndexOf("*S" /* ShadowDomTag */);
-                var shadowEnd = prefix.indexOf(">", shadowStart) + 1;
                 var id = "id" /* Id */ in a && a["id" /* Id */].length > 0 ? a["id" /* Id */] : null;
                 classes = input.tag !== "BODY" /* BodyTag */ && classes ? classes.filter(function (c) { return !hasDigits(c); }) : [];
-                selector = classes.length > 0 ? "" + prefix + input.tag + "." + classes.join(".") + suffix : selector;
-                selector = id && hasDigits(id) === false ? (shadowStart >= 0 ? prefix.substr(0, shadowEnd) + "#" + id : "#" + id) : selector;
+                selector = classes.length > 0 ? "".concat(prefix).concat(input.tag, ".").concat(classes.join(".")).concat(suffix) : selector;
+                selector = id && hasDigits(id) === false ? "".concat(getDomPrefix(prefix), "#").concat(id) : selector;
             }
             else {
                 // Otherwise, fallback to stable mode, where we include class names as part of the selector
-                selector = classes ? "" + prefix + input.tag + "." + classes.join(".") + suffix : selector;
+                selector = classes ? "".concat(prefix).concat(input.tag, ".").concat(classes.join(".")).concat(suffix) : selector;
             }
             return selector;
     }
 }
+function getDomPrefix(prefix) {
+    var shadowDomStart = prefix.lastIndexOf("*S" /* ShadowDomTag */);
+    var iframeDomStart = prefix.lastIndexOf("".concat("iframe:" /* IFramePrefix */).concat("HTML" /* HTML */));
+    var domStart = Math.max(shadowDomStart, iframeDomStart);
+    if (domStart < 0) {
+        return "";
+    }
+    var domEnd = prefix.indexOf(">", domStart) + 1;
+    return prefix.substr(0, domEnd);
+}
 // Check if the given input string has digits or not
 function hasDigits(value) {
     for (var i = 0; i < value.length; i++) {
@@ -1430,19 +1435,21 @@ function hasDigits(value) {
 var index = 1;
 // Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#%3Cinput%3E_types
 var DISALLOWED_TYPES = ["password", "hidden", "email", "tel"];
-var DISALLOWED_NAMES = ["addr", "cell", "code", "dob", "email", "mob", "name", "phone", "secret", "social", "ssn", "tel", "zip", "pass"];
+var DISALLOWED_NAMES = ["addr", "cell", "code", "dob", "email", "mob", "name", "phone", "secret", "social", "ssn", "tel", "zip", "pass", "card", "account", "cvv", "ccv"];
 var DISALLOWED_MATCH = ["address", "password", "contact"];
 var nodes = [];
 var values = [];
 var updateMap = [];
 var hashMap = {};
+var override = [];
+var unmask = [];
 // The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
 var idMap = null; // Maps node => id.
 var iframeMap = null; // Maps iframe's contentDocument => parent iframe element
 var privacyMap = null; // Maps node => Privacy (enum)
 function start$r() {
     reset$g();
-    parse(document);
+    parse(document, true);
 }
 function stop$q() {
     reset$g();
@@ -1453,16 +1460,23 @@ function reset$g() {
     values = [];
     updateMap = [];
     hashMap = {};
+    override = [];
+    unmask = [];
     idMap = new WeakMap();
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
 }
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
 // later whenever there are new additions or modifications to DOM (mutations)
-function parse(root) {
+function parse(root, init) {
+    if (init === void 0) { init = false; }
     // Wrap selectors in a try / catch block.
     // It's possible for script to receive invalid selectors, e.g. "'#id'" with extra quotes, and cause the code below to fail
     try {
+        // Parse unmask configuration into separate query selectors and override tokens as part of initialization
+        if (init) {
+            config$1.unmask.forEach(function (x) { return x.indexOf("!" /* Bang */) < 0 ? unmask.push(x) : override.push(x.substr(1)); });
+        }
         // Since mutations may happen on leaf nodes too, e.g. text nodes, which may not support all selector APIs.
         // We ensure that the root note supports querySelectorAll API before executing the code below to identify new regions.
         if ("querySelectorAll" in root) {
@@ -1470,7 +1484,7 @@ function parse(root) {
             metrics(root, config$1.metrics);
             dimensions(root, config$1.dimensions);
             config$1.mask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 3 /* TextImage */); }); }); // Masked Elements
-            config$1.unmask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 0 /* None */); }); }); // Unmasked Elements
+            unmask.forEach(function (x) { return root.querySelectorAll(x).forEach(function (e) { return privacyMap.set(e, 0 /* None */); }); }); // Unmasked Elements
         }
     }
     catch (e) {
@@ -1495,17 +1509,15 @@ function add(node, parent, data, source) {
     var previousId = getPreviousId(node);
     var privacy = config$1.content ? 1 /* Sensitive */ : 2 /* Text */;
     var parentValue = null;
-    var parentTag = "" /* Empty */;
     var regionId = exists(node) ? id : null;
     if (parentId >= 0 && values[parentId]) {
         parentValue = values[parentId];
-        parentTag = parentValue.data.tag;
         parentValue.children.push(id);
         regionId = regionId === null ? parentValue.region : regionId;
         privacy = parentValue.metadata.privacy;
     }
     // Check to see if this particular node should be masked or not
-    privacy = getPrivacy(node, data, parentTag, privacy);
+    privacy = getPrivacy(node, data, parentValue, privacy);
     // If there's an explicit region attribute set on the element, use it to mark a region on the page
     if (data.attributes && "data-clarity-region" /* RegionData */ in data.attributes) {
         observe$b(node, data.attributes["data-clarity-region" /* RegionData */]);
@@ -1600,21 +1612,35 @@ function iframe(node) {
     var doc = node.nodeType === Node.DOCUMENT_NODE ? node : null;
     return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
 }
-function getPrivacy(node, data, parentTag, privacy) {
+function getPrivacy(node, data, parent, privacy) {
     var attributes = data.attributes;
     var tag = data.tag.toUpperCase();
     // If this node was explicitly configured to contain sensitive content, use that information and return the value
     if (privacyMap.has(node)) {
         return privacyMap.get(node);
     }
+    // If it's a text node belonging to a STYLE or TITLE tag; 
+    // Or, the text node belongs to one of SCRUB_EXCEPTIONS
+    // then reset the privacy setting to ensure we capture the content
+    if (tag === "*T" /* TextTag */ && parent && parent.data) {
+        var path = parent.selector ? parent.selector[0 /* Stable */] : "" /* Empty */;
+        privacy = parent.data.tag === "STYLE" /* StyleTag */ || parent.data.tag === "TITLE" /* TitleTag */ ? 0 /* None */ : privacy;
+        for (var _i = 0, override_1 = override; _i < override_1.length; _i++) {
+            var entry = override_1[_i];
+            if (path.indexOf(entry) >= 0) {
+                privacy = 0 /* None */;
+                break;
+            }
+        }
+    }
     // Do not proceed if attributes are missing for the node
     if (attributes === null || attributes === undefined) {
         return privacy;
     }
     // Look up for sensitive fields
     if ("class" /* Class */ in attributes && privacy === 1 /* Sensitive */) {
-        for (var _i = 0, DISALLOWED_MATCH_1 = DISALLOWED_MATCH; _i < DISALLOWED_MATCH_1.length; _i++) {
-            var match = DISALLOWED_MATCH_1[_i];
+        for (var _a = 0, DISALLOWED_MATCH_1 = DISALLOWED_MATCH; _a < DISALLOWED_MATCH_1.length; _a++) {
+            var match = DISALLOWED_MATCH_1[_a];
             if (attributes["class" /* Class */].indexOf(match) >= 0) {
                 privacy = 2 /* Text */;
                 break;
@@ -1626,12 +1652,12 @@ function getPrivacy(node, data, parentTag, privacy) {
         if (privacy === 0 /* None */) {
             var field = "" /* Empty */;
             // Be aggressive in looking up any attribute (id, class, name, etc.) for disallowed names
-            for (var _a = 0, _b = Object.keys(attributes); _a < _b.length; _a++) {
-                var attribute = _b[_a];
+            for (var _b = 0, _c = Object.keys(attributes); _b < _c.length; _b++) {
+                var attribute = _c[_b];
                 field += attributes[attribute].toLowerCase();
             }
-            for (var _c = 0, DISALLOWED_NAMES_1 = DISALLOWED_NAMES; _c < DISALLOWED_NAMES_1.length; _c++) {
-                var name_1 = DISALLOWED_NAMES_1[_c];
+            for (var _d = 0, DISALLOWED_NAMES_1 = DISALLOWED_NAMES; _d < DISALLOWED_NAMES_1.length; _d++) {
+                var name_1 = DISALLOWED_NAMES_1[_d];
                 if (field.indexOf(name_1) >= 0) {
                     privacy = 2 /* Text */;
                     break;
@@ -1654,11 +1680,6 @@ function getPrivacy(node, data, parentTag, privacy) {
     if ("data-clarity-unmask" /* UnmaskData */ in attributes) {
         privacy = 0 /* None */;
     }
-    // If it's a text node belonging to a STYLE or TITLE tag; then reset the privacy setting to ensure we capture the content
-    var cTag = tag === "*T" /* TextTag */ ? parentTag : tag;
-    if (cTag === "STYLE" /* StyleTag */ || cTag === "TITLE" /* TitleTag */) {
-        privacy = 0 /* None */;
-    }
     return privacy;
 }
 function diff(a, b, field) {
@@ -2569,6 +2590,7 @@ function processNode (node, source) {
         case Node.DOCUMENT_FRAGMENT_NODE:
             var shadowRoot = node;
             if (shadowRoot.host) {
+                parse(shadowRoot);
                 var type = typeof (shadowRoot.constructor);
                 if (type === "function" /* Function */ && shadowRoot.constructor.toString().indexOf("[native code]" /* NativeCode */) >= 0) {
                     observe$2(shadowRoot);
@@ -2802,7 +2824,7 @@ function start$e() {
         deleteRule = CSSStyleSheet.prototype.deleteRule;
     }
     if (attachShadow === null) {
-        attachShadow = HTMLElement.prototype.attachShadow;
+        attachShadow = Element.prototype.attachShadow;
     }
     // Some popular open source libraries, like styled-components, optimize performance
     // by injecting CSS using insertRule API vs. appending text node. A side effect of
@@ -2820,7 +2842,7 @@ function start$e() {
     // In case we are unable to add a hook and browser throws an exception,
     // reset attachShadow variable and resume processing like before
     try {
-        HTMLElement.prototype.attachShadow = function () {
+        Element.prototype.attachShadow = function () {
             return schedule(attachShadow.apply(this, arguments));
         };
     }
@@ -2834,11 +2856,8 @@ function observe$1(node) {
     // For this reason, we need to wire up mutations every time we see a new shadow dom.
     // Also, wrap it inside a try / catch. In certain browsers (e.g. legacy Edge), observer on shadow dom can throw errors
     try {
-        // In an edge case, it's possible to get stuck into infinite Mutation loop within Angular applications
-        // This appears to be an issue with Zone.js package, see: https://github.com/angular/angular/issues/31712
-        // As a temporary work around, ensuring Clarity can invoke MutationObserver outside of Zone (and use native implementation instead)
-        var api = window["Zone" /* Zone */] && "__symbol__" /* Symbol */ in window["Zone" /* Zone */] ? window["Zone" /* Zone */]["__symbol__" /* Symbol */]("MutationObserver" /* MutationObserver */) : "MutationObserver" /* MutationObserver */;
-        var observer = api in window ? new window[api](measure(handle$1)) : null;
+        var m = api("MutationObserver" /* MutationObserver */);
+        var observer = m in window ? new window[m](measure(handle$1)) : null;
         if (observer) {
             observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
             observers.push(observer);
@@ -2876,7 +2895,7 @@ function stop$d() {
     }
     // Restoring original attachShadow
     if (attachShadow != null) {
-        HTMLElement.prototype.attachShadow = attachShadow;
+        Element.prototype.attachShadow = attachShadow;
         attachShadow = null;
     }
     history$2 = {};
@@ -2930,6 +2949,9 @@ function process$1() {
                     if (type && target && target.ownerDocument) {
                         parse(target.ownerDocument);
                     }
+                    if (type && target && target.nodeType == Node.DOCUMENT_FRAGMENT_NODE && target.host) {
+                        parse(target);
+                    }
                     switch (type) {
                         case "attributes" /* Attributes */:
                             processNode(target, 3 /* Attributes */);
@@ -3056,12 +3078,15 @@ function schedule(node) {
 function trigger$1() {
     for (var _i = 0, queue_1 = queue$1; _i < queue_1.length; _i++) {
         var node = queue_1[_i];
-        var shadowRoot = node && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
-        // Skip re-processing shadowRoot if it was already discovered
-        if (shadowRoot && has(node)) {
-            continue;
+        // Generate a mutation for this node only if it still exists
+        if (node) {
+            var shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+            // Skip re-processing shadowRoot if it was already discovered
+            if (shadowRoot && has(node)) {
+                continue;
+            }
+            generate(node, shadowRoot ? "childList" /* ChildList */ : "characterData" /* CharacterData */);
         }
-        generate(node, shadowRoot ? "childList" /* ChildList */ : "characterData" /* CharacterData */);
     }
     queue$1 = [];
 }
@@ -3413,8 +3438,8 @@ function upload(final) {
                     compute$8();
                     last = final === true;
                     e = JSON.stringify(envelope(last));
-                    a = "[" + analysis.join() + "]";
-                    p = sendPlaybackBytes ? "[" + playback.join() + "]" : "" /* Empty */;
+                    a = "[".concat(analysis.join(), "]");
+                    p = sendPlaybackBytes ? "[".concat(playback.join(), "]") : "" /* Empty */;
                     encoded = { e: e, a: a, p: p };
                     payload = stringify(encoded);
                     if (!last) return [3 /*break*/, 1];
@@ -3441,7 +3466,7 @@ function upload(final) {
     });
 }
 function stringify(encoded) {
-    return encoded.p.length > 0 ? "{\"e\":" + encoded.e + ",\"a\":" + encoded.a + ",\"p\":" + encoded.p + "}" : "{\"e\":" + encoded.e + ",\"a\":" + encoded.a + "}";
+    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) {
     if (beacon === void 0) { beacon = false; }
@@ -3454,10 +3479,14 @@ function send(payload, zipped, sequence, beacon) {
         // 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) {
-            dispatched = navigator.sendBeacon(url, payload);
-            if (dispatched) {
-                done(sequence);
+            try {
+                // Navigator needs to be bound to sendBeacon before it is used to avoid errors in some browsers
+                dispatched = navigator.sendBeacon.bind(navigator)(url, payload);
+                if (dispatched) {
+                    done(sequence);
+                }
             }
+            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:
@@ -3501,7 +3530,7 @@ function check$3(xhr, sequence) {
     if (xhr && xhr.readyState === 4 /* Done */ && transitData) {
         // Attempt send payload again (as configured in settings) if we do not receive a success (2XX) response code back from the server
         if ((xhr.status < 200 || xhr.status > 208) && transitData.attempts <= 1 /* RetryLimit */) {
-            // We re-attempt in all cases except when server explicitly rejects our request with 4XX error 
+            // We re-attempt in all cases except when server explicitly rejects our request with 4XX error
             if (xhr.status >= 400 && xhr.status < 500) {
                 // In case of a 4XX response from the server, we bail out instead of trying again
                 trigger(6 /* Server */);
@@ -3555,7 +3584,7 @@ function done(sequence) {
 }
 function delay() {
     // Progressively increase delay as we continue to send more payloads from the client to the server
-    // If we are not uploading data to a server, and instead invoking UploadCallback, in that case keep returning configured value 
+    // If we are not uploading data to a server, and instead invoking UploadCallback, in that case keep returning configured value
     var gap = config$1.lean === false && discoverBytes > 0 ? 100 /* MinUploadDelay */ : data$1.sequence * config$1.delay;
     return typeof config$1.upload === "string" /* String */ ? Math.max(Math.min(gap, 30000 /* MaxUploadDelay */), 100 /* MinUploadDelay */) : config$1.delay;
 }
@@ -3717,7 +3746,7 @@ function log(dimension, value) {
     // Check valid value before moving ahead
     if (value) {
         // Ensure received value is casted into a string if it wasn't a string to begin with
-        value = "" + value;
+        value = "".concat(value);
         if (!(dimension in data$3)) {
             data$3[dimension] = [];
         }
@@ -3802,9 +3831,10 @@ function userAgentData() {
             "platformVersion",
             "uaFullVersion"])
             .then(function (ua) {
+            var _a;
             log(22 /* Platform */, ua.platform);
             log(23 /* PlatformVersion */, ua.platformVersion);
-            ua.brands.forEach(function (brand) {
+            (_a = ua.brands) === null || _a === void 0 ? void 0 : _a.forEach(function (brand) {
                 log(24 /* Brand */, brand.name + "~" /* Tilde */ + brand.version);
             });
             log(25 /* Model */, ua.model);
@@ -3897,7 +3927,7 @@ function session() {
             output.session = parts[0];
             output.count = num(parts[2]) + 1;
             output.upgrade = num(parts[3]);
-            output.upload = parts.length >= 6 ? "" + "https://" /* HTTPS */ + parts[5] + "/" + parts[4] : "" + "https://" /* HTTPS */ + parts[4];
+            output.upload = parts.length >= 6 ? "".concat("https://" /* HTTPS */).concat(parts[5], "/").concat(parts[4]) : "".concat("https://" /* HTTPS */).concat(parts[4]);
         }
     }
     return output;
@@ -3922,11 +3952,11 @@ function user() {
         // Check if we either got version-less cookie value or saw multiple copies of the user cookie crumbs
         // In both these cases, we go ahead and delete the existing cookie set on current domain
         if (parts.length === 1 || count > 1) {
-            var deleted = "" + ";" /* Semicolon */ + "expires=" /* Expires */ + (new Date(0)).toUTCString() + ";path=/" /* Path */;
+            var deleted = "".concat(";" /* Semicolon */).concat("expires=" /* Expires */).concat((new Date(0)).toUTCString()).concat(";path=/" /* Path */);
             // First, delete current user cookie which might be set on current sub-domain vs. root domain
-            document.cookie = "_clck" /* CookieKey */ + "=" + deleted;
+            document.cookie = "".concat("_clck" /* CookieKey */, "=").concat(deleted);
             // Second, same thing for current session cookie so it can be re-written later with the root domain
-            document.cookie = "_clsk" /* SessionKey */ + "=" + deleted;
+            document.cookie = "".concat("_clsk" /* SessionKey */, "=").concat(deleted);
         }
         // End code for backward compatibility
         // Read version information and timestamp from cookie, if available
@@ -3963,19 +3993,19 @@ function setCookie(key, value, time) {
         var expiry = new Date();
         expiry.setDate(expiry.getDate() + time);
         var expires = expiry ? "expires=" /* Expires */ + expiry.toUTCString() : "" /* Empty */;
-        var cookie = key + "=" + value + ";" /* Semicolon */ + expires + ";path=/" /* Path */;
+        var cookie = "".concat(key, "=").concat(value).concat(";" /* Semicolon */).concat(expires).concat(";path=/" /* Path */);
         try {
             // Attempt to get the root domain only once and fall back to writing cookie on the current domain.
             if (rootDomain === null) {
                 var hostname = location.hostname ? location.hostname.split("." /* Dot */) : [];
                 // Walk backwards on a domain and attempt to set a cookie, until successful
                 for (var i = hostname.length - 1; i >= 0; i--) {
-                    rootDomain = "." + hostname[i] + (rootDomain ? rootDomain : "" /* Empty */);
+                    rootDomain = ".".concat(hostname[i]).concat(rootDomain ? rootDomain : "" /* Empty */);
                     // We do not wish to attempt writing a cookie on the absolute last part of the domain, e.g. .com or .net.
                     // So we start attempting after second-last part, e.g. .domain.com (PASS) or .co.uk (FAIL)
                     if (i < hostname.length - 1) {
                         // Write the cookie on the current computed top level domain
-                        document.cookie = "" + cookie + ";" /* Semicolon */ + "domain=" /* Domain */ + rootDomain;
+                        document.cookie = "".concat(cookie).concat(";" /* Semicolon */).concat("domain=" /* Domain */).concat(rootDomain);
                         // Once written, check if the cookie exists and its value matches exactly with what we intended to set
                         // Checking for exact value match helps us eliminate a corner case where the cookie may already be present with a different value
                         // If the check is successful, no more action is required and we can return from the function since rootDomain cookie is already set
@@ -3993,7 +4023,7 @@ function setCookie(key, value, time) {
         catch (_a) {
             rootDomain = "" /* Empty */;
         }
-        document.cookie = rootDomain ? "" + cookie + ";" /* Semicolon */ + "domain=" /* Domain */ + rootDomain : cookie;
+        document.cookie = rootDomain ? "".concat(cookie).concat(";" /* Semicolon */).concat("domain=" /* Domain */).concat(rootDomain) : cookie;
     }
 }
 
@@ -4089,7 +4119,7 @@ function bind(target, event, listener, capture) {
     // Wrapping following lines inside try / catch to cover edge cases where we might try to access an inaccessible element.
     // E.g. Iframe may start off as same-origin but later turn into cross-origin, and the following lines will throw an exception.
     try {
-        target.addEventListener(event, listener, capture);
+        target[api("addEventListener" /* AddEventListener */)](event, listener, capture);
         bindings.push({ event: event, target: target, listener: listener, capture: capture });
     }
     catch ( /* do nothing */_a) { /* do nothing */ }
@@ -4100,7 +4130,7 @@ function reset$1() {
         var binding = bindings_1[_i];
         // Wrapping inside try / catch to avoid situations where the element may be destroyed before we get a chance to unbind
         try {
-            binding.target.removeEventListener(binding.event, binding.listener, binding.capture);
+            binding.target[api("removeEventListener" /* RemoveEventListener */)](binding.event, binding.listener, binding.capture);
         }
         catch ( /* do nothing */_a) { /* do nothing */ }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.28",
+  "version": "0.6.32",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

package/src/core/api.ts

@@ -0,0 +1,8 @@
+import { Constant } from "@clarity-types/core";
+
+export default function api(method: string): string {
+    // Zone.js, a popular package for Angular, overrides native browser APIs which can lead to inconsistent state for single page applications.
+    // Example issue: https://github.com/angular/angular/issues/31712
+    // As a work around, we ensuring Clarity access APIs outside of Zone (and use native implementation instead)
+    return window[Constant.Zone] && Constant.Symbol in window[Constant.Zone] ? window[Constant.Zone][Constant.Symbol](method) : method;
+}

package/src/core/event.ts

@@ -1,4 +1,5 @@
-import { BrowserEvent } from "@clarity-types/core";
+import { BrowserEvent, Constant } from "@clarity-types/core";
+import api from "./api";
 import measure from "./measure";
 
 let bindings: BrowserEvent[] = [];
@@ -8,7 +9,7 @@ export function bind(target: EventTarget, event: string, listener: EventListener
     // Wrapping following lines inside try / catch to cover edge cases where we might try to access an inaccessible element.
     // E.g. Iframe may start off as same-origin but later turn into cross-origin, and the following lines will throw an exception.
     try {
-      target.addEventListener(event, listener, capture);
+      target[api(Constant.AddEventListener)](event, listener, capture);
       bindings.push({ event, target, listener, capture });
     } catch { /* do nothing */ }
 }
@@ -18,7 +19,7 @@ export function reset(): void {
   for (let binding of bindings) {
     // Wrapping inside try / catch to avoid situations where the element may be destroyed before we get a chance to unbind
     try {
-      binding.target.removeEventListener(binding.event, binding.listener, binding.capture);
+      binding.target[api(Constant.RemoveEventListener)](binding.event, binding.listener, binding.capture);
     } catch { /* do nothing */ }
   }
   bindings = [];

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.6.28";
+let version = "0.6.32";
 export default version;

package/src/data/metadata.ts

@@ -74,7 +74,7 @@ export function userAgentData(): void {
       .then(ua => { 
         dimension.log(Dimension.Platform, ua.platform); 
         dimension.log(Dimension.PlatformVersion, ua.platformVersion); 
-        ua.brands.forEach(brand => {
+        ua.brands?.forEach(brand => {
           dimension.log(Dimension.Brand, brand.name + Constant.Tilde + brand.version); 
         });
         dimension.log(Dimension.Model, ua.model);