Merge pull request #775 from microsoft/mn/cleanupObs

Fix memory leak issues with mutation observers

lerna.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.69",
+  "version": "0.7.70",
   "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.69",
+  "version": "0.7.70",
   "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.67"
+    "clarity-js": "^0.7.70"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.69",
+  "version": "0.7.70",
   "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.67",
-    "clarity-js": "^0.7.67",
-    "clarity-visualize": "^0.7.67"
+    "clarity-decode": "^0.7.70",
+    "clarity-js": "^0.7.70",
+    "clarity-visualize": "^0.7.70"
   },
   "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.69",
-  "version_name": "0.7.69",
+  "version": "0.7.70",
+  "version_name": "0.7.70",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

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

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

@@ -1,2 +1,2 @@
-let version = "0.7.69";
+let version = "0.7.70";
 export default version;

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

@@ -35,6 +35,7 @@ let throttleDelay: number = null;
 let activePeriod = null;
 let history: MutationHistory = {};
 let criticalPeriod = null;
+let observedNodes: WeakMap<Node, MutationObserver> = new WeakMap<Node, MutationObserver>();
 
 // We ignore mutations if these attributes are updated
 const IGNORED_ATTRIBUTES = ["data-google-query-id", "data-load-complete", "data-google-container-id"];
@@ -47,6 +48,7 @@ export function start(): void {
   activePeriod = 0;
   history = {};
   criticalPeriod = 0;
+  observedNodes = new WeakMap<Node, MutationObserver>();
 
   // Some popular open source libraries, like styled-components, optimize performance
   // by injecting CSS using insertRule API vs. appending text node. A side effect of
@@ -117,10 +119,16 @@ 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 {
+    // Cleanup old observer if present.
+    if (observedNodes.has(node)) {
+      observedNodes.get(node)?.disconnect();
+    }
+
     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 });
+      observedNodes.set(node, observer);
       observers.push(observer);
     }
   } catch (e) {

packages/clarity-visualize/package.json

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