@openreplay/tracker 5.0.2-beta → 5.0.2

package/lib/modules/constructedStyleSheets.js

@@ -0,0 +1,126 @@
+import { AdoptedSSReplaceURLBased, AdoptedSSInsertRuleURLBased, AdoptedSSAddOwner, AdoptedSSRemoveOwner, } from '../app/messages.gen.js';
+import { isRootNode } from '../app/guards.js';
+function hasAdoptedSS(node) {
+    return (isRootNode(node) &&
+        // @ts-ignore
+        !!node.adoptedStyleSheets);
+}
+// TODO: incapsulate to be init-ed on-start and join with cssrules.ts under one folder
+let _id = 0xf;
+export function nextID() {
+    return _id++;
+}
+export const styleSheetIDMap = new Map();
+export default function (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;
+        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);
+        }
+        for (const sheetID of pastOwning) {
+            if (!nowOwning.includes(sheetID)) {
+                app.send(AdoptedSSRemoveOwner(sheetID, nodeID));
+            }
+        }
+        adoptedStyleSheetsOwnings.set(nodeID, nowOwning);
+    }, 20); // Misterious 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.
+      Howerer, 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', Object.assign(Object.assign({}, 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);
+        }
+    });
+}

package/lib/modules/cssrules.d.ts

@@ -0,0 +1,2 @@
+import type App from '../app/index.js';
+export default function (app: App | null): void;

package/lib/modules/cssrules.js

@@ -0,0 +1,97 @@
+import { AdoptedSSInsertRuleURLBased, // TODO: rename to common StyleSheet names
+AdoptedSSDeleteRule, AdoptedSSAddOwner, TechnicalInfo, } from '../app/messages.gen.js';
+import { hasTag } from '../app/guards.js';
+import { nextID, styleSheetIDMap } from './constructedStyleSheets.js';
+export default function (app) {
+    if (app === null) {
+        return;
+    }
+    if (!window.CSSStyleSheet) {
+        app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
+        return;
+    }
+    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.
+            return;
+        }
+        if (typeof rule === 'string') {
+            app.send(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()));
+        }
+        else {
+            app.send(AdoptedSSDeleteRule(sheetID, index));
+        }
+    });
+    // TODO: proper rule insertion/removal (how?)
+    const sendReplaceGroupingRule = app.safe((rule) => {
+        let topmostRule = rule;
+        while (topmostRule.parentRule) {
+            topmostRule = topmostRule.parentRule;
+        }
+        const sheet = topmostRule.parentStyleSheet;
+        if (!sheet) {
+            app.debug.warn('No parent StyleSheet found for', topmostRule, rule);
+            return;
+        }
+        const sheetID = styleSheetIDMap.get(sheet);
+        if (!sheetID) {
+            app.debug.warn('No sheedID found for', sheet, styleSheetIDMap);
+            return;
+        }
+        const cssText = topmostRule.cssText;
+        const ruleList = sheet.cssRules;
+        const idx = Array.from(ruleList).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);
+        }
+    });
+    const patchContext = app.safe((context) => {
+        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);
+        };
+        context.CSSStyleSheet.prototype.deleteRule = function (index) {
+            sendInsertDeleteRule(this, index);
+            return deleteRule.call(this, index);
+        };
+        context.CSSGroupingRule.prototype.insertRule = function (rule, index = 0) {
+            const result = groupInsertRule.call(this, rule, index);
+            sendReplaceGroupingRule(this);
+            return result;
+        };
+        context.CSSGroupingRule.prototype.deleteRule = function (index = 0) {
+            const result = groupDeleteRule.call(this, index);
+            sendReplaceGroupingRule(this);
+            return result;
+        };
+    });
+    patchContext(window);
+    app.observer.attachContextCallback(patchContext);
+    app.nodes.attachNodeCallback((node) => {
+        if (!hasTag(node, 'style') || !node.sheet) {
+            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) {
+            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);
+        }
+    });
+}

package/lib/modules/exception.d.ts

@@ -0,0 +1,16 @@
+import type App from '../app/index.js';
+import type Message from '../app/messages.gen.js';
+export interface Options {
+    captureExceptions: boolean;
+}
+interface StackFrame {
+    columnNumber?: number;
+    lineNumber?: number;
+    fileName?: string;
+    functionName?: string;
+    source?: string;
+}
+export declare function getExceptionMessage(error: Error, fallbackStack: Array<StackFrame>, metadata?: Record<string, any>): Message;
+export declare function getExceptionMessageFromEvent(e: ErrorEvent | PromiseRejectionEvent, context?: typeof globalThis, metadata?: Record<string, any>): Message | null;
+export default function (app: App, opts: Partial<Options>): void;
+export {};

package/lib/modules/exception.js

@@ -0,0 +1,71 @@
+import { JSException } from '../app/messages.gen.js';
+import ErrorStackParser from 'error-stack-parser';
+function getDefaultStack(e) {
+    return [
+        {
+            columnNumber: e.colno,
+            lineNumber: e.lineno,
+            fileName: e.filename,
+            functionName: '',
+            source: '',
+        },
+    ];
+}
+export function getExceptionMessage(error, fallbackStack, metadata = {}) {
+    let stack = fallbackStack;
+    try {
+        stack = ErrorStackParser.parse(error);
+    }
+    catch (e) { }
+    return JSException(error.name, error.message, JSON.stringify(stack), JSON.stringify(metadata));
+}
+export function getExceptionMessageFromEvent(e, context = window, metadata = {}) {
+    if (e instanceof ErrorEvent) {
+        if (e.error instanceof Error) {
+            return getExceptionMessage(e.error, getDefaultStack(e), metadata);
+        }
+        else {
+            let [name, message] = e.message.split(':');
+            if (!message) {
+                name = 'Error';
+                message = e.message;
+            }
+            return JSException(name, message, JSON.stringify(getDefaultStack(e)), JSON.stringify(metadata));
+        }
+    }
+    else if ('PromiseRejectionEvent' in context && e instanceof context.PromiseRejectionEvent) {
+        if (e.reason instanceof Error) {
+            return getExceptionMessage(e.reason, [], metadata);
+        }
+        else {
+            let message;
+            try {
+                message = JSON.stringify(e.reason);
+            }
+            catch (_) {
+                message = String(e.reason);
+            }
+            return JSException('Unhandled Promise Rejection', message, '[]', JSON.stringify(metadata));
+        }
+    }
+    return null;
+}
+export default function (app, opts) {
+    const options = Object.assign({
+        captureExceptions: true,
+    }, opts);
+    function patchContext(context) {
+        function handler(e) {
+            const msg = getExceptionMessageFromEvent(e, context);
+            if (msg != null) {
+                app.send(msg);
+            }
+        }
+        app.attachEventListener(context, 'unhandledrejection', handler);
+        app.attachEventListener(context, 'error', handler);
+    }
+    if (options.captureExceptions) {
+        app.observer.attachContextCallback(patchContext); // TODO: attach once-per-iframe (?)
+        patchContext(window);
+    }
+}

package/lib/modules/focus.d.ts

@@ -0,0 +1,2 @@
+import type App from '../app/index.js';
+export default function (app: App): void;

package/lib/modules/focus.js

@@ -0,0 +1,42 @@
+import { isNode, hasTag } from '../app/guards.js';
+import { SetNodeFocus } from '../app/messages.gen.js';
+export default function (app) {
+    function sendSetNodeFocus(n) {
+        const id = app.nodes.getID(n);
+        if (id !== undefined) {
+            app.send(SetNodeFocus(id));
+        }
+    }
+    let blurred = false;
+    app.nodes.attachNodeCallback((node) => {
+        if (!hasTag(node, 'body')) {
+            return;
+        }
+        app.nodes.attachNodeListener(node, 'focus', (e) => {
+            if (!isNode(e.target)) {
+                return;
+            }
+            sendSetNodeFocus(e.target);
+            blurred = false;
+        });
+        app.nodes.attachNodeListener(node, 'blur', (e) => {
+            if (e.relatedTarget === null) {
+                blurred = true;
+                setTimeout(() => {
+                    if (blurred) {
+                        app.send(SetNodeFocus(-1));
+                    }
+                }, 0);
+            }
+        });
+    });
+    app.attachStartCallback(() => {
+        let elem = document.activeElement;
+        while (elem && hasTag(elem, 'iframe') && elem.contentDocument) {
+            elem = elem.contentDocument.activeElement;
+        }
+        if (elem && elem !== elem.ownerDocument.body) {
+            sendSetNodeFocus(elem);
+        }
+    }, true);
+}

package/lib/modules/fonts.d.ts

@@ -0,0 +1,2 @@
+import type App from '../app/index.js';
+export default function (app: App): void;

package/lib/modules/fonts.js

@@ -0,0 +1,54 @@
+import { isDocument } from '../app/guards.js';
+import { LoadFontFace } from '../app/messages.gen.js';
+export default function (app) {
+    if (!window.FontFace) {
+        return;
+    }
+    const docFonts = new Map();
+    const patchWindow = (wnd) => {
+        class FontFaceInterceptor extends wnd.FontFace {
+            constructor(...args) {
+                //maybe do this on load(). In this case check if the document.fonts.load(...) function calls the font's load()
+                if (typeof args[1] === 'string') {
+                    let desc = '';
+                    if (args[2]) {
+                        app.safe(() => {
+                            desc = JSON.stringify(args[2]);
+                        });
+                    }
+                    const ffData = [args[0], args[1], desc];
+                    const ffDataArr = docFonts.get(wnd.document) || [];
+                    ffDataArr.push(ffData);
+                    docFonts.set(wnd.document, ffDataArr);
+                    const parentID = wnd === window ? 0 : app.nodes.getID(wnd.document);
+                    if (parentID === undefined) {
+                        return;
+                    }
+                    if (app.active()) {
+                        app.send(LoadFontFace(parentID, ...ffData));
+                    }
+                }
+                super(...args);
+            }
+        }
+        wnd.FontFace = FontFaceInterceptor;
+    };
+    app.observer.attachContextCallback(patchWindow);
+    patchWindow(window);
+    app.nodes.attachNodeCallback(app.safe((node) => {
+        if (!isDocument(node)) {
+            return;
+        }
+        const ffDataArr = docFonts.get(node);
+        if (!ffDataArr) {
+            return;
+        }
+        const parentID = node.defaultView === window ? 0 : app.nodes.getID(node);
+        if (parentID === undefined) {
+            return;
+        }
+        ffDataArr.forEach((ffData) => {
+            app.send(LoadFontFace(parentID, ...ffData));
+        });
+    }));
+}

package/lib/modules/img.d.ts

@@ -0,0 +1,2 @@
+import type App from '../app/index.js';
+export default function (app: App): void;

package/lib/modules/img.js

@@ -0,0 +1,107 @@
+import { isURL, IS_FIREFOX, MAX_STR_LEN } from '../utils.js';
+import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from '../app/messages.gen.js';
+import { hasTag } from '../app/guards.js';
+function resolveURL(url, location = document.location) {
+    url = url.trim();
+    if (url.startsWith('//') ||
+        url.startsWith('http://') ||
+        url.startsWith('https://') ||
+        url.startsWith('data:') // any other possible value here? https://bugzilla.mozilla.org/show_bug.cgi?id=1758035
+    ) {
+        return url;
+    }
+    else if (url.startsWith('/')) {
+        return location.origin + url;
+    }
+    else {
+        return location.origin + location.pathname + url;
+    }
+}
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1607081
+function isSVGInFireFox(url) {
+    return IS_FIREFOX && (url.startsWith('data:image/svg+xml') || url.match(/.svg$|/i));
+}
+const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
+export default function (app) {
+    function sendPlaceholder(id, node) {
+        app.send(SetNodeAttribute(id, 'src', PLACEHOLDER_SRC));
+        const { width, height } = node.getBoundingClientRect();
+        if (!node.hasAttribute('width')) {
+            app.send(SetNodeAttribute(id, 'width', String(width)));
+        }
+        if (!node.hasAttribute('height')) {
+            app.send(SetNodeAttribute(id, 'height', String(height)));
+        }
+    }
+    const sendSrcset = function (id, img) {
+        const { srcset } = img;
+        if (!srcset) {
+            return;
+        }
+        const resolvedSrcset = srcset
+            .split(',')
+            .map((str) => resolveURL(str))
+            .join(',');
+        app.send(SetNodeAttribute(id, 'srcset', resolvedSrcset));
+    };
+    const sendSrc = function (id, img) {
+        if (img.src.length > MAX_STR_LEN) {
+            sendPlaceholder(id, img);
+        }
+        app.send(SetNodeAttributeURLBased(id, 'src', img.src, app.getBaseHref()));
+    };
+    const sendImgError = app.safe(function (img) {
+        const resolvedSrc = resolveURL(img.src || ''); // Src type is null sometimes. - is it true?
+        if (isURL(resolvedSrc)) {
+            app.send(ResourceTiming(app.timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
+        }
+    });
+    const sendImgAttrs = app.safe(function (img) {
+        const id = app.nodes.getID(img);
+        if (id === undefined) {
+            return;
+        }
+        if (!img.complete) {
+            return;
+        }
+        if (img.naturalHeight === 0 && img.naturalWidth === 0 && !isSVGInFireFox(img.src)) {
+            sendImgError(img);
+        }
+        else if (app.sanitizer.isHidden(id) || app.sanitizer.isObscured(id)) {
+            sendPlaceholder(id, img);
+        }
+        else {
+            sendSrc(id, img);
+            sendSrcset(id, img);
+        }
+    });
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'attributes') {
+                const target = mutation.target;
+                const id = app.nodes.getID(target);
+                if (id === undefined) {
+                    return;
+                }
+                if (mutation.attributeName === 'src') {
+                    sendSrc(id, target);
+                }
+                if (mutation.attributeName === 'srcset') {
+                    sendSrcset(id, target);
+                }
+            }
+        }
+    });
+    app.attachStopCallback(() => {
+        observer.disconnect();
+    });
+    app.nodes.attachNodeCallback((node) => {
+        if (!hasTag(node, 'img')) {
+            return;
+        }
+        app.nodes.attachNodeListener(node, 'error', () => sendImgError(node));
+        app.nodes.attachNodeListener(node, 'load', () => sendImgAttrs(node));
+        sendImgAttrs(node);
+        observer.observe(node, { attributes: true, attributeFilter: ['src', 'srcset'] });
+    });
+}

package/lib/modules/input.d.ts

@@ -0,0 +1,16 @@
+import type App from '../app/index.js';
+type TextEditableElement = HTMLInputElement | HTMLTextAreaElement;
+export declare function getInputLabel(node: TextEditableElement): string;
+export declare const enum InputMode {
+    Plain = 0,
+    Obscured = 1,
+    Hidden = 2
+}
+export interface Options {
+    obscureInputNumbers: boolean;
+    obscureInputEmails: boolean;
+    defaultInputMode: InputMode;
+    obscureInputDates: boolean;
+}
+export default function (app: App, opts: Partial<Options>): void;
+export {};