@openreplay/tracker 16.2.2-beta.19 → 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,7 +29,7 @@ export type Options = Partial<AppOptions & ConsoleOptions & ExceptionOptions & I
         onFlagsLoad?: (flags: IFeatureFlag[]) => void;
     };
     __DISABLE_SECURE_MODE?: boolean;
-    checkCssInterval?: number;
+    css: CssRulesOptions;
 };
 export default class API {
     readonly options: Partial<Options>;

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

@@ -1,4 +1,16 @@
 import type App from '../app/index.js';
-export default function (app: App, opts: {
+export interface CssRulesOptions {
     checkCssInterval?: number;
-}): void;
+    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 };
     }
 }
 
@@ -4042,7 +4042,6 @@ 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;
@@ -4052,7 +4051,6 @@ 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);
@@ -5204,7 +5202,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.2.2-beta.19'; // 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;
@@ -8039,6 +8037,11 @@ function Viewport (app) {
     app.ticker.attach(sendSetViewportSize, 5, false);
 }
 
+const defaults = {
+    checkCssInterval: 200,
+    scanInMemoryCSS: false,
+    checkLimit: undefined,
+};
 function CSSRules (app, opts) {
     if (app === null)
         return;
@@ -8046,34 +8049,48 @@ function CSSRules (app, opts) {
         app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
         return;
     }
-    // Track CSS rule snapshots by sheetID:index
+    const options = { ...defaults, ...opts };
+    //  sheetID:index -> ruleText
     const ruleSnapshots = new Map();
     let checkInterval = null;
-    const checkIntervalMs = opts.checkCssInterval || 200; // Check every 200ms
-    // Check all rules for changes
+    const trackedSheets = new Set();
+    const checkIntervalMs = options.checkCssInterval || 200;
+    let checkIterations = {};
     function checkRuleChanges() {
-        for (let i = 0; i < document.styleSheets.length; i++) {
+        if (!options.scanInMemoryCSS)
+            return;
+        const allSheets = trackedSheets.values();
+        for (const sheet of allSheets) {
             try {
-                const sheet = document.styleSheets[i];
                 const sheetID = styleSheetIDMap.get(sheet);
                 if (!sheetID)
                     continue;
-                // Check each rule in the sheet
+                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 newText = rule.cssText;
                         const oldText = ruleSnapshots.get(key);
+                        const newText = rule.cssText;
                         if (oldText !== newText) {
-                            // Rule is new or changed
                             if (oldText !== undefined) {
-                                // Rule changed - send update
+                                // Rule is changed
                                 app.send(AdoptedSSDeleteRule(sheetID, j));
                                 app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
                             }
                             else {
-                                // Rule added - send insert
+                                // Rule added
                                 app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
                             }
                             ruleSnapshots.set(key, newText);
@@ -8083,7 +8100,6 @@ function CSSRules (app, opts) {
                         /* 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);
@@ -8094,21 +8110,30 @@ function CSSRules (app, opts) {
             }
             catch (e) {
                 /* Skip inaccessible sheets */
+                trackedSheets.delete(sheet);
             }
         }
     }
-    // Standard API hooks
+    const emptyRuleReg = /{\s*}/;
+    function isRuleEmpty(rule) {
+        return emptyRuleReg.test(rule);
+    }
     const sendInsertDeleteRule = app.safe((sheet, index, rule) => {
         const sheetID = styleSheetIDMap.get(sheet);
         if (!sheetID)
             return;
         if (typeof rule === 'string') {
             app.send(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()));
-            ruleSnapshots.set(`${sheetID}:${index}`, rule);
+            if (isRuleEmpty(rule)) {
+                ruleSnapshots.set(`${sheetID}:${index}`, rule);
+                trackedSheets.add(sheet);
+            }
         }
         else {
             app.send(AdoptedSSDeleteRule(sheetID, index));
-            ruleSnapshots.delete(`${sheetID}:${index}`);
+            if (ruleSnapshots.has(`${sheetID}:${index}`)) {
+                ruleSnapshots.delete(`${sheetID}:${index}`);
+            }
         }
     });
     const sendReplaceGroupingRule = app.safe((rule) => {
@@ -8126,7 +8151,10 @@ function CSSRules (app, opts) {
         if (idx >= 0) {
             app.send(AdoptedSSInsertRuleURLBased(sheetID, cssText, idx, app.getBaseHref()));
             app.send(AdoptedSSDeleteRule(sheetID, idx + 1));
-            ruleSnapshots.set(`${sheetID}:${idx}`, cssText);
+            if (isRuleEmpty(cssText)) {
+                ruleSnapshots.set(`${sheetID}:${idx}`, cssText);
+                trackedSheets.add(sheet);
+            }
         }
     });
     // Patch prototype methods
@@ -8156,10 +8184,8 @@ function CSSRules (app, opts) {
             return result;
         };
     });
-    // Apply patches
     patchContext(window);
     app.observer.attachContextCallback(patchContext);
-    // Track style nodes
     app.nodes.attachNodeCallback((node) => {
         if (!hasTag(node, 'style') || !node.sheet)
             return;
@@ -8181,9 +8207,8 @@ function CSSRules (app, opts) {
             }
         }
     });
-    // Start checking and setup cleanup
     function startChecking() {
-        if (checkInterval)
+        if (checkInterval || !options.scanInMemoryCSS)
             return;
         checkInterval = window.setInterval(checkRuleChanges, checkIntervalMs);
     }
@@ -9758,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.2-beta.19',
+                trackerVersion: '16.3.0-beta.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9857,7 +9882,7 @@ class API {
         Mouse(app, options.mouse);
         // inside iframe, we ignore viewport scroll
         Scroll(app, this.crossdomainMode);
-        CSSRules(app, options);
+        CSSRules(app, options.css);
         ConstructedStyleSheets(app);
         Console(app, options);
         Exception(app, options);