Merge pull request #676 from microsoft/samart/multipleHtmlAndChangeFix

Samart/multiple html and change fix

lerna.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.47",
+  "version": "0.7.48",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <[email protected]>",
   "license": "MIT",

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "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.7.47"
+    "clarity-js": "^0.7.48"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "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.7.47",
-    "clarity-js": "^0.7.47",
-    "clarity-visualize": "^0.7.47"
+    "clarity-decode": "^0.7.48",
+    "clarity-js": "^0.7.48",
+    "clarity-visualize": "^0.7.48"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Microsoft Clarity Developer Tools",
   "description": "Clarity helps you understand how users are interacting with your website.",
-  "version": "0.7.47",
-  "version_name": "0.7.47",
+  "version": "0.7.48",
+  "version_name": "0.7.48",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

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

packages/clarity-js/rollup.config.ts

@@ -1,10 +1,9 @@
 import alias from "@rollup/plugin-alias";
 import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
+import resolve from "@rollup/plugin-node-resolve";  
 import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
 import pkg from "./package.json" assert { type: 'json' };
-
 export default [
   {
     input: "src/index.ts",

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

@@ -1,2 +1,2 @@
-let version = "0.7.47";
+let version = "0.7.48";
 export default version;

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

@@ -96,7 +96,7 @@ export default function (node: Node, source: Source, timestamp: number): Node {
 
             switch (tag) {
                 case "HTML":
-                    parent = insideFrame && parent ? dom.iframe(parent) : null;
+                    parent = insideFrame && parent ? dom.iframe(parent) : parent;
                     let htmlPrefix = insideFrame ? Constant.IFramePrefix : Constant.Empty;
                     let htmlData = { tag: htmlPrefix + tag, attributes };
                     dom[call](node, parent, htmlData, source);

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

@@ -10,7 +10,7 @@ export function target(evt: UIEvent): Node {
     let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
     let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
     mutation.active(); // Mark active periods of time so mutations can continue uninterrupted
-    return node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
+    return node && node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
 }
 
 export function metadata(node: Node, event: Event, text: string = null): TargetMetadata {

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.7.47",
+  "version": "0.7.48",
   "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.7.47"
+    "clarity-decode": "^0.7.48"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-visualize/src/layout.ts

@@ -7,6 +7,7 @@ import { AnimationOperation } from "clarity-js/types/layout";
 export class LayoutHelper {
     static TIMEOUT = 3000;
 
+    primaryHtmlNodeId: number | null = null;
     isMobile: boolean;
     stylesheets: Promise<void>[] = [];
     fonts: Promise<void>[] = [];
@@ -31,6 +32,7 @@ export class LayoutHelper {
         this.events = {};
         this.hashMapAlpha = {};
         this.hashMapBeta = {};
+        this.primaryHtmlNodeId = null;
     }
 
     public get = (hash) => {
@@ -231,6 +233,16 @@ export class LayoutHelper {
                     }
                     break;
                 case "HTML":
+                    if (this.primaryHtmlNodeId === null) {
+                        this.primaryHtmlNodeId = node.id;
+                    }
+                    // when we see multiple HTML nodes in the same document we should treat subsequent ones as child elements
+                    // rather than redefining our visualization base on them. It's technically illegal HTML but enough sites have
+                    // this structure that we are robust against it.
+                    if (this.primaryHtmlNodeId !== node.id) {
+                        this.insertDefaultElement(node, parent, pivot, doc, insert);
+                        break;
+                    }
                     let htmlDoc = tag !== node.tag ? (parent ? (parent as HTMLIFrameElement).contentDocument : null): doc;
                     if (htmlDoc !== null) {
                         let docElement = this.element(node.id) as HTMLElement;
@@ -324,11 +336,7 @@ export class LayoutHelper {
                     insert(node, parent, iframeElement, pivot);
                     break;
                 default:
-                    let domElement = this.element(node.id) as HTMLElement;
-                    domElement = domElement ? domElement : this.createElement(doc, node.tag);
-                    this.setAttributes(domElement as HTMLElement, node);
-                    this.resize(domElement, node.width, node.height);
-                    insert(node, parent, domElement, pivot);
+                    this.insertDefaultElement(node, parent, pivot, doc, insert);
                     break;
             }
             // Track state for this node
@@ -341,6 +349,14 @@ export class LayoutHelper {
         }
     }
 
+    private insertDefaultElement = (node: DecodedLayout.DomData, parent: Node, pivot: Node, doc: Document, insert: (data: DecodedLayout.DomData, parent: Node, node: Node, previous: Node) => void): void => {
+        let domElement = this.element(node.id) as HTMLElement;
+        domElement = domElement ? domElement : this.createElement(doc, node.tag);
+        this.setAttributes(domElement as HTMLElement, node);
+        this.resize(domElement, node.width, node.height);
+        insert(node, parent, domElement, pivot);
+    }
+
     private style = (node: HTMLLinkElement | HTMLStyleElement, resolve: () => void = null): void => {
         // Firefox throws a SecurityError when trying to access cssRules of a stylesheet from a different domain
         try {