@openreplay/tracker 8.0.0 → 8.0.1-beta14

package/lib/modules/Network/utils.js

@@ -0,0 +1,201 @@
+export const genResponseByType = (responseType, response) => {
+    let result = '';
+    switch (responseType) {
+        case '':
+        case 'text':
+        case 'json':
+            if (typeof response == 'string') {
+                try {
+                    result = JSON.parse(response);
+                }
+                catch (e) {
+                    // not a JSON string
+                    result = response.slice(0, 10000);
+                }
+            }
+            else if (isPureObject(response) || Array.isArray(response)) {
+                result = JSON.stringify(response);
+            }
+            else if (typeof response !== 'undefined') {
+                result = Object.prototype.toString.call(response);
+            }
+            break;
+        case 'blob':
+        case 'document':
+        case 'arraybuffer':
+        default:
+            if (typeof response !== 'undefined') {
+                result = Object.prototype.toString.call(response);
+            }
+            break;
+    }
+    return result;
+};
+export const getStringResponseByType = (responseType, response) => {
+    let result = '';
+    switch (responseType) {
+        case '':
+        case 'text':
+        case 'json':
+            if (typeof response == 'string') {
+                result = response;
+            }
+            else if (isPureObject(response) || Array.isArray(response)) {
+                result = JSON.stringify(response);
+            }
+            else if (typeof response !== 'undefined') {
+                result = Object.prototype.toString.call(response);
+            }
+            break;
+        case 'blob':
+        case 'document':
+        case 'arraybuffer':
+        default:
+            if (typeof response !== 'undefined') {
+                result = Object.prototype.toString.call(response);
+            }
+            break;
+    }
+    return result;
+};
+export const genStringBody = (body) => {
+    if (!body) {
+        return null;
+    }
+    let result;
+    if (typeof body === 'string') {
+        if (body[0] === '{' || body[0] === '[') {
+            result = body;
+        }
+        // 'a=1&b=2' => try to parse as query
+        const arr = body.split('&');
+        if (arr.length === 1) {
+            // not a query, parse as original string
+            result = body;
+        }
+        else {
+            // 'a=1&b=2&c' => parse as query
+            result = arr.join(',');
+        }
+    }
+    else if (isIterable(body)) {
+        // FormData or URLSearchParams or Array
+        const arr = [];
+        for (const [key, value] of body) {
+            arr.push(`${key}=${typeof value === 'string' ? value : '[object Object]'}`);
+        }
+        result = arr.join(',');
+    }
+    else if (body instanceof Blob ||
+        body instanceof ReadableStream ||
+        body instanceof ArrayBuffer) {
+        result = 'byte data';
+    }
+    else if (isPureObject(body)) {
+        // overriding ArrayBufferView which is not convertable to string
+        result = body;
+    }
+    else {
+        result = `can't parse body ${typeof body}`;
+    }
+    return result;
+};
+export const genGetDataByUrl = (url, getData = {}) => {
+    if (!isPureObject(getData)) {
+        getData = {};
+    }
+    let query = url ? url.split('?') : []; // a.php?b=c&d=?e => ['a.php', 'b=c&d=', 'e']
+    query.shift(); // => ['b=c&d=', 'e']
+    if (query.length > 0) {
+        query = query.join('?').split('&'); // => 'b=c&d=?e' => ['b=c', 'd=?e']
+        for (const q of query) {
+            const kv = q.split('=');
+            try {
+                getData[kv[0]] = decodeURIComponent(kv[1]);
+            }
+            catch (e) {
+                // "URIError: URI malformed" will be thrown when `kv[1]` contains "%", so just use raw data
+                // @issue #470
+                // @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_URI
+                getData[kv[0]] = kv[1];
+            }
+        }
+    }
+    return getData;
+};
+export const genFormattedBody = (body) => {
+    if (!body) {
+        return null;
+    }
+    let result;
+    if (typeof body === 'string') {
+        try {
+            // '{a:1}' =>
+            result = JSON.parse(body);
+        }
+        catch (e) {
+            // 'a=1&b=2' => try to parse as query
+            const arr = body.split('&');
+            result = {};
+            // eslint-disable-next-line
+            for (let q of arr) {
+                const kv = q.split('=');
+                result[kv[0]] = kv[1] === undefined ? 'undefined' : kv[1];
+            }
+        }
+    }
+    else if (isIterable(body)) {
+        // FormData or URLSearchParams or Array
+        result = {};
+        for (const [key, value] of body) {
+            result[key] = typeof value === 'string' ? value : '[object Object]';
+        }
+    }
+    else if (body instanceof Blob ||
+        body instanceof ReadableStream ||
+        body instanceof ArrayBuffer) {
+        result = 'byte data';
+    }
+    else if (isPureObject(body)) {
+        // overriding ArrayBufferView which is not convertable to string
+        result = body;
+    }
+    else {
+        result = `can't parse body ${typeof body}`;
+    }
+    return result;
+};
+export function isPureObject(input) {
+    return null !== input && typeof input === 'object';
+}
+export function isIterable(value) {
+    if (value === null || value === undefined) {
+        return false;
+    }
+    return typeof Symbol !== 'undefined' && typeof value[Symbol.iterator] === 'function';
+}
+export function formatByteSize(bytes) {
+    if (bytes <= 0) {
+        // shouldn't happen?
+        return '';
+    }
+    if (bytes >= 1000 * 1000) {
+        return (bytes / 1000 / 1000).toFixed(1) + ' MB';
+    }
+    if (bytes >= 1000) {
+        return (bytes / 1000).toFixed(1) + ' KB';
+    }
+    return `${bytes}B`;
+}
+export const getURL = (urlString) => {
+    if (urlString.startsWith('//')) {
+        const baseUrl = new URL(window.location.href);
+        urlString = `${baseUrl.protocol}${urlString}`;
+    }
+    if (urlString.startsWith('http')) {
+        return new URL(urlString);
+    }
+    else {
+        return new URL(urlString, window.location.href);
+    }
+};

package/lib/modules/Network/xhrProxy.d.ts

@@ -0,0 +1,47 @@
+/**
+ * I took inspiration in few stack exchange posts
+ * and Tencent vConsole library (MIT)
+ * by wrapping the XMLHttpRequest object in a Proxy
+ * we can intercept the network requests
+ * in not-so-hacky way
+ * */
+import NetworkMessage from './networkMessage.js';
+import { RequestResponseData } from './types.js';
+import { NetworkRequest } from '../../common/messages.gen.js';
+export declare class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyHandler<T> {
+    private readonly ignoredHeaders;
+    private readonly setSessionTokenHeader;
+    private readonly sanitize;
+    private readonly sendMessage;
+    private readonly isServiceUrl;
+    XMLReq: XMLHttpRequest;
+    item: NetworkMessage;
+    constructor(XMLReq: XMLHttpRequest, ignoredHeaders: boolean | string[], setSessionTokenHeader: (cb: (name: string, value: string) => void) => void, sanitize: (data: RequestResponseData) => RequestResponseData, sendMessage: (message: NetworkRequest) => void, isServiceUrl: (url: string) => boolean);
+    get(target: T, key: string): any;
+    set(target: T, key: string, value: (args: any[]) => any): boolean;
+    onReadyStateChange(): void;
+    onAbort(): void;
+    onTimeout(): void;
+    protected getOpen(target: T): (...args: any[]) => any;
+    protected getSend(target: T): (...args: any[]) => any;
+    protected getSetRequestHeader(target: T): (...args: any[]) => any;
+    protected setOnReadyStateChange(target: T, key: string, orscFunction: (args: any[]) => any): boolean;
+    protected setOnAbort(target: T, key: string, oaFunction: (args: any[]) => any): boolean;
+    protected setOnTimeout(target: T, key: string, otFunction: (args: any[]) => any): boolean;
+    /**
+     * Update item's properties according to readyState.
+     */
+    protected updateItemByReadyState(): void;
+}
+export default class XHRProxy {
+    static origXMLHttpRequest: {
+        new (): XMLHttpRequest;
+        prototype: XMLHttpRequest;
+        readonly DONE: number;
+        readonly HEADERS_RECEIVED: number;
+        readonly LOADING: number;
+        readonly OPENED: number;
+        readonly UNSENT: number;
+    };
+    static create(ignoredHeaders: boolean | string[], setSessionTokenHeader: (cb: (name: string, value: string) => void) => void, sanitize: (data: RequestResponseData) => RequestResponseData, sendMessage: (data: NetworkRequest) => void, isServiceUrl: (url: string) => boolean): any;
+}

package/lib/modules/Network/xhrProxy.js

@@ -0,0 +1,204 @@
+/**
+ * I took inspiration in few stack exchange posts
+ * and Tencent vConsole library (MIT)
+ * by wrapping the XMLHttpRequest object in a Proxy
+ * we can intercept the network requests
+ * in not-so-hacky way
+ * */
+import NetworkMessage, { RequestState } from './networkMessage.js';
+import { genGetDataByUrl, formatByteSize, genStringBody, getStringResponseByType } from './utils.js';
+export class XHRProxyHandler {
+    constructor(XMLReq, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl) {
+        this.ignoredHeaders = ignoredHeaders;
+        this.setSessionTokenHeader = setSessionTokenHeader;
+        this.sanitize = sanitize;
+        this.sendMessage = sendMessage;
+        this.isServiceUrl = isServiceUrl;
+        this.XMLReq = XMLReq;
+        this.XMLReq.onreadystatechange = () => {
+            this.onReadyStateChange();
+        };
+        this.XMLReq.onabort = () => {
+            this.onAbort();
+        };
+        this.XMLReq.ontimeout = () => {
+            this.onTimeout();
+        };
+        this.item = new NetworkMessage(ignoredHeaders, setSessionTokenHeader, sanitize);
+        this.item.requestType = 'xhr';
+    }
+    get(target, key) {
+        switch (key) {
+            case 'open':
+                return this.getOpen(target);
+            case 'send':
+                return this.getSend(target);
+            case 'setRequestHeader':
+                return this.getSetRequestHeader(target);
+            default:
+                // eslint-disable-next-line no-case-declarations
+                const value = Reflect.get(target, key);
+                if (typeof value === 'function') {
+                    return value.bind(target);
+                }
+                else {
+                    return value;
+                }
+        }
+    }
+    set(target, key, value) {
+        switch (key) {
+            case 'onreadystatechange':
+                return this.setOnReadyStateChange(target, key, value);
+            case 'onabort':
+                return this.setOnAbort(target, key, value);
+            case 'ontimeout':
+                return this.setOnTimeout(target, key, value);
+            default:
+            // not tracked methods
+        }
+        return Reflect.set(target, key, value);
+    }
+    onReadyStateChange() {
+        if (this.item.url && this.isServiceUrl(this.item.url))
+            return;
+        this.item.readyState = this.XMLReq.readyState;
+        this.item.responseType = this.XMLReq.responseType;
+        this.item.endTime = performance.now();
+        this.item.duration = this.item.endTime - this.item.startTime;
+        this.updateItemByReadyState();
+        setTimeout(() => {
+            this.item.response = getStringResponseByType(this.item.responseType, this.item.response);
+        }, 0);
+        if (this.XMLReq.readyState === RequestState.DONE) {
+            this.sendMessage(this.item.getMessage());
+        }
+    }
+    onAbort() {
+        this.item.cancelState = 1;
+        this.item.statusText = 'Abort';
+        this.sendMessage(this.item.getMessage());
+    }
+    onTimeout() {
+        this.item.cancelState = 3;
+        this.item.statusText = 'Timeout';
+        this.sendMessage(this.item.getMessage());
+    }
+    getOpen(target) {
+        const targetFunction = Reflect.get(target, 'open');
+        return (...args) => {
+            const method = args[0];
+            const url = args[1];
+            this.item.method = method ? method.toUpperCase() : 'GET';
+            this.item.url = url || '';
+            this.item.name = this.item.url.replace(new RegExp('/*$'), '').split('/').pop() || '';
+            this.item.getData = genGetDataByUrl(this.item.url, {});
+            return targetFunction.apply(target, args);
+        };
+    }
+    getSend(target) {
+        const targetFunction = Reflect.get(target, 'send');
+        return (...args) => {
+            const data = args[0];
+            this.item.requestData = genStringBody(data);
+            return targetFunction.apply(target, args);
+        };
+    }
+    getSetRequestHeader(target) {
+        const targetFunction = Reflect.get(target, 'setRequestHeader');
+        return (...args) => {
+            if (!this.item.requestHeader) {
+                this.item.requestHeader = {};
+            }
+            // @ts-ignore
+            this.item.requestHeader[args[0]] = args[1];
+            return targetFunction.apply(target, args);
+        };
+    }
+    setOnReadyStateChange(target, key, orscFunction) {
+        return Reflect.set(target, key, (...args) => {
+            this.onReadyStateChange();
+            orscFunction.apply(target, args);
+        });
+    }
+    setOnAbort(target, key, oaFunction) {
+        return Reflect.set(target, key, (...args) => {
+            this.onAbort();
+            oaFunction.apply(target, args);
+        });
+    }
+    setOnTimeout(target, key, otFunction) {
+        return Reflect.set(target, key, (...args) => {
+            this.onTimeout();
+            otFunction.apply(target, args);
+        });
+    }
+    /**
+     * Update item's properties according to readyState.
+     */
+    updateItemByReadyState() {
+        switch (this.XMLReq.readyState) {
+            case RequestState.UNSENT:
+            case RequestState.OPENED:
+                this.item.status = RequestState.UNSENT;
+                this.item.statusText = 'Pending';
+                if (!this.item.startTime) {
+                    this.item.startTime = performance.now();
+                }
+                break;
+            case RequestState.HEADERS_RECEIVED:
+                this.item.status = this.XMLReq.status;
+                this.item.statusText = 'Loading';
+                this.item.header = {};
+                // eslint-disable-next-line no-case-declarations
+                const header = this.XMLReq.getAllResponseHeaders() || '', headerArr = header.split('\n');
+                // extract plain text to key-value format
+                for (let i = 0; i < headerArr.length; i++) {
+                    const line = headerArr[i];
+                    if (!line) {
+                        continue;
+                    }
+                    const arr = line.split(': ');
+                    const key = arr[0];
+                    this.item.header[key] = arr.slice(1).join(': ');
+                }
+                break;
+            case RequestState.LOADING:
+                this.item.status = this.XMLReq.status;
+                this.item.statusText = 'Loading';
+                if (!!this.XMLReq.response && this.XMLReq.response.length) {
+                    this.item.responseSize = this.XMLReq.response.length;
+                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                }
+                break;
+            case RequestState.DONE:
+                // `XMLReq.abort()` will change `status` from 200 to 0, so use previous value in this case
+                this.item.status = this.XMLReq.status || this.item.status || 0;
+                // show status code when request completed
+                this.item.statusText = String(this.item.status);
+                this.item.endTime = performance.now();
+                this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
+                this.item.response = this.XMLReq.response;
+                if (!!this.XMLReq.response && this.XMLReq.response.length) {
+                    this.item.responseSize = this.XMLReq.response.length;
+                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
+                }
+                break;
+            default:
+                this.item.status = this.XMLReq.status;
+                this.item.statusText = 'Unknown';
+                break;
+        }
+    }
+}
+export default class XHRProxy {
+    static create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl) {
+        return new Proxy(XMLHttpRequest, {
+            construct(original) {
+                const XMLReq = new original();
+                return new Proxy(XMLReq, new XHRProxyHandler(XMLReq, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl));
+            },
+        });
+    }
+}
+XHRProxy.origXMLHttpRequest = XMLHttpRequest;

package/lib/modules/console.js

@@ -90,26 +90,34 @@ export default function (app, opts) {
         return;
     }
     const sendConsoleLog = app.safe((level, args) => app.send(ConsoleLog(level, printf(args))));
-    let n;
+    let n = 0;
     const reset = () => {
         n = 0;
     };
     app.attachStartCallback(reset);
     app.ticker.attach(reset, 33, false);
-    const patchConsole = (console) => options.consoleMethods.forEach((method) => {
-        if (consoleMethods.indexOf(method) === -1) {
-            app.debug.error(`OpenReplay: unsupported console method "${method}"`);
-            return;
-        }
-        const fn = console[method];
-        console[method] = function (...args) {
-            fn.apply(this, args);
-            if (n++ > options.consoleThrottling) {
+    const patchConsole = (console) => {
+        const handler = {
+            apply: function (target, thisArg, argumentsList) {
+                target.apply(console, argumentsList);
+                n = n + 1;
+                if (n > options.consoleThrottling) {
+                    return;
+                }
+                else {
+                    sendConsoleLog(target.name, argumentsList);
+                }
+            },
+        };
+        options.consoleMethods.forEach((method) => {
+            if (consoleMethods.indexOf(method) === -1) {
+                app.debug.error(`OpenReplay: unsupported console method "${method}"`);
                 return;
             }
-            sendConsoleLog(method, args);
-        };
-    });
+            const fn = console[method];
+            console[method] = new Proxy(fn, handler);
+        });
+    };
     const patchContext = app.safe((context) => patchConsole(context.console));
     patchContext(window);
     app.observer.attachContextCallback(patchContext);

package/lib/modules/featureFlags.d.ts

@@ -0,0 +1,25 @@
+import App from '../app/index.js';
+export interface IFeatureFlag {
+    key: string;
+    is_persist: boolean;
+    value: string | boolean;
+    payload: string;
+}
+export interface FetchPersistFlagsData {
+    key: string;
+    value: string | boolean;
+}
+export default class FeatureFlags {
+    private readonly app;
+    flags: IFeatureFlag[];
+    storageKey: string;
+    onFlagsCb: (flags: IFeatureFlag[]) => void;
+    constructor(app: App);
+    getFeatureFlag(flagName: string): IFeatureFlag | undefined;
+    isFlagEnabled(flagName: string): boolean;
+    onFlagsLoad(cb: (flags: IFeatureFlag[]) => void): void;
+    reloadFlags(): Promise<void>;
+    handleFlags(flags: IFeatureFlag[]): void;
+    clearPersistFlags(): void;
+    diffPersist(flags: IFeatureFlag[]): IFeatureFlag[];
+}

package/lib/modules/featureFlags.js

@@ -0,0 +1,97 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export default class FeatureFlags {
+    constructor(app) {
+        this.app = app;
+        this.storageKey = '__openreplay_flags';
+        const persistFlags = this.app.sessionStorage.getItem(this.storageKey);
+        if (persistFlags) {
+            const persistFlagsStrArr = persistFlags.split(';').filter(Boolean);
+            this.flags = persistFlagsStrArr.map((flag) => JSON.parse(flag));
+        }
+    }
+    getFeatureFlag(flagName) {
+        return this.flags.find((flag) => flag.key === flagName);
+    }
+    isFlagEnabled(flagName) {
+        return this.flags.findIndex((flag) => flag.key === flagName) !== -1;
+    }
+    onFlagsLoad(cb) {
+        this.onFlagsCb = cb;
+    }
+    reloadFlags() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const persistFlagsStr = this.app.sessionStorage.getItem(this.storageKey);
+            const persistFlags = {};
+            if (persistFlagsStr) {
+                const persistArray = persistFlagsStr.split(';').filter(Boolean);
+                persistArray.forEach((flag) => {
+                    const flagObj = JSON.parse(flag);
+                    persistFlags[flagObj.key] = { key: flagObj.key, value: flagObj.value };
+                });
+            }
+            const sessionInfo = this.app.session.getInfo();
+            const userInfo = this.app.session.userInfo;
+            const requestObject = {
+                projectID: sessionInfo.projectID,
+                userID: sessionInfo.userID,
+                metadata: sessionInfo.metadata,
+                referrer: document.referrer,
+                // todo: get from backend
+                os: userInfo.userOS,
+                device: userInfo.userDevice,
+                country: userInfo.userCountry,
+                state: userInfo.userState,
+                city: userInfo.userCity,
+                browser: userInfo.userBrowser,
+                persistFlags: persistFlags,
+            };
+            const resp = yield fetch(this.app.options.ingestPoint + '/v1/web/feature-flags', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${this.app.session.getSessionToken()}`,
+                },
+                body: JSON.stringify(requestObject),
+            });
+            if (resp.status === 200) {
+                const data = yield resp.json();
+                return this.handleFlags(data.flags);
+            }
+        });
+    }
+    handleFlags(flags) {
+        var _a;
+        const persistFlags = [];
+        flags.forEach((flag) => {
+            if (flag.is_persist)
+                persistFlags.push(flag);
+        });
+        let str = '';
+        const uniquePersistFlags = this.diffPersist(persistFlags);
+        uniquePersistFlags.forEach((flag) => {
+            str += `${JSON.stringify(flag)};`;
+        });
+        this.app.sessionStorage.setItem(this.storageKey, str);
+        this.flags = flags;
+        return (_a = this.onFlagsCb) === null || _a === void 0 ? void 0 : _a.call(this, flags);
+    }
+    clearPersistFlags() {
+        this.app.sessionStorage.removeItem(this.storageKey);
+    }
+    diffPersist(flags) {
+        const persistFlags = this.app.sessionStorage.getItem(this.storageKey);
+        if (!persistFlags)
+            return flags;
+        const persistFlagsStrArr = persistFlags.split(';').filter(Boolean);
+        const persistFlagsArr = persistFlagsStrArr.map((flag) => JSON.parse(flag));
+        return flags.filter((flag) => persistFlagsArr.findIndex((pf) => pf.key === flag.key) === -1);
+    }
+}

package/lib/modules/network.d.ts

@@ -1,9 +1,7 @@
 import type App from '../app/index.js';
 import type { AxiosInstance } from './axiosSpy.js';
-type XHRRequestBody = Parameters<XMLHttpRequest['send']>[0];
-type FetchRequestBody = RequestInit['body'];
 interface RequestData {
-    body: XHRRequestBody | FetchRequestBody;
+    body: string | null;
     headers: Record<string, string>;
 }
 interface ResponseData {
@@ -17,7 +15,7 @@ export interface RequestResponseData {
     request: RequestData;
     response: ResponseData;
 }
-type Sanitizer = (data: RequestResponseData) => RequestResponseData | null;
+type Sanitizer = (data: RequestResponseData) => RequestResponseData;
 export interface Options {
     sessionTokenHeader: string | boolean;
     failuresOnly: boolean;
@@ -26,6 +24,7 @@ export interface Options {
     captureInIframes: boolean;
     sanitizer?: Sanitizer;
     axiosInstances?: Array<AxiosInstance>;
+    useProxy?: boolean;
 }
 export default function (app: App, opts?: Partial<Options>): void;
 export {};