@openreplay/tracker 16.2.1 → 16.2.2-beta.19

package/dist/lib/index.js

@@ -4042,6 +4042,7 @@ function ConstructedStyleSheets (app) {
             return replace.call(this, text).then((sheet) => {
                 const sheetID = styleSheetIDMap.get(this);
                 if (sheetID) {
+                    console.log('replace');
                     app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
                 }
                 return sheet;
@@ -4051,6 +4052,7 @@ function ConstructedStyleSheets (app) {
         context.CSSStyleSheet.prototype.replaceSync = function (text) {
             const sheetID = styleSheetIDMap.get(this);
             if (sheetID) {
+                console.log('replaceSync');
                 app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
             }
             return replaceSync.call(this, text);
@@ -5202,7 +5204,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.2.1'; // TODO: version compatability check inside each plugin.
+        this.version = '16.2.2-beta.19'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -8037,60 +8039,107 @@ function Viewport (app) {
     app.ticker.attach(sendSetViewportSize, 5, false);
 }
 
-function CSSRules (app) {
-    if (app === null) {
+function CSSRules (app, opts) {
+    if (app === null)
         return;
-    }
     if (!window.CSSStyleSheet) {
         app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
         return;
     }
+    // Track CSS rule snapshots by sheetID:index
+    const ruleSnapshots = new Map();
+    let checkInterval = null;
+    const checkIntervalMs = opts.checkCssInterval || 200; // Check every 200ms
+    // Check all rules for changes
+    function checkRuleChanges() {
+        for (let i = 0; i < document.styleSheets.length; i++) {
+            try {
+                const sheet = document.styleSheets[i];
+                const sheetID = styleSheetIDMap.get(sheet);
+                if (!sheetID)
+                    continue;
+                // Check each rule in the sheet
+                for (let j = 0; j < sheet.cssRules.length; j++) {
+                    try {
+                        const rule = sheet.cssRules[j];
+                        const key = `${sheetID}:${j}`;
+                        const newText = rule.cssText;
+                        const oldText = ruleSnapshots.get(key);
+                        if (oldText !== newText) {
+                            // Rule is new or changed
+                            if (oldText !== undefined) {
+                                // Rule changed - send update
+                                app.send(AdoptedSSDeleteRule(sheetID, j));
+                                app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
+                            }
+                            else {
+                                // Rule added - send insert
+                                app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
+                            }
+                            ruleSnapshots.set(key, newText);
+                        }
+                    }
+                    catch (e) {
+                        /* Skip inaccessible rules */
+                    }
+                }
+                // Check for deleted rules
+                const keysToCheck = Array.from(ruleSnapshots.keys()).filter((key) => key.startsWith(`${sheetID}:`));
+                for (const key of keysToCheck) {
+                    const index = parseInt(key.split(':')[1], 10);
+                    if (index >= sheet.cssRules.length) {
+                        ruleSnapshots.delete(key);
+                    }
+                }
+            }
+            catch (e) {
+                /* Skip inaccessible sheets */
+            }
+        }
+    }
+    // Standard API hooks
     const sendInsertDeleteRule = app.safe((sheet, index, rule) => {
         const sheetID = styleSheetIDMap.get(sheet);
-        if (!sheetID) {
-            // OK-case. Sheet haven't been registered yet. Rules will be sent on registration.
+        if (!sheetID)
             return;
-        }
         if (typeof rule === 'string') {
             app.send(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()));
+            ruleSnapshots.set(`${sheetID}:${index}`, rule);
         }
         else {
             app.send(AdoptedSSDeleteRule(sheetID, index));
+            ruleSnapshots.delete(`${sheetID}:${index}`);
         }
     });
-    // TODO: proper rule insertion/removal (how?)
     const sendReplaceGroupingRule = app.safe((rule) => {
         let topmostRule = rule;
-        while (topmostRule.parentRule) {
+        while (topmostRule.parentRule)
             topmostRule = topmostRule.parentRule;
-        }
         const sheet = topmostRule.parentStyleSheet;
-        if (!sheet) {
-            app.debug.warn('No parent StyleSheet found for', topmostRule, rule);
+        if (!sheet)
             return;
-        }
         const sheetID = styleSheetIDMap.get(sheet);
-        if (!sheetID) {
-            app.debug.warn('No sheedID found for', sheet, styleSheetIDMap);
+        if (!sheetID)
             return;
-        }
         const cssText = topmostRule.cssText;
-        const ruleList = sheet.cssRules;
-        const idx = Array.from(ruleList).indexOf(topmostRule);
+        const idx = Array.from(sheet.cssRules).indexOf(topmostRule);
         if (idx >= 0) {
             app.send(AdoptedSSInsertRuleURLBased(sheetID, cssText, idx, app.getBaseHref()));
-            app.send(AdoptedSSDeleteRule(sheetID, idx + 1)); // Remove previous clone
-        }
-        else {
-            app.debug.warn('Rule index not found in', sheet, topmostRule);
+            app.send(AdoptedSSDeleteRule(sheetID, idx + 1));
+            ruleSnapshots.set(`${sheetID}:${idx}`, cssText);
         }
     });
+    // Patch prototype methods
     const patchContext = app.safe((context) => {
+        if (context.__css_tracking_patched__)
+            return;
+        context.__css_tracking_patched__ = true;
         const { insertRule, deleteRule } = context.CSSStyleSheet.prototype;
         const { insertRule: groupInsertRule, deleteRule: groupDeleteRule } = context.CSSGroupingRule.prototype;
         context.CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
-            sendInsertDeleteRule(this, index, rule);
-            return insertRule.call(this, rule, index);
+            const result = insertRule.call(this, rule, index);
+            sendInsertDeleteRule(this, result, rule);
+            return result;
         };
         context.CSSStyleSheet.prototype.deleteRule = function (index) {
             sendInsertDeleteRule(this, index);
@@ -8101,33 +8150,50 @@ function CSSRules (app) {
             sendReplaceGroupingRule(this);
             return result;
         };
-        context.CSSGroupingRule.prototype.deleteRule = function (index = 0) {
+        context.CSSGroupingRule.prototype.deleteRule = function (index) {
             const result = groupDeleteRule.call(this, index);
             sendReplaceGroupingRule(this);
             return result;
         };
     });
+    // Apply patches
     patchContext(window);
     app.observer.attachContextCallback(patchContext);
+    // Track style nodes
     app.nodes.attachNodeCallback((node) => {
-        if (!hasTag(node, 'style') || !node.sheet) {
+        if (!hasTag(node, 'style') || !node.sheet)
+            return;
+        if (node.textContent !== null && node.textContent.trim().length > 0)
             return;
-        }
-        if (node.textContent !== null && node.textContent.trim().length > 0) {
-            return; // Non-virtual styles captured by the observer as a text
-        }
         const nodeID = app.nodes.getID(node);
-        if (!nodeID) {
+        if (!nodeID)
             return;
-        }
         const sheet = node.sheet;
         const sheetID = nextID();
         styleSheetIDMap.set(sheet, sheetID);
         app.send(AdoptedSSAddOwner(sheetID, nodeID));
-        const rules = sheet.cssRules;
-        for (let i = 0; i < rules.length; i++) {
-            sendInsertDeleteRule(sheet, i, rules[i].cssText);
+        for (let i = 0; i < sheet.cssRules.length; i++) {
+            try {
+                sendInsertDeleteRule(sheet, i, sheet.cssRules[i].cssText);
+            }
+            catch (e) {
+                // Skip inaccessible rules
+            }
+        }
+    });
+    // Start checking and setup cleanup
+    function startChecking() {
+        if (checkInterval)
+            return;
+        checkInterval = window.setInterval(checkRuleChanges, checkIntervalMs);
+    }
+    setTimeout(startChecking, 50);
+    app.attachStopCallback(() => {
+        if (checkInterval) {
+            clearInterval(checkInterval);
+            checkInterval = null;
         }
+        ruleSnapshots.clear();
     });
 }
 
@@ -9692,7 +9758,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.2.1',
+                trackerVersion: '16.2.2-beta.19',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9791,7 +9857,7 @@ class API {
         Mouse(app, options.mouse);
         // inside iframe, we ignore viewport scroll
         Scroll(app, this.crossdomainMode);
-        CSSRules(app);
+        CSSRules(app, options);
         ConstructedStyleSheets(app);
         Console(app, options);
         Exception(app, options);