@openreplay/tracker 15.0.2 → 15.0.5-beta.0

package/dist/cjs/main/app/guards.d.ts

@@ -1,5 +1,6 @@
 export declare function isNode(sth: any): sth is Node;
 export declare function isSVGElement(node: Element): node is SVGElement;
+export declare function isUseElement(node: Element): node is SVGUseElement;
 export declare function isElementNode(node: Node): node is Element;
 export declare function isCommentNode(node: Node): node is Comment;
 export declare function isTextNode(node: Node): node is Text;

package/dist/lib/index.js

@@ -2326,7 +2326,7 @@ const containerStyle = {
     alignItems: 'center',
     padding: '1.5rem',
     borderRadius: '2px',
-    border: '1px solid #D9D9D9',
+    border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
     background: '#FFF',
     width: '22rem',
 };
@@ -2338,7 +2338,7 @@ const containerWidgetStyle = {
     padding: 'unset',
     fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
     'border-radius': '2px',
-    border: '1px solid #D9D9D9',
+    border: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
     background: 'rgba(255, 255, 255, 0.75)',
     width: '22rem',
 };
@@ -2420,7 +2420,7 @@ const descriptionWidgetStyle = {
     boxSizing: 'border-box',
     display: 'block',
     width: '100%',
-    borderBottom: '1px solid #D9D9D9',
+    borderBottom: '1px solid rgb(255 255 255 / var(--tw-bg-opacity, 1))',
     background: '#FFF',
     padding: '0.65rem',
     alignSelf: 'stretch',
@@ -3293,7 +3293,10 @@ function isNode(sth) {
     return !!sth && sth.nodeType != null;
 }
 function isSVGElement(node) {
-    return node.namespaceURI === 'http://www.w3.org/2000/svg';
+    return (node.namespaceURI === 'http://www.w3.org/2000/svg' || node.localName === 'svg');
+}
+function isUseElement(node) {
+    return node.localName === 'use';
 }
 function isElementNode(node) {
     return node.nodeType === Node.ELEMENT_NODE;
@@ -3723,6 +3726,48 @@ class Nodes {
     }
 }
 
+const iconCache = {};
+const domParser = new DOMParser();
+async function parseUseEl(useElement, mode) {
+    try {
+        const href = useElement.getAttribute('xlink:href') || useElement.getAttribute('href');
+        if (!href) {
+            console.debug('Openreplay: xlink:href or href not found on <use>.');
+            return;
+        }
+        const [url, symbolId] = href.split('#');
+        if (!url || !symbolId) {
+            console.debug('Openreplay: Invalid xlink:href or href found on <use>.');
+            return;
+        }
+        if (iconCache[symbolId]) {
+            return iconCache[symbolId];
+        }
+        const response = await fetch(url);
+        const svgText = await response.text();
+        const svgDoc = domParser.parseFromString(svgText, 'image/svg+xml');
+        const symbol = svgDoc.getElementById(symbolId);
+        if (!symbol) {
+            console.debug('Openreplay: Symbol not found in SVG.');
+            return;
+        }
+        if (mode === 'inline') ;
+        if (mode === 'svgtext') {
+            const inlineSvg = `
+        <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;
+        }
+        if (mode === 'dataurl') ;
+        console.debug(`Openreplay: Unknown mode: ${mode}. Use "inline" or "dataurl".`);
+    }
+    catch (error) {
+        console.error('Openreplay: Error processing <use> element:', error);
+    }
+}
 function isIgnored(node) {
     if (isCommentNode(node)) {
         return true;
@@ -3861,7 +3906,19 @@ class Observer {
             if (value === null) {
                 this.app.send(RemoveNodeAttribute(id, name));
             }
-            else if (name === 'href') {
+            if (isUseElement(node) && name === 'href') {
+                parseUseEl(node, 'svgtext')
+                    .then((svgData) => {
+                    if (svgData) {
+                        this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${svgData}`));
+                    }
+                })
+                    .catch((e) => {
+                    console.error('Openreplay: Error parsing <use> element:', e);
+                });
+                return;
+            }
+            if (name === 'href') {
                 if (value.length > 1e5) {
                     value = '';
                 }
@@ -4644,7 +4701,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '15.0.2'; // TODO: version compatability check inside each plugin.
+        this.version = '15.0.5-beta.0'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4990,6 +5047,9 @@ class App {
             const host = location.hostname.split('.').slice(-2).join('_');
             this.bc = new BroadcastChannel(`rick_${host}`);
         }
+        else if (this.options.forceSingleTab) {
+            this.allowAppStart();
+        }
         this.revID = this.options.revID;
         this.localStorage = this.options.localStorage ?? window.localStorage;
         this.sessionStorage = this.options.sessionStorage ?? window.sessionStorage;
@@ -6674,122 +6734,170 @@ function Input (app, opts) {
 // License: MIT
 // Author: Anton Medvedev <anton@medv.io>
 // Source: https://github.com/antonmedv/finder
-let config;
-let rootDocument;
-let start;
+const acceptedAttrNames = new Set(['role', 'name', 'aria-label', 'rel', 'href']);
+/** Check if attribute name and value are word-like. */
+function attr(name, value) {
+    let nameIsOk = acceptedAttrNames.has(name);
+    nameIsOk ||= name.startsWith('data-') && wordLike(name);
+    let valueIsOk = wordLike(value) && value.length < 100;
+    valueIsOk ||= value.startsWith('#') && wordLike(value.slice(1));
+    return nameIsOk && valueIsOk;
+}
+/** Check if id name is word-like. */
+function idName(name) {
+    return wordLike(name);
+}
+/** Check if class name is word-like. */
+function className(name) {
+    return wordLike(name);
+}
+/** Check if tag name is word-like. */
+function tagName(name) {
+    return true;
+}
+/** Finds unique CSS selectors for the given element. */
 function finder(input, options) {
-    start = new Date();
     if (input.nodeType !== Node.ELEMENT_NODE) {
         throw new Error(`Can't generate CSS selector for non-element node type.`);
     }
-    if ('html' === input.tagName.toLowerCase()) {
+    if (input.tagName.toLowerCase() === 'html') {
         return 'html';
     }
     const defaults = {
         root: document.body,
-        idName: (name) => true,
-        className: (name) => true,
-        tagName: (name) => true,
-        attr: (name, value) => false,
-        seedMinLength: 1,
+        idName: idName,
+        className: className,
+        tagName: tagName,
+        attr: attr,
+        timeoutMs: 1000,
+        seedMinLength: 3,
         optimizedMinLength: 2,
-        threshold: 1000,
-        maxNumberOfTries: 10000,
-        timeoutMs: undefined,
+        maxNumberOfPathChecks: Infinity,
     };
-    config = { ...defaults, ...options };
-    rootDocument = findRootDocument(config.root, defaults);
-    let path = bottomUpSearch(input, 'all', () => bottomUpSearch(input, 'two', () => bottomUpSearch(input, 'one', () => bottomUpSearch(input, 'none'))));
-    if (path) {
-        const optimized = sort(optimize(path, input));
-        if (optimized.length > 0) {
-            path = optimized[0];
+    const startTime = new Date();
+    const config = { ...defaults, ...options };
+    const rootDocument = findRootDocument(config.root, defaults);
+    let foundPath;
+    let count = 0;
+    for (const candidate of search(input, config, rootDocument)) {
+        const elapsedTimeMs = new Date().getTime() - startTime.getTime();
+        if (elapsedTimeMs > config.timeoutMs ||
+            count >= config.maxNumberOfPathChecks) {
+            const fPath = fallback(input, rootDocument);
+            if (!fPath) {
+                throw new Error(`Timeout: Can't find a unique selector after ${config.timeoutMs}ms`);
+            }
+            return selector(fPath);
+        }
+        count++;
+        if (unique(candidate, rootDocument)) {
+            foundPath = candidate;
+            break;
         }
-        return selector(path);
     }
-    else {
+    if (!foundPath) {
         throw new Error(`Selector was not found.`);
     }
-}
-function findRootDocument(rootNode, defaults) {
-    if (rootNode.nodeType === Node.DOCUMENT_NODE) {
-        return rootNode;
-    }
-    if (rootNode === defaults.root) {
-        return rootNode.ownerDocument;
+    const optimized = [
+        ...optimize(foundPath, input, config, rootDocument, startTime),
+    ];
+    optimized.sort(byPenalty);
+    if (optimized.length > 0) {
+        return selector(optimized[0]);
     }
-    return rootNode;
+    return selector(foundPath);
 }
-function bottomUpSearch(input, limit, fallback) {
-    let path = null;
-    let stack = [];
+function* search(input, config, rootDocument) {
+    const stack = [];
+    let paths = [];
     let current = input;
     let i = 0;
-    while (current) {
-        const elapsedTime = new Date().getTime() - start.getTime();
-        if (config.timeoutMs !== undefined && elapsedTime > config.timeoutMs) {
-            throw new Error(`Timeout: Can't find a unique selector after ${elapsedTime}ms`);
-        }
-        let level = maybe(id(current)) ||
-            maybe(...attr(current)) ||
-            maybe(...classNames(current)) ||
-            maybe(tagName(current)) || [any()];
-        const nth = index(current);
-        if (limit == 'all') {
-            if (nth) {
-                level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));
-            }
-        }
-        else if (limit == 'two') {
-            level = level.slice(0, 1);
-            if (nth) {
-                level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));
-            }
-        }
-        else if (limit == 'one') {
-            const [node] = (level = level.slice(0, 1));
-            if (nth && dispensableNth(node)) {
-                level = [nthChild(node, nth)];
-            }
-        }
-        else if (limit == 'none') {
-            level = [any()];
-            if (nth) {
-                level = [nthChild(level[0], nth)];
-            }
-        }
-        for (let node of level) {
+    while (current && current !== rootDocument) {
+        const level = tie(current, config);
+        for (const node of level) {
             node.level = i;
         }
         stack.push(level);
-        if (stack.length >= config.seedMinLength) {
-            path = findUniquePath(stack, fallback);
-            if (path) {
-                break;
-            }
-        }
         current = current.parentElement;
         i++;
+        paths.push(...combinations(stack));
+        if (i >= config.seedMinLength) {
+            paths.sort(byPenalty);
+            for (const candidate of paths) {
+                yield candidate;
+            }
+            paths = [];
+        }
     }
-    if (!path) {
-        path = findUniquePath(stack, fallback);
+    paths.sort(byPenalty);
+    for (const candidate of paths) {
+        yield candidate;
     }
-    if (!path && fallback) {
-        return fallback();
+}
+function wordLike(name) {
+    if (/^[a-z\-]{3,}$/i.test(name)) {
+        const words = name.split(/-|[A-Z]/);
+        for (const word of words) {
+            if (word.length <= 2) {
+                return false;
+            }
+            if (/[^aeiou]{4,}/i.test(word)) {
+                return false;
+            }
+        }
+        return true;
     }
-    return path;
+    return false;
 }
-function findUniquePath(stack, fallback) {
-    const paths = sort(combinations(stack));
-    if (paths.length > config.threshold) {
-        return fallback ? fallback() : null;
+function tie(element, config) {
+    const level = [];
+    const elementId = element.getAttribute('id');
+    if (elementId && config.idName(elementId)) {
+        level.push({
+            name: '#' + CSS.escape(elementId),
+            penalty: 0,
+        });
     }
-    for (let candidate of paths) {
-        if (unique(candidate)) {
-            return candidate;
+    for (let i = 0; i < element.classList.length; i++) {
+        const name = element.classList[i];
+        if (config.className(name)) {
+            level.push({
+                name: '.' + CSS.escape(name),
+                penalty: 1,
+            });
         }
     }
-    return null;
+    for (let i = 0; i < element.attributes.length; i++) {
+        const attr = element.attributes[i];
+        if (config.attr(attr.name, attr.value)) {
+            level.push({
+                name: `[${CSS.escape(attr.name)}="${CSS.escape(attr.value)}"]`,
+                penalty: 2,
+            });
+        }
+    }
+    const tagName = element.tagName.toLowerCase();
+    if (config.tagName(tagName)) {
+        level.push({
+            name: tagName,
+            penalty: 5,
+        });
+        const index = indexOf(element, tagName);
+        if (index !== undefined) {
+            level.push({
+                name: nthOfType(tagName, index),
+                penalty: 10,
+            });
+        }
+    }
+    const nth = indexOf(element);
+    if (nth !== undefined) {
+        level.push({
+            name: nthChild(tagName, nth),
+            penalty: 50,
+        });
+    }
+    return level;
 }
 function selector(path) {
     let node = path[0];
@@ -6809,69 +6917,23 @@ function selector(path) {
 function penalty(path) {
     return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);
 }
-function unique(path) {
-    const css = selector(path);
-    switch (rootDocument.querySelectorAll(css).length) {
-        case 0:
-            throw new Error(`Can't select any node with this selector: ${css}`);
-        case 1:
-            return true;
-        default:
-            return false;
-    }
-}
-function id(input) {
-    const elementId = input.getAttribute('id');
-    if (elementId && config.idName(elementId)) {
-        return {
-            name: '#' + CSS.escape(elementId),
-            penalty: 0,
-        };
-    }
-    return null;
-}
-function attr(input) {
-    const attrs = Array.from(input.attributes).filter((attr) => config.attr(attr.name, attr.value));
-    return attrs.map((attr) => ({
-        name: `[${CSS.escape(attr.name)}="${CSS.escape(attr.value)}"]`,
-        penalty: 0.5,
-    }));
-}
-function classNames(input) {
-    const names = Array.from(input.classList).filter(config.className);
-    return names.map((name) => ({
-        name: '.' + CSS.escape(name),
-        penalty: 1,
-    }));
-}
-function tagName(input) {
-    const name = input.tagName.toLowerCase();
-    if (config.tagName(name)) {
-        return {
-            name,
-            penalty: 2,
-        };
-    }
-    return null;
-}
-function any() {
-    return {
-        name: '*',
-        penalty: 3,
-    };
+function byPenalty(a, b) {
+    return penalty(a) - penalty(b);
 }
-function index(input) {
+function indexOf(input, tagName) {
     const parent = input.parentNode;
     if (!parent) {
-        return null;
+        return undefined;
     }
     let child = parent.firstChild;
     if (!child) {
-        return null;
+        return undefined;
     }
     let i = 0;
     while (child) {
-        if (child.nodeType === Node.ELEMENT_NODE) {
+        if (child.nodeType === Node.ELEMENT_NODE &&
+            (tagName === undefined ||
+                child.tagName.toLowerCase() === tagName)) {
             i++;
         }
         if (child === input) {
@@ -6881,24 +6943,39 @@ function index(input) {
     }
     return i;
 }
-function nthChild(node, i) {
-    return {
-        name: node.name + `:nth-child(${i})`,
-        penalty: node.penalty + 1,
-    };
-}
-function dispensableNth(node) {
-    return node.name !== 'html' && !node.name.startsWith('#');
+function fallback(input, rootDocument) {
+    let i = 0;
+    let current = input;
+    const path = [];
+    while (current && current !== rootDocument) {
+        const tagName = current.tagName.toLowerCase();
+        const index = indexOf(current, tagName);
+        if (index === undefined) {
+            return;
+        }
+        path.push({
+            name: nthOfType(tagName, index),
+            penalty: NaN,
+            level: i,
+        });
+        current = current.parentElement;
+        i++;
+    }
+    if (unique(path, rootDocument)) {
+        return path;
+    }
 }
-function maybe(...level) {
-    const list = level.filter(notEmpty);
-    if (list.length > 0) {
-        return list;
+function nthChild(tagName, index) {
+    if (tagName === 'html') {
+        return 'html';
     }
-    return null;
+    return `${tagName}:nth-child(${index})`;
 }
-function notEmpty(value) {
-    return value !== null && value !== undefined;
+function nthOfType(tagName, index) {
+    if (tagName === 'html') {
+        return 'html';
+    }
+    return `${tagName}:nth-of-type(${index})`;
 }
 function* combinations(stack, path = []) {
     if (stack.length > 0) {
@@ -6910,44 +6987,50 @@ function* combinations(stack, path = []) {
         yield path;
     }
 }
-function sort(paths) {
-    return [...paths].sort((a, b) => penalty(a) - penalty(b));
+function findRootDocument(rootNode, defaults) {
+    if (rootNode.nodeType === Node.DOCUMENT_NODE) {
+        return rootNode;
+    }
+    if (rootNode === defaults.root) {
+        return rootNode.ownerDocument;
+    }
+    return rootNode;
+}
+function unique(path, rootDocument) {
+    const css = selector(path);
+    switch (rootDocument.querySelectorAll(css).length) {
+        case 0:
+            throw new Error(`Can't select any node with this selector: ${css}`);
+        case 1:
+            return true;
+        default:
+            return false;
+    }
 }
-function* optimize(path, input, scope = {
-    counter: 0,
-    visited: new Map(),
-}) {
+function* optimize(path, input, config, rootDocument, startTime) {
     if (path.length > 2 && path.length > config.optimizedMinLength) {
         for (let i = 1; i < path.length - 1; i++) {
-            if (scope.counter > config.maxNumberOfTries) {
-                return; // Okay At least I tried!
+            const elapsedTimeMs = new Date().getTime() - startTime.getTime();
+            if (elapsedTimeMs > config.timeoutMs) {
+                return;
             }
-            scope.counter += 1;
             const newPath = [...path];
             newPath.splice(i, 1);
-            const newPathKey = selector(newPath);
-            if (scope.visited.has(newPathKey)) {
-                return;
-            }
-            if (unique(newPath) && same(newPath, input)) {
+            if (unique(newPath, rootDocument) &&
+                rootDocument.querySelector(selector(newPath)) === input) {
                 yield newPath;
-                scope.visited.set(newPathKey, true);
-                yield* optimize(newPath, input, scope);
+                yield* optimize(newPath, input, config, rootDocument, startTime);
             }
         }
     }
 }
-function same(path, input) {
-    return rootDocument.querySelector(selector(path)) === input;
-}
 
 function _getSelector(target, document, options) {
     const selector = finder(target, {
         root: document.body,
         seedMinLength: 3,
         optimizedMinLength: options?.minSelectorDepth || 2,
-        threshold: options?.nthThreshold || 1000,
-        maxNumberOfTries: options?.maxOptimiseTries || 10000,
+        maxNumberOfPathChecks: options?.maxOptimiseTries || 10000,
     });
     return selector;
 }
@@ -7214,6 +7297,11 @@ function Timing (app, opts) {
         if (shouldSkip) {
             return;
         }
+        const failed = entry.responseEnd === 0
+            || (entry.transferSize === 0 && entry.decodedBodySize === 0);
+        if (failed) {
+            app.send(ResourceTiming(entry.startTime + getTimeOrigin(), 0, 0, 0, 0, 0, entry.name, entry.initiatorType, 0, true));
+        }
         app.send(ResourceTiming(entry.startTime + getTimeOrigin(), entry.duration, entry.responseStart && entry.startTime ? entry.responseStart - entry.startTime : 0, entry.transferSize > entry.encodedBodySize ? entry.transferSize - entry.encodedBodySize : 0, entry.encodedBodySize || 0, entry.decodedBodySize || 0, entry.name, entry.initiatorType, entry.transferSize, 
         // @ts-ignore
         (entry.responseStatus && entry.responseStatus === 304) || entry.transferSize === 0));
@@ -8805,6 +8893,9 @@ function Network (app, opts = {}) {
         /* ====== modern way ====== */
         if (options.useProxy) {
             return createNetworkProxy(context, options.ignoreHeaders, setSessionTokenHeader, sanitize, (message) => {
+                if (options.failuresOnly && message.status < 400) {
+                    return;
+                }
                 app.send(NetworkRequest(message.requestType, message.method, message.url, message.request, message.response, message.status, message.startTime + getTimeOrigin(), message.duration, message.responseSize));
             }, (url) => app.isServiceURL(url), { xhr: true, fetch: true, beacon: true }, options.tokenUrlMatcher);
         }
@@ -9061,11 +9152,8 @@ class API {
         };
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
-            const req = new XMLHttpRequest();
-            const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
-            req.open('POST', orig + '/v1/web/not-started');
-            req.send(JSON.stringify({
-                trackerVersion: '15.0.2',
+            console.log("Tracker couldn't start due to:", JSON.stringify({
+                trackerVersion: '15.0.5-beta.0',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,