@openreplay/tracker 14.0.7 → 14.0.8

package/lib/modules/Network/fetchProxy.js

@@ -1,280 +0,0 @@
-/**
- * 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 { formatByteSize, genStringBody, getStringResponseByType, getURL } from './utils.js';
-export class ResponseProxyHandler {
-    constructor(resp, item) {
-        this.resp = resp;
-        this.item = item;
-        this.mockReader();
-    }
-    set(target, key, value) {
-        return Reflect.set(target, key, value);
-    }
-    get(target, key) {
-        const value = Reflect.get(target, key);
-        switch (key) {
-            case 'arrayBuffer':
-            case 'blob':
-            case 'formData':
-            case 'json':
-            case 'text':
-                return () => {
-                    this.item.responseType = key.toLowerCase();
-                    // @ts-ignore
-                    return value.apply(target).then((resp) => {
-                        this.item.response = getStringResponseByType(this.item.responseType, resp);
-                        return resp;
-                    });
-                };
-        }
-        if (typeof value === 'function') {
-            return value.bind(target);
-        }
-        else {
-            return value;
-        }
-    }
-    mockReader() {
-        let readerReceivedValue;
-        if (!this.resp.body) {
-            // some browsers do not return `body` in some cases, like `OPTIONS` method
-            return;
-        }
-        if (typeof this.resp.body.getReader !== 'function') {
-            return;
-        }
-        const _getReader = this.resp.body.getReader;
-        // @ts-ignore
-        this.resp.body.getReader = () => {
-            const reader = _getReader.apply(this.resp.body);
-            // when readyState is already 4,
-            // it's not a chunked stream, or it had already been read.
-            // so should not update status.
-            if (this.item.readyState === RequestState.DONE) {
-                return reader;
-            }
-            const _read = reader.read;
-            const _cancel = reader.cancel;
-            this.item.responseType = 'arraybuffer';
-            // @ts-ignore
-            reader.read = () => {
-                return _read.apply(reader).then((result) => {
-                    if (!readerReceivedValue) {
-                        // @ts-ignore
-                        readerReceivedValue = new Uint8Array(result.value);
-                    }
-                    else {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        const newValue = new Uint8Array(readerReceivedValue.length + result.value.length);
-                        newValue.set(readerReceivedValue);
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        newValue.set(result.value, readerReceivedValue.length);
-                        readerReceivedValue = newValue;
-                    }
-                    this.item.endTime = performance.now();
-                    this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                    this.item.readyState = result.done ? 4 : 3;
-                    this.item.statusText = result.done ? String(this.item.status) : 'Loading';
-                    this.item.responseSize = readerReceivedValue.length;
-                    this.item.responseSizeText = formatByteSize(this.item.responseSize);
-                    if (result.done) {
-                        this.item.response = getStringResponseByType(this.item.responseType, readerReceivedValue);
-                    }
-                    return result;
-                });
-            };
-            reader.cancel = (...args) => {
-                this.item.cancelState = 2;
-                this.item.statusText = 'Cancel';
-                this.item.endTime = performance.now();
-                this.item.duration = this.item.endTime - (this.item.startTime || this.item.endTime);
-                this.item.response = getStringResponseByType(this.item.responseType, readerReceivedValue);
-                return _cancel.apply(reader, args);
-            };
-            return reader;
-        };
-    }
-}
-export class FetchProxyHandler {
-    constructor(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher) {
-        this.ignoredHeaders = ignoredHeaders;
-        this.setSessionTokenHeader = setSessionTokenHeader;
-        this.sanitize = sanitize;
-        this.sendMessage = sendMessage;
-        this.isServiceUrl = isServiceUrl;
-        this.tokenUrlMatcher = tokenUrlMatcher;
-    }
-    apply(target, _, argsList) {
-        const input = argsList[0];
-        const init = argsList[1];
-        if (!input ||
-            // @ts-ignore
-            (typeof input !== 'string' && !input?.url)) {
-            return target.apply(window, argsList);
-        }
-        const isORUrl = input instanceof URL || typeof input === 'string'
-            ? this.isServiceUrl(String(input))
-            : this.isServiceUrl(String(input.url));
-        if (isORUrl) {
-            return target.apply(window, argsList);
-        }
-        const item = new NetworkMessage(this.ignoredHeaders, this.setSessionTokenHeader, this.sanitize);
-        this.beforeFetch(item, input, init);
-        this.setSessionTokenHeader((name, value) => {
-            if (this.tokenUrlMatcher !== undefined) {
-                if (!this.tokenUrlMatcher(item.url)) {
-                    return;
-                }
-            }
-            if (argsList[1] === undefined && argsList[0] instanceof Request) {
-                return argsList[0].headers.append(name, value);
-            }
-            else {
-                if (!argsList[1])
-                    argsList[1] = {};
-                if (argsList[1].headers === undefined) {
-                    argsList[1] = { ...argsList[1], headers: {} };
-                }
-                if (argsList[1].headers instanceof Headers) {
-                    argsList[1].headers.append(name, value);
-                }
-                else if (Array.isArray(argsList[1].headers)) {
-                    argsList[1].headers.push([name, value]);
-                }
-                else {
-                    // @ts-ignore
-                    argsList[1].headers[name] = value;
-                }
-            }
-        });
-        return target.apply(window, argsList)
-            .then(this.afterFetch(item))
-            .catch((e) => {
-            // mock finally
-            item.endTime = performance.now();
-            item.duration = item.endTime - (item.startTime || item.endTime);
-            throw e;
-        });
-    }
-    beforeFetch(item, input, init) {
-        let url, method = 'GET', requestHeader = {};
-        // handle `input` content
-        if (typeof input === 'string') {
-            // when `input` is a string
-            method = init?.method || 'GET';
-            url = getURL(input);
-            requestHeader = init?.headers || {};
-        }
-        else {
-            // when `input` is a `Request` object
-            method = input.method || 'GET';
-            url = getURL(input.url);
-            requestHeader = input.headers;
-        }
-        item.method = method;
-        item.requestType = 'fetch';
-        item.requestHeader = requestHeader;
-        item.url = url.toString();
-        item.name = (url.pathname.split('/').pop() || '') + url.search;
-        item.status = 0;
-        item.statusText = 'Pending';
-        item.readyState = 1;
-        if (!item.startTime) {
-            // UNSENT
-            item.startTime = performance.now();
-        }
-        if (Object.prototype.toString.call(requestHeader) === '[object Headers]') {
-            item.requestHeader = {};
-            for (const [key, value] of requestHeader) {
-                item.requestHeader[key] = value;
-            }
-        }
-        else {
-            item.requestHeader = requestHeader;
-        }
-        // save GET data
-        if (url.search && url.searchParams) {
-            item.getData = {};
-            for (const [key, value] of url.searchParams) {
-                item.getData[key] = value;
-            }
-        }
-        // save POST data
-        if (init?.body) {
-            item.requestData = genStringBody(init.body);
-        }
-    }
-    afterFetch(item) {
-        return (resp) => {
-            item.endTime = performance.now();
-            item.duration = item.endTime - (item.startTime || item.endTime);
-            item.status = resp.status;
-            item.statusText = String(resp.status);
-            let isChunked = false;
-            item.header = {};
-            for (const [key, value] of resp.headers) {
-                item.header[key] = value;
-                isChunked = value.toLowerCase().indexOf('chunked') > -1 ? true : isChunked;
-            }
-            if (isChunked) {
-                // when `transfer-encoding` is chunked, the response is a stream which is under loading,
-                // so the `readyState` should be 3 (Loading),
-                // and the response should NOT be `clone()` which will affect stream reading.
-                item.readyState = 3;
-            }
-            else {
-                // Otherwise, not chunked, the response is not a stream,
-                // so it's completed and can be cloned for `text()` calling.
-                item.readyState = 4;
-                this.handleResponseBody(resp.clone(), item)
-                    .then((responseValue) => {
-                    item.responseSize =
-                        typeof responseValue === 'string' ? responseValue.length : responseValue.byteLength;
-                    item.responseSizeText = formatByteSize(item.responseSize);
-                    item.response = getStringResponseByType(item.responseType, responseValue);
-                    const msg = item.getMessage();
-                    if (msg) {
-                        this.sendMessage(msg);
-                    }
-                })
-                    .catch((e) => {
-                    if (e.name !== 'AbortError') {
-                        throw e;
-                    }
-                    else {
-                        // ignore AbortError
-                    }
-                });
-            }
-            return new Proxy(resp, new ResponseProxyHandler(resp, item));
-        };
-    }
-    handleResponseBody(resp, item) {
-        // parse response body by Content-Type
-        const contentType = resp.headers.get('content-type');
-        if (contentType && contentType.includes('application/json')) {
-            item.responseType = 'json';
-            return resp.text();
-        }
-        else if (contentType &&
-            (contentType.includes('text/html') || contentType.includes('text/plain'))) {
-            item.responseType = 'text';
-            return resp.text();
-        }
-        else {
-            item.responseType = 'arraybuffer';
-            return resp.arrayBuffer();
-        }
-    }
-}
-export default class FetchProxy {
-    static create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher) {
-        return new Proxy(fetch, new FetchProxyHandler(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher));
-    }
-}

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

@@ -1,3 +0,0 @@
-import { RequestResponseData } from './types.js';
-import { NetworkRequest } from '../../common/messages.gen.js';
-export default function setProxy(context: typeof globalThis, ignoredHeaders: boolean | string[], setSessionTokenHeader: (cb: (name: string, value: string) => void) => void, sanitize: (data: RequestResponseData) => RequestResponseData | null, sendMessage: (message: NetworkRequest) => void, isServiceUrl: (url: string) => boolean, tokenUrlMatcher?: (url: string) => boolean): void;

package/lib/modules/Network/index.js

@@ -1,22 +0,0 @@
-import FetchProxy from './fetchProxy.js';
-import XHRProxy from './xhrProxy.js';
-import BeaconProxy from './beaconProxy.js';
-const getWarning = (api) => console.warn(`Openreplay: Can't find ${api} in global context. 
-If you're using serverside rendering in your app, make sure that tracker is loaded dynamically, otherwise ${api} won't be tracked.`);
-export default function setProxy(context, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher) {
-    if (context.XMLHttpRequest) {
-        context.XMLHttpRequest = XHRProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
-    }
-    else {
-        getWarning('XMLHttpRequest');
-    }
-    if (context.fetch) {
-        context.fetch = FetchProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
-    }
-    else {
-        getWarning('fetch');
-    }
-    if (context?.navigator?.sendBeacon) {
-        context.navigator.sendBeacon = BeaconProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl);
-    }
-}

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

@@ -1,49 +0,0 @@
-import { RequestResponseData } from './types.js';
-export type httpMethod = '' | 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'CONNECT' | 'OPTIONS' | 'TRACE' | 'PATCH';
-export declare enum RequestState {
-    UNSENT = 0,
-    OPENED = 1,
-    HEADERS_RECEIVED = 2,
-    LOADING = 3,
-    DONE = 4
-}
-/**
- * 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 {
-    private readonly ignoredHeaders;
-    private readonly setSessionTokenHeader;
-    private readonly sanitize;
-    id: string;
-    name?: string;
-    method: httpMethod;
-    url: string;
-    status: number;
-    statusText?: string;
-    cancelState?: 0 | 1 | 2 | 3;
-    readyState?: RequestState;
-    header: {
-        [key: string]: string;
-    };
-    responseType: XMLHttpRequest['responseType'];
-    requestType: 'xhr' | 'fetch' | 'ping' | 'custom' | 'beacon';
-    requestHeader: HeadersInit;
-    response: any;
-    responseSize: number;
-    responseSizeText: string;
-    startTime: number;
-    endTime: number;
-    duration: number;
-    getData: {
-        [key: string]: string;
-    };
-    requestData: string | null;
-    constructor(ignoredHeaders: boolean | string[], setSessionTokenHeader: (cb: (name: string, value: string) => void) => void, sanitize: (data: RequestResponseData) => RequestResponseData | null);
-    getMessage(): import("../../common/messages.gen.js").NetworkRequest | undefined;
-    writeHeaders(): {
-        reqHs: Record<string, string>;
-        resHs: Record<string, string>;
-    };
-    isHeaderIgnored(key: string): boolean;
-}

package/lib/modules/Network/networkMessage.js

@@ -1,83 +0,0 @@
-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,
-        });
-        if (!messageInfo)
-            return;
-        return NetworkRequest(this.requestType, messageInfo.method, messageInfo.url, JSON.stringify(messageInfo.request), JSON.stringify(messageInfo.response), messageInfo.status, this.startTime + getTimeOrigin(), this.duration, this.responseSize);
-    }
-    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.map((k) => k.toLowerCase()).includes(key.toLowerCase());
-        }
-        else {
-            return this.ignoredHeaders;
-        }
-    }
-}

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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,204 +0,0 @@
-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 (ArrayBuffer.isView(body) ||
-        body instanceof Blob ||
-        body instanceof ReadableStream ||
-        body instanceof ArrayBuffer) {
-        result = '[byte data]';
-    }
-    else if (isPureObject(body)) {
-        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;
-    }
-    if (ArrayBuffer.isView(value)) {
-        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);
-    }
-};