@openreplay/tracker 8.0.0-beta.1 → 8.0.1-beta14

package/lib/modules/Network/networkMessage.js

@@ -0,0 +1,78 @@
+import { NetworkRequest } from '../../app/messages.gen.js';
+import { getTimeOrigin } from '../../utils.js';
+export var RequestState;
+(function (RequestState) {
+    RequestState[RequestState["UNSENT"] = 0] = "UNSENT";
+    RequestState[RequestState["OPENED"] = 1] = "OPENED";
+    RequestState[RequestState["HEADERS_RECEIVED"] = 2] = "HEADERS_RECEIVED";
+    RequestState[RequestState["LOADING"] = 3] = "LOADING";
+    RequestState[RequestState["DONE"] = 4] = "DONE";
+})(RequestState || (RequestState = {}));
+/**
+ * I know we're not using most of the information from this class
+ * but it can be useful in the future if we will decide to display more stuff in our ui
+ * */
+export default class NetworkMessage {
+    constructor(ignoredHeaders = [], setSessionTokenHeader, sanitize) {
+        this.ignoredHeaders = ignoredHeaders;
+        this.setSessionTokenHeader = setSessionTokenHeader;
+        this.sanitize = sanitize;
+        this.id = '';
+        this.name = '';
+        this.method = '';
+        this.url = '';
+        this.status = 0;
+        this.statusText = '';
+        this.cancelState = 0;
+        this.readyState = 0;
+        this.header = {};
+        this.responseType = '';
+        this.requestHeader = {};
+        this.responseSize = 0; // bytes
+        this.responseSizeText = '';
+        this.startTime = 0;
+        this.endTime = 0;
+        this.duration = 0;
+        this.getData = {};
+        this.requestData = null;
+    }
+    getMessage() {
+        const { reqHs, resHs } = this.writeHeaders();
+        const request = {
+            headers: reqHs,
+            body: this.method === 'GET' ? JSON.stringify(this.getData) : this.requestData,
+        };
+        const response = { headers: resHs, body: this.response };
+        const messageInfo = this.sanitize({
+            url: this.url,
+            method: this.method,
+            status: this.status,
+            request,
+            response,
+        });
+        return NetworkRequest(this.requestType, messageInfo.method, messageInfo.url, JSON.stringify(messageInfo.request), JSON.stringify(messageInfo.response), messageInfo.status, this.startTime + getTimeOrigin(), this.duration);
+    }
+    writeHeaders() {
+        const reqHs = {};
+        Object.entries(this.requestHeader).forEach(([key, value]) => {
+            if (this.isHeaderIgnored(key))
+                return;
+            reqHs[key] = value;
+        });
+        this.setSessionTokenHeader((name, value) => {
+            reqHs[name] = value;
+        });
+        const resHs = {};
+        Object.entries(this.header).forEach(([key, value]) => {
+            if (this.isHeaderIgnored(key))
+                return;
+            resHs[key] = value;
+        });
+        return { reqHs, resHs };
+    }
+    isHeaderIgnored(key) {
+        if (Array.isArray(this.ignoredHeaders))
+            return this.ignoredHeaders.includes(key);
+        return this.ignoredHeaders;
+    }
+}

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

@@ -0,0 +1,13 @@
+export interface RequestResponseData {
+    readonly status: number;
+    readonly method: string;
+    url: string;
+    request: {
+        body: string | null;
+        headers: Record<string, string>;
+    };
+    response: {
+        body: string | null;
+        headers: Record<string, string>;
+    };
+}

package/lib/modules/Network/types.js

@@ -0,0 +1,2 @@
+export {};
+// we only support sanitizing for json/string data because how you're gonna sanitize binary data?

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

@@ -0,0 +1,11 @@
+export declare const genResponseByType: (responseType: XMLHttpRequest['responseType'], response: any) => string | Record<string, any>;
+export declare const getStringResponseByType: (responseType: XMLHttpRequest['responseType'], response: any) => string;
+export declare const genStringBody: (body?: BodyInit) => string | null;
+export declare const genGetDataByUrl: (url: string, getData?: Record<string, any>) => Record<string, any>;
+export declare const genFormattedBody: (body?: BodyInit) => string | {
+    [key: string]: string;
+} | null;
+export declare function isPureObject(input: any): input is Record<any, any>;
+export declare function isIterable(value: any): boolean;
+export declare function formatByteSize(bytes: number): string;
+export declare const getURL: (urlString: string) => URL;

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/attributeSender.d.ts

@@ -0,0 +1,14 @@
+import App from '../app/index.js';
+export declare class StringDictionary {
+    private idx;
+    private backDict;
+    getKey(str: string): [number, boolean];
+}
+export default class AttributeSender {
+    private readonly app;
+    private dict;
+    constructor(app: App);
+    sendSetAttribute(id: number, name: string, value: string): void;
+    private applyDict;
+    clear(): void;
+}

package/lib/modules/attributeSender.js

@@ -0,0 +1,39 @@
+export class StringDictionary {
+    constructor() {
+        this.idx = 1;
+        this.backDict = {};
+    }
+    getKey(str) {
+        let isNew = false;
+        if (!this.backDict[str]) {
+            isNew = true;
+            this.backDict[str] = this.idx++;
+        }
+        return [this.backDict[str], isNew];
+    }
+}
+export default class AttributeSender {
+    constructor(app) {
+        this.app = app;
+        this.dict = new StringDictionary();
+    }
+    sendSetAttribute(id, name, value) {
+        const message = [
+            51 /* Type.SetNodeAttributeDict */,
+            id,
+            this.applyDict(name),
+            this.applyDict(value),
+        ];
+        this.app.send(message);
+    }
+    applyDict(str) {
+        const [key, isNew] = this.dict.getKey(str);
+        if (isNew) {
+            this.app.send([50 /* Type.StringDict */, key, str]);
+        }
+        return key;
+    }
+    clear() {
+        this.dict = new StringDictionary();
+    }
+}

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);