@openreplay/tracker 16.1.4 → 16.2.0

package/dist/lib/index.js

@@ -3698,6 +3698,381 @@ class Nodes {
     }
 }
 
+let fakeIdHolder = 1000000 * 99;
+function inlineRemoteCss(node, id, baseHref, getNextID, insertRule, addOwner, forceFetch, sendPlain, onPlain) {
+    const sheetId = sendPlain ? null : getNextID();
+    if (!sendPlain) {
+        addOwner(sheetId, id);
+    }
+    const sheet = node.sheet;
+    if (sheet && !forceFetch) {
+        try {
+            const cssText = stringifyStylesheet(sheet);
+            if (cssText) {
+                processCssText(cssText);
+                return;
+            }
+        }
+        catch (e) {
+            // console.warn("Could not stringify sheet, falling back to fetch:", e);
+        }
+    }
+    // Fall back to fetching if we couldn't get or stringify the sheet
+    if (node.href) {
+        fetch(node.href)
+            .then(response => {
+            if (!response.ok) {
+                throw new Error(`response status ${response.status}`);
+            }
+            return response.text();
+        })
+            .then(cssText => {
+            if (sendPlain && onPlain) {
+                onPlain(cssText, fakeIdHolder++);
+            }
+            else {
+                processCssText(cssText);
+            }
+        })
+            .catch(error => {
+            console.error(`OpenReplay: Failed to fetch CSS from ${node.href}:`, error);
+        });
+    }
+    function processCssText(cssText) {
+        // Remove comments
+        cssText = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
+        // Parse and process the CSS text to extract rules
+        const ruleTexts = parseCSS(cssText);
+        for (let i = 0; i < ruleTexts.length; i++) {
+            insertRule(sheetId, ruleTexts[i], i, baseHref);
+        }
+    }
+    function parseCSS(cssText) {
+        const rules = [];
+        let inComment = false;
+        let inString = false;
+        let stringChar = '';
+        let braceLevel = 0;
+        let currentRule = '';
+        for (let i = 0; i < cssText.length; i++) {
+            const char = cssText[i];
+            const nextChar = cssText[i + 1] || '';
+            // comments
+            if (!inString && char === '/' && nextChar === '*') {
+                inComment = true;
+                i++; // Skip the next character
+                continue;
+            }
+            if (inComment) {
+                if (char === '*' && nextChar === '/') {
+                    inComment = false;
+                    i++; // Skip the next character
+                }
+                continue;
+            }
+            if (!inString && (char === '"' || char === "'")) {
+                inString = true;
+                stringChar = char;
+                currentRule += char;
+                continue;
+            }
+            if (inString) {
+                currentRule += char;
+                if (char === stringChar && cssText[i - 1] !== '\\') {
+                    inString = false;
+                }
+                continue;
+            }
+            currentRule += char;
+            if (char === '{') {
+                braceLevel++;
+            }
+            else if (char === '}') {
+                braceLevel--;
+                if (braceLevel === 0) {
+                    // End of a top-level rule
+                    rules.push(currentRule.trim());
+                    currentRule = '';
+                }
+            }
+        }
+        // Handle any remaining text (should be rare)
+        if (currentRule.trim()) {
+            rules.push(currentRule.trim());
+        }
+        return rules;
+    }
+    function stringifyStylesheet(s) {
+        try {
+            const rules = s.rules || s.cssRules;
+            if (!rules) {
+                return null;
+            }
+            let sheetHref = s.href;
+            if (!sheetHref && s.ownerNode && s.ownerNode.ownerDocument) {
+                // an inline <style> element
+                sheetHref = s.ownerNode.ownerDocument.location.href;
+            }
+            const stringifiedRules = Array.from(rules, (rule) => stringifyRule(rule, sheetHref)).join('');
+            return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+        }
+        catch (error) {
+            return null;
+        }
+    }
+    function stringifyRule(rule, sheetHref) {
+        if (isCSSImportRule(rule)) {
+            let importStringified;
+            try {
+                importStringified =
+                    // for same-origin stylesheets,
+                    // we can access the imported stylesheet rules directly
+                    stringifyStylesheet(rule.styleSheet) ||
+                        // work around browser issues with the raw string `@import url(...)` statement
+                        escapeImportStatement(rule);
+            }
+            catch (error) {
+                importStringified = rule.cssText;
+            }
+            if (rule.styleSheet.href) {
+                // url()s within the imported stylesheet are relative to _that_ sheet's href
+                return absolutifyURLs(importStringified, rule.styleSheet.href);
+            }
+            return importStringified;
+        }
+        else {
+            let ruleStringified = rule.cssText;
+            if (isCSSStyleRule(rule) && rule.selectorText.includes(':')) {
+                // Safari does not escape selectors with : properly
+                ruleStringified = fixSafariColons(ruleStringified);
+            }
+            if (sheetHref) {
+                return absolutifyURLs(ruleStringified, sheetHref);
+            }
+            return ruleStringified;
+        }
+    }
+    function fixBrowserCompatibilityIssuesInCSS(cssText) {
+        // Fix for Chrome's handling of webkit-background-clip
+        if (cssText.includes(' background-clip: text;') &&
+            !cssText.includes(' -webkit-background-clip: text;')) {
+            cssText = cssText.replace(/\sbackground-clip:\s*text;/g, ' -webkit-background-clip: text; background-clip: text;');
+        }
+        return cssText;
+    }
+    function escapeImportStatement(rule) {
+        const { cssText } = rule;
+        if (cssText.split('"').length < 3)
+            return cssText;
+        const statement = ['@import', `url(${JSON.stringify(rule.href)})`];
+        if (rule.layerName === '') {
+            statement.push(`layer`);
+        }
+        else if (rule.layerName) {
+            statement.push(`layer(${rule.layerName})`);
+        }
+        if (rule.supportsText) {
+            statement.push(`supports(${rule.supportsText})`);
+        }
+        if (rule.media.length) {
+            statement.push(rule.media.mediaText);
+        }
+        return statement.join(' ') + ';';
+    }
+    function fixSafariColons(cssStringified) {
+        const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+        return cssStringified.replace(regex, '$1\\$2');
+    }
+    function isCSSImportRule(rule) {
+        return 'styleSheet' in rule;
+    }
+    function isCSSStyleRule(rule) {
+        return 'selectorText' in rule;
+    }
+    function absolutifyURLs(cssText, href) {
+        if (!cssText)
+            return '';
+        const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
+        const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
+        const URL_WWW_MATCH = /^www\..*/i;
+        const DATA_URI = /^(data:)([^,]*),(.*)/i;
+        return cssText.replace(URL_IN_CSS_REF, (origin, quote1, path1, quote2, path2, path3) => {
+            const filePath = path1 || path2 || path3;
+            const maybeQuote = quote1 || quote2 || '';
+            if (!filePath) {
+                return origin;
+            }
+            if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
+                return `url(${maybeQuote}${filePath}${maybeQuote})`;
+            }
+            if (DATA_URI.test(filePath)) {
+                return `url(${maybeQuote}${filePath}${maybeQuote})`;
+            }
+            if (filePath[0] === '/') {
+                return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`;
+            }
+            const stack = href.split('/');
+            const parts = filePath.split('/');
+            stack.pop();
+            for (const part of parts) {
+                if (part === '.') {
+                    continue;
+                }
+                else if (part === '..') {
+                    stack.pop();
+                }
+                else {
+                    stack.push(part);
+                }
+            }
+            return `url(${maybeQuote}${stack.join('/')}${maybeQuote})`;
+        });
+    }
+    function extractOrigin(url) {
+        let origin = '';
+        if (url.indexOf('//') > -1) {
+            origin = url.split('/').slice(0, 3).join('/');
+        }
+        else {
+            origin = url.split('/')[0];
+        }
+        origin = origin.split('?')[0];
+        return origin;
+    }
+}
+
+function hasAdoptedSS(node) {
+    return (isRootNode(node) &&
+        // @ts-ignore
+        !!node.adoptedStyleSheets);
+}
+// TODO: encapsulate to be init-ed on-start and join with cssrules.ts under one folder
+let _id = 0xf;
+function nextID() {
+    return _id++;
+}
+const styleSheetIDMap = new Map();
+function ConstructedStyleSheets (app) {
+    if (app === null) {
+        return;
+    }
+    if (!hasAdoptedSS(document)) {
+        return;
+    }
+    const styleSheetIDMap = new Map();
+    const adoptedStyleSheetsOwnings = new Map();
+    const sendAdoptedStyleSheetsUpdate = (root) => setTimeout(() => {
+        let nodeID = app.nodes.getID(root);
+        if (root === document) {
+            nodeID = 0; // main document doesn't have nodeID. ID count starts from the documentElement
+        }
+        if (nodeID === undefined) {
+            return;
+        }
+        let pastOwning = adoptedStyleSheetsOwnings.get(nodeID);
+        if (!pastOwning) {
+            pastOwning = [];
+        }
+        const nowOwning = [];
+        const styleSheets = root.adoptedStyleSheets;
+        if (styleSheets && Symbol.iterator in styleSheets) {
+            for (const s of styleSheets) {
+                let sheetID = styleSheetIDMap.get(s);
+                const init = !sheetID;
+                if (!sheetID) {
+                    sheetID = nextID();
+                    styleSheetIDMap.set(s, sheetID);
+                }
+                if (!pastOwning.includes(sheetID)) {
+                    app.send(AdoptedSSAddOwner(sheetID, nodeID));
+                }
+                if (init) {
+                    const rules = s.cssRules;
+                    for (let i = 0; i < rules.length; i++) {
+                        app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
+                    }
+                }
+                nowOwning.push(sheetID);
+            }
+        }
+        if (Symbol.iterator in pastOwning) {
+            for (const sheetID of pastOwning) {
+                if (!nowOwning.includes(sheetID)) {
+                    app.send(AdoptedSSRemoveOwner(sheetID, nodeID));
+                }
+            }
+        }
+        adoptedStyleSheetsOwnings.set(nodeID, nowOwning);
+    }, 20); // Mysterious bug:
+    /* On the page https://explore.fast.design/components/fast-accordion
+      the only rule inside the only adoptedStyleSheet of the iframe-s document
+      gets changed during first milliseconds after the load.
+      However, none of the documented methods (replace, insertRule) is triggered.
+      The rule is not substituted (remains the same object), however the text gets changed.
+    */
+    function patchAdoptedStyleSheets(prototype) {
+        const nativeAdoptedStyleSheetsDescriptor = Object.getOwnPropertyDescriptor(prototype, 'adoptedStyleSheets');
+        if (nativeAdoptedStyleSheetsDescriptor) {
+            Object.defineProperty(prototype, 'adoptedStyleSheets', {
+                ...nativeAdoptedStyleSheetsDescriptor,
+                set: function (value) {
+                    // @ts-ignore
+                    const retVal = nativeAdoptedStyleSheetsDescriptor.set.call(this, value);
+                    sendAdoptedStyleSheetsUpdate(this);
+                    return retVal;
+                },
+            });
+        }
+    }
+    const patchContext = (context) => {
+        // @ts-ignore
+        if (context.__openreplay_adpss_patched__) {
+            return;
+        }
+        else {
+            // @ts-ignore
+            context.__openreplay_adpss_patched__ = true;
+        }
+        patchAdoptedStyleSheets(context.Document.prototype);
+        patchAdoptedStyleSheets(context.ShadowRoot.prototype);
+        //@ts-ignore TODO: upgrade ts to 4.8+
+        const { replace, replaceSync } = context.CSSStyleSheet.prototype;
+        //@ts-ignore
+        context.CSSStyleSheet.prototype.replace = function (text) {
+            return replace.call(this, text).then((sheet) => {
+                const sheetID = styleSheetIDMap.get(this);
+                if (sheetID) {
+                    app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
+                }
+                return sheet;
+            });
+        };
+        //@ts-ignore
+        context.CSSStyleSheet.prototype.replaceSync = function (text) {
+            const sheetID = styleSheetIDMap.get(this);
+            if (sheetID) {
+                app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
+            }
+            return replaceSync.call(this, text);
+        };
+    };
+    patchContext(window);
+    app.observer.attachContextCallback(app.safe(patchContext));
+    app.attachStopCallback(() => {
+        styleSheetIDMap.clear();
+        adoptedStyleSheetsOwnings.clear();
+    });
+    // So far main Document is not triggered with nodeCallbacks
+    app.attachStartCallback(() => {
+        sendAdoptedStyleSheetsUpdate(document);
+    });
+    app.nodes.attachNodeCallback((node) => {
+        if (hasAdoptedSS(node)) {
+            sendAdoptedStyleSheetsUpdate(node);
+        }
+    });
+}
+
 const iconCache = {};
 const svgUrlCache = {};
 async function parseUseEl(useElement, mode, domParser) {
@@ -3716,7 +4091,7 @@ async function parseUseEl(useElement, mode, domParser) {
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
           ${symbol.innerHTML}
         </svg>
-      `.trim();
+      `;
                 iconCache[symbolId] = inlineSvg;
                 return inlineSvg;
             }
@@ -3776,7 +4151,7 @@ async function parseUseEl(useElement, mode, domParser) {
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="${symbol.getAttribute('viewBox') || '0 0 24 24'}">
           ${symbol.innerHTML}
         </svg>
-      `.trim();
+      `;
             iconCache[symbolId] = inlineSvg;
             return inlineSvg;
         }
@@ -3823,7 +4198,7 @@ var RecentsType;
     RecentsType[RecentsType["Changed"] = 2] = "Changed";
 })(RecentsType || (RecentsType = {}));
 class Observer {
-    constructor(app, isTopContext = false, options = { disableSprites: false }) {
+    constructor(app, isTopContext = false, options = {}) {
         this.app = app;
         this.isTopContext = isTopContext;
         this.commited = [];
@@ -3832,8 +4207,17 @@ class Observer {
         this.attributesMap = new Map();
         this.textSet = new Set();
         this.disableSprites = false;
+        /**
+         * this option means that, instead of using link element with href to load css,
+         * we will try to parse the css text instead and send it as css rules set
+         * can (and will) affect performance
+         * */
+        this.inlineRemoteCss = false;
+        this.inlinerOptions = undefined;
         this.domParser = new DOMParser();
-        this.disableSprites = options.disableSprites;
+        this.disableSprites = Boolean(options.disableSprites);
+        this.inlineRemoteCss = Boolean(options.inlineRemoteCss);
+        this.inlinerOptions = options.inlinerOptions;
         this.observer = createMutationObserver(this.app.safe((mutations) => {
             for (const mutation of mutations) {
                 // mutations order is sequential
@@ -3907,10 +4291,12 @@ class Observer {
                 false);
                 let removed = 0;
                 const totalBeforeRemove = this.app.nodes.getNodeCount();
+                const contentDocument = iframe.contentDocument;
+                const nodesUnregister = this.app.nodes.unregisterNode.bind(this.app.nodes);
                 while (walker.nextNode()) {
-                    if (!iframe.contentDocument.contains(walker.currentNode)) {
+                    if (!contentDocument.contains(walker.currentNode)) {
                         removed += 1;
-                        this.app.nodes.unregisterNode(walker.currentNode);
+                        nodesUnregister(walker.currentNode);
                     }
                 }
                 const removedPercent = Math.floor((removed / totalBeforeRemove) * 100);
@@ -3922,7 +4308,7 @@ class Observer {
     }
     sendNodeAttribute(id, node, name, value) {
         if (isSVGElement(node)) {
-            if (name.substring(0, 6) === 'xlink:') {
+            if (name.startsWith('xlink:')) {
                 name = name.substring(6);
             }
             if (value === null) {
@@ -3971,6 +4357,23 @@ class Observer {
             return;
         }
         if (name === 'style' || (name === 'href' && hasTag(node, 'link'))) {
+            if ('rel' in node && node.rel === 'stylesheet' && this.inlineRemoteCss) {
+                setTimeout(() => {
+                    inlineRemoteCss(
+                    // @ts-ignore
+                    node, id, this.app.getBaseHref(), nextID, (id, cssText, index, baseHref) => {
+                        this.app.send(AdoptedSSInsertRuleURLBased(id, cssText, index, baseHref));
+                    }, (sheetId, ownerId) => {
+                        this.app.send(AdoptedSSAddOwner(sheetId, ownerId));
+                    }, this.inlinerOptions?.forceFetch, this.inlinerOptions?.forcePlain, (cssText, fakeTextId) => {
+                        this.app.send(CreateTextNode(fakeTextId, id, 0));
+                        setTimeout(() => {
+                            this.app.send(SetCSSDataURLBased(fakeTextId, cssText, this.app.getBaseHref()));
+                        }, 10);
+                    });
+                }, 0);
+                return;
+            }
             this.app.send(SetNodeAttributeURLBased(id, name, value, this.app.getBaseHref()));
             return;
         }
@@ -4050,7 +4453,8 @@ class Observer {
         if (isRootNode(node)) {
             return true;
         }
-        const parent = node.parentNode;
+        // @ts-ignore SALESFORCE
+        const parent = node.assignedSlot ? node.assignedSlot : node.parentNode;
         let parentID;
         // Disable parent check for the upper context HTMLHtmlElement, because it is root there... (before)
         // TODO: get rid of "special" cases (there is an issue with CreateDocument altered behaviour though)
@@ -4107,7 +4511,12 @@ class Observer {
                         el.style.width = `${width}px`;
                         el.style.height = `${height}px`;
                     }
-                    this.app.send(CreateElementNode(id, parentID, index, el.tagName, isSVGElement(node)));
+                    if ('rel' in el && el.rel === 'stylesheet' && this.inlineRemoteCss) {
+                        this.app.send(CreateElementNode(id, parentID, index, 'STYLE', false));
+                    }
+                    else {
+                        this.app.send(CreateElementNode(id, parentID, index, el.tagName, isSVGElement(node)));
+                    }
                 }
                 for (let i = 0; i < el.attributes.length; i++) {
                     const attr = el.attributes[i];
@@ -4155,12 +4564,12 @@ class Observer {
     }
     commitNodes(isStart = false) {
         let node;
-        this.recents.forEach((type, id) => {
+        for (const [id, type] of this.recents.entries()) {
             this.commitNode(id);
             if (type === RecentsType.New && (node = this.app.nodes.getNode(id))) {
                 this.app.nodes.callNodeCallbacks(node, isStart);
             }
-        });
+        }
         this.clear();
     }
     // ISSSUE (nodeToBinde should be the same as node in all cases. Look at the comment about 0-node at the beginning of the file.)
@@ -4282,12 +4691,20 @@ class IFrameOffsets {
     }
 }
 
+var InlineCssMode;
+(function (InlineCssMode) {
+    InlineCssMode[InlineCssMode["None"] = 0] = "None";
+    InlineCssMode[InlineCssMode["RemoteOnly"] = 1] = "RemoteOnly";
+    InlineCssMode[InlineCssMode["RemoteWithForceFetch"] = 2] = "RemoteWithForceFetch";
+    InlineCssMode[InlineCssMode["All"] = 3] = "All";
+})(InlineCssMode || (InlineCssMode = {}));
 const attachShadowNativeFn = IN_BROWSER ? Element.prototype.attachShadow : () => new ShadowRoot();
 class TopObserver extends Observer {
     constructor(params) {
         const opts = Object.assign({
             captureIFrames: true,
             disableSprites: false,
+            inlineCss: 0,
         }, params.options);
         super(params.app, true, opts);
         this.iframeOffsets = new IFrameOffsets();
@@ -4338,7 +4755,7 @@ class TopObserver extends Observer {
                 this.app.debug.info('doc already observed for', id);
                 return;
             }
-            const observer = new IFrameObserver(this.app);
+            const observer = new IFrameObserver(this.app, false, {});
             this.iframeObservers.set(iframe, observer);
             this.docObservers.set(currentDoc, observer);
             this.iframeObserversArr.push(observer);
@@ -4709,6 +5126,43 @@ function getTimezone() {
     return `UTC${sign}${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
 }
 const delay = (ms) => new Promise((res) => setTimeout(res, ms));
+function getInlineOptions(mode) {
+    switch (mode) {
+        case InlineCssMode.RemoteOnly:
+            return {
+                inlineRemoteCss: true,
+                inlinerOptions: {
+                    forceFetch: false,
+                    forcePlain: false,
+                },
+            };
+        case InlineCssMode.RemoteWithForceFetch:
+            return {
+                inlineRemoteCss: true,
+                inlinerOptions: {
+                    forceFetch: true,
+                    forcePlain: false,
+                },
+            };
+        case InlineCssMode.All:
+            return {
+                inlineRemoteCss: true,
+                inlinerOptions: {
+                    forceFetch: true,
+                    forcePlain: true,
+                },
+            };
+        case InlineCssMode.None:
+        default:
+            return {
+                inlineRemoteCss: false,
+                inlinerOptions: {
+                    forceFetch: false,
+                    forcePlain: false,
+                },
+            };
+    }
+}
 const proto = {
     // ask if there are any tabs alive
     ask: 'never-gonna-give-you-up',
@@ -4740,7 +5194,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.1.4'; // TODO: version compatability check inside each plugin.
+        this.version = '16.2.0'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4973,6 +5427,30 @@ class App {
             }
         };
         this.startTimeout = null;
+        this.send = (message, urgent = false) => {
+            if (this.activityState === ActivityState.NotActive) {
+                return;
+            }
+            // ====================================================
+            if (this.activityState === ActivityState.ColdStart) {
+                this.bufferedMessages1.push(message);
+                if (!this.singleBuffer) {
+                    this.bufferedMessages2.push(message);
+                }
+                this.conditionsManager?.processMessage(message);
+            }
+            else {
+                this.messages.push(message);
+            }
+            // TODO: commit on start if there were `urgent` sends;
+            // Clarify where urgent can be used for;
+            // Clarify workflow for each type of message in case it was sent before start
+            //      (like Fetch before start; maybe add an option "preCapture: boolean" or sth alike)
+            // Careful: `this.delay` is equal to zero before start so all Timestamp-s will have to be updated on start
+            if (this.activityState === ActivityState.Active && urgent) {
+                this.commit();
+            }
+        };
         this.coldStartCommitN = 0;
         this.delay = 0;
         this.attachStartCallback = (cb, useSafe = false) => {
@@ -5039,6 +5517,7 @@ class App {
         this.onUxtCb = [];
         this.contextId = Math.random().toString(36).slice(2);
         this.projectKey = projectKey;
+        this.inlineCss = getInlineOptions(options.inlineCss ?? 0);
         if (Object.keys(options).findIndex((k) => ['fixedCanvasScaling', 'disableCanvas'].includes(k)) !==
             -1) {
             console.warn('Openreplay: canvas options are moving to separate key "canvas" in next update. Please update your configuration.');
@@ -5068,15 +5547,14 @@ class App {
             __save_canvas_locally: false,
             localStorage: null,
             sessionStorage: null,
-            disableStringDict: false,
             forceSingleTab: false,
             assistSocketHost: '',
             fixedCanvasScaling: false,
             disableCanvas: false,
             captureIFrames: true,
-            disableSprites: false,
-            obscureTextEmails: true,
+            obscureTextEmails: false,
             obscureTextNumbers: false,
+            disableStringDict: false,
             crossdomain: {
                 parentDomain: '*',
             },
@@ -5087,6 +5565,8 @@ class App {
                 useAnimationFrame: false,
             },
             forceNgOff: false,
+            inlineCss: 0,
+            disableSprites: false,
         };
         this.options = simpleMerge(defaultOptions, options);
         if (!this.insideIframe &&
@@ -5108,7 +5588,7 @@ class App {
             forceNgOff: Boolean(options.forceNgOff),
             maintainer: this.options.nodes?.maintainer,
         });
-        this.observer = new TopObserver({ app: this, options });
+        this.observer = new TopObserver({ app: this, options: { ...options, ...this.inlineCss } });
         this.ticker = new Ticker(this);
         this.ticker.attach(() => this.commit());
         this.debug = new Logger(this.options.__debug__);
@@ -5325,30 +5805,6 @@ class App {
         }
         this.debug.error('OpenReplay error: ', context, e);
     }
-    send(message, urgent = false) {
-        if (this.activityState === ActivityState.NotActive) {
-            return;
-        }
-        // ====================================================
-        if (this.activityState === ActivityState.ColdStart) {
-            this.bufferedMessages1.push(message);
-            if (!this.singleBuffer) {
-                this.bufferedMessages2.push(message);
-            }
-            this.conditionsManager?.processMessage(message);
-        }
-        else {
-            this.messages.push(message);
-        }
-        // TODO: commit on start if there were `urgent` sends;
-        // Clarify where urgent can be used for;
-        // Clarify workflow for each type of message in case it was sent before start
-        //      (like Fetch before start; maybe add an option "preCapture: boolean" or sth alike)
-        // Careful: `this.delay` is equal to zero before start so all Timestamp-s will have to be updated on start
-        if (this.activityState === ActivityState.Active && urgent) {
-            this.commit();
-        }
-    }
     /**
      * Normal workflow: add timestamp and tab data to batch, then commit it
      * every ~30ms
@@ -7589,138 +8045,6 @@ function Viewport (app) {
     app.ticker.attach(sendSetViewportSize, 5, false);
 }
 
-function hasAdoptedSS(node) {
-    return (isRootNode(node) &&
-        // @ts-ignore
-        !!node.adoptedStyleSheets);
-}
-// TODO: encapsulate to be init-ed on-start and join with cssrules.ts under one folder
-let _id = 0xf;
-function nextID() {
-    return _id++;
-}
-const styleSheetIDMap = new Map();
-function ConstructedStyleSheets (app) {
-    if (app === null) {
-        return;
-    }
-    if (!hasAdoptedSS(document)) {
-        return;
-    }
-    const styleSheetIDMap = new Map();
-    const adoptedStyleSheetsOwnings = new Map();
-    const sendAdoptedStyleSheetsUpdate = (root) => setTimeout(() => {
-        let nodeID = app.nodes.getID(root);
-        if (root === document) {
-            nodeID = 0; // main document doesn't have nodeID. ID count starts from the documentElement
-        }
-        if (nodeID === undefined) {
-            return;
-        }
-        let pastOwning = adoptedStyleSheetsOwnings.get(nodeID);
-        if (!pastOwning) {
-            pastOwning = [];
-        }
-        const nowOwning = [];
-        const styleSheets = root.adoptedStyleSheets;
-        if (styleSheets && Symbol.iterator in styleSheets) {
-            for (const s of styleSheets) {
-                let sheetID = styleSheetIDMap.get(s);
-                const init = !sheetID;
-                if (!sheetID) {
-                    sheetID = nextID();
-                    styleSheetIDMap.set(s, sheetID);
-                }
-                if (!pastOwning.includes(sheetID)) {
-                    app.send(AdoptedSSAddOwner(sheetID, nodeID));
-                }
-                if (init) {
-                    const rules = s.cssRules;
-                    for (let i = 0; i < rules.length; i++) {
-                        app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
-                    }
-                }
-                nowOwning.push(sheetID);
-            }
-        }
-        if (Symbol.iterator in pastOwning) {
-            for (const sheetID of pastOwning) {
-                if (!nowOwning.includes(sheetID)) {
-                    app.send(AdoptedSSRemoveOwner(sheetID, nodeID));
-                }
-            }
-        }
-        adoptedStyleSheetsOwnings.set(nodeID, nowOwning);
-    }, 20); // Mysterious bug:
-    /* On the page https://explore.fast.design/components/fast-accordion
-      the only rule inside the only adoptedStyleSheet of the iframe-s document
-      gets changed during first milliseconds after the load.
-      However, none of the documented methods (replace, insertRule) is triggered.
-      The rule is not substituted (remains the same object), however the text gets changed.
-    */
-    function patchAdoptedStyleSheets(prototype) {
-        const nativeAdoptedStyleSheetsDescriptor = Object.getOwnPropertyDescriptor(prototype, 'adoptedStyleSheets');
-        if (nativeAdoptedStyleSheetsDescriptor) {
-            Object.defineProperty(prototype, 'adoptedStyleSheets', {
-                ...nativeAdoptedStyleSheetsDescriptor,
-                set: function (value) {
-                    // @ts-ignore
-                    const retVal = nativeAdoptedStyleSheetsDescriptor.set.call(this, value);
-                    sendAdoptedStyleSheetsUpdate(this);
-                    return retVal;
-                },
-            });
-        }
-    }
-    const patchContext = (context) => {
-        // @ts-ignore
-        if (context.__openreplay_adpss_patched__) {
-            return;
-        }
-        else {
-            // @ts-ignore
-            context.__openreplay_adpss_patched__ = true;
-        }
-        patchAdoptedStyleSheets(context.Document.prototype);
-        patchAdoptedStyleSheets(context.ShadowRoot.prototype);
-        //@ts-ignore TODO: upgrade ts to 4.8+
-        const { replace, replaceSync } = context.CSSStyleSheet.prototype;
-        //@ts-ignore
-        context.CSSStyleSheet.prototype.replace = function (text) {
-            return replace.call(this, text).then((sheet) => {
-                const sheetID = styleSheetIDMap.get(this);
-                if (sheetID) {
-                    app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
-                }
-                return sheet;
-            });
-        };
-        //@ts-ignore
-        context.CSSStyleSheet.prototype.replaceSync = function (text) {
-            const sheetID = styleSheetIDMap.get(this);
-            if (sheetID) {
-                app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
-            }
-            return replaceSync.call(this, text);
-        };
-    };
-    patchContext(window);
-    app.observer.attachContextCallback(app.safe(patchContext));
-    app.attachStopCallback(() => {
-        styleSheetIDMap.clear();
-        adoptedStyleSheetsOwnings.clear();
-    });
-    // So far main Document is not triggered with nodeCallbacks
-    app.attachStartCallback(() => {
-        sendAdoptedStyleSheetsUpdate(document);
-    });
-    app.nodes.attachNodeCallback((node) => {
-        if (hasAdoptedSS(node)) {
-            sendAdoptedStyleSheetsUpdate(node);
-        }
-    });
-}
-
 function CSSRules (app) {
     if (app === null) {
         return;
@@ -8027,152 +8351,6 @@ function isObject(thing) {
     return thing !== null && typeof thing === 'object';
 }
 
-const sensitiveParams = new Set([
-    "password",
-    "pass",
-    "pwd",
-    "mdp",
-    "token",
-    "bearer",
-    "jwt",
-    "api_key",
-    "api-key",
-    "apiKey",
-    "secret",
-    "ssn",
-    "zip",
-    "zipcode",
-    "x-api-key",
-    "www-authenticate",
-    "x-csrf-token",
-    "x-requested-with",
-    "x-forwarded-for",
-    "x-real-ip",
-    "cookie",
-    "authorization",
-    "auth",
-    "proxy-authorization",
-    "set-cookie",
-    "account_key",
-]);
-function numDigits(x) {
-    return (Math.log10((x ^ (x >> 31)) - (x >> 31)) | 0) + 1;
-}
-function obscure(value) {
-    if (typeof value === "number") {
-        const digits = numDigits(value);
-        return "9".repeat(digits);
-    }
-    if (typeof value === "string") {
-        return value.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
-    }
-    return value;
-}
-function filterHeaders(headers) {
-    const filteredHeaders = {};
-    if (Array.isArray(headers)) {
-        headers.forEach(({ name, value }) => {
-            if (sensitiveParams.has(name.toLowerCase())) {
-                filteredHeaders[name] = obscure(value);
-            }
-            else {
-                filteredHeaders[name] = value;
-            }
-        });
-    }
-    else {
-        for (const [key, value] of Object.entries(headers)) {
-            if (sensitiveParams.has(key.toLowerCase())) {
-                filteredHeaders[key] = obscure(value);
-            }
-            else {
-                filteredHeaders[key] = value;
-            }
-        }
-    }
-    return filteredHeaders;
-}
-function filterBody(body) {
-    if (!body) {
-        return body;
-    }
-    let parsedBody;
-    let isJSON = false;
-    try {
-        parsedBody = JSON.parse(body);
-        isJSON = true;
-    }
-    catch (e) {
-        // not json
-    }
-    if (isJSON) {
-        obscureSensitiveData(parsedBody);
-        return JSON.stringify(parsedBody);
-    }
-    else {
-        const isUrlSearch = typeof body === "string" && body.includes("?") && body.includes("=");
-        if (isUrlSearch) {
-            try {
-                const params = new URLSearchParams(body);
-                for (const key of params.keys()) {
-                    if (sensitiveParams.has(key.toLowerCase())) {
-                        const value = obscure(params.get(key));
-                        params.set(key, value);
-                    }
-                }
-                return params.toString();
-            }
-            catch (e) {
-                // not url query ?
-                return body;
-            }
-        }
-        else {
-            // not json or url query
-            return body;
-        }
-    }
-}
-function sanitizeObject(obj) {
-    obscureSensitiveData(obj);
-    return obj;
-}
-function obscureSensitiveData(obj) {
-    if (Array.isArray(obj)) {
-        obj.forEach(obscureSensitiveData);
-    }
-    else if (obj && typeof obj === "object") {
-        for (const key in obj) {
-            if (Object.hasOwn(obj, key)) {
-                if (sensitiveParams.has(key.toLowerCase())) {
-                    obj[key] = obscure(obj[key]);
-                }
-                else if (obj[key] !== null && typeof obj[key] === "object") {
-                    obscureSensitiveData(obj[key]);
-                }
-            }
-        }
-    }
-}
-function tryFilterUrl(url) {
-    if (!url)
-        return "";
-    try {
-        const urlObj = new URL(url);
-        if (urlObj.searchParams) {
-            for (const key of urlObj.searchParams.keys()) {
-                if (sensitiveParams.has(key.toLowerCase())) {
-                    urlObj.searchParams.set(key, "******");
-                }
-            }
-        }
-        return urlObj.toString();
-    }
-    catch (e) {
-        return url;
-    }
-}
-
 /**
  * I know we're not using most of the information from this class
  * but it can be useful in the future if we will decide to display more stuff in our ui
@@ -8204,18 +8382,13 @@ class NetworkMessage {
     }
     getMessage() {
         const { reqHs, resHs } = this.writeHeaders();
-        const reqBody = this.method === 'GET'
-            ? JSON.stringify(sanitizeObject(this.getData)) : filterBody(this.requestData);
         const request = {
-            headers: filterHeaders(reqHs),
-            body: reqBody,
-        };
-        const response = {
-            headers: filterHeaders(resHs),
-            body: filterBody(this.response)
+            headers: reqHs,
+            body: this.method === 'GET' ? JSON.stringify(this.getData) : this.requestData,
         };
+        const response = { headers: resHs, body: this.response };
         const messageInfo = this.sanitize({
-            url: tryFilterUrl(this.url),
+            url: this.url,
             method: this.method,
             status: this.status,
             request,
@@ -8531,10 +8704,9 @@ class ResponseProxyHandler {
         if (typeof this.resp.body.getReader !== 'function') {
             return;
         }
-        const clonedResp = this.resp.clone();
-        const _getReader = clonedResp.body.getReader;
+        const _getReader = this.resp.body.getReader;
         // @ts-ignore
-        clonedResp.body.getReader = () => {
+        this.resp.body.getReader = () => {
             const reader = _getReader.apply(this.resp.body);
             // when readyState is already 4,
             // it's not a chunked stream, or it had already been read.
@@ -9376,7 +9548,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.1.4',
+                trackerVersion: '16.2.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,