@openreplay/tracker 11.0.6 → 12.0.0-beta.99

package/lib/app/logger.d.ts

@@ -5,22 +5,12 @@ export declare const LogLevel: {
     readonly Errors: 2;
     readonly Silent: 0;
 };
-type LogLevel = (typeof LogLevel)[keyof typeof LogLevel];
-type CustomLevel = {
-    error: boolean;
-    warn: boolean;
-    log: boolean;
-};
-interface _Options {
-    level: LogLevel | CustomLevel;
-    messages?: number[];
-}
-export type Options = true | _Options | LogLevel;
+export type ILogLevel = (typeof LogLevel)[keyof typeof LogLevel];
 export default class Logger {
-    private readonly options;
-    constructor(options?: Options);
-    log(...args: any): void;
-    warn(...args: any): void;
-    error(...args: any): void;
+    private readonly level;
+    constructor(debugLevel?: ILogLevel);
+    private shouldLog;
+    log(...args: any[]): void;
+    warn(...args: any[]): void;
+    error(...args: any[]): void;
 }
-export {};

package/lib/app/logger.js

@@ -5,36 +5,28 @@ export const LogLevel = {
     Errors: 2,
     Silent: 0,
 };
-function IsCustomLevel(l) {
-    return typeof l === 'object';
-}
 export default class Logger {
-    constructor(options = LogLevel.Silent) {
-        this.options =
-            options === true
-                ? { level: LogLevel.Verbose }
-                : typeof options === 'number'
-                    ? { level: options }
-                    : options;
+    constructor(debugLevel = LogLevel.Silent) {
+        this.level = debugLevel;
+    }
+    shouldLog(level) {
+        return this.level >= level;
     }
     log(...args) {
-        if (IsCustomLevel(this.options.level)
-            ? this.options.level.log
-            : this.options.level >= LogLevel.Log) {
+        if (this.shouldLog(LogLevel.Log)) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
             console.log(...args);
         }
     }
     warn(...args) {
-        if (IsCustomLevel(this.options.level)
-            ? this.options.level.warn
-            : this.options.level >= LogLevel.Warnings) {
+        if (this.shouldLog(LogLevel.Warnings)) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
             console.warn(...args);
         }
     }
     error(...args) {
-        if (IsCustomLevel(this.options.level)
-            ? this.options.level.error
-            : this.options.level >= LogLevel.Errors) {
+        if (this.shouldLog(LogLevel.Errors)) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
             console.error(...args);
         }
     }

package/lib/app/messages.gen.d.ts

@@ -62,6 +62,7 @@ export declare function Zustand(mutation: string, state: string): Messages.Zusta
 export declare function BatchMetadata(version: number, pageNo: number, firstIndex: number, timestamp: number, location: string): Messages.BatchMetadata;
 export declare function PartitionedMessage(partNo: number, partTotal: number): Messages.PartitionedMessage;
 export declare function NetworkRequest(type: string, method: string, url: string, request: string, response: string, status: number, timestamp: number, duration: number, transferredBodySize: number): Messages.NetworkRequest;
+export declare function WSChannel(chType: string, channelName: string, data: string, timestamp: number, dir: string, messageType: string): Messages.WSChannel;
 export declare function InputChange(id: number, value: string, valueMasked: boolean, label: string, hesitationTime: number, inputDuration: number): Messages.InputChange;
 export declare function SelectionChange(selectionStart: number, selectionEnd: number, selection: string): Messages.SelectionChange;
 export declare function MouseThrashing(timestamp: number): Messages.MouseThrashing;
@@ -70,3 +71,4 @@ export declare function ResourceTiming(timestamp: number, duration: number, ttfb
 export declare function TabChange(tabId: string): Messages.TabChange;
 export declare function TabData(tabId: string): Messages.TabData;
 export declare function CanvasNode(nodeId: string, timestamp: number): Messages.CanvasNode;
+export declare function TagTrigger(tagId: number): Messages.TagTrigger;

package/lib/app/messages.gen.js

@@ -498,6 +498,17 @@ export function NetworkRequest(type, method, url, request, response, status, tim
         transferredBodySize,
     ];
 }
+export function WSChannel(chType, channelName, data, timestamp, dir, messageType) {
+    return [
+        84 /* Messages.Type.WSChannel */,
+        chType,
+        channelName,
+        data,
+        timestamp,
+        dir,
+        messageType,
+    ];
+}
 export function InputChange(id, value, valueMasked, label, hesitationTime, inputDuration) {
     return [
         112 /* Messages.Type.InputChange */,
@@ -563,3 +574,9 @@ export function CanvasNode(nodeId, timestamp) {
         timestamp,
     ];
 }
+export function TagTrigger(tagId) {
+    return [
+        120 /* Messages.Type.TagTrigger */,
+        tagId,
+    ];
+}

package/lib/app/workerManager/QueueSender.d.ts

@@ -0,0 +1,23 @@
+export default class QueueSender {
+    private readonly onUnauthorised;
+    private readonly onFailure;
+    private readonly MAX_ATTEMPTS_COUNT;
+    private readonly ATTEMPT_TIMEOUT;
+    private readonly onCompress?;
+    private attemptsCount;
+    private busy;
+    private readonly queue;
+    private readonly ingestURL;
+    private token;
+    private readonly isCompressing;
+    constructor(ingestBaseURL: string, onUnauthorised: () => any, onFailure: (reason: string) => any, MAX_ATTEMPTS_COUNT?: number, ATTEMPT_TIMEOUT?: number, onCompress?: ((batch: Uint8Array) => any) | undefined);
+    getQueueStatus(): boolean;
+    authorise(token: string): void;
+    push(batch: Uint8Array): void;
+    private sendNext;
+    private retry;
+    private sendBatch;
+    sendCompressed(batch: Uint8Array): void;
+    sendUncompressed(batch: Uint8Array): void;
+    clean(): void;
+}

package/lib/app/workerManager/QueueSender.js

@@ -0,0 +1,123 @@
+const INGEST_PATH = '/v1/web/i';
+const KEEPALIVE_SIZE_LIMIT = 64 << 10; // 64 kB
+export default class QueueSender {
+    constructor(ingestBaseURL, onUnauthorised, onFailure, MAX_ATTEMPTS_COUNT = 10, ATTEMPT_TIMEOUT = 1000, onCompress) {
+        this.onUnauthorised = onUnauthorised;
+        this.onFailure = onFailure;
+        this.MAX_ATTEMPTS_COUNT = MAX_ATTEMPTS_COUNT;
+        this.ATTEMPT_TIMEOUT = ATTEMPT_TIMEOUT;
+        this.onCompress = onCompress;
+        this.attemptsCount = 0;
+        this.busy = false;
+        this.queue = [];
+        this.token = null;
+        this.ingestURL = ingestBaseURL + INGEST_PATH;
+        this.isCompressing = onCompress !== undefined;
+    }
+    getQueueStatus() {
+        return this.queue.length === 0 && !this.busy;
+    }
+    authorise(token) {
+        this.token = token;
+        if (!this.busy) {
+            // TODO: transparent busy/send logic
+            this.sendNext();
+        }
+    }
+    push(batch) {
+        if (this.busy || !this.token) {
+            this.queue.push(batch);
+        }
+        else {
+            this.busy = true;
+            if (this.isCompressing && this.onCompress) {
+                this.onCompress(batch);
+            }
+            else {
+                this.sendBatch(batch);
+            }
+        }
+    }
+    sendNext() {
+        const nextBatch = this.queue.shift();
+        if (nextBatch) {
+            this.busy = true;
+            if (this.isCompressing && this.onCompress) {
+                this.onCompress(nextBatch);
+            }
+            else {
+                this.sendBatch(nextBatch);
+            }
+        }
+        else {
+            this.busy = false;
+        }
+    }
+    retry(batch, isCompressed) {
+        if (this.attemptsCount >= this.MAX_ATTEMPTS_COUNT) {
+            this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`);
+            // remains this.busy === true
+            return;
+        }
+        this.attemptsCount++;
+        setTimeout(() => this.sendBatch(batch, isCompressed), this.ATTEMPT_TIMEOUT * this.attemptsCount);
+    }
+    // would be nice to use Beacon API, but it is not available in WebWorker
+    sendBatch(batch, isCompressed) {
+        this.busy = true;
+        const headers = {
+            Authorization: `Bearer ${this.token}`,
+        };
+        if (isCompressed) {
+            headers['Content-Encoding'] = 'gzip';
+        }
+        /**
+         * sometimes happen during assist connects for some reason
+         * */
+        if (this.token === null) {
+            setTimeout(() => {
+                this.sendBatch(batch, isCompressed);
+            }, 500);
+            return;
+        }
+        fetch(this.ingestURL, {
+            body: batch,
+            method: 'POST',
+            headers,
+            keepalive: batch.length < KEEPALIVE_SIZE_LIMIT,
+        })
+            .then((r) => {
+            if (r.status === 401) {
+                // TODO: continuous session ?
+                this.busy = false;
+                this.onUnauthorised();
+                return;
+            }
+            else if (r.status >= 400) {
+                this.retry(batch, isCompressed);
+                return;
+            }
+            // Success
+            this.attemptsCount = 0;
+            this.sendNext();
+        })
+            .catch((e) => {
+            console.warn('OpenReplay:', e);
+            this.retry(batch, isCompressed);
+        });
+    }
+    sendCompressed(batch) {
+        this.sendBatch(batch, true);
+    }
+    sendUncompressed(batch) {
+        this.sendBatch(batch, false);
+    }
+    clean() {
+        // sending last batch and closing the shop
+        this.sendNext();
+        setTimeout(() => {
+            this.token = null;
+            this.queue.length = 0;
+        }, 10);
+    }
+}

package/lib/app/workerManager/index.d.ts

@@ -0,0 +1,37 @@
+import { FromWorkerData, ToWorkerData, WorkerAuth, WorkerStart } from '../../common/interaction.js';
+import App from '../index.js';
+import QueueSender from './QueueSender.js';
+declare enum WorkerStatus {
+    NotActive = 0,
+    Starting = 1,
+    Stopping = 2,
+    Active = 3,
+    Stopped = 4
+}
+interface TypedWorker extends Omit<Worker, 'postMessage'> {
+    postMessage(data: ToWorkerData): void;
+}
+declare class WebWorkerManager {
+    private readonly app;
+    private readonly worker;
+    private readonly onError;
+    sendIntervalID: ReturnType<typeof setInterval> | null;
+    restartTimeoutID: ReturnType<typeof setTimeout> | null;
+    workerStatus: WorkerStatus;
+    sender: QueueSender | null;
+    constructor(app: App, worker: TypedWorker, onError: (ctx: string, e: any) => any);
+    finalize: () => void;
+    resetWebWorker: () => void;
+    resetSender: () => void;
+    reset: () => void;
+    initiateRestart: () => void;
+    initiateFailure: (reason: string) => void;
+    processMessage: (data: ToWorkerData | null) => void;
+    startWorker: (data: WorkerStart) => void;
+    stopWorker: () => void;
+    authorizeWorker: (data: WorkerAuth) => void;
+    sendCompressedBatch: (data: Uint8Array) => void;
+    sendUncompressedBatch: (data: Uint8Array) => void;
+    postMessage: (data: FromWorkerData) => void;
+}
+export default WebWorkerManager;

package/lib/app/workerManager/index.js

@@ -0,0 +1,162 @@
+import QueueSender from './QueueSender.js';
+var WorkerStatus;
+(function (WorkerStatus) {
+    WorkerStatus[WorkerStatus["NotActive"] = 0] = "NotActive";
+    WorkerStatus[WorkerStatus["Starting"] = 1] = "Starting";
+    WorkerStatus[WorkerStatus["Stopping"] = 2] = "Stopping";
+    WorkerStatus[WorkerStatus["Active"] = 3] = "Active";
+    WorkerStatus[WorkerStatus["Stopped"] = 4] = "Stopped";
+})(WorkerStatus || (WorkerStatus = {}));
+const AUTO_SEND_INTERVAL = 10 * 1000;
+const rebroadcastEvents = ['queue_empty', 'not_init', 'restart'];
+class WebWorkerManager {
+    constructor(app, worker, onError) {
+        this.app = app;
+        this.worker = worker;
+        this.onError = onError;
+        this.sendIntervalID = null;
+        this.restartTimeoutID = null;
+        this.workerStatus = WorkerStatus.NotActive;
+        this.sender = null;
+        this.finalize = () => {
+            this.worker.postMessage({ type: 'writer_finalize' });
+        };
+        this.resetWebWorker = () => {
+            this.worker.postMessage({ type: 'reset_writer' });
+        };
+        this.resetSender = () => {
+            if (!this.sender) {
+                return;
+            }
+            this.sender.clean();
+            setTimeout(() => {
+                this.sender = null;
+            }, 20);
+        };
+        this.reset = () => {
+            this.workerStatus = WorkerStatus.Stopping;
+            if (this.sendIntervalID !== null) {
+                clearInterval(this.sendIntervalID);
+                this.sendIntervalID = null;
+            }
+            this.resetSender();
+            this.resetWebWorker();
+            setTimeout(() => {
+                this.workerStatus = WorkerStatus.NotActive;
+            }, 100);
+        };
+        this.initiateRestart = () => {
+            if (this.workerStatus === WorkerStatus.Stopped) {
+                return;
+            }
+            this.postMessage({ type: 'restart' });
+            this.reset();
+        };
+        this.initiateFailure = (reason) => {
+            if ([WorkerStatus.Stopped, WorkerStatus.Stopping, WorkerStatus.NotActive].includes(this.workerStatus)) {
+                return;
+            }
+            this.postMessage({ type: 'failure', reason });
+            this.reset();
+        };
+        this.processMessage = (data) => {
+            if (data === null) {
+                this.finalize();
+                return;
+            }
+            if (data.type === 'batch' && Array.isArray(data.data)) {
+                data.data.forEach((message) => {
+                    if (message[0] === 55 /* MType.SetPageVisibility */) {
+                        // document is hidden
+                        if (message[1]) {
+                            this.restartTimeoutID = setTimeout(() => this.initiateRestart(), 30 * 60 * 1000);
+                        }
+                        else {
+                            if (this.restartTimeoutID) {
+                                clearTimeout(this.restartTimeoutID);
+                            }
+                        }
+                    }
+                });
+                this.worker.postMessage({ type: 'to_writer', data: data.data });
+            }
+        };
+        this.startWorker = (data) => {
+            this.sender = new QueueSender(data.ingestPoint, () => {
+                // onUnauthorised
+                this.initiateRestart();
+            }, (reason) => {
+                // onFailure
+                this.initiateFailure(reason);
+            }, data.connAttemptCount, data.connAttemptGap, (batch) => {
+                this.postMessage({ type: 'compress', batch });
+            });
+            if (this.sendIntervalID === null) {
+                this.sendIntervalID = setInterval(this.finalize, AUTO_SEND_INTERVAL);
+            }
+            this.worker.postMessage(data);
+            return;
+        };
+        this.stopWorker = () => {
+            this.finalize();
+            this.reset();
+            return;
+        };
+        this.authorizeWorker = (data) => {
+            if (!this.sender) {
+                console.debug('OR WebWorker: sender not initialised. Received auth.');
+                this.initiateRestart();
+                return;
+            }
+            this.sender.authorise(data.token);
+            if (data.beaconSizeLimit) {
+                this.worker.postMessage({ type: 'beacon_size_limit', data: data.beaconSizeLimit });
+            }
+            return;
+        };
+        this.sendCompressedBatch = (data) => {
+            var _a;
+            if (!this.sender) {
+                console.debug('OR Worker: sender not init. Compressed batch');
+                this.initiateRestart();
+                return;
+            }
+            (_a = this.sender) === null || _a === void 0 ? void 0 : _a.sendCompressed(data);
+            return;
+        };
+        this.sendUncompressedBatch = (data) => {
+            if (!this.sender) {
+                console.debug('OR Worker: sender not init. Compressed batch.');
+                this.initiateRestart();
+                return;
+            }
+            if (data) {
+                this.sender.sendUncompressed(data);
+                return;
+            }
+        };
+        this.postMessage = (data) => {
+            this.app.handleWorkerMsg(data);
+        };
+        this.worker.onerror = (e) => {
+            this.onError('webworker_error', e);
+        };
+        this.worker.onmessage = ({ data }) => {
+            if (rebroadcastEvents.includes(data.type)) {
+                this.postMessage(data);
+                return;
+            }
+            switch (data.type) {
+                case 'status':
+                    this.workerStatus = data.data;
+                    return;
+                case 'batch_ready':
+                    if (this.sender) {
+                        this.app.debug.log('Openreplay: msg batch to sender: ', data.data);
+                        this.sender.push(data.data);
+                    }
+            }
+        };
+    }
+}
+export default WebWorkerManager;

package/lib/common/interaction.d.ts

@@ -3,7 +3,61 @@ export interface Options {
     connAttemptCount?: number;
     connAttemptGap?: number;
 }
-type Start = {
+export type ToWorkerData = null | Stop | Batch | WorkerStart | BeaconSizeLimit | ToWriterData | ForceFlushBatch | CheckQueue | ResetWriter | WriterFinalize;
+export type FromWorkerData = Restart | Failure | NotInit | Compress | QEmpty | Status | BatchReady;
+type BatchReady = {
+    type: 'batch_ready';
+    data: Uint8Array;
+};
+type Status = {
+    type: 'status';
+    data: number;
+};
+type Compress = {
+    type: 'compress';
+    batch: Uint8Array;
+};
+type Restart = {
+    type: 'restart';
+};
+type NotInit = {
+    type: 'not_init';
+};
+type Stop = {
+    type: 'stop';
+};
+type Batch = {
+    type: 'batch';
+    data: Array<Message>;
+};
+type ForceFlushBatch = {
+    type: 'forceFlushBatch';
+};
+type CheckQueue = {
+    type: 'check_queue';
+};
+type WriterFinalize = {
+    type: 'writer_finalize';
+};
+type ResetWriter = {
+    type: 'reset_writer';
+};
+type BeaconSizeLimit = {
+    type: 'beacon_size_limit';
+    data: number;
+};
+type ToWriterData = {
+    type: 'to_writer';
+    data: Array<Message>;
+};
+type Failure = {
+    type: 'failure';
+    reason: string;
+};
+type QEmpty = {
+    type: 'queue_empty';
+};
+export type WorkerStart = {
     type: 'start';
     ingestPoint: string;
     pageNo: number;
@@ -11,24 +65,8 @@ type Start = {
     url: string;
     tabId: string;
 } & Options;
-type Auth = {
-    type: 'auth';
+export type WorkerAuth = {
     token: string;
     beaconSizeLimit?: number;
 };
-export type ToWorkerData = null | 'stop' | Start | Auth | Array<Message> | {
-    type: 'compressed';
-    batch: Uint8Array;
-} | {
-    type: 'uncompressed';
-    batch: Uint8Array;
-} | 'forceFlushBatch';
-type Failure = {
-    type: 'failure';
-    reason: string;
-};
-export type FromWorkerData = 'restart' | Failure | 'not_init' | {
-    type: 'compress';
-    batch: Uint8Array;
-};
 export {};

package/lib/common/messages.gen.d.ts

@@ -61,6 +61,7 @@ export declare const enum Type {
     BatchMetadata = 81,
     PartitionedMessage = 82,
     NetworkRequest = 83,
+    WSChannel = 84,
     InputChange = 112,
     SelectionChange = 113,
     MouseThrashing = 114,
@@ -68,7 +69,8 @@ export declare const enum Type {
     ResourceTiming = 116,
     TabChange = 117,
     TabData = 118,
-    CanvasNode = 119
+    CanvasNode = 119,
+    TagTrigger = 120
 }
 export type Timestamp = [
     Type.Timestamp,
@@ -444,6 +446,15 @@ export type NetworkRequest = [
     number,
     number
 ];
+export type WSChannel = [
+    Type.WSChannel,
+    string,
+    string,
+    string,
+    number,
+    string,
+    string
+];
 export type InputChange = [
     Type.InputChange,
     number,
@@ -493,5 +504,9 @@ export type CanvasNode = [
     string,
     number
 ];
-type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetNodeScroll | SetInputTarget | SetInputValue | SetInputChecked | MouseMove | NetworkRequestDeprecated | ConsoleLog | PageLoadTiming | PageRenderTiming | CustomEvent | UserID | UserAnonymousID | Metadata | CSSInsertRule | CSSDeleteRule | Fetch | Profiler | OTable | StateAction | Redux | Vuex | MobX | NgRx | GraphQL | PerformanceTrack | StringDict | SetNodeAttributeDict | ResourceTimingDeprecated | ConnectionInformation | SetPageVisibility | LoadFontFace | SetNodeFocus | LongTask | SetNodeAttributeURLBased | SetCSSDataURLBased | TechnicalInfo | CustomIssue | CSSInsertRuleURLBased | MouseClick | CreateIFrameDocument | AdoptedSSReplaceURLBased | AdoptedSSInsertRuleURLBased | AdoptedSSDeleteRule | AdoptedSSAddOwner | AdoptedSSRemoveOwner | JSException | Zustand | BatchMetadata | PartitionedMessage | NetworkRequest | InputChange | SelectionChange | MouseThrashing | UnbindNodes | ResourceTiming | TabChange | TabData | CanvasNode;
+export type TagTrigger = [
+    Type.TagTrigger,
+    number
+];
+type Message = Timestamp | SetPageLocation | SetViewportSize | SetViewportScroll | CreateDocument | CreateElementNode | CreateTextNode | MoveNode | RemoveNode | SetNodeAttribute | RemoveNodeAttribute | SetNodeData | SetNodeScroll | SetInputTarget | SetInputValue | SetInputChecked | MouseMove | NetworkRequestDeprecated | ConsoleLog | PageLoadTiming | PageRenderTiming | CustomEvent | UserID | UserAnonymousID | Metadata | CSSInsertRule | CSSDeleteRule | Fetch | Profiler | OTable | StateAction | Redux | Vuex | MobX | NgRx | GraphQL | PerformanceTrack | StringDict | SetNodeAttributeDict | ResourceTimingDeprecated | ConnectionInformation | SetPageVisibility | LoadFontFace | SetNodeFocus | LongTask | SetNodeAttributeURLBased | SetCSSDataURLBased | TechnicalInfo | CustomIssue | CSSInsertRuleURLBased | MouseClick | CreateIFrameDocument | AdoptedSSReplaceURLBased | AdoptedSSInsertRuleURLBased | AdoptedSSDeleteRule | AdoptedSSAddOwner | AdoptedSSRemoveOwner | JSException | Zustand | BatchMetadata | PartitionedMessage | NetworkRequest | WSChannel | InputChange | SelectionChange | MouseThrashing | UnbindNodes | ResourceTiming | TabChange | TabData | CanvasNode | TagTrigger;
 export default Message;