@openreplay/tracker 16.2.1 → 16.3.0-beta.0

package/dist/cjs/main/index.d.ts

@@ -13,6 +13,7 @@ import type { Options as TimingOptions } from './modules/timing.js';
 import type { Options as NetworkOptions } from './modules/network.js';
 import type { MouseHandlerOptions } from './modules/mouse.js';
 import type { SessionInfo } from './app/session.js';
+import type { CssRulesOptions } from './modules/cssrules.js';
 import type { StartOptions } from './app/index.js';
 import type { StartPromiseReturn } from './app/index.js';
 export type Options = Partial<AppOptions & ConsoleOptions & ExceptionOptions & InputOptions & PerformanceOptions & TimingOptions> & {
@@ -28,6 +29,7 @@ export type Options = Partial<AppOptions & ConsoleOptions & ExceptionOptions & I
         onFlagsLoad?: (flags: IFeatureFlag[]) => void;
     };
     __DISABLE_SECURE_MODE?: boolean;
+    css: CssRulesOptions;
 };
 export default class API {
     readonly options: Partial<Options>;

package/dist/cjs/main/modules/cssrules.d.ts

@@ -1,2 +1,16 @@
 import type App from '../app/index.js';
-export default function (app: App | null): void;
+export interface CssRulesOptions {
+    checkCssInterval?: number;
+    scanInMemoryCSS?: boolean;
+    /**
+    Useful for cases where you expect limited amount of mutations
+  
+    i.e when sheets are hydrated on client after initial render.
+  
+    if you want to observe for x seconds, do (x*1000)/checkCssInterval = checkLimit
+  
+    applied to each stylesheet individually.
+    */
+    checkLimit?: number;
+}
+export default function (app: App, opts: CssRulesOptions): void;

package/dist/lib/entry.js

@@ -3560,7 +3560,7 @@ function isNodeStillActive(node) {
         return [false, e];
     }
 }
-const defaults = {
+const defaults$1 = {
     interval: SECOND * 30,
     batchSize: 2500,
     enabled: true,
@@ -3588,7 +3588,7 @@ class Maintainer {
                 clearInterval(this.interval);
             }
         };
-        this.options = { ...defaults, ...options };
+        this.options = { ...defaults$1, ...options };
     }
 }
 
@@ -5202,7 +5202,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.3.0-beta.0'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -8037,60 +8037,137 @@ function Viewport (app) {
     app.ticker.attach(sendSetViewportSize, 5, false);
 }
 
-function CSSRules (app) {
-    if (app === null) {
+const defaults = {
+    checkCssInterval: 200,
+    scanInMemoryCSS: false,
+    checkLimit: undefined,
+};
+function CSSRules (app, opts) {
+    if (app === null)
         return;
-    }
     if (!window.CSSStyleSheet) {
         app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
         return;
     }
+    const options = { ...defaults, ...opts };
+    //  sheetID:index -> ruleText
+    const ruleSnapshots = new Map();
+    let checkInterval = null;
+    const trackedSheets = new Set();
+    const checkIntervalMs = options.checkCssInterval || 200;
+    let checkIterations = {};
+    function checkRuleChanges() {
+        if (!options.scanInMemoryCSS)
+            return;
+        const allSheets = trackedSheets.values();
+        for (const sheet of allSheets) {
+            try {
+                const sheetID = styleSheetIDMap.get(sheet);
+                if (!sheetID)
+                    continue;
+                if (options.checkLimit) {
+                    if (!checkIterations[sheetID]) {
+                        checkIterations[sheetID] = 0;
+                    }
+                    else {
+                        checkIterations[sheetID]++;
+                    }
+                    if (checkIterations[sheetID] > options.checkLimit) {
+                        trackedSheets.delete(sheet);
+                        return;
+                    }
+                }
+                for (let j = 0; j < sheet.cssRules.length; j++) {
+                    try {
+                        const rule = sheet.cssRules[j];
+                        const key = `${sheetID}:${j}`;
+                        const oldText = ruleSnapshots.get(key);
+                        const newText = rule.cssText;
+                        if (oldText !== newText) {
+                            if (oldText !== undefined) {
+                                // Rule is changed
+                                app.send(AdoptedSSDeleteRule(sheetID, j));
+                                app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
+                            }
+                            else {
+                                // Rule added
+                                app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
+                            }
+                            ruleSnapshots.set(key, newText);
+                        }
+                    }
+                    catch (e) {
+                        /* Skip inaccessible 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 */
+                trackedSheets.delete(sheet);
+            }
+        }
+    }
+    const emptyRuleReg = /{\s*}/;
+    function isRuleEmpty(rule) {
+        return emptyRuleReg.test(rule);
+    }
     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()));
+            if (isRuleEmpty(rule)) {
+                ruleSnapshots.set(`${sheetID}:${index}`, rule);
+                trackedSheets.add(sheet);
+            }
         }
         else {
             app.send(AdoptedSSDeleteRule(sheetID, index));
+            if (ruleSnapshots.has(`${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));
+            if (isRuleEmpty(cssText)) {
+                ruleSnapshots.set(`${sheetID}:${idx}`, cssText);
+                trackedSheets.add(sheet);
+            }
         }
     });
+    // 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,7 +8178,7 @@ 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;
@@ -8110,24 +8187,38 @@ function CSSRules (app) {
     patchContext(window);
     app.observer.attachContextCallback(patchContext);
     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
+            }
+        }
+    });
+    function startChecking() {
+        if (checkInterval || !options.scanInMemoryCSS)
+            return;
+        checkInterval = window.setInterval(checkRuleChanges, checkIntervalMs);
+    }
+    setTimeout(startChecking, 50);
+    app.attachStopCallback(() => {
+        if (checkInterval) {
+            clearInterval(checkInterval);
+            checkInterval = null;
         }
+        ruleSnapshots.clear();
     });
 }
 
@@ -9692,7 +9783,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.3.0-beta.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9791,7 +9882,7 @@ class API {
         Mouse(app, options.mouse);
         // inside iframe, we ignore viewport scroll
         Scroll(app, this.crossdomainMode);
-        CSSRules(app);
+        CSSRules(app, options.css);
         ConstructedStyleSheets(app);
         Console(app, options);
         Exception(app, options);