@openreplay/tracker 5.0.2-beta → 5.0.2

package/lib/modules/timing.js

@@ -0,0 +1,157 @@
+import { hasTag } from '../app/guards.js';
+import { isURL, getTimeOrigin } from '../utils.js';
+import { ResourceTiming, PageLoadTiming, PageRenderTiming } from '../app/messages.gen.js';
+function getPaintBlocks(resources) {
+    const paintBlocks = [];
+    const elements = document.getElementsByTagName('*');
+    const styleURL = /url\(("[^"]*"|'[^']*'|[^)]*)\)/i;
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        let src = '';
+        if (hasTag(element, 'img')) {
+            src = element.currentSrc || element.src;
+        }
+        if (!src) {
+            const backgroundImage = getComputedStyle(element).getPropertyValue('background-image');
+            if (backgroundImage) {
+                const matches = styleURL.exec(backgroundImage);
+                if (matches !== null) {
+                    src = matches[1];
+                    if (src.startsWith('"') || src.startsWith("'")) {
+                        src = src.substr(1, src.length - 2);
+                    }
+                }
+            }
+        }
+        if (!src)
+            continue;
+        const time = src.substr(0, 10) === 'data:image' ? 0 : resources[src];
+        if (time === undefined)
+            continue;
+        const rect = element.getBoundingClientRect();
+        const top = Math.max(rect.top, 0);
+        const left = Math.max(rect.left, 0);
+        const bottom = Math.min(rect.bottom, window.innerHeight ||
+            (document.documentElement && document.documentElement.clientHeight) ||
+            0);
+        const right = Math.min(rect.right, window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || 0);
+        if (bottom <= top || right <= left)
+            continue;
+        const area = (bottom - top) * (right - left);
+        paintBlocks.push({ time, area });
+    }
+    return paintBlocks;
+}
+function calculateSpeedIndex(firstContentfulPaint, paintBlocks) {
+    let a = (Math.max((document.documentElement && document.documentElement.clientWidth) || 0, window.innerWidth || 0) *
+        Math.max((document.documentElement && document.documentElement.clientHeight) || 0, window.innerHeight || 0)) /
+        10;
+    let s = a * firstContentfulPaint;
+    for (let i = 0; i < paintBlocks.length; i++) {
+        const { time, area } = paintBlocks[i];
+        a += area;
+        s += area * (time > firstContentfulPaint ? time : firstContentfulPaint);
+    }
+    return a === 0 ? 0 : s / a;
+}
+export default function (app, opts) {
+    const options = Object.assign({
+        captureResourceTimings: true,
+        capturePageLoadTimings: true,
+        capturePageRenderTimings: true,
+    }, opts);
+    if (!('PerformanceObserver' in window)) {
+        options.captureResourceTimings = false;
+    }
+    if (!options.captureResourceTimings) {
+        return;
+    } // Resources are necessary for all timings
+    let resources = {};
+    function resourceTiming(entry) {
+        if (entry.duration < 0 || !isURL(entry.name) || app.isServiceURL(entry.name))
+            return;
+        if (resources !== null) {
+            resources[entry.name] = entry.startTime + entry.duration;
+        }
+        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));
+    }
+    const observer = new PerformanceObserver((list) => list.getEntries().forEach(resourceTiming));
+    let prevSessionID;
+    app.attachStartCallback(function ({ sessionID }) {
+        if (sessionID !== prevSessionID) {
+            // Send past page resources on a newly started session
+            performance.getEntriesByType('resource').forEach(resourceTiming);
+            prevSessionID = sessionID;
+        }
+        observer.observe({ entryTypes: ['resource'] });
+    });
+    app.attachStopCallback(function () {
+        observer.disconnect();
+    });
+    let firstPaint = 0, firstContentfulPaint = 0;
+    if (options.capturePageLoadTimings) {
+        let pageLoadTimingSent = false;
+        app.ticker.attach(() => {
+            if (pageLoadTimingSent) {
+                return;
+            }
+            if (firstPaint === 0 || firstContentfulPaint === 0) {
+                performance.getEntriesByType('paint').forEach((entry) => {
+                    const { name, startTime } = entry;
+                    switch (name) {
+                        case 'first-paint':
+                            firstPaint = startTime;
+                            break;
+                        case 'first-contentful-paint':
+                            firstContentfulPaint = startTime;
+                            break;
+                    }
+                });
+            }
+            if (performance.timing.loadEventEnd || performance.now() > 30000) {
+                pageLoadTimingSent = true;
+                const { 
+                // should be ok to use here, (https://github.com/mdn/content/issues/4713)
+                // since it is compared with the values obtained on the page load (before any possible sleep state)
+                // deprecated though
+                navigationStart, requestStart, responseStart, responseEnd, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, } = performance.timing;
+                app.send(PageLoadTiming(requestStart - navigationStart || 0, responseStart - navigationStart || 0, responseEnd - navigationStart || 0, domContentLoadedEventStart - navigationStart || 0, domContentLoadedEventEnd - navigationStart || 0, loadEventStart - navigationStart || 0, loadEventEnd - navigationStart || 0, firstPaint, firstContentfulPaint));
+            }
+        }, 30);
+    }
+    if (options.capturePageRenderTimings) {
+        let visuallyComplete = 0, interactiveWindowStartTime = 0, interactiveWindowTickTime = 0, paintBlocks = null;
+        let pageRenderTimingSent = false;
+        app.ticker.attach(() => {
+            if (pageRenderTimingSent) {
+                return;
+            }
+            const time = performance.now();
+            if (resources !== null) {
+                visuallyComplete = Math.max.apply(null, Object.keys(resources).map((k) => resources[k]));
+                if (time - visuallyComplete > 1000) {
+                    paintBlocks = getPaintBlocks(resources);
+                    resources = null;
+                }
+            }
+            if (interactiveWindowTickTime !== null) {
+                if (time - interactiveWindowTickTime > 50) {
+                    interactiveWindowStartTime = time;
+                }
+                interactiveWindowTickTime = time - interactiveWindowStartTime > 5000 ? null : time;
+            }
+            if ((paintBlocks !== null && interactiveWindowTickTime === null) || time > 30000) {
+                pageRenderTimingSent = true;
+                resources = null;
+                const speedIndex = paintBlocks === null
+                    ? 0
+                    : calculateSpeedIndex(firstContentfulPaint || firstPaint, paintBlocks);
+                const { domContentLoadedEventEnd, navigationStart } = performance.timing;
+                const timeToInteractive = interactiveWindowTickTime === null
+                    ? Math.max(interactiveWindowStartTime, firstContentfulPaint, domContentLoadedEventEnd - navigationStart || 0)
+                    : 0;
+                app.send(PageRenderTiming(speedIndex, firstContentfulPaint > visuallyComplete ? firstContentfulPaint : visuallyComplete, timeToInteractive));
+            }
+        });
+    }
+}

package/lib/modules/viewport.d.ts

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

package/lib/modules/viewport.js

@@ -0,0 +1,40 @@
+import { getTimeOrigin } from '../utils.js';
+import { SetPageLocation, SetViewportSize, SetPageVisibility } from '../app/messages.gen.js';
+export default function (app) {
+    let url, width, height;
+    let navigationStart;
+    let referrer = document.referrer;
+    const sendSetPageLocation = app.safe(() => {
+        const { URL } = document;
+        if (URL !== url) {
+            url = URL;
+            app.send(SetPageLocation(url, referrer, navigationStart));
+            navigationStart = 0;
+            referrer = url;
+        }
+    });
+    const sendSetViewportSize = app.safe(() => {
+        const { innerWidth, innerHeight } = window;
+        if (innerWidth !== width || innerHeight !== height) {
+            width = innerWidth;
+            height = innerHeight;
+            app.send(SetViewportSize(width, height));
+        }
+    });
+    const sendSetPageVisibility = document.hidden === undefined
+        ? Function.prototype
+        : app.safe(() => app.send(SetPageVisibility(document.hidden)));
+    app.attachStartCallback(() => {
+        url = '';
+        navigationStart = getTimeOrigin();
+        width = height = -1;
+        sendSetPageLocation();
+        sendSetViewportSize();
+        sendSetPageVisibility();
+    });
+    if (document.hidden !== undefined) {
+        app.attachEventListener(document, 'visibilitychange', sendSetPageVisibility, false, false);
+    }
+    app.ticker.attach(sendSetPageLocation, 1, false);
+    app.ticker.attach(sendSetViewportSize, 5, false);
+}

package/lib/utils.d.ts

@@ -0,0 +1,13 @@
+export declare const IN_BROWSER: boolean;
+export declare const IS_FIREFOX: false | RegExpMatchArray | null;
+export declare const MAX_STR_LEN = 100000;
+export declare function adjustTimeOrigin(): void;
+export declare function getTimeOrigin(): number;
+export declare const now: () => number;
+export declare const stars: (str: string) => string;
+export declare function normSpaces(str: string): string;
+export declare function isURL(s: string): boolean;
+export declare const DOCS_HOST = "https://docs.openreplay.com";
+export declare function deprecationWarn(nameOfFeature: string, useInstead: string, docsPath?: string): void;
+export declare function getLabelAttribute(e: Element): string | null;
+export declare function hasOpenreplayAttribute(e: Element, attr: string): boolean;

package/lib/utils.js

@@ -0,0 +1,61 @@
+const DEPRECATED_ATTRS = { htmlmasked: 'hidden', masked: 'obscured' };
+export const IN_BROWSER = !(typeof window === 'undefined');
+export const IS_FIREFOX = IN_BROWSER && navigator.userAgent.match(/firefox|fxios/i);
+export const MAX_STR_LEN = 1e5;
+// Buggy to use `performance.timeOrigin || performance.timing.navigationStart`
+// https://github.com/mdn/content/issues/4713
+// Maybe move to timer/ticker
+let timeOrigin = IN_BROWSER ? Date.now() - performance.now() : 0;
+export function adjustTimeOrigin() {
+    timeOrigin = Date.now() - performance.now();
+}
+export function getTimeOrigin() {
+    return timeOrigin;
+}
+export const now = IN_BROWSER && !!performance.now
+    ? () => Math.round(performance.now() + timeOrigin)
+    : () => Date.now();
+export const stars = 'repeat' in String.prototype
+    ? (str) => '*'.repeat(str.length)
+    : (str) => str.replace(/./g, '*');
+export function normSpaces(str) {
+    return str.trim().replace(/\s+/g, ' ');
+}
+// isAbsoluteUrl regexp:  /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
+export function isURL(s) {
+    return s.startsWith('https://') || s.startsWith('http://');
+}
+// TODO: JOIN IT WITH LOGGER somehow (use logging decorators?); Don't forget about index.js loggin when there is no logger instance.
+export const DOCS_HOST = 'https://docs.openreplay.com';
+const warnedFeatures = {};
+export function deprecationWarn(nameOfFeature, useInstead, docsPath = '/') {
+    if (warnedFeatures[nameOfFeature]) {
+        return;
+    }
+    console.warn(`OpenReplay: ${nameOfFeature} is deprecated. ${useInstead ? `Please, use ${useInstead} instead.` : ''} Visit ${DOCS_HOST}${docsPath} for more information.`);
+    warnedFeatures[nameOfFeature] = true;
+}
+export function getLabelAttribute(e) {
+    let value = e.getAttribute('data-openreplay-label');
+    if (value !== null) {
+        return value;
+    }
+    value = e.getAttribute('data-asayer-label');
+    if (value !== null) {
+        deprecationWarn('"data-asayer-label" attribute', '"data-openreplay-label" attribute', '/');
+    }
+    return value;
+}
+export function hasOpenreplayAttribute(e, attr) {
+    const newName = `data-openreplay-${attr}`;
+    if (e.hasAttribute(newName)) {
+        // @ts-ignore
+        if (DEPRECATED_ATTRS[attr]) {
+            deprecationWarn(`"${newName}" attribute`, 
+            // @ts-ignore
+            `"${DEPRECATED_ATTRS[attr]}" attribute`, '/installation/sanitize-data');
+        }
+        return true;
+    }
+    return false;
+}

package/lib/vendors/finder/finder.d.ts

@@ -0,0 +1,12 @@
+export type Options = {
+    root: Element;
+    idName: (name: string) => boolean;
+    className: (name: string) => boolean;
+    tagName: (name: string) => boolean;
+    attr: (name: string, value: string) => boolean;
+    seedMinLength: number;
+    optimizedMinLength: number;
+    threshold: number;
+    maxNumberOfTries: number;
+};
+export declare function finder(input: Element, options?: Partial<Options>): string;

package/lib/vendors/finder/finder.js

@@ -0,0 +1,348 @@
+var Limit;
+(function (Limit) {
+    Limit[Limit["All"] = 0] = "All";
+    Limit[Limit["Two"] = 1] = "Two";
+    Limit[Limit["One"] = 2] = "One";
+})(Limit || (Limit = {}));
+let config;
+let rootDocument;
+export function finder(input, options) {
+    if (input.nodeType !== Node.ELEMENT_NODE) {
+        throw new Error("Can't generate CSS selector for non-element node type.");
+    }
+    if ('html' === input.tagName.toLowerCase()) {
+        return 'html';
+    }
+    const defaults = {
+        root: document.body,
+        idName: (name) => true,
+        className: (name) => true,
+        tagName: (name) => true,
+        attr: (name, value) => false,
+        seedMinLength: 1,
+        optimizedMinLength: 2,
+        threshold: 1000,
+        maxNumberOfTries: 10000,
+    };
+    config = Object.assign(Object.assign({}, defaults), options);
+    rootDocument = findRootDocument(config.root, defaults);
+    let path = bottomUpSearch(input, Limit.All, () => bottomUpSearch(input, Limit.Two, () => bottomUpSearch(input, Limit.One)));
+    if (path) {
+        const optimized = sort(optimize(path, input));
+        if (optimized.length > 0) {
+            path = optimized[0];
+        }
+        return selector(path);
+    }
+    else {
+        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;
+    }
+    return rootNode;
+}
+function bottomUpSearch(input, limit, fallback) {
+    let path = null;
+    const stack = [];
+    let current = input;
+    let i = 0;
+    while (current && current !== config.root.parentElement) {
+        let level = maybe(id(current)) ||
+            maybe(...attr(current)) ||
+            maybe(...classNames(current)) ||
+            maybe(tagName(current)) || [any()];
+        const nth = index(current);
+        if (limit === Limit.All) {
+            if (nth) {
+                level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));
+            }
+        }
+        else if (limit === Limit.Two) {
+            level = level.slice(0, 1);
+            if (nth) {
+                level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));
+            }
+        }
+        else if (limit === Limit.One) {
+            const [node] = (level = level.slice(0, 1));
+            if (nth && dispensableNth(node)) {
+                level = [nthChild(node, nth)];
+            }
+        }
+        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++;
+    }
+    if (!path) {
+        path = findUniquePath(stack, fallback);
+    }
+    return path;
+}
+function findUniquePath(stack, fallback) {
+    const paths = sort(combinations(stack));
+    if (paths.length > config.threshold) {
+        return fallback ? fallback() : null;
+    }
+    for (const candidate of paths) {
+        if (unique(candidate)) {
+            return candidate;
+        }
+    }
+    return null;
+}
+function selector(path) {
+    let node = path[0];
+    let query = node.name;
+    for (let i = 1; i < path.length; i++) {
+        const level = path[i].level || 0;
+        if (node.level === level - 1) {
+            query = `${path[i].name} > ${query}`;
+        }
+        else {
+            query = `${path[i].name} ${query}`;
+        }
+        node = path[i];
+    }
+    return query;
+}
+function penalty(path) {
+    return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);
+}
+function unique(path) {
+    switch (rootDocument.querySelectorAll(selector(path)).length) {
+        case 0:
+            throw new Error(`Can't select any node with this selector: ${selector(path)}`);
+        case 1:
+            return true;
+        default:
+            return false;
+    }
+}
+function id(input) {
+    const elementId = input.getAttribute('id');
+    if (elementId && config.idName(elementId)) {
+        return {
+            name: '#' + cssesc(elementId, { isIdentifier: true }),
+            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: '[' + cssesc(attr.name, { isIdentifier: true }) + '="' + cssesc(attr.value) + '"]',
+        penalty: 0.5,
+    }));
+}
+function classNames(input) {
+    const names = Array.from(input.classList).filter(config.className);
+    return names.map((name) => ({
+        name: '.' + cssesc(name, { isIdentifier: true }),
+        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 index(input) {
+    const parent = input.parentNode;
+    if (!parent) {
+        return null;
+    }
+    let child = parent.firstChild;
+    if (!child) {
+        return null;
+    }
+    let i = 0;
+    while (child) {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            i++;
+        }
+        if (child === input) {
+            break;
+        }
+        child = child.nextSibling;
+    }
+    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 maybe(...level) {
+    const list = level.filter(notEmpty);
+    if (list.length > 0) {
+        return list;
+    }
+    return null;
+}
+function notEmpty(value) {
+    return value !== null && value !== undefined;
+}
+function combinations(stack, path = []) {
+    const paths = [];
+    if (stack.length > 0) {
+        for (const node of stack[0]) {
+            paths.push(...combinations(stack.slice(1, stack.length), path.concat(node)));
+        }
+    }
+    else {
+        paths.push(path);
+    }
+    return paths;
+}
+function sort(paths) {
+    return Array.from(paths).sort((a, b) => penalty(a) - penalty(b));
+}
+function optimize(path, input, scope = {
+    counter: 0,
+    visited: new Map(),
+}) {
+    const paths = [];
+    if (path.length > 2 && path.length > config.optimizedMinLength) {
+        for (let i = 1; i < path.length - 1; i++) {
+            if (scope.counter > config.maxNumberOfTries) {
+                return paths; // Okay At least I tried!
+            }
+            scope.counter += 1;
+            const newPath = [...path];
+            newPath.splice(i, 1);
+            const newPathKey = selector(newPath);
+            if (scope.visited.has(newPathKey)) {
+                return paths;
+            }
+            if (unique(newPath) && same(newPath, input)) {
+                paths.push(newPath);
+                scope.visited.set(newPathKey, true);
+                paths.push(...optimize(newPath, input, scope));
+            }
+        }
+    }
+    return paths;
+}
+function same(path, input) {
+    return rootDocument.querySelector(selector(path)) === input;
+}
+const regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+const regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+const regexExcessiveSpaces = /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+const defaultOptions = {
+    escapeEverything: false,
+    isIdentifier: false,
+    quotes: 'single',
+    wrap: false,
+};
+function cssesc(string, opt = {}) {
+    const options = Object.assign(Object.assign({}, defaultOptions), opt);
+    if (options.quotes != 'single' && options.quotes != 'double') {
+        options.quotes = 'single';
+    }
+    const quote = options.quotes == 'double' ? '"' : "'";
+    const isIdentifier = options.isIdentifier;
+    const firstChar = string.charAt(0);
+    let output = '';
+    let counter = 0;
+    const length = string.length;
+    while (counter < length) {
+        const character = string.charAt(counter++);
+        let codePoint = character.charCodeAt(0);
+        let value = void 0;
+        // If it’s not a printable ASCII character…
+        if (codePoint < 0x20 || codePoint > 0x7e) {
+            if (codePoint >= 0xd800 && codePoint <= 0xdbff && counter < length) {
+                // It’s a high surrogate, and there is a next character.
+                const extra = string.charCodeAt(counter++);
+                if ((extra & 0xfc00) == 0xdc00) {
+                    // next character is low surrogate
+                    codePoint = ((codePoint & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000;
+                }
+                else {
+                    // It’s an unmatched surrogate; only append this code unit, in case
+                    // the next code unit is the high surrogate of a surrogate pair.
+                    counter--;
+                }
+            }
+            value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+        }
+        else {
+            if (options.escapeEverything) {
+                if (regexAnySingleEscape.test(character)) {
+                    value = '\\' + character;
+                }
+                else {
+                    value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+                }
+            }
+            else if (/[\t\n\f\r\x0B]/.test(character)) {
+                value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+            }
+            else if (character == '\\' ||
+                (!isIdentifier &&
+                    ((character == '"' && quote == character) || (character == "'" && quote == character))) ||
+                (isIdentifier && regexSingleEscape.test(character))) {
+                value = '\\' + character;
+            }
+            else {
+                value = character;
+            }
+        }
+        output += value;
+    }
+    if (isIdentifier) {
+        if (/^-[-\d]/.test(output)) {
+            output = '\\-' + output.slice(1);
+        }
+        else if (/\d/.test(firstChar)) {
+            output = '\\3' + firstChar + ' ' + output.slice(1);
+        }
+    }
+    // Remove spaces after `\HEX` escapes that are not followed by a hex digit,
+    // since they’re redundant. Note that this is only possible if the escape
+    // sequence isn’t preceded by an odd number of backslashes.
+    output = output.replace(regexExcessiveSpaces, function ($0, $1, $2) {
+        if ($1 && $1.length % 2) {
+            // It’s not safe to remove the space, so don’t.
+            return $0;
+        }
+        // Strip the space.
+        return ($1 || '') + $2;
+    });
+    if (!isIdentifier && options.wrap) {
+        return quote + output + quote;
+    }
+    return output;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "5.0.2-beta",
+  "version": "5.0.2",
   "keywords": [
     "logging",
     "replay"