Perf improvement & bug fix to improve Angular SPA

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.31",
+  "version": "0.6.32",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.6.30",
+  "version": "0.6.32",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "lerna": "^4.0.0",
-    "tar": "^6.1.7",
+    "tar": "^6.1.11",
     "trim-newlines": "^4.0.2"
   },
   "resolutions": {

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.6.31",
+  "version": "0.6.32",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.6.31"
+    "clarity-js": "^0.6.32"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.1",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.6.31",
+  "version": "0.6.32",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.31",
-    "clarity-js": "^0.6.31",
-    "clarity-visualize": "^0.6.31"
+    "clarity-decode": "^0.6.32",
+    "clarity-js": "^0.6.32",
+    "clarity-visualize": "^0.6.32"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.0.2",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Clarity Developer Tools",
   "description": "Get insights about how customers use your website.",
-  "version": "0.6.31",
-  "version_name": "0.6.31",
+  "version": "0.6.32",
+  "version_name": "0.6.32",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

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

packages/clarity-js/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;
+}

packages/clarity-js/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 = [];

packages/clarity-js/src/core/version.ts

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

packages/clarity-js/src/data/upload.ts

@@ -42,7 +42,7 @@ export function queue(tokens: Token[], transmit: boolean = true): void {
         let now = time();
         let type = tokens.length > 1 ? tokens[1] : null;
         let event = JSON.stringify(tokens);
-        
+
         switch (type) {
             case Event.Discover:
                 discoverBytes += event.length;
@@ -118,12 +118,12 @@ async function upload(final: boolean = false): Promise<void> {
 
     let p = sendPlaybackBytes ? `[${playback.join()}]` : Constant.Empty;
     let encoded: EncodedPayload = {e, a, p};
-    
+
     // Get the payload ready for sending over the wire
     // We also attempt to compress the payload if it is not the last payload and the browser supports it
     // In all other cases, we continue to send back string value
     let payload = stringify(encoded);
-    let zipped = last ? null : await compress(payload) 
+    let zipped = last ? null : await compress(payload)
     metric.sum(Metric.TotalBytes, zipped ? zipped.length : payload.length);
     send(payload, zipped, envelope.data.sequence, last);
 
@@ -151,8 +151,11 @@ function send(payload: string, zipped: Uint8Array, sequence: number, beacon: boo
         // 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 */ }
         }
 
         // Before initiating XHR upload, we check if the data has already been uploaded using sendBeacon
@@ -189,7 +192,7 @@ function check(xhr: XMLHttpRequest, sequence: number): void {
     if (xhr && xhr.readyState === XMLReadyState.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 <= Setting.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
                 limit.trigger(Check.Server);
@@ -212,7 +215,7 @@ function check(xhr: XMLHttpRequest, sequence: number): void {
             // Handle response if it was a 200 response with a valid body
             if (xhr.status === 200 && xhr.responseText) { response(xhr.responseText); }
             // If we exhausted our retries then trigger Clarity's shutdown for this page since the data will be incomplete
-            if (xhr.status === 0) { 
+            if (xhr.status === 0) {
                 // And, right before we terminate the session, we will attempt one last time to see if we can use
                 // different transport option (sendBeacon vs. XHR) to get this data to the server for analysis purposes
                 send(transitData.data, null, sequence, true);
@@ -233,7 +236,7 @@ function done(sequence: number): void {
 
 function delay(): number {
     // 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
     let gap = config.lean === false && discoverBytes > 0 ? Setting.MinUploadDelay : envelope.data.sequence * config.delay;
     return typeof config.upload === Constant.String ? Math.max(Math.min(gap, Setting.MaxUploadDelay), Setting.MinUploadDelay) : config.delay;
 }

packages/clarity-js/src/diagnostic/internal.ts

@@ -1,15 +1,12 @@
-import { Code, Constant, Event, Severity } from "@clarity-types/data";
+import { Code, Event, Severity } from "@clarity-types/data";
 import { LogData } from "@clarity-types/diagnostic";
-import config from "@src/core/config";
-import { bind } from "@src/core/event";
 import encode from "./encode";
 
 let history: { [key: number]: string[] } = {};
 export let data: LogData;
 
 export function start(): void {
     history = {};
-    bind(document, "securitypolicyviolation", csp);
 }
 
 export function log(code: Code, severity: Severity, name: string = null, message: string = null, stack: string = null): void {
@@ -26,17 +23,6 @@ export function log(code: Code, severity: Severity, name: string = null, message
     encode(Event.Log);
 }
 
-function csp(e: SecurityPolicyViolationEvent): void {
-    let upload = config.upload as string;
-    // Look for first "/" starting after initial "https://" string
-    let parts = upload && typeof upload === Constant.String ? upload.substr(0, upload.indexOf("/", Constant.HTTPS.length)).split(Constant.Dot) : []; 
-    let domain = parts.length >= 2 ? parts.splice(-2).join(Constant.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"] !== Constant.Report) {
-        log(Code.ContentSecurityPolicy, Severity.Warning, e.blockedURI);
-    }
-}
-
 export function stop(): void {
     history = {};
 }

packages/clarity-js/src/layout/mutation.ts

@@ -1,6 +1,7 @@
 import { Priority, Task, Timer } from "@clarity-types/core";
 import { Code, Event, Metric, Severity } from "@clarity-types/data";
 import { Constant, MutationHistory, MutationQueue, Setting, Source } from "@clarity-types/layout";
+import api from "@src/core/api";
 import { bind } from "@src/core/event";
 import measure from "@src/core/measure";
 import * as task from "@src/core/task";
@@ -68,11 +69,8 @@ export function observe(node: Node): void {
   // 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)
-    let api: string = window[Constant.Zone] && Constant.Symbol in window[Constant.Zone] ? window[Constant.Zone][Constant.Symbol](Constant.MutationObserver) : Constant.MutationObserver;
-    let observer =  api in window ? new window[api](measure(handle) as MutationCallback) : null;
+    let m = api(Constant.MutationObserver);
+    let observer =  m in window ? new window[m](measure(handle) as MutationCallback) : null;
     if (observer) {
       observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
       observers.push(observer);
@@ -235,10 +233,13 @@ function schedule(node: Node): Node {
 
 function trigger(): void {
   for (let node of queue) {
-    let shadowRoot = node && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
-    // Skip re-processing shadowRoot if it was already discovered
-    if (shadowRoot && dom.has(node)) { continue; }
-    generate(node, shadowRoot ? Constant.ChildList : Constant.CharacterData);
+    // Generate a mutation for this node only if it still exists
+    if (node) {
+      let shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+      // Skip re-processing shadowRoot if it was already discovered
+      if (shadowRoot && dom.has(node)) { continue; }
+      generate(node, shadowRoot ? Constant.ChildList : Constant.CharacterData);
+    }
   }
   queue = [];
 }

packages/clarity-js/types/core.d.ts

@@ -127,3 +127,10 @@ export interface Config {
     fallback?: string;
     upgrade?: (key: string) => void;
 }
+
+export const enum Constant {
+    Zone = "Zone",
+    Symbol = "__symbol__",
+    AddEventListener = "addEventListener",
+    RemoveEventListener = "removeEventListener"
+}

packages/clarity-js/types/data.d.ts

@@ -135,6 +135,9 @@ export const enum Code {
     CallStackDepth = 4,
     Selector = 5,
     Metric = 6,
+/**
+ * @deprecated No longer support ContentSecurityPolicy
+ */
     ContentSecurityPolicy = 7
 }
 

packages/clarity-js/types/layout.d.ts

@@ -75,8 +75,6 @@ export const enum Constant {
     BorderBox = "border-box",
     Value = "value",
     MutationObserver = "MutationObserver",
-    Zone = "Zone",
-    Symbol = "__symbol__",
     JsonLD = "application/ld+json",
     String = "string",
     Number = "number",

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.6.31",
+  "version": "0.6.32",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.31"
+    "clarity-decode": "^0.6.32"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.1",