Merge pull request #723 from microsoft/samart/ensuringHistoryDoesntGr…

…owTooBig clearing out old history, especially important for pages with frequen…
microsoft · Jan 8, 2025 · 35654d2 · 35654d2
2 parents 12e2d9f + 6d737e3
commit 35654d2
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 44 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.7.59",
+  "version": "0.7.60",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.59",
+  "version": "0.7.60",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <[email protected]>",
   "license": "MIT",

diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.59",
+  "version": "0.7.60",
   "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.59"
+    "clarity-js": "^0.7.60"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

diff --git a/packages/clarity-devtools/package.json b/packages/clarity-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.59",
+  "version": "0.7.60",
   "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.59",
-    "clarity-js": "^0.7.59",
-    "clarity-visualize": "^0.7.59"
+    "clarity-decode": "^0.7.60",
+    "clarity-js": "^0.7.60",
+    "clarity-visualize": "^0.7.60"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

diff --git a/packages/clarity-devtools/static/manifest.json b/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.59",
-  "version_name": "0.7.59",
+  "version": "0.7.60",
+  "version_name": "0.7.60",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

diff --git a/packages/clarity-js/package.json b/packages/clarity-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.7.59",
+  "version": "0.7.60",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

diff --git a/packages/clarity-js/src/layout/mutation.ts b/packages/clarity-js/src/layout/mutation.ts
@@ -14,6 +14,7 @@ import * as summary from "@src/data/summary";
 import * as internal from "@src/diagnostic/internal";
 import * as doc from "@src/layout/document";
 import * as dom from "@src/layout/dom";
+import * as metric from "@src/data/metric";
 import encode from "@src/layout/encode";
 import * as region from "@src/layout/region";
 import traverse from "@src/layout/traverse";
@@ -195,10 +196,27 @@ async function process(): Promise<void> {
   if (Object.keys(throttledMutations).length === 0 && processedMutations) {
     await encode(Event.Mutation, timer, time());
   }
+
+  cleanHistory();
 
   task.stop(timer);
 }
 
+function cleanHistory(): void {
+  let now = time();
+  if (Object.keys(history).length > Setting.MaxMutationHistoryCount) { 
+    history = {};
+    metric.count(Metric.HistoryClear);
+  }
+
+  for (let key of Object.keys(history)) {
+    let h = history[key];
+    if (now > h[1] + Setting.MaxMutationHistoryTime) {
+      delete history[key];
+    }
+  }
+}
+
 function track(m: MutationRecord, timer: Timer, instance: number, timestamp: number): string {
   let value = m.target ? dom.get(m.target.parentNode) : null;
   // Check if the parent is already discovered and that the parent is not the document root

diff --git a/packages/clarity-js/src/layout/style.ts b/packages/clarity-js/src/layout/style.ts
@@ -19,37 +19,39 @@ let styleTimeMap: {[key: string]: number} = {};
 let documentNodes = [];
 
 export function start(): void {
-    if (replace === null) { 
-        replace = CSSStyleSheet.prototype.replace; 
-        CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
-            if (core.active()) {
-                metric.max(Metric.ConstructedStyles, 1);
-                // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
-                // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
-                // to when it is used in the document rather than potentially being misaligned during the traverse process.
-                if (this[styleSheetPageNum] === metadataFields.pageNum) {
-                    trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, arguments[0]);
+    if (window['CSSStyleSheet'] && CSSStyleSheet.prototype) {
+        if (replace === null) { 
+            replace = CSSStyleSheet.prototype.replace; 
+            CSSStyleSheet.prototype.replace = function(): Promise<CSSStyleSheet> {
+                if (core.active()) {
+                    metric.max(Metric.ConstructedStyles, 1);
+                    // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
+                    // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
+                    // to when it is used in the document rather than potentially being misaligned during the traverse process.
+                    if (this[styleSheetPageNum] === metadataFields.pageNum) {
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.Replace, arguments[0]);
+                    }
                 }
-            }
-            return replace.apply(this, arguments);
-        };
-    }
-
-    if (replaceSync === null) { 
-        replaceSync = CSSStyleSheet.prototype.replaceSync; 
-        CSSStyleSheet.prototype.replaceSync = function(): void {
-            if (core.active()) {
-                metric.max(Metric.ConstructedStyles, 1);
-                // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
-                // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
-                // to when it is used in the document rather than potentially being misaligned during the traverse process.
-                if (this[styleSheetPageNum] === metadataFields.pageNum) {
-                    trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
-                }                
-            }
-            return replaceSync.apply(this, arguments);
-        };
-    }
+                return replace.apply(this, arguments);
+            };
+        }
+
+        if (replaceSync === null) { 
+            replaceSync = CSSStyleSheet.prototype.replaceSync; 
+            CSSStyleSheet.prototype.replaceSync = function(): void {
+                if (core.active()) {
+                    metric.max(Metric.ConstructedStyles, 1);
+                    // if we haven't seen this stylesheet on this page yet, wait until the checkDocumentStyles has found it
+                    // and attached the sheet to a document. This way the timestamp of the style sheet creation will align
+                    // to when it is used in the document rather than potentially being misaligned during the traverse process.
+                    if (this[styleSheetPageNum] === metadataFields.pageNum) {
+                        trackStyleChange(time(), this[styleSheetId], StyleSheetOperation.ReplaceSync, arguments[0]);
+                    }                
+                }
+                return replaceSync.apply(this, arguments);
+            };
+        }
+    }    
 }
 
 export function checkDocumentStyles(documentNode: Document, timestamp: number): void {

diff --git a/packages/clarity-js/types/data.d.ts b/packages/clarity-js/types/data.d.ts
@@ -127,7 +127,8 @@ export const enum Metric {
 /**
  * @deprecated Move it to dimension as it'll report only last value
  */
-    InteractionNextPaint = 37
+    InteractionNextPaint = 37,
+    HistoryClear = 38
 }
 
 export const enum Dimension {

diff --git a/packages/clarity-js/types/layout.d.ts b/packages/clarity-js/types/layout.d.ts
@@ -156,7 +156,9 @@ export const enum JsonLD {
 export const enum Setting {
     LookAhead = 33, // 33ms
     MutationSuspendThreshold = 10, // Stop listening for mutations after hitting a threshold count
-    MutationActivePeriod = 3000 // Unit: milliseconds. Let mutations continue as normal during active periods of user interactions
+    MutationActivePeriod = 3000, // Unit: milliseconds. Let mutations continue as normal during active periods of user interactions
+    MaxMutationHistoryCount = 10000,
+    MaxMutationHistoryTime = 30000, // Unit: milliseconds. Maximum time to keep mutation history in memory
 }
 
 export const enum StyleSheetOperation {

diff --git a/packages/clarity-visualize/package.json b/packages/clarity-visualize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.7.59",
+  "version": "0.7.60",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",