Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@openreplay/tracker

Package Overview
Dependencies
Maintainers
3
Versions
219
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@openreplay/tracker - npm Package Compare versions

Comparing version 11.0.6 to 12.0.0-beta.9

cjs/modules/conditionsManager.d.ts
cjs/modules/conditionsManager.js
cjs/modules/tagWatcher.d.ts
cjs/modules/tagWatcher.js
lib/modules/conditionsManager.d.ts
lib/modules/conditionsManager.js
lib/modules/tagWatcher.d.ts
lib/modules/tagWatcher.js

6

CHANGELOG.md

@@ -1,4 +0,6 @@

# 11.0.6
# 12.0.0
- fix blob generation for canvas capture (Cannot read properties of null (reading '1'))
- offline session recording and manual sending
- conditional recording with 30s buffer
- websockets tracking hook

@@ -5,0 +7,0 @@ # 11.0.5

90

cjs/app/index.d.ts

@@ -1,2 +0,3 @@

import type Message from './messages.gen.js';
import FeatureFlags from '../modules/featureFlags.js';
import Message from './messages.gen.js';
import Nodes from './nodes.js';

@@ -6,3 +7,3 @@ import Observer from './observer/top_observer.js';

import Ticker from './ticker.js';
import Logger from './logger.js';
import Logger, { ILogLevel } from './logger.js';
import Session from './session.js';

@@ -12,3 +13,2 @@ import AttributeSender from '../modules/attributeSender.js';

import type { Options as SanitizerOptions } from './sanitizer.js';
import type { Options as LoggerOptions } from './logger.js';
import type { Options as SessOptions } from './session.js';

@@ -51,6 +51,5 @@ import type { Options as NetworkOptions } from '../modules/network.js';

resourceBaseHref: string | null;
verbose: boolean;
__is_snippet: boolean;
__debug_report_edp: string | null;
__debug__?: LoggerOptions;
__debug__?: ILogLevel;
__save_canvas_locally?: boolean;

@@ -62,2 +61,3 @@ localStorage: Storage | null;

assistSocketHost?: string;
/** @deprecated */
onStart?: StartCallback;

@@ -69,2 +69,3 @@ network?: NetworkOptions;

export default class App {
private readonly signalError;
readonly nodes: Nodes;

@@ -80,2 +81,8 @@ readonly ticker: Ticker;

private readonly messages;
/**
* we need 2 buffers, so we don't lose anything
* @read coldStart implementation
* */
private bufferedMessages1;
private readonly bufferedMessages2;
readonly observer: Observer;

@@ -98,7 +105,24 @@ private readonly startCallbacks;

private uxtManager;
constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>);
private conditionsManager;
featureFlags: FeatureFlags;
private tagWatcher;
constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void);
private _debug;
private _usingOldFetchPlugin;
send(message: Message, urgent?: boolean): void;
/**
* Normal workflow: add timestamp and tab data to batch, then commit it
* every ~30ms
* */
private _nCommit;
coldStartCommitN: number;
/**
* Cold start: add timestamp and tab data to both batches
* every 2nd tick, ~60ms
* this will make batches a bit larger and replay will work with bigger jumps every frame
* but in turn we don't overload batch writer on session start with 1000 batches
* */
private _cStartCommit;
private commit;
private postToWorker;
private delay;

@@ -137,4 +161,51 @@ timestamp(): number;

resetNextPageSession(flag: boolean): void;
coldInterval: ReturnType<typeof setInterval> | null;
orderNumber: number;
coldStartTs: number;
singleBuffer: boolean;
private checkSessionToken;
/**
* start buffering messages without starting the actual session, which gives
* user 30 seconds to "activate" and record session by calling `start()` on conditional trigger
* and we will then send buffered batch, so it won't get lost
* */
coldStart(startOpts?: StartOptions, conditional?: boolean): Promise<void>;
onSessionSent: () => void;
/**
* Starts offline session recording
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* */
offlineRecording(startOpts: StartOptions | undefined, onSessionSent: () => void): {
saveBuffer: () => void;
getBuffer: () => Message[];
setBuffer: (buffer: Message[]) => void;
};
/**
* Saves the captured messages in localStorage (or whatever is used in its place)
*
* Then when this.offlineRecording is called, it will preload this messages and clear the storage item
*
* Keeping the size of local storage reasonable is up to the end users of this library
* */
saveBuffer(): void;
/**
* @returns buffer with stored messages for offline recording
* */
getBuffer(): Message[];
/**
* Used to set a buffer with messages array
* */
setBuffer(buffer: Message[]): void;
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
uploadOfflineRecording(): Promise<void>;
private _start;
restartCanvasTracking: () => void;
flushBuffer: (buffer: Message[]) => Promise<unknown>;
onUxtCb: never[];

@@ -150,4 +221,11 @@ addOnUxtCb(cb: (id: number) => void): void;

getTabId(): string;
clearBuffers(): void;
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* @returns {(msgType: string, data: string, dir: "up" | "down") => void}
* */
trackWs(channelName: string): (msgType: string, data: string, dir: 'up' | 'down') => void;
stop(stopWorker?: boolean): void;
}
export {};

485

cjs/app/index.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_INGEST_POINT = void 0;
const conditionsManager_js_1 = __importDefault(require("../modules/conditionsManager.js"));
const featureFlags_js_1 = __importDefault(require("../modules/featureFlags.js"));
const messages_gen_js_1 = require("./messages.gen.js");
const messages_gen_js_2 = require("./messages.gen.js");
const utils_js_1 = require("../utils.js");
const nodes_js_1 = require("./nodes.js");
const top_observer_js_1 = require("./observer/top_observer.js");
const sanitizer_js_1 = require("./sanitizer.js");
const ticker_js_1 = require("./ticker.js");
const logger_js_1 = require("./logger.js");
const session_js_1 = require("./session.js");
const nodes_js_1 = __importDefault(require("./nodes.js"));
const top_observer_js_1 = __importDefault(require("./observer/top_observer.js"));
const sanitizer_js_1 = __importDefault(require("./sanitizer.js"));
const ticker_js_1 = __importDefault(require("./ticker.js"));
const logger_js_1 = __importStar(require("./logger.js"));
const session_js_1 = __importDefault(require("./session.js"));
const fflate_1 = require("fflate");
const performance_js_1 = require("../modules/performance.js");
const attributeSender_js_1 = require("../modules/attributeSender.js");
const canvas_js_1 = require("./canvas.js");
const index_js_1 = require("../modules/userTesting/index.js");
const attributeSender_js_1 = __importDefault(require("../modules/attributeSender.js"));
const canvas_js_1 = __importDefault(require("./canvas.js"));
const index_js_1 = __importDefault(require("../modules/userTesting/index.js"));
const tagWatcher_js_1 = __importDefault(require("../modules/tagWatcher.js"));
const CANCELED = 'canceled';
const uxtStorageKey = 'or_uxt_active';
const bufferStorageKey = 'or_buffer_1';
const START_ERROR = ':(';

@@ -27,2 +58,3 @@ const UnsuccessfulStart = (reason) => ({ reason, success: false });

ActivityState[ActivityState["Active"] = 2] = "Active";
ActivityState[ActivityState["ColdStart"] = 3] = "ColdStart";
})(ActivityState || (ActivityState = {}));

@@ -39,5 +71,12 @@ // TODO: use backendHost only

class App {
constructor(projectKey, sessionToken, options) {
constructor(projectKey, sessionToken, options, signalError) {
var _a, _b;
this.signalError = signalError;
this.messages = [];
/**
* we need 2 buffers, so we don't lose anything
* @read coldStart implementation
* */
this.bufferedMessages1 = [];
this.bufferedMessages2 = [];
this.startCallbacks = [];

@@ -47,3 +86,3 @@ this.stopCallbacks = [];

this.activityState = ActivityState.NotActive;
this.version = '11.0.6'; // TODO: version compatability check inside each plugin.
this.version = '12.0.0-beta.9'; // TODO: version compatability check inside each plugin.
this.compressionThreshold = 24 * 1000;

@@ -53,4 +92,13 @@ this.restartAttempts = 0;

this.canvasRecorder = null;
this.conditionsManager = null;
this._usingOldFetchPlugin = false;
this.coldStartCommitN = 0;
this.delay = 0;
this.coldInterval = null;
this.orderNumber = 0;
this.coldStartTs = 0;
this.singleBuffer = false;
this.onSessionSent = () => {
return;
};
this.restartCanvasTracking = () => {

@@ -60,6 +108,20 @@ var _a;

};
this.flushBuffer = async (buffer) => {
return new Promise((res) => {
let ended = false;
const messagesBatch = [buffer.shift()];
while (!ended) {
const nextMsg = buffer[0];
if (!nextMsg || nextMsg[0] === 0 /* MType.Timestamp */) {
ended = true;
}
else {
messagesBatch.push(buffer.shift());
}
}
this.postToWorker(messagesBatch);
res(null);
});
};
this.onUxtCb = [];
// if (options.onStart !== undefined) {
// deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
// } ?? maybe onStart is good
this.contextId = Math.random().toString(36).slice(2);

@@ -78,5 +140,5 @@ this.projectKey = projectKey;

resourceBaseHref: null,
verbose: false,
__is_snippet: false,
__debug_report_edp: null,
__debug__: logger_js_1.LogLevel.Silent,
__save_canvas_locally: false,

@@ -102,12 +164,15 @@ localStorage: null,

this.debug = new logger_js_1.default(this.options.__debug__);
this.notify = new logger_js_1.default(this.options.verbose ? logger_js_1.LogLevel.Warnings : logger_js_1.LogLevel.Silent);
this.session = new session_js_1.default(this, this.options);
this.attributeSender = new attributeSender_js_1.default(this, Boolean(this.options.disableStringDict));
this.featureFlags = new featureFlags_js_1.default(this);
this.tagWatcher = new tagWatcher_js_1.default(this.sessionStorage, this.debug.error, (tag) => {
this.send((0, messages_gen_js_1.TagTrigger)(tag));
});
this.session.attachUpdateCallback(({ userID, metadata }) => {
if (userID != null) {
// TODO: nullable userID
this.send((0, messages_gen_js_1.UserID)(userID));
this.send((0, messages_gen_js_2.UserID)(userID));
}
if (metadata != null) {
Object.entries(metadata).forEach(([key, value]) => this.send((0, messages_gen_js_1.Metadata)(key, value)));
Object.entries(metadata).forEach(([key, value]) => this.send((0, messages_gen_js_2.Metadata)(key, value)));
}

@@ -120,3 +185,3 @@ });

try {
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=1e3,h){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.ingestURL=t+"/v1/web/i",this.isCompressing=void 0!==h}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){this.busy||!this.token?this.queue.push(t):(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t))}sendNext(){const t=this.queue.shift();t?(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t)):this.busy=!1}retry(t,s){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s){this.busy=!0;const i={Authorization:`Bearer ${this.token}`};s&&(i["Content-Encoding"]="gzip"),null!==this.token?fetch(this.ingestURL,{body:t,method:"POST",headers:i,keepalive:t.length<65536}).then((i=>{if(401===i.status)return this.busy=!1,void this.onUnauthorised();i.status>=400?this.retry(t,s):(this.attemptsCount=0,this.sendNext())})).catch((i=>{console.warn("OpenReplay:",i),this.retry(t,s)})):setTimeout((()=>{this.sendBatch(t,s)}),500)}sendCompressed(t){this.sendBatch(t,!0)}sendUncompressed(t){this.sendBatch(t,!1)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s="function"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 63:case 64:case 79:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2])}}}class n{constructor(t,s,i,n,h){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn("OpenReplay: max message size overflow."),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){0===t[0]&&(this.timestamp=t[1]),4===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn("OpenReplay: beacon size overflow. Skipping large message.",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]="NotActive",t[t.Starting=1]="Starting",t[t.Stopping=2]="Stopping",t[t.Active=3]="Active",t[t.Stopped=4]="Stopped"}(h||(h={}));let r=null,a=null,u=h.NotActive;function o(){a&&a.finaliseBatch()}function c(){u=h.Stopping,null!==d&&(clearInterval(d),d=null),a&&(a.clean(),a=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{u=h.NotActive}),100)}function p(){u!==h.Stopped&&(postMessage("restart"),c())}let f,d=null;self.onmessage=({data:s})=>{if(null!=s){if("stop"===s)return o(),c(),u=h.Stopped;if("forceFlushBatch"!==s){if(!Array.isArray(s)){if("compressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Compressed batch."),void p();r.sendCompressed(s.batch)}if("uncompressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Uncompressed batch."),void p();r.sendUncompressed(s.batch)}return"start"===s.type?(u=h.Starting,r=new t(s.ingestPoint,(()=>{p()}),(t=>{!function(t){postMessage({type:"failure",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:"compress",batch:t},[t.buffer])})),a=new n(s.pageNo,s.timestamp,s.url,(t=>r&&r.push(t)),s.tabId),null===d&&(d=setInterval(o,1e4)),u=h.Active):"auth"===s.type?r?a?(r.authorise(s.token),void(s.beaconSizeLimit&&a.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug("OR WebWorker: writer not initialised. Received auth."),void p()):(console.debug("OR WebWorker: sender not initialised. Received auth."),void p()):void 0}if(null!==a){const t=a;s.forEach((s=>{55===s[0]&&(s[1]?f=setTimeout((()=>p()),18e5):clearTimeout(f)),t.writeMessage(s)}))}a||(postMessage("not_init"),p())}else o()}else o()};'], { type: 'text/javascript' })));
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=1e3,h){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.ingestURL=t+"/v1/web/i",this.isCompressing=void 0!==h}getQueueStatus(){return 0===this.queue.length&&!this.busy}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){this.busy||!this.token?this.queue.push(t):(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t))}sendNext(){const t=this.queue.shift();t?(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t)):this.busy=!1}retry(t,s){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s){this.busy=!0;const i={Authorization:`Bearer ${this.token}`};s&&(i["Content-Encoding"]="gzip"),null!==this.token?fetch(this.ingestURL,{body:t,method:"POST",headers:i,keepalive:t.length<65536}).then((i=>{if(401===i.status)return this.busy=!1,void this.onUnauthorised();i.status>=400?this.retry(t,s):(this.attemptsCount=0,this.sendNext())})).catch((i=>{console.warn("OpenReplay:",i),this.retry(t,s)})):setTimeout((()=>{this.sendBatch(t,s)}),500)}sendCompressed(t){this.sendBatch(t,!0)}sendUncompressed(t){this.sendBatch(t,!1)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s="function"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 63:case 64:case 79:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:case 120:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 84:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2])}}}class n{constructor(t,s,i,n,h,r){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.onOfflineEnd=r,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn("OpenReplay: max message size overflow."),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){if("q_end"===t[0])return this.finaliseBatch(),this.onOfflineEnd();0===t[0]&&(this.timestamp=t[1]),4===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn("OpenReplay: beacon size overflow. Skipping large message.",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]="NotActive",t[t.Starting=1]="Starting",t[t.Stopping=2]="Stopping",t[t.Active=3]="Active",t[t.Stopped=4]="Stopped"}(h||(h={}));let r=null,u=null,a=h.NotActive;function o(){u&&u.finaliseBatch()}function c(){a=h.Stopping,null!==g&&(clearInterval(g),g=null),u&&(u.clean(),u=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{a=h.NotActive}),100)}function p(){a!==h.Stopped&&(postMessage("restart"),c())}let f,g=null;self.onmessage=({data:s})=>{if(null!=s){if("stop"===s)return o(),c(),a=h.Stopped;if("forceFlushBatch"!==s){if(!Array.isArray(s)){if("compressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Compressed batch."),void p();s.batch&&r.sendCompressed(s.batch)}if("uncompressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Uncompressed batch."),void p();s.batch&&r.sendUncompressed(s.batch)}return"start"===s.type?(a=h.Starting,r=new t(s.ingestPoint,(()=>{p()}),(t=>{!function(t){postMessage({type:"failure",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:"compress",batch:t},[t.buffer])})),u=new n(s.pageNo,s.timestamp,s.url,(t=>{r&&r.push(t)}),s.tabId,(()=>postMessage({type:"queue_empty"}))),null===g&&(g=setInterval(o,1e4)),a=h.Active):"auth"===s.type?r?u?(r.authorise(s.token),void(s.beaconSizeLimit&&u.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug("OR WebWorker: writer not initialised. Received auth."),void p()):(console.debug("OR WebWorker: sender not initialised. Received auth."),void p()):void 0}if(u){const t=u;s.forEach((s=>{55===s[0]&&(s[1]?f=setTimeout((()=>p()),18e5):clearTimeout(f)),t.writeMessage(s)}))}else postMessage("not_init"),p()}else o()}else o()};'], { type: 'text/javascript' })));
this.worker.onerror = (e) => {

@@ -153,4 +218,5 @@ this._debug('webworker_error', e);

}
// @ts-ignore
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'compressed', batch: result });
else {
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'compressed', batch: result });
}
});

@@ -162,2 +228,5 @@ }

}
else if (data.type === 'queue_empty') {
this.onSessionSent();
}
};

@@ -237,2 +306,3 @@ const alertWorker = () => {

send(message, urgent = false) {
var _a;
if (this.activityState === ActivityState.NotActive) {

@@ -251,3 +321,12 @@ return;

// ====================================================
this.messages.push(message);
if (this.activityState === ActivityState.ColdStart) {
this.bufferedMessages1.push(message);
if (!this.singleBuffer) {
this.bufferedMessages2.push(message);
}
(_a = this.conditionsManager) === null || _a === void 0 ? void 0 : _a.processMessage(message);
}
else {
this.messages.push(message);
}
// TODO: commit on start if there were `urgent` sends;

@@ -257,3 +336,3 @@ // Clarify where urgent can be used for;

// (like Fetch before start; maybe add an option "preCapture: boolean" or sth alike)
// Careful: `this.delay` is equal to zero before start hense all Timestamp-s will have to be updated on start
// Careful: `this.delay` is equal to zero before start so all Timestamp-s will have to be updated on start
if (this.activityState === ActivityState.Active && urgent) {

@@ -263,8 +342,12 @@ this.commit();

}
commit() {
/**
* Normal workflow: add timestamp and tab data to batch, then commit it
* every ~30ms
* */
_nCommit() {
if (this.worker !== undefined && this.messages.length) {
(0, utils_js_1.requestIdleCb)(() => {
var _a;
this.messages.unshift((0, messages_gen_js_1.TabData)(this.session.getTabId()));
this.messages.unshift((0, messages_gen_js_1.Timestamp)(this.timestamp()));
this.messages.unshift((0, messages_gen_js_2.TabData)(this.session.getTabId()));
this.messages.unshift((0, messages_gen_js_2.Timestamp)(this.timestamp()));
// why I need to add opt chaining?

@@ -277,2 +360,32 @@ (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage(this.messages);

}
/**
* Cold start: add timestamp and tab data to both batches
* every 2nd tick, ~60ms
* this will make batches a bit larger and replay will work with bigger jumps every frame
* but in turn we don't overload batch writer on session start with 1000 batches
* */
_cStartCommit() {
this.coldStartCommitN += 1;
if (this.coldStartCommitN === 2) {
this.bufferedMessages1.push((0, messages_gen_js_2.Timestamp)(this.timestamp()));
this.bufferedMessages1.push((0, messages_gen_js_2.TabData)(this.session.getTabId()));
this.bufferedMessages2.push((0, messages_gen_js_2.Timestamp)(this.timestamp()));
this.bufferedMessages2.push((0, messages_gen_js_2.TabData)(this.session.getTabId()));
this.coldStartCommitN = 0;
}
}
commit() {
if (this.activityState === ActivityState.ColdStart) {
this._cStartCommit();
}
else {
this._nCommit();
}
}
postToWorker(messages) {
var _a;
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage(messages);
this.commitCallbacks.forEach((cb) => cb(messages));
messages.length = 0;
}
timestamp() {

@@ -411,11 +524,224 @@ return (0, utils_js_1.now)() + this.delay;

}
_start(startOpts = {}, resetByWorker = false) {
checkSessionToken(forceNew) {
const lsReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
const needNewSessionID = forceNew || lsReset;
const sessionToken = this.session.getSessionToken();
return needNewSessionID || !sessionToken;
}
/**
* start buffering messages without starting the actual session, which gives
* user 30 seconds to "activate" and record session by calling `start()` on conditional trigger
* and we will then send buffered batch, so it won't get lost
* */
async coldStart(startOpts = {}, conditional) {
var _a, _b;
this.singleBuffer = false;
const second = 1000;
if (conditional) {
this.conditionsManager = new conditionsManager_js_1.default(this, startOpts);
}
const isNewSession = this.checkSessionToken(startOpts.forceNew);
if (conditional) {
const r = await fetch(this.options.ingestPoint + '/v1/web/start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp: (0, utils_js_1.now)(), doNotRecord: true, bufferDiff: 0, userID: this.session.getInfo().userID, token: undefined, deviceMemory: performance_js_1.deviceMemory,
jsHeapSizeLimit: performance_js_1.jsHeapSizeLimit, timezone: getTimezone() })),
});
const {
// this token is needed to fetch conditions and flags,
// but it can't be used to record a session
token, userBrowser, userCity, userCountry, userDevice, userOS, userState, projectID, } = await r.json();
this.session.assign({ projectID });
this.session.setUserInfo({
userBrowser,
userCity,
userCountry,
userDevice,
userOS,
userState,
});
const onStartInfo = { sessionToken: token, userUUID: '', sessionID: '' };
this.startCallbacks.forEach((cb) => cb(onStartInfo));
await ((_a = this.conditionsManager) === null || _a === void 0 ? void 0 : _a.fetchConditions(projectID, token));
await this.featureFlags.reloadFlags(token);
await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
(_b = this.conditionsManager) === null || _b === void 0 ? void 0 : _b.processFlags(this.featureFlags.flags);
}
const cycle = () => {
this.orderNumber += 1;
(0, utils_js_1.adjustTimeOrigin)();
this.coldStartTs = (0, utils_js_1.now)();
if (this.orderNumber % 2 === 0) {
this.bufferedMessages1.length = 0;
this.bufferedMessages1.push((0, messages_gen_js_2.Timestamp)(this.timestamp()));
this.bufferedMessages1.push((0, messages_gen_js_2.TabData)(this.session.getTabId()));
}
else {
this.bufferedMessages2.length = 0;
this.bufferedMessages2.push((0, messages_gen_js_2.Timestamp)(this.timestamp()));
this.bufferedMessages2.push((0, messages_gen_js_2.TabData)(this.session.getTabId()));
}
this.stop(false);
this.activityState = ActivityState.ColdStart;
if (startOpts.sessionHash) {
this.session.applySessionHash(startOpts.sessionHash);
}
if (startOpts.forceNew) {
this.session.reset();
}
this.session.assign({
userID: startOpts.userID,
metadata: startOpts.metadata,
});
if (!isNewSession) {
this.debug.log('continuing session on new tab', this.session.getTabId());
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
this.send((0, messages_gen_js_2.TabChange)(this.session.getTabId()));
}
this.observer.observe();
this.ticker.start();
};
this.coldInterval = setInterval(() => {
cycle();
}, 30 * second);
cycle();
}
/**
* Starts offline session recording
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* */
offlineRecording(startOpts = {}, onSessionSent) {
this.onSessionSent = onSessionSent;
this.singleBuffer = true;
const isNewSession = this.checkSessionToken(startOpts.forceNew);
(0, utils_js_1.adjustTimeOrigin)();
this.coldStartTs = (0, utils_js_1.now)();
const saverBuffer = this.localStorage.getItem(bufferStorageKey);
if (saverBuffer) {
const data = JSON.parse(saverBuffer);
this.bufferedMessages1 = Array.isArray(data) ? data : this.bufferedMessages1;
this.localStorage.removeItem(bufferStorageKey);
}
this.bufferedMessages1.push((0, messages_gen_js_2.Timestamp)(this.timestamp()));
this.bufferedMessages1.push((0, messages_gen_js_2.TabData)(this.session.getTabId()));
this.activityState = ActivityState.ColdStart;
if (startOpts.sessionHash) {
this.session.applySessionHash(startOpts.sessionHash);
}
if (startOpts.forceNew) {
this.session.reset();
}
this.session.assign({
userID: startOpts.userID,
metadata: startOpts.metadata,
});
const onStartInfo = { sessionToken: '', userUUID: '', sessionID: '' };
this.startCallbacks.forEach((cb) => cb(onStartInfo));
if (!isNewSession) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
this.send((0, messages_gen_js_2.TabChange)(this.session.getTabId()));
}
this.observer.observe();
this.ticker.start();
return {
saveBuffer: this.saveBuffer,
getBuffer: this.getBuffer,
setBuffer: this.setBuffer,
};
}
/**
* Saves the captured messages in localStorage (or whatever is used in its place)
*
* Then when this.offlineRecording is called, it will preload this messages and clear the storage item
*
* Keeping the size of local storage reasonable is up to the end users of this library
* */
saveBuffer() {
this.localStorage.setItem(bufferStorageKey, JSON.stringify(this.bufferedMessages1));
}
/**
* @returns buffer with stored messages for offline recording
* */
getBuffer() {
return this.bufferedMessages1;
}
/**
* Used to set a buffer with messages array
* */
setBuffer(buffer) {
this.bufferedMessages1 = buffer;
}
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
async uploadOfflineRecording() {
var _a, _b;
this.stop(false);
const timestamp = (0, utils_js_1.now)();
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({
type: 'start',
pageNo: this.session.incPageNo(),
ingestPoint: this.options.ingestPoint,
timestamp: this.coldStartTs,
url: document.URL,
connAttemptCount: this.options.connAttemptCount,
connAttemptGap: this.options.connAttemptGap,
tabId: this.session.getTabId(),
});
const r = await fetch(this.options.ingestPoint + '/v1/web/start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp: timestamp, doNotRecord: false, bufferDiff: timestamp - this.coldStartTs, userID: this.session.getInfo().userID, token: undefined, deviceMemory: performance_js_1.deviceMemory,
jsHeapSizeLimit: performance_js_1.jsHeapSizeLimit, timezone: getTimezone() })),
});
const { token, userBrowser, userCity, userCountry, userDevice, userOS, userState, beaconSizeLimit, projectID, } = await r.json();
(_b = this.worker) === null || _b === void 0 ? void 0 : _b.postMessage({
type: 'auth',
token,
beaconSizeLimit,
});
this.session.assign({ projectID });
this.session.setUserInfo({
userBrowser,
userCity,
userCountry,
userDevice,
userOS,
userState,
});
while (this.bufferedMessages1.length > 0) {
await this.flushBuffer(this.bufferedMessages1);
}
this.postToWorker([['q_end']]);
this.clearBuffers();
}
_start(startOpts = {}, resetByWorker = false, conditionName) {
const isColdStart = this.activityState === ActivityState.ColdStart;
if (isColdStart && this.coldInterval) {
clearInterval(this.coldInterval);
}
if (!this.worker) {
return Promise.resolve(UnsuccessfulStart('No worker found: perhaps, CSP is not set.'));
const reason = 'No worker found: perhaps, CSP is not set.';
this.signalError(reason, []);
return Promise.resolve(UnsuccessfulStart(reason));
}
if (this.activityState !== ActivityState.NotActive) {
return Promise.resolve(UnsuccessfulStart('OpenReplay: trying to call `start()` on the instance that has been started already.'));
if (this.activityState === ActivityState.Active ||
this.activityState === ActivityState.Starting) {
const reason = 'OpenReplay: trying to call `start()` on the instance that has been started already.';
return Promise.resolve(UnsuccessfulStart(reason));
}
this.activityState = ActivityState.Starting;
(0, utils_js_1.adjustTimeOrigin)();
if (!isColdStart) {
(0, utils_js_1.adjustTimeOrigin)();
}
if (startOpts.sessionHash) {

@@ -438,3 +764,3 @@ this.session.applySessionHash(startOpts.sessionHash);

ingestPoint: this.options.ingestPoint,
timestamp,
timestamp: isColdStart ? this.coldStartTs : timestamp,
url: document.URL,

@@ -445,8 +771,6 @@ connAttemptCount: this.options.connAttemptCount,

});
const lsReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
const sessionToken = this.session.getSessionToken();
const isNewSession = this.checkSessionToken(startOpts.forceNew);
this.sessionStorage.removeItem(this.options.session_reset_key);
const needNewSessionID = startOpts.forceNew || lsReset || resetByWorker;
const sessionToken = this.session.getSessionToken();
const isNewSession = needNewSessionID || !sessionToken;
this.debug.log('OpenReplay: starting session; need new session id?', needNewSessionID, 'session token: ', sessionToken);
this.debug.log('OpenReplay: starting session; need new session id?', isNewSession, 'session token: ', sessionToken);
return window

@@ -458,4 +782,4 @@ .fetch(this.options.ingestPoint + '/v1/web/start', {

},
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp, userID: this.session.getInfo().userID, token: isNewSession ? undefined : sessionToken, deviceMemory: performance_js_1.deviceMemory,
jsHeapSizeLimit: performance_js_1.jsHeapSizeLimit, timezone: getTimezone() })),
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp, doNotRecord: false, bufferDiff: timestamp - this.coldStartTs, userID: this.session.getInfo().userID, token: isNewSession ? undefined : sessionToken, deviceMemory: performance_js_1.deviceMemory,
jsHeapSizeLimit: performance_js_1.jsHeapSizeLimit, timezone: getTimezone(), condition: conditionName })),
})

@@ -474,9 +798,13 @@ .then((r) => {

})
.then((r) => {
.then(async (r) => {
var _a;
if (!this.worker) {
return Promise.reject('no worker found after start request (this might not happen)');
const reason = 'no worker found after start request (this might not happen)';
this.signalError(reason, []);
return Promise.reject(reason);
}
if (this.activityState === ActivityState.NotActive) {
return Promise.reject('Tracker stopped during authorization');
const reason = 'Tracker stopped during authorization';
this.signalError(reason, []);
return Promise.reject(reason);
}

@@ -494,3 +822,5 @@ const { token, userUUID, projectID, beaconSizeLimit, compressionThreshold, // how big the batch should be before we decide to compress it

(typeof beaconSizeLimit !== 'number' && typeof beaconSizeLimit !== 'undefined')) {
return Promise.reject(`Incorrect server response: ${JSON.stringify(r)}`);
const reason = `Incorrect server response: ${JSON.stringify(r)}`;
this.signalError(reason, []);
return Promise.reject(reason);
}

@@ -512,17 +842,23 @@ this.delay = delay;

});
this.worker.postMessage({
type: 'auth',
token,
beaconSizeLimit,
});
if (!isNewSession && token === sessionToken) {
this.debug.log('continuing session on new tab', this.session.getTabId());
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
this.send((0, messages_gen_js_1.TabChange)(this.session.getTabId()));
this.send((0, messages_gen_js_2.TabChange)(this.session.getTabId()));
}
// (Re)send Metadata for the case of a new session
Object.entries(this.session.getInfo().metadata).forEach(([key, value]) => this.send((0, messages_gen_js_1.Metadata)(key, value)));
Object.entries(this.session.getInfo().metadata).forEach(([key, value]) => this.send((0, messages_gen_js_2.Metadata)(key, value)));
this.localStorage.setItem(this.options.local_uuid_key, userUUID);
this.worker.postMessage({
type: 'auth',
token,
beaconSizeLimit,
});
this.compressionThreshold = compressionThreshold;
const onStartInfo = { sessionToken: token, userUUID, sessionID };
// TODO: start as early as possible (before receiving the token)
/** after start */
this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
void this.featureFlags.reloadFlags();
await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
this.activityState = ActivityState.Active;
if (canvasEnabled) {

@@ -537,8 +873,18 @@ this.canvasRecorder =

}
// TODO: start as early as possible (before receiving the token)
this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
this.observer.observe();
this.ticker.start();
this.activityState = ActivityState.Active;
this.notify.log('OpenReplay tracking started.');
/** --------------- COLD START BUFFER ------------------*/
if (isColdStart) {
const biggestBuffer = this.bufferedMessages1.length > this.bufferedMessages2.length
? this.bufferedMessages1
: this.bufferedMessages2;
while (biggestBuffer.length > 0) {
await this.flushBuffer(biggestBuffer);
}
this.clearBuffers();
this.commit();
/** --------------- COLD START BUFFER ------------------*/
}
else {
this.observer.observe();
this.ticker.start();
}
// get rid of onStart ?

@@ -584,6 +930,7 @@ if (typeof this.options.onStart === 'function') {

if (reason === CANCELED) {
this.signalError(CANCELED, []);
return UnsuccessfulStart(CANCELED);
}
this.notify.log('OpenReplay was unable to start. ', reason);
this._debug('session_start', reason);
this.signalError(START_ERROR, []);
return UnsuccessfulStart(START_ERROR);

@@ -633,2 +980,23 @@ });

}
clearBuffers() {
this.bufferedMessages1.length = 0;
this.bufferedMessages2.length = 0;
}
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* @returns {(msgType: string, data: string, dir: "up" | "down") => void}
* */
trackWs(channelName) {
const channel = channelName;
return (msgType, data, dir = 'down') => {
if (typeof msgType !== 'string' ||
typeof data !== 'string' ||
data.length > 5 * 1024 * 1024 ||
msgType.length > 255) {
return;
}
this.send((0, messages_gen_js_2.WSChannel)('websocket', channel, data, this.timestamp(), dir, msgType));
};
}
stop(stopWorker = true) {

@@ -644,3 +1012,4 @@ var _a;

this.stopCallbacks.forEach((cb) => cb());
this.notify.log('OpenReplay tracking stopped.');
this.debug.log('OpenReplay tracking stopped.');
this.tagWatcher.clear();
if (this.worker && stopWorker) {

@@ -647,0 +1016,0 @@ this.worker.postMessage('stop');

24

cjs/app/logger.d.ts

@@ -8,20 +8,10 @@ export declare const LogLevel: {

};
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 {};

30

cjs/app/logger.js

@@ -11,18 +11,12 @@ "use strict";

};
function IsCustomLevel(l) {
return typeof l === 'object';
}
class Logger {
constructor(options = exports.LogLevel.Silent) {
this.options =
options === true
? { level: exports.LogLevel.Verbose }
: typeof options === 'number'
? { level: options }
: options;
constructor(debugLevel = exports.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 >= exports.LogLevel.Log) {
if (this.shouldLog(exports.LogLevel.Log)) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
console.log(...args);

@@ -32,5 +26,4 @@ }

warn(...args) {
if (IsCustomLevel(this.options.level)
? this.options.level.warn
: this.options.level >= exports.LogLevel.Warnings) {
if (this.shouldLog(exports.LogLevel.Warnings)) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
console.warn(...args);

@@ -40,5 +33,4 @@ }

error(...args) {
if (IsCustomLevel(this.options.level)
? this.options.level.error
: this.options.level >= exports.LogLevel.Errors) {
if (this.shouldLog(exports.LogLevel.Errors)) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
console.error(...args);

@@ -45,0 +37,0 @@ }

2

cjs/app/messages.gen.d.ts

@@ -65,2 +65,3 @@ import * as Messages from '../common/messages.gen.js';

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;

@@ -74,1 +75,2 @@ export declare function SelectionChange(selectionStart: number, selectionEnd: number, selection: string): Messages.SelectionChange;

export declare function CanvasNode(nodeId: string, timestamp: number): Messages.CanvasNode;
export declare function TagTrigger(tagId: number): Messages.TagTrigger;

21

cjs/app/messages.gen.js

@@ -6,3 +6,3 @@ "use strict";

exports.CSSInsertRuleURLBased = exports.CustomIssue = exports.TechnicalInfo = exports.SetCSSDataURLBased = exports.SetNodeAttributeURLBased = exports.LongTask = exports.SetNodeFocus = exports.LoadFontFace = exports.SetPageVisibility = exports.ConnectionInformation = exports.ResourceTimingDeprecated = exports.SetNodeAttributeDict = exports.StringDict = exports.PerformanceTrack = exports.GraphQL = exports.NgRx = exports.MobX = exports.Vuex = exports.Redux = exports.StateAction = exports.OTable = exports.Profiler = exports.Fetch = exports.CSSDeleteRule = exports.CSSInsertRule = exports.Metadata = exports.UserAnonymousID = exports.UserID = exports.CustomEvent = exports.PageRenderTiming = exports.PageLoadTiming = exports.ConsoleLog = exports.NetworkRequestDeprecated = exports.MouseMove = exports.SetInputChecked = exports.SetInputValue = exports.SetInputTarget = exports.SetNodeScroll = exports.SetNodeData = exports.RemoveNodeAttribute = exports.SetNodeAttribute = exports.RemoveNode = exports.MoveNode = exports.CreateTextNode = exports.CreateElementNode = exports.CreateDocument = exports.SetViewportScroll = exports.SetViewportSize = exports.SetPageLocation = exports.Timestamp = void 0;
exports.CanvasNode = exports.TabData = exports.TabChange = exports.ResourceTiming = exports.UnbindNodes = exports.MouseThrashing = exports.SelectionChange = exports.InputChange = exports.NetworkRequest = exports.PartitionedMessage = exports.BatchMetadata = exports.Zustand = exports.JSException = exports.AdoptedSSRemoveOwner = exports.AdoptedSSAddOwner = exports.AdoptedSSDeleteRule = exports.AdoptedSSInsertRuleURLBased = exports.AdoptedSSReplaceURLBased = exports.CreateIFrameDocument = exports.MouseClick = void 0;
exports.TagTrigger = exports.CanvasNode = exports.TabData = exports.TabChange = exports.ResourceTiming = exports.UnbindNodes = exports.MouseThrashing = exports.SelectionChange = exports.InputChange = exports.WSChannel = exports.NetworkRequest = exports.PartitionedMessage = exports.BatchMetadata = exports.Zustand = exports.JSException = exports.AdoptedSSRemoveOwner = exports.AdoptedSSAddOwner = exports.AdoptedSSDeleteRule = exports.AdoptedSSInsertRuleURLBased = exports.AdoptedSSReplaceURLBased = exports.CreateIFrameDocument = exports.MouseClick = void 0;
function Timestamp(timestamp) {

@@ -568,2 +568,14 @@ return [

exports.NetworkRequest = NetworkRequest;
function WSChannel(chType, channelName, data, timestamp, dir, messageType) {
return [
84 /* Messages.Type.WSChannel */,
chType,
channelName,
data,
timestamp,
dir,
messageType,
];
}
exports.WSChannel = WSChannel;
function InputChange(id, value, valueMasked, label, hesitationTime, inputDuration) {

@@ -642,1 +654,8 @@ return [

exports.CanvasNode = CanvasNode;
function TagTrigger(tagId) {
return [
120 /* Messages.Type.TagTrigger */,
tagId,
];
}
exports.TagTrigger = TagTrigger;

5

cjs/app/observer/iframe_observer.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const observer_js_1 = require("./observer.js");
const observer_js_1 = __importDefault(require("./observer.js"));
const messages_gen_js_1 = require("../messages.gen.js");

@@ -5,0 +8,0 @@ class IFrameObserver extends observer_js_1.default {

5

cjs/app/observer/shadow_root_observer.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const observer_js_1 = require("./observer.js");
const observer_js_1 = __importDefault(require("./observer.js"));
const messages_gen_js_1 = require("../messages.gen.js");

@@ -5,0 +8,0 @@ class ShadowRootObserver extends observer_js_1.default {

11

cjs/app/observer/top_observer.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const observer_js_1 = require("./observer.js");
const observer_js_1 = __importDefault(require("./observer.js"));
const guards_js_1 = require("../guards.js");
const iframe_observer_js_1 = require("./iframe_observer.js");
const shadow_root_observer_js_1 = require("./shadow_root_observer.js");
const iframe_offsets_js_1 = require("./iframe_offsets.js");
const iframe_observer_js_1 = __importDefault(require("./iframe_observer.js"));
const shadow_root_observer_js_1 = __importDefault(require("./shadow_root_observer.js"));
const iframe_offsets_js_1 = __importDefault(require("./iframe_offsets.js"));
const messages_gen_js_1 = require("../messages.gen.js");

@@ -9,0 +12,0 @@ const utils_js_1 = require("../../utils.js");

7

cjs/common/interaction.d.ts

@@ -25,3 +25,3 @@ import Message from './messages.gen.js';

batch: Uint8Array;
} | 'forceFlushBatch';
} | 'forceFlushBatch' | 'check_queue';
type Failure = {

@@ -31,6 +31,9 @@ type: 'failure';

};
type QEmpty = {
type: 'queue_empty';
};
export type FromWorkerData = 'restart' | Failure | 'not_init' | {
type: 'compress';
batch: Uint8Array;
};
} | QEmpty;
export {};

19

cjs/common/messages.gen.d.ts

@@ -64,2 +64,3 @@ export declare const enum Type {

NetworkRequest = 83,
WSChannel = 84,
InputChange = 112,

@@ -72,3 +73,4 @@ SelectionChange = 113,

TabData = 118,
CanvasNode = 119
CanvasNode = 119,
TagTrigger = 120
}

@@ -449,2 +451,11 @@ export type Timestamp = [

];
export type WSChannel = [
Type.WSChannel,
string,
string,
string,
number,
string,
string
];
export type InputChange = [

@@ -499,3 +510,7 @@ Type.InputChange,

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

47

cjs/index.d.ts

@@ -36,12 +36,55 @@ import App from './app/index.js';

constructor(options: Options);
checkDoNotTrack: () => boolean | undefined;
signalStartIssue: (reason: string, missingApi: string[]) => void;
isFlagEnabled(flagName: string): boolean;
onFlagsLoad(callback: (flags: IFeatureFlag[]) => void): void;
clearPersistFlags(): void;
reloadFlags(): Promise<void>;
reloadFlags(): Promise<void> | undefined;
getFeatureFlag(flagName: string): IFeatureFlag | undefined;
getAllFeatureFlags(): IFeatureFlag[];
getAllFeatureFlags(): IFeatureFlag[] | undefined;
restartCanvasTracking: () => void;
use<T>(fn: (app: App | null, options?: Options) => T): T;
isActive(): boolean;
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* msg direction is "down" (incoming) by default
*
* @returns {(msgType: string, data: string, dir: 'up' | 'down') => void}
* */
trackWs(channelName: string): ((msgType: string, data: string, dir: "up" | "down") => void) | undefined;
start(startOpts?: Partial<StartOptions>): Promise<StartPromiseReturn>;
browserEnvCheck(): boolean;
/**
* start buffering messages without starting the actual session, which gives user 30 seconds to "activate" and record
* session by calling start() on conditional trigger and we will then send buffered batch, so it won't get lost
* */
coldStart(startOpts?: Partial<StartOptions>, conditional?: boolean): Promise<never> | undefined;
/**
* Starts offline session recording. Keep in mind that only user device time will be used for timestamps.
* (no backend delay sync)
*
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* @returns methods to manipulate buffer:
*
* saveBuffer - to save it in localStorage
*
* getBuffer - returns current buffer
*
* setBuffer - replaces current buffer with given
* */
startOfflineRecording(startOpts: Partial<StartOptions>, onSessionSent: () => void): Promise<never> | {
saveBuffer: () => void;
getBuffer: () => import("./common/messages.gen.js").default[];
setBuffer: (buffer: import("./common/messages.gen.js").default[]) => void;
};
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
uploadOfflineRecording(): Promise<void> | undefined;
stop(): string | undefined;

@@ -48,0 +91,0 @@ forceFlushBatch(): void;

343

cjs/index.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SanitizeLevel = exports.Messages = exports.App = void 0;
const index_js_1 = require("./app/index.js");
const index_js_1 = __importStar(require("./app/index.js"));
var index_js_2 = require("./app/index.js");
Object.defineProperty(exports, "App", { enumerable: true, get: function () { return index_js_2.default; } });
Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(index_js_2).default; } });
const messages_gen_js_1 = require("./app/messages.gen.js");
const _Messages = require("./app/messages.gen.js");
const _Messages = __importStar(require("./app/messages.gen.js"));
exports.Messages = _Messages;
var sanitizer_js_1 = require("./app/sanitizer.js");
Object.defineProperty(exports, "SanitizeLevel", { enumerable: true, get: function () { return sanitizer_js_1.SanitizeLevel; } });
const connection_js_1 = require("./modules/connection.js");
const console_js_1 = require("./modules/console.js");
const exception_js_1 = require("./modules/exception.js");
const img_js_1 = require("./modules/img.js");
const input_js_1 = require("./modules/input.js");
const mouse_js_1 = require("./modules/mouse.js");
const timing_js_1 = require("./modules/timing.js");
const performance_js_1 = require("./modules/performance.js");
const scroll_js_1 = require("./modules/scroll.js");
const viewport_js_1 = require("./modules/viewport.js");
const cssrules_js_1 = require("./modules/cssrules.js");
const focus_js_1 = require("./modules/focus.js");
const fonts_js_1 = require("./modules/fonts.js");
const network_js_1 = require("./modules/network.js");
const constructedStyleSheets_js_1 = require("./modules/constructedStyleSheets.js");
const selection_js_1 = require("./modules/selection.js");
const tabs_js_1 = require("./modules/tabs.js");
const connection_js_1 = __importDefault(require("./modules/connection.js"));
const console_js_1 = __importDefault(require("./modules/console.js"));
const exception_js_1 = __importStar(require("./modules/exception.js"));
const img_js_1 = __importDefault(require("./modules/img.js"));
const input_js_1 = __importDefault(require("./modules/input.js"));
const mouse_js_1 = __importDefault(require("./modules/mouse.js"));
const timing_js_1 = __importDefault(require("./modules/timing.js"));
const performance_js_1 = __importDefault(require("./modules/performance.js"));
const scroll_js_1 = __importDefault(require("./modules/scroll.js"));
const viewport_js_1 = __importDefault(require("./modules/viewport.js"));
const cssrules_js_1 = __importDefault(require("./modules/cssrules.js"));
const focus_js_1 = __importDefault(require("./modules/focus.js"));
const fonts_js_1 = __importDefault(require("./modules/fonts.js"));
const network_js_1 = __importDefault(require("./modules/network.js"));
const constructedStyleSheets_js_1 = __importDefault(require("./modules/constructedStyleSheets.js"));
const selection_js_1 = __importDefault(require("./modules/selection.js"));
const tabs_js_1 = __importDefault(require("./modules/tabs.js"));
const utils_js_1 = require("./utils.js");
const featureFlags_js_1 = require("./modules/featureFlags.js");
const DOCS_SETUP = '/installation/javascript-sdk';

@@ -61,4 +86,24 @@ function processOptions(obj) {

constructor(options) {
var _a;
this.options = options;
this.app = null;
this.checkDoNotTrack = () => {
return (this.options.respectDoNotTrack &&
(navigator.doNotTrack == '1' ||
// @ts-ignore
window.doNotTrack == '1'));
};
this.signalStartIssue = (reason, missingApi) => {
const doNotTrack = this.checkDoNotTrack();
const req = new XMLHttpRequest();
const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
req.open('POST', orig + '/v1/web/not-started');
req.send(JSON.stringify({
trackerVersion: '12.0.0-beta.9',
projectKey: this.options.projectKey,
doNotTrack,
reason,
missingApi,
}));
};
this.restartCanvasTracking = () => {

@@ -97,83 +142,91 @@ if (this.app === null) {

}
const doNotTrack = options.respectDoNotTrack &&
(navigator.doNotTrack == '1' ||
// @ts-ignore
window.doNotTrack == '1');
const app = (this.app =
doNotTrack ||
!('Map' in window) ||
!('Set' in window) ||
!('MutationObserver' in window) ||
!('performance' in window) ||
!('timing' in performance) ||
!('startsWith' in String.prototype) ||
!('Blob' in window) ||
!('Worker' in window)
? null
: new index_js_1.default(options.projectKey, options.sessionToken, options));
if (app !== null) {
(0, viewport_js_1.default)(app);
(0, cssrules_js_1.default)(app);
(0, constructedStyleSheets_js_1.default)(app);
(0, connection_js_1.default)(app);
(0, console_js_1.default)(app, options);
(0, exception_js_1.default)(app, options);
(0, img_js_1.default)(app);
(0, input_js_1.default)(app, options);
(0, mouse_js_1.default)(app, options.mouse);
(0, timing_js_1.default)(app, options);
(0, performance_js_1.default)(app, options);
(0, scroll_js_1.default)(app);
(0, focus_js_1.default)(app);
(0, fonts_js_1.default)(app);
(0, network_js_1.default)(app, options.network);
(0, selection_js_1.default)(app);
(0, tabs_js_1.default)(app);
this.featureFlags = new featureFlags_js_1.default(app);
window.__OPENREPLAY__ = this;
const doNotTrack = this.checkDoNotTrack();
const failReason = [];
const conditions = [
'Map',
'Set',
'MutationObserver',
'performance',
'timing',
'startsWith',
'Blob',
'Worker',
];
if (doNotTrack) {
failReason.push('doNotTrack');
}
else {
for (const condition of conditions) {
if (condition === 'timing') {
if ('performance' in window && !(condition in performance)) {
failReason.push(condition);
break;
}
}
else if (condition === 'startsWith') {
if (!(condition in String.prototype)) {
failReason.push(condition);
break;
}
}
else {
if (!(condition in window)) {
failReason.push(condition);
break;
}
}
}
}
if (failReason.length > 0) {
const missingApi = failReason.join(',');
console.error(`OpenReplay: browser doesn't support API required for tracking or doNotTrack is set to 1. Reason: ${missingApi}`);
this.signalStartIssue('missing_api', failReason);
return;
}
const app = new index_js_1.default(options.projectKey, options.sessionToken, options, this.signalStartIssue);
this.app = app;
(0, viewport_js_1.default)(app);
(0, cssrules_js_1.default)(app);
(0, constructedStyleSheets_js_1.default)(app);
(0, connection_js_1.default)(app);
(0, console_js_1.default)(app, options);
(0, exception_js_1.default)(app, options);
(0, img_js_1.default)(app);
(0, input_js_1.default)(app, options);
(0, mouse_js_1.default)(app, options.mouse);
(0, timing_js_1.default)(app, options);
(0, performance_js_1.default)(app, options);
(0, scroll_js_1.default)(app);
(0, focus_js_1.default)(app);
(0, fonts_js_1.default)(app);
(0, network_js_1.default)(app, options.network);
(0, selection_js_1.default)(app);
(0, tabs_js_1.default)(app);
window.__OPENREPLAY__ = this;
if ((_a = options.flags) === null || _a === void 0 ? void 0 : _a.onFlagsLoad) {
this.onFlagsLoad(options.flags.onFlagsLoad);
}
const wOpen = window.open;
if (options.autoResetOnWindowOpen || options.resetTabOnWindowOpen) {
app.attachStartCallback(() => {
var _a;
if ((_a = options.flags) === null || _a === void 0 ? void 0 : _a.onFlagsLoad) {
this.onFlagsLoad(options.flags.onFlagsLoad);
}
void this.featureFlags.reloadFlags();
const tabId = app.getTabId();
const sessStorage = (_a = app.sessionStorage) !== null && _a !== void 0 ? _a : window.sessionStorage;
// @ts-ignore ?
window.open = function (...args) {
if (options.autoResetOnWindowOpen) {
app.resetNextPageSession(true);
}
if (options.resetTabOnWindowOpen) {
sessStorage.removeItem(options.session_tabid_key || '__openreplay_tabid');
}
wOpen.call(window, ...args);
app.resetNextPageSession(false);
sessStorage.setItem(options.session_tabid_key || '__openreplay_tabid', tabId);
};
});
const wOpen = window.open;
if (options.autoResetOnWindowOpen || options.resetTabOnWindowOpen) {
app.attachStartCallback(() => {
var _a;
const tabId = app.getTabId();
const sessStorage = (_a = app.sessionStorage) !== null && _a !== void 0 ? _a : window.sessionStorage;
// @ts-ignore ?
window.open = function (...args) {
if (options.autoResetOnWindowOpen) {
app.resetNextPageSession(true);
}
if (options.resetTabOnWindowOpen) {
sessStorage.removeItem(options.session_tabid_key || '__openreplay_tabid');
}
wOpen.call(window, ...args);
app.resetNextPageSession(false);
sessStorage.setItem(options.session_tabid_key || '__openreplay_tabid', tabId);
};
});
app.attachStopCallback(() => {
window.open = wOpen;
});
}
app.attachStopCallback(() => {
window.open = wOpen;
});
}
else {
console.log("OpenReplay: browser doesn't support API required for tracking or doNotTrack is set to 1.");
const req = new XMLHttpRequest();
const orig = options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
req.open('POST', orig + '/v1/web/not-started');
// no-cors issue only with text/plain or not-set Content-Type
// req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.send(JSON.stringify({
trackerVersion: '11.0.6',
projectKey: options.projectKey,
doNotTrack,
// TODO: add precise reason (an exact API missing)
}));
}
}

@@ -184,15 +237,20 @@ isFlagEnabled(flagName) {

onFlagsLoad(callback) {
this.featureFlags.onFlagsLoad(callback);
var _a;
(_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.onFlagsLoad(callback);
}
clearPersistFlags() {
this.featureFlags.clearPersistFlags();
var _a;
(_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.clearPersistFlags();
}
reloadFlags() {
return this.featureFlags.reloadFlags();
var _a;
return (_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.reloadFlags();
}
getFeatureFlag(flagName) {
return this.featureFlags.getFeatureFlag(flagName);
var _a;
return (_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.getFeatureFlag(flagName);
}
getAllFeatureFlags() {
return this.featureFlags.flags;
var _a;
return (_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.flags;
}

@@ -208,12 +266,85 @@ use(fn) {

}
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* msg direction is "down" (incoming) by default
*
* @returns {(msgType: string, data: string, dir: 'up' | 'down') => void}
* */
trackWs(channelName) {
if (this.app === null) {
return;
}
return this.app.trackWs(channelName);
}
start(startOpts) {
if (this.browserEnvCheck()) {
if (this.app === null) {
return Promise.reject("Browser doesn't support required api, or doNotTrack is active.");
}
return this.app.start(startOpts);
}
else {
return Promise.reject('Trying to start not in browser.');
}
}
browserEnvCheck() {
if (!utils_js_1.IN_BROWSER) {
console.error(`OpenReplay: you are trying to start Tracker on a node.js environment. If you want to use OpenReplay with SSR, please, use componentDidMount or useEffect API for placing the \`tracker.start()\` line. Check documentation on ${utils_js_1.DOCS_HOST}${DOCS_SETUP}`);
return false;
}
return true;
}
/**
* start buffering messages without starting the actual session, which gives user 30 seconds to "activate" and record
* session by calling start() on conditional trigger and we will then send buffered batch, so it won't get lost
* */
coldStart(startOpts, conditional) {
if (this.browserEnvCheck()) {
if (this.app === null) {
return Promise.reject('Tracker not initialized');
}
void this.app.coldStart(startOpts, conditional);
}
else {
return Promise.reject('Trying to start not in browser.');
}
}
/**
* Starts offline session recording. Keep in mind that only user device time will be used for timestamps.
* (no backend delay sync)
*
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* @returns methods to manipulate buffer:
*
* saveBuffer - to save it in localStorage
*
* getBuffer - returns current buffer
*
* setBuffer - replaces current buffer with given
* */
startOfflineRecording(startOpts, onSessionSent) {
if (this.browserEnvCheck()) {
if (this.app === null) {
return Promise.reject('Tracker not initialized');
}
return this.app.offlineRecording(startOpts, onSessionSent);
}
else {
return Promise.reject('Trying to start not in browser.');
}
}
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
uploadOfflineRecording() {
if (this.app === null) {
return Promise.reject("Browser doesn't support required api, or doNotTrack is active.");
return;
}
// TODO: check argument type
return this.app.start(startOpts);
return this.app.uploadOfflineRecording();
}

@@ -220,0 +351,0 @@ stop() {

5

cjs/modules/exception.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getExceptionMessageFromEvent = exports.getExceptionMessage = void 0;
const messages_gen_js_1 = require("../app/messages.gen.js");
const error_stack_parser_1 = require("error-stack-parser");
const error_stack_parser_1 = __importDefault(require("error-stack-parser"));
function getDefaultStack(e) {

@@ -7,0 +10,0 @@ return [

2

cjs/modules/featureFlags.d.ts

@@ -21,3 +21,3 @@ import App from '../app/index.js';

onFlagsLoad(cb: (flags: IFeatureFlag[]) => void): void;
reloadFlags(): Promise<void>;
reloadFlags(token?: string): Promise<void>;
handleFlags(flags: IFeatureFlag[]): void;

@@ -24,0 +24,0 @@ clearPersistFlags(): void;

82

cjs/modules/featureFlags.js
"use strict";
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());
});
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -32,41 +23,40 @@ class FeatureFlags {

}
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,
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),
async reloadFlags(token) {
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 };
});
if (resp.status === 200) {
const data = yield resp.json();
return this.handleFlags(data.flags);
}
}
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,
os: userInfo.userOS,
device: userInfo.userDevice,
country: userInfo.userCountry,
state: userInfo.userState,
city: userInfo.userCity,
browser: userInfo.userBrowser,
persistFlags: persistFlags,
};
const authToken = token !== null && token !== void 0 ? token : this.app.session.getSessionToken();
const resp = await fetch(this.app.options.ingestPoint + '/v1/web/feature-flags', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authToken}`,
},
body: JSON.stringify(requestObject),
});
if (resp.status === 200) {
const data = await resp.json();
return this.handleFlags(data.flags);
}
}

@@ -73,0 +63,0 @@ handleFlags(flags) {

7

cjs/modules/network.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const messages_gen_js_1 = require("../app/messages.gen.js");
const utils_js_1 = require("../utils.js");
const axiosSpy_js_1 = require("./axiosSpy.js");
const index_js_1 = require("./Network/index.js");
const axiosSpy_js_1 = __importDefault(require("./axiosSpy.js"));
const index_js_1 = __importDefault(require("./Network/index.js"));
function getXHRRequestDataObject(xhr) {

@@ -8,0 +11,0 @@ // @ts-ignore this is 3x faster than using Map<XHR, XHRRequestData>

5

cjs/modules/Network/beaconProxy.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BeaconProxyHandler = void 0;
const networkMessage_js_1 = require("./networkMessage.js");
const networkMessage_js_1 = __importDefault(require("./networkMessage.js"));
const utils_js_1 = require("./utils.js");

@@ -7,0 +10,0 @@ // https://fetch.spec.whatwg.org/#concept-bodyinit-extract

25

cjs/modules/Network/fetchProxy.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -11,3 +34,3 @@ exports.FetchProxyHandler = exports.ResponseProxyHandler = void 0;

* */
const networkMessage_js_1 = require("./networkMessage.js");
const networkMessage_js_1 = __importStar(require("./networkMessage.js"));
const utils_js_1 = require("./utils.js");

@@ -14,0 +37,0 @@ class ResponseProxyHandler {

9

cjs/modules/Network/index.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const fetchProxy_js_1 = require("./fetchProxy.js");
const xhrProxy_js_1 = require("./xhrProxy.js");
const beaconProxy_js_1 = require("./beaconProxy.js");
const fetchProxy_js_1 = __importDefault(require("./fetchProxy.js"));
const xhrProxy_js_1 = __importDefault(require("./xhrProxy.js"));
const beaconProxy_js_1 = __importDefault(require("./beaconProxy.js"));
const getWarning = (api) => console.warn(`Openreplay: Can't find ${api} in global context.

@@ -7,0 +10,0 @@ If you're using serverside rendering in your app, make sure that tracker is loaded dynamically, otherwise ${api} won't be tracked.`);

25

cjs/modules/Network/xhrProxy.js

@@ -9,5 +9,28 @@ "use strict";

* */
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.XHRProxyHandler = void 0;
const networkMessage_js_1 = require("./networkMessage.js");
const networkMessage_js_1 = __importStar(require("./networkMessage.js"));
const utils_js_1 = require("./utils.js");

@@ -14,0 +37,0 @@ class XHRProxyHandler {

34

cjs/modules/userTesting/index.js
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styles = require("./styles.js");
const recorder_js_1 = require("./recorder.js");
const dnd_js_1 = require("./dnd.js");
const styles = __importStar(require("./styles.js"));
const recorder_js_1 = __importStar(require("./recorder.js"));
const dnd_js_1 = __importDefault(require("./dnd.js"));
const utils_js_1 = require("./utils.js");
const SignalManager_js_1 = require("./SignalManager.js");
const SignalManager_js_1 = __importDefault(require("./SignalManager.js"));
class UserTestManager {

@@ -9,0 +35,0 @@ constructor(app, storageKey) {

159

cjs/modules/userTesting/recorder.js
"use strict";
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());
});
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -25,89 +16,81 @@ exports.Quality = void 0;

}
startRecording(fps, quality, micReq, camReq) {
return __awaiter(this, void 0, void 0, function* () {
this.recStartTs = this.app.timestamp();
const videoConstraints = quality;
try {
this.stream = yield navigator.mediaDevices.getUserMedia({
video: camReq ? Object.assign(Object.assign({}, videoConstraints), { frameRate: { ideal: fps } }) : false,
audio: micReq,
async startRecording(fps, quality, micReq, camReq) {
this.recStartTs = this.app.timestamp();
const videoConstraints = quality;
try {
this.stream = await navigator.mediaDevices.getUserMedia({
video: camReq ? Object.assign(Object.assign({}, videoConstraints), { frameRate: { ideal: fps } }) : false,
audio: micReq,
});
this.mediaRecorder = new MediaRecorder(this.stream, {
mimeType: 'video/webm;codecs=vp9',
});
this.recordedChunks = [];
this.mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
this.recordedChunks.push(event.data);
}
};
this.mediaRecorder.start();
}
catch (error) {
console.error(error);
}
}
async stopRecording() {
return new Promise((resolve) => {
if (!this.mediaRecorder)
return;
this.mediaRecorder.onstop = () => {
const blob = new Blob(this.recordedChunks, {
type: 'video/webm',
});
this.mediaRecorder = new MediaRecorder(this.stream, {
mimeType: 'video/webm;codecs=vp9',
});
this.recordedChunks = [];
this.mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
this.recordedChunks.push(event.data);
}
};
this.mediaRecorder.start();
resolve(blob);
};
this.mediaRecorder.stop();
});
}
async sendToAPI() {
const blob = await this.stopRecording();
// const formData = new FormData()
// formData.append('file', blob, 'record.webm')
// formData.append('start', this.recStartTs?.toString() ?? '')
return fetch(`${this.app.options.ingestPoint}/v1/web/uxt/upload-url`, {
headers: {
Authorization: `Bearer ${this.app.session.getSessionToken()}`,
},
})
.then((r) => {
if (r.ok) {
return r.json();
}
catch (error) {
console.error(error);
else {
throw new Error('Failed to get upload url');
}
});
}
stopRecording() {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve) => {
if (!this.mediaRecorder)
return;
this.mediaRecorder.onstop = () => {
const blob = new Blob(this.recordedChunks, {
type: 'video/webm',
});
resolve(blob);
};
this.mediaRecorder.stop();
});
});
}
sendToAPI() {
return __awaiter(this, void 0, void 0, function* () {
const blob = yield this.stopRecording();
// const formData = new FormData()
// formData.append('file', blob, 'record.webm')
// formData.append('start', this.recStartTs?.toString() ?? '')
return fetch(`${this.app.options.ingestPoint}/v1/web/uxt/upload-url`, {
})
.then(({ url }) => {
return fetch(url, {
method: 'PUT',
headers: {
Authorization: `Bearer ${this.app.session.getSessionToken()}`,
'Content-Type': 'video/webm',
},
})
.then((r) => {
if (r.ok) {
return r.json();
}
else {
throw new Error('Failed to get upload url');
}
})
.then(({ url }) => {
return fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'video/webm',
},
body: blob,
});
})
.catch(console.error)
.finally(() => {
this.discard();
body: blob,
});
})
.catch(console.error)
.finally(() => {
this.discard();
});
}
saveToFile(fileName = 'recorded-video.webm') {
return __awaiter(this, void 0, void 0, function* () {
const blob = yield this.stopRecording();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});
async saveToFile(fileName = 'recorded-video.webm') {
const blob = await this.stopRecording();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}

@@ -114,0 +97,0 @@ discard() {

90

lib/app/index.d.ts

@@ -1,2 +0,3 @@

import type Message from './messages.gen.js';
import FeatureFlags from '../modules/featureFlags.js';
import Message from './messages.gen.js';
import Nodes from './nodes.js';

@@ -6,3 +7,3 @@ import Observer from './observer/top_observer.js';

import Ticker from './ticker.js';
import Logger from './logger.js';
import Logger, { ILogLevel } from './logger.js';
import Session from './session.js';

@@ -12,3 +13,2 @@ import AttributeSender from '../modules/attributeSender.js';

import type { Options as SanitizerOptions } from './sanitizer.js';
import type { Options as LoggerOptions } from './logger.js';
import type { Options as SessOptions } from './session.js';

@@ -51,6 +51,5 @@ import type { Options as NetworkOptions } from '../modules/network.js';

resourceBaseHref: string | null;
verbose: boolean;
__is_snippet: boolean;
__debug_report_edp: string | null;
__debug__?: LoggerOptions;
__debug__?: ILogLevel;
__save_canvas_locally?: boolean;

@@ -62,2 +61,3 @@ localStorage: Storage | null;

assistSocketHost?: string;
/** @deprecated */
onStart?: StartCallback;

@@ -69,2 +69,3 @@ network?: NetworkOptions;

export default class App {
private readonly signalError;
readonly nodes: Nodes;

@@ -80,2 +81,8 @@ readonly ticker: Ticker;

private readonly messages;
/**
* we need 2 buffers, so we don't lose anything
* @read coldStart implementation
* */
private bufferedMessages1;
private readonly bufferedMessages2;
readonly observer: Observer;

@@ -98,7 +105,24 @@ private readonly startCallbacks;

private uxtManager;
constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>);
private conditionsManager;
featureFlags: FeatureFlags;
private tagWatcher;
constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void);
private _debug;
private _usingOldFetchPlugin;
send(message: Message, urgent?: boolean): void;
/**
* Normal workflow: add timestamp and tab data to batch, then commit it
* every ~30ms
* */
private _nCommit;
coldStartCommitN: number;
/**
* Cold start: add timestamp and tab data to both batches
* every 2nd tick, ~60ms
* this will make batches a bit larger and replay will work with bigger jumps every frame
* but in turn we don't overload batch writer on session start with 1000 batches
* */
private _cStartCommit;
private commit;
private postToWorker;
private delay;

@@ -137,4 +161,51 @@ timestamp(): number;

resetNextPageSession(flag: boolean): void;
coldInterval: ReturnType<typeof setInterval> | null;
orderNumber: number;
coldStartTs: number;
singleBuffer: boolean;
private checkSessionToken;
/**
* start buffering messages without starting the actual session, which gives
* user 30 seconds to "activate" and record session by calling `start()` on conditional trigger
* and we will then send buffered batch, so it won't get lost
* */
coldStart(startOpts?: StartOptions, conditional?: boolean): Promise<void>;
onSessionSent: () => void;
/**
* Starts offline session recording
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* */
offlineRecording(startOpts: StartOptions | undefined, onSessionSent: () => void): {
saveBuffer: () => void;
getBuffer: () => Message[];
setBuffer: (buffer: Message[]) => void;
};
/**
* Saves the captured messages in localStorage (or whatever is used in its place)
*
* Then when this.offlineRecording is called, it will preload this messages and clear the storage item
*
* Keeping the size of local storage reasonable is up to the end users of this library
* */
saveBuffer(): void;
/**
* @returns buffer with stored messages for offline recording
* */
getBuffer(): Message[];
/**
* Used to set a buffer with messages array
* */
setBuffer(buffer: Message[]): void;
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
uploadOfflineRecording(): Promise<void>;
private _start;
restartCanvasTracking: () => void;
flushBuffer: (buffer: Message[]) => Promise<unknown>;
onUxtCb: never[];

@@ -150,4 +221,11 @@ addOnUxtCb(cb: (id: number) => void): void;

getTabId(): string;
clearBuffers(): void;
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* @returns {(msgType: string, data: string, dir: "up" | "down") => void}
* */
trackWs(channelName: string): (msgType: string, data: string, dir: 'up' | 'down') => void;
stop(stopWorker?: boolean): void;
}
export {};

431

lib/app/index.js

@@ -1,2 +0,5 @@

import { Timestamp, Metadata, UserID, TabChange, TabData } from './messages.gen.js';
import ConditionsManager from '../modules/conditionsManager.js';
import FeatureFlags from '../modules/featureFlags.js';
import { TagTrigger } from './messages.gen.js';
import { Timestamp, Metadata, UserID, TabChange, TabData, WSChannel, } from './messages.gen.js';
import { now, adjustTimeOrigin, deprecationWarn, inIframe, createEventListener, deleteEventListener, requestIdleCb, } from '../utils.js';

@@ -14,4 +17,6 @@ import Nodes from './nodes.js';

import UserTestManager from '../modules/userTesting/index.js';
import TagWatcher from '../modules/tagWatcher.js';
const CANCELED = 'canceled';
const uxtStorageKey = 'or_uxt_active';
const bufferStorageKey = 'or_buffer_1';
const START_ERROR = ':(';

@@ -25,2 +30,3 @@ const UnsuccessfulStart = (reason) => ({ reason, success: false });

ActivityState[ActivityState["Active"] = 2] = "Active";
ActivityState[ActivityState["ColdStart"] = 3] = "ColdStart";
})(ActivityState || (ActivityState = {}));

@@ -37,5 +43,12 @@ // TODO: use backendHost only

export default class App {
constructor(projectKey, sessionToken, options) {
constructor(projectKey, sessionToken, options, signalError) {
var _a, _b;
this.signalError = signalError;
this.messages = [];
/**
* we need 2 buffers, so we don't lose anything
* @read coldStart implementation
* */
this.bufferedMessages1 = [];
this.bufferedMessages2 = [];
this.startCallbacks = [];

@@ -45,3 +58,3 @@ this.stopCallbacks = [];

this.activityState = ActivityState.NotActive;
this.version = '11.0.6'; // TODO: version compatability check inside each plugin.
this.version = '12.0.0-beta.9'; // TODO: version compatability check inside each plugin.
this.compressionThreshold = 24 * 1000;

@@ -51,4 +64,13 @@ this.restartAttempts = 0;

this.canvasRecorder = null;
this.conditionsManager = null;
this._usingOldFetchPlugin = false;
this.coldStartCommitN = 0;
this.delay = 0;
this.coldInterval = null;
this.orderNumber = 0;
this.coldStartTs = 0;
this.singleBuffer = false;
this.onSessionSent = () => {
return;
};
this.restartCanvasTracking = () => {

@@ -58,6 +80,20 @@ var _a;

};
this.flushBuffer = async (buffer) => {
return new Promise((res) => {
let ended = false;
const messagesBatch = [buffer.shift()];
while (!ended) {
const nextMsg = buffer[0];
if (!nextMsg || nextMsg[0] === 0 /* MType.Timestamp */) {
ended = true;
}
else {
messagesBatch.push(buffer.shift());
}
}
this.postToWorker(messagesBatch);
res(null);
});
};
this.onUxtCb = [];
// if (options.onStart !== undefined) {
// deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
// } ?? maybe onStart is good
this.contextId = Math.random().toString(36).slice(2);

@@ -76,5 +112,5 @@ this.projectKey = projectKey;

resourceBaseHref: null,
verbose: false,
__is_snippet: false,
__debug_report_edp: null,
__debug__: LogLevel.Silent,
__save_canvas_locally: false,

@@ -100,5 +136,8 @@ localStorage: null,

this.debug = new Logger(this.options.__debug__);
this.notify = new Logger(this.options.verbose ? LogLevel.Warnings : LogLevel.Silent);
this.session = new Session(this, this.options);
this.attributeSender = new AttributeSender(this, Boolean(this.options.disableStringDict));
this.featureFlags = new FeatureFlags(this);
this.tagWatcher = new TagWatcher(this.sessionStorage, this.debug.error, (tag) => {
this.send(TagTrigger(tag));
});
this.session.attachUpdateCallback(({ userID, metadata }) => {

@@ -118,3 +157,3 @@ if (userID != null) {

try {
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=1e3,h){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.ingestURL=t+"/v1/web/i",this.isCompressing=void 0!==h}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){this.busy||!this.token?this.queue.push(t):(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t))}sendNext(){const t=this.queue.shift();t?(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t)):this.busy=!1}retry(t,s){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s){this.busy=!0;const i={Authorization:`Bearer ${this.token}`};s&&(i["Content-Encoding"]="gzip"),null!==this.token?fetch(this.ingestURL,{body:t,method:"POST",headers:i,keepalive:t.length<65536}).then((i=>{if(401===i.status)return this.busy=!1,void this.onUnauthorised();i.status>=400?this.retry(t,s):(this.attemptsCount=0,this.sendNext())})).catch((i=>{console.warn("OpenReplay:",i),this.retry(t,s)})):setTimeout((()=>{this.sendBatch(t,s)}),500)}sendCompressed(t){this.sendBatch(t,!0)}sendUncompressed(t){this.sendBatch(t,!1)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s="function"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 63:case 64:case 79:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2])}}}class n{constructor(t,s,i,n,h){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn("OpenReplay: max message size overflow."),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){0===t[0]&&(this.timestamp=t[1]),4===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn("OpenReplay: beacon size overflow. Skipping large message.",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]="NotActive",t[t.Starting=1]="Starting",t[t.Stopping=2]="Stopping",t[t.Active=3]="Active",t[t.Stopped=4]="Stopped"}(h||(h={}));let r=null,a=null,u=h.NotActive;function o(){a&&a.finaliseBatch()}function c(){u=h.Stopping,null!==d&&(clearInterval(d),d=null),a&&(a.clean(),a=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{u=h.NotActive}),100)}function p(){u!==h.Stopped&&(postMessage("restart"),c())}let f,d=null;self.onmessage=({data:s})=>{if(null!=s){if("stop"===s)return o(),c(),u=h.Stopped;if("forceFlushBatch"!==s){if(!Array.isArray(s)){if("compressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Compressed batch."),void p();r.sendCompressed(s.batch)}if("uncompressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Uncompressed batch."),void p();r.sendUncompressed(s.batch)}return"start"===s.type?(u=h.Starting,r=new t(s.ingestPoint,(()=>{p()}),(t=>{!function(t){postMessage({type:"failure",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:"compress",batch:t},[t.buffer])})),a=new n(s.pageNo,s.timestamp,s.url,(t=>r&&r.push(t)),s.tabId),null===d&&(d=setInterval(o,1e4)),u=h.Active):"auth"===s.type?r?a?(r.authorise(s.token),void(s.beaconSizeLimit&&a.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug("OR WebWorker: writer not initialised. Received auth."),void p()):(console.debug("OR WebWorker: sender not initialised. Received auth."),void p()):void 0}if(null!==a){const t=a;s.forEach((s=>{55===s[0]&&(s[1]?f=setTimeout((()=>p()),18e5):clearTimeout(f)),t.writeMessage(s)}))}a||(postMessage("not_init"),p())}else o()}else o()};'], { type: 'text/javascript' })));
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=1e3,h){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.ingestURL=t+"/v1/web/i",this.isCompressing=void 0!==h}getQueueStatus(){return 0===this.queue.length&&!this.busy}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){this.busy||!this.token?this.queue.push(t):(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t))}sendNext(){const t=this.queue.shift();t?(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t)):this.busy=!1}retry(t,s){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s){this.busy=!0;const i={Authorization:`Bearer ${this.token}`};s&&(i["Content-Encoding"]="gzip"),null!==this.token?fetch(this.ingestURL,{body:t,method:"POST",headers:i,keepalive:t.length<65536}).then((i=>{if(401===i.status)return this.busy=!1,void this.onUnauthorised();i.status>=400?this.retry(t,s):(this.attemptsCount=0,this.sendNext())})).catch((i=>{console.warn("OpenReplay:",i),this.retry(t,s)})):setTimeout((()=>{this.sendBatch(t,s)}),500)}sendCompressed(t){this.sendBatch(t,!0)}sendUncompressed(t){this.sendBatch(t,!1)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s="function"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 63:case 64:case 79:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:case 120:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 84:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2])}}}class n{constructor(t,s,i,n,h,r){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.onOfflineEnd=r,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn("OpenReplay: max message size overflow."),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){if("q_end"===t[0])return this.finaliseBatch(),this.onOfflineEnd();0===t[0]&&(this.timestamp=t[1]),4===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn("OpenReplay: beacon size overflow. Skipping large message.",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]="NotActive",t[t.Starting=1]="Starting",t[t.Stopping=2]="Stopping",t[t.Active=3]="Active",t[t.Stopped=4]="Stopped"}(h||(h={}));let r=null,u=null,a=h.NotActive;function o(){u&&u.finaliseBatch()}function c(){a=h.Stopping,null!==g&&(clearInterval(g),g=null),u&&(u.clean(),u=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{a=h.NotActive}),100)}function p(){a!==h.Stopped&&(postMessage("restart"),c())}let f,g=null;self.onmessage=({data:s})=>{if(null!=s){if("stop"===s)return o(),c(),a=h.Stopped;if("forceFlushBatch"!==s){if(!Array.isArray(s)){if("compressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Compressed batch."),void p();s.batch&&r.sendCompressed(s.batch)}if("uncompressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Uncompressed batch."),void p();s.batch&&r.sendUncompressed(s.batch)}return"start"===s.type?(a=h.Starting,r=new t(s.ingestPoint,(()=>{p()}),(t=>{!function(t){postMessage({type:"failure",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:"compress",batch:t},[t.buffer])})),u=new n(s.pageNo,s.timestamp,s.url,(t=>{r&&r.push(t)}),s.tabId,(()=>postMessage({type:"queue_empty"}))),null===g&&(g=setInterval(o,1e4)),a=h.Active):"auth"===s.type?r?u?(r.authorise(s.token),void(s.beaconSizeLimit&&u.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug("OR WebWorker: writer not initialised. Received auth."),void p()):(console.debug("OR WebWorker: sender not initialised. Received auth."),void p()):void 0}if(u){const t=u;s.forEach((s=>{55===s[0]&&(s[1]?f=setTimeout((()=>p()),18e5):clearTimeout(f)),t.writeMessage(s)}))}else postMessage("not_init"),p()}else o()}else o()};'], { type: 'text/javascript' })));
this.worker.onerror = (e) => {

@@ -151,4 +190,5 @@ this._debug('webworker_error', e);

}
// @ts-ignore
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'compressed', batch: result });
else {
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'compressed', batch: result });
}
});

@@ -160,2 +200,5 @@ }

}
else if (data.type === 'queue_empty') {
this.onSessionSent();
}
};

@@ -235,2 +278,3 @@ const alertWorker = () => {

send(message, urgent = false) {
var _a;
if (this.activityState === ActivityState.NotActive) {

@@ -249,3 +293,12 @@ return;

// ====================================================
this.messages.push(message);
if (this.activityState === ActivityState.ColdStart) {
this.bufferedMessages1.push(message);
if (!this.singleBuffer) {
this.bufferedMessages2.push(message);
}
(_a = this.conditionsManager) === null || _a === void 0 ? void 0 : _a.processMessage(message);
}
else {
this.messages.push(message);
}
// TODO: commit on start if there were `urgent` sends;

@@ -255,3 +308,3 @@ // Clarify where urgent can be used for;

// (like Fetch before start; maybe add an option "preCapture: boolean" or sth alike)
// Careful: `this.delay` is equal to zero before start hense all Timestamp-s will have to be updated on start
// Careful: `this.delay` is equal to zero before start so all Timestamp-s will have to be updated on start
if (this.activityState === ActivityState.Active && urgent) {

@@ -261,3 +314,7 @@ this.commit();

}
commit() {
/**
* Normal workflow: add timestamp and tab data to batch, then commit it
* every ~30ms
* */
_nCommit() {
if (this.worker !== undefined && this.messages.length) {

@@ -275,2 +332,32 @@ requestIdleCb(() => {

}
/**
* Cold start: add timestamp and tab data to both batches
* every 2nd tick, ~60ms
* this will make batches a bit larger and replay will work with bigger jumps every frame
* but in turn we don't overload batch writer on session start with 1000 batches
* */
_cStartCommit() {
this.coldStartCommitN += 1;
if (this.coldStartCommitN === 2) {
this.bufferedMessages1.push(Timestamp(this.timestamp()));
this.bufferedMessages1.push(TabData(this.session.getTabId()));
this.bufferedMessages2.push(Timestamp(this.timestamp()));
this.bufferedMessages2.push(TabData(this.session.getTabId()));
this.coldStartCommitN = 0;
}
}
commit() {
if (this.activityState === ActivityState.ColdStart) {
this._cStartCommit();
}
else {
this._nCommit();
}
}
postToWorker(messages) {
var _a;
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage(messages);
this.commitCallbacks.forEach((cb) => cb(messages));
messages.length = 0;
}
timestamp() {

@@ -409,11 +496,224 @@ return now() + this.delay;

}
_start(startOpts = {}, resetByWorker = false) {
checkSessionToken(forceNew) {
const lsReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
const needNewSessionID = forceNew || lsReset;
const sessionToken = this.session.getSessionToken();
return needNewSessionID || !sessionToken;
}
/**
* start buffering messages without starting the actual session, which gives
* user 30 seconds to "activate" and record session by calling `start()` on conditional trigger
* and we will then send buffered batch, so it won't get lost
* */
async coldStart(startOpts = {}, conditional) {
var _a, _b;
this.singleBuffer = false;
const second = 1000;
if (conditional) {
this.conditionsManager = new ConditionsManager(this, startOpts);
}
const isNewSession = this.checkSessionToken(startOpts.forceNew);
if (conditional) {
const r = await fetch(this.options.ingestPoint + '/v1/web/start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp: now(), doNotRecord: true, bufferDiff: 0, userID: this.session.getInfo().userID, token: undefined, deviceMemory,
jsHeapSizeLimit, timezone: getTimezone() })),
});
const {
// this token is needed to fetch conditions and flags,
// but it can't be used to record a session
token, userBrowser, userCity, userCountry, userDevice, userOS, userState, projectID, } = await r.json();
this.session.assign({ projectID });
this.session.setUserInfo({
userBrowser,
userCity,
userCountry,
userDevice,
userOS,
userState,
});
const onStartInfo = { sessionToken: token, userUUID: '', sessionID: '' };
this.startCallbacks.forEach((cb) => cb(onStartInfo));
await ((_a = this.conditionsManager) === null || _a === void 0 ? void 0 : _a.fetchConditions(projectID, token));
await this.featureFlags.reloadFlags(token);
await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
(_b = this.conditionsManager) === null || _b === void 0 ? void 0 : _b.processFlags(this.featureFlags.flags);
}
const cycle = () => {
this.orderNumber += 1;
adjustTimeOrigin();
this.coldStartTs = now();
if (this.orderNumber % 2 === 0) {
this.bufferedMessages1.length = 0;
this.bufferedMessages1.push(Timestamp(this.timestamp()));
this.bufferedMessages1.push(TabData(this.session.getTabId()));
}
else {
this.bufferedMessages2.length = 0;
this.bufferedMessages2.push(Timestamp(this.timestamp()));
this.bufferedMessages2.push(TabData(this.session.getTabId()));
}
this.stop(false);
this.activityState = ActivityState.ColdStart;
if (startOpts.sessionHash) {
this.session.applySessionHash(startOpts.sessionHash);
}
if (startOpts.forceNew) {
this.session.reset();
}
this.session.assign({
userID: startOpts.userID,
metadata: startOpts.metadata,
});
if (!isNewSession) {
this.debug.log('continuing session on new tab', this.session.getTabId());
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
this.send(TabChange(this.session.getTabId()));
}
this.observer.observe();
this.ticker.start();
};
this.coldInterval = setInterval(() => {
cycle();
}, 30 * second);
cycle();
}
/**
* Starts offline session recording
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* */
offlineRecording(startOpts = {}, onSessionSent) {
this.onSessionSent = onSessionSent;
this.singleBuffer = true;
const isNewSession = this.checkSessionToken(startOpts.forceNew);
adjustTimeOrigin();
this.coldStartTs = now();
const saverBuffer = this.localStorage.getItem(bufferStorageKey);
if (saverBuffer) {
const data = JSON.parse(saverBuffer);
this.bufferedMessages1 = Array.isArray(data) ? data : this.bufferedMessages1;
this.localStorage.removeItem(bufferStorageKey);
}
this.bufferedMessages1.push(Timestamp(this.timestamp()));
this.bufferedMessages1.push(TabData(this.session.getTabId()));
this.activityState = ActivityState.ColdStart;
if (startOpts.sessionHash) {
this.session.applySessionHash(startOpts.sessionHash);
}
if (startOpts.forceNew) {
this.session.reset();
}
this.session.assign({
userID: startOpts.userID,
metadata: startOpts.metadata,
});
const onStartInfo = { sessionToken: '', userUUID: '', sessionID: '' };
this.startCallbacks.forEach((cb) => cb(onStartInfo));
if (!isNewSession) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
this.send(TabChange(this.session.getTabId()));
}
this.observer.observe();
this.ticker.start();
return {
saveBuffer: this.saveBuffer,
getBuffer: this.getBuffer,
setBuffer: this.setBuffer,
};
}
/**
* Saves the captured messages in localStorage (or whatever is used in its place)
*
* Then when this.offlineRecording is called, it will preload this messages and clear the storage item
*
* Keeping the size of local storage reasonable is up to the end users of this library
* */
saveBuffer() {
this.localStorage.setItem(bufferStorageKey, JSON.stringify(this.bufferedMessages1));
}
/**
* @returns buffer with stored messages for offline recording
* */
getBuffer() {
return this.bufferedMessages1;
}
/**
* Used to set a buffer with messages array
* */
setBuffer(buffer) {
this.bufferedMessages1 = buffer;
}
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
async uploadOfflineRecording() {
var _a, _b;
this.stop(false);
const timestamp = now();
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({
type: 'start',
pageNo: this.session.incPageNo(),
ingestPoint: this.options.ingestPoint,
timestamp: this.coldStartTs,
url: document.URL,
connAttemptCount: this.options.connAttemptCount,
connAttemptGap: this.options.connAttemptGap,
tabId: this.session.getTabId(),
});
const r = await fetch(this.options.ingestPoint + '/v1/web/start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp: timestamp, doNotRecord: false, bufferDiff: timestamp - this.coldStartTs, userID: this.session.getInfo().userID, token: undefined, deviceMemory,
jsHeapSizeLimit, timezone: getTimezone() })),
});
const { token, userBrowser, userCity, userCountry, userDevice, userOS, userState, beaconSizeLimit, projectID, } = await r.json();
(_b = this.worker) === null || _b === void 0 ? void 0 : _b.postMessage({
type: 'auth',
token,
beaconSizeLimit,
});
this.session.assign({ projectID });
this.session.setUserInfo({
userBrowser,
userCity,
userCountry,
userDevice,
userOS,
userState,
});
while (this.bufferedMessages1.length > 0) {
await this.flushBuffer(this.bufferedMessages1);
}
this.postToWorker([['q_end']]);
this.clearBuffers();
}
_start(startOpts = {}, resetByWorker = false, conditionName) {
const isColdStart = this.activityState === ActivityState.ColdStart;
if (isColdStart && this.coldInterval) {
clearInterval(this.coldInterval);
}
if (!this.worker) {
return Promise.resolve(UnsuccessfulStart('No worker found: perhaps, CSP is not set.'));
const reason = 'No worker found: perhaps, CSP is not set.';
this.signalError(reason, []);
return Promise.resolve(UnsuccessfulStart(reason));
}
if (this.activityState !== ActivityState.NotActive) {
return Promise.resolve(UnsuccessfulStart('OpenReplay: trying to call `start()` on the instance that has been started already.'));
if (this.activityState === ActivityState.Active ||
this.activityState === ActivityState.Starting) {
const reason = 'OpenReplay: trying to call `start()` on the instance that has been started already.';
return Promise.resolve(UnsuccessfulStart(reason));
}
this.activityState = ActivityState.Starting;
adjustTimeOrigin();
if (!isColdStart) {
adjustTimeOrigin();
}
if (startOpts.sessionHash) {

@@ -436,3 +736,3 @@ this.session.applySessionHash(startOpts.sessionHash);

ingestPoint: this.options.ingestPoint,
timestamp,
timestamp: isColdStart ? this.coldStartTs : timestamp,
url: document.URL,

@@ -443,8 +743,6 @@ connAttemptCount: this.options.connAttemptCount,

});
const lsReset = this.sessionStorage.getItem(this.options.session_reset_key) !== null;
const sessionToken = this.session.getSessionToken();
const isNewSession = this.checkSessionToken(startOpts.forceNew);
this.sessionStorage.removeItem(this.options.session_reset_key);
const needNewSessionID = startOpts.forceNew || lsReset || resetByWorker;
const sessionToken = this.session.getSessionToken();
const isNewSession = needNewSessionID || !sessionToken;
this.debug.log('OpenReplay: starting session; need new session id?', needNewSessionID, 'session token: ', sessionToken);
this.debug.log('OpenReplay: starting session; need new session id?', isNewSession, 'session token: ', sessionToken);
return window

@@ -456,4 +754,4 @@ .fetch(this.options.ingestPoint + '/v1/web/start', {

},
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp, userID: this.session.getInfo().userID, token: isNewSession ? undefined : sessionToken, deviceMemory,
jsHeapSizeLimit, timezone: getTimezone() })),
body: JSON.stringify(Object.assign(Object.assign({}, this.getTrackerInfo()), { timestamp, doNotRecord: false, bufferDiff: timestamp - this.coldStartTs, userID: this.session.getInfo().userID, token: isNewSession ? undefined : sessionToken, deviceMemory,
jsHeapSizeLimit, timezone: getTimezone(), condition: conditionName })),
})

@@ -472,9 +770,13 @@ .then((r) => {

})
.then((r) => {
.then(async (r) => {
var _a;
if (!this.worker) {
return Promise.reject('no worker found after start request (this might not happen)');
const reason = 'no worker found after start request (this might not happen)';
this.signalError(reason, []);
return Promise.reject(reason);
}
if (this.activityState === ActivityState.NotActive) {
return Promise.reject('Tracker stopped during authorization');
const reason = 'Tracker stopped during authorization';
this.signalError(reason, []);
return Promise.reject(reason);
}

@@ -492,3 +794,5 @@ const { token, userUUID, projectID, beaconSizeLimit, compressionThreshold, // how big the batch should be before we decide to compress it

(typeof beaconSizeLimit !== 'number' && typeof beaconSizeLimit !== 'undefined')) {
return Promise.reject(`Incorrect server response: ${JSON.stringify(r)}`);
const reason = `Incorrect server response: ${JSON.stringify(r)}`;
this.signalError(reason, []);
return Promise.reject(reason);
}

@@ -510,2 +814,7 @@ this.delay = delay;

});
this.worker.postMessage({
type: 'auth',
token,
beaconSizeLimit,
});
if (!isNewSession && token === sessionToken) {

@@ -519,9 +828,10 @@ this.debug.log('continuing session on new tab', this.session.getTabId());

this.localStorage.setItem(this.options.local_uuid_key, userUUID);
this.worker.postMessage({
type: 'auth',
token,
beaconSizeLimit,
});
this.compressionThreshold = compressionThreshold;
const onStartInfo = { sessionToken: token, userUUID, sessionID };
// TODO: start as early as possible (before receiving the token)
/** after start */
this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
void this.featureFlags.reloadFlags();
await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
this.activityState = ActivityState.Active;
if (canvasEnabled) {

@@ -536,8 +846,18 @@ this.canvasRecorder =

}
// TODO: start as early as possible (before receiving the token)
this.startCallbacks.forEach((cb) => cb(onStartInfo)); // MBTODO: callbacks after DOM "mounted" (observed)
this.observer.observe();
this.ticker.start();
this.activityState = ActivityState.Active;
this.notify.log('OpenReplay tracking started.');
/** --------------- COLD START BUFFER ------------------*/
if (isColdStart) {
const biggestBuffer = this.bufferedMessages1.length > this.bufferedMessages2.length
? this.bufferedMessages1
: this.bufferedMessages2;
while (biggestBuffer.length > 0) {
await this.flushBuffer(biggestBuffer);
}
this.clearBuffers();
this.commit();
/** --------------- COLD START BUFFER ------------------*/
}
else {
this.observer.observe();
this.ticker.start();
}
// get rid of onStart ?

@@ -583,6 +903,7 @@ if (typeof this.options.onStart === 'function') {

if (reason === CANCELED) {
this.signalError(CANCELED, []);
return UnsuccessfulStart(CANCELED);
}
this.notify.log('OpenReplay was unable to start. ', reason);
this._debug('session_start', reason);
this.signalError(START_ERROR, []);
return UnsuccessfulStart(START_ERROR);

@@ -632,2 +953,23 @@ });

}
clearBuffers() {
this.bufferedMessages1.length = 0;
this.bufferedMessages2.length = 0;
}
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* @returns {(msgType: string, data: string, dir: "up" | "down") => void}
* */
trackWs(channelName) {
const channel = channelName;
return (msgType, data, dir = 'down') => {
if (typeof msgType !== 'string' ||
typeof data !== 'string' ||
data.length > 5 * 1024 * 1024 ||
msgType.length > 255) {
return;
}
this.send(WSChannel('websocket', channel, data, this.timestamp(), dir, msgType));
};
}
stop(stopWorker = true) {

@@ -643,3 +985,4 @@ var _a;

this.stopCallbacks.forEach((cb) => cb());
this.notify.log('OpenReplay tracking stopped.');
this.debug.log('OpenReplay tracking stopped.');
this.tagWatcher.clear();
if (this.worker && stopWorker) {

@@ -646,0 +989,0 @@ this.worker.postMessage('stop');

24

lib/app/logger.d.ts

@@ -8,20 +8,10 @@ export declare const LogLevel: {

};
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 {};

30

lib/app/logger.js

@@ -8,18 +8,12 @@ export const LogLevel = {

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

@@ -29,5 +23,4 @@ }

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

@@ -37,5 +30,4 @@ }

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

@@ -42,0 +34,0 @@ }

2

lib/app/messages.gen.d.ts

@@ -65,2 +65,3 @@ import * as Messages from '../common/messages.gen.js';

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;

@@ -74,1 +75,2 @@ export declare function SelectionChange(selectionStart: number, selectionEnd: number, selection: string): Messages.SelectionChange;

export declare function CanvasNode(nodeId: string, timestamp: number): Messages.CanvasNode;
export declare function TagTrigger(tagId: number): Messages.TagTrigger;

17

lib/app/messages.gen.js

@@ -501,2 +501,13 @@ // Auto-generated, do not edit

}
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) {

@@ -567,1 +578,7 @@ return [

}
export function TagTrigger(tagId) {
return [
120 /* Messages.Type.TagTrigger */,
tagId,
];
}

7

lib/common/interaction.d.ts

@@ -25,3 +25,3 @@ import Message from './messages.gen.js';

batch: Uint8Array;
} | 'forceFlushBatch';
} | 'forceFlushBatch' | 'check_queue';
type Failure = {

@@ -31,6 +31,9 @@ type: 'failure';

};
type QEmpty = {
type: 'queue_empty';
};
export type FromWorkerData = 'restart' | Failure | 'not_init' | {
type: 'compress';
batch: Uint8Array;
};
} | QEmpty;
export {};

19

lib/common/messages.gen.d.ts

@@ -64,2 +64,3 @@ export declare const enum Type {

NetworkRequest = 83,
WSChannel = 84,
InputChange = 112,

@@ -72,3 +73,4 @@ SelectionChange = 113,

TabData = 118,
CanvasNode = 119
CanvasNode = 119,
TagTrigger = 120
}

@@ -449,2 +451,11 @@ export type Timestamp = [

];
export type WSChannel = [
Type.WSChannel,
string,
string,
string,
number,
string,
string
];
export type InputChange = [

@@ -499,3 +510,7 @@ Type.InputChange,

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

47

lib/index.d.ts

@@ -36,12 +36,55 @@ import App from './app/index.js';

constructor(options: Options);
checkDoNotTrack: () => boolean | undefined;
signalStartIssue: (reason: string, missingApi: string[]) => void;
isFlagEnabled(flagName: string): boolean;
onFlagsLoad(callback: (flags: IFeatureFlag[]) => void): void;
clearPersistFlags(): void;
reloadFlags(): Promise<void>;
reloadFlags(): Promise<void> | undefined;
getFeatureFlag(flagName: string): IFeatureFlag | undefined;
getAllFeatureFlags(): IFeatureFlag[];
getAllFeatureFlags(): IFeatureFlag[] | undefined;
restartCanvasTracking: () => void;
use<T>(fn: (app: App | null, options?: Options) => T): T;
isActive(): boolean;
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* msg direction is "down" (incoming) by default
*
* @returns {(msgType: string, data: string, dir: 'up' | 'down') => void}
* */
trackWs(channelName: string): ((msgType: string, data: string, dir: "up" | "down") => void) | undefined;
start(startOpts?: Partial<StartOptions>): Promise<StartPromiseReturn>;
browserEnvCheck(): boolean;
/**
* start buffering messages without starting the actual session, which gives user 30 seconds to "activate" and record
* session by calling start() on conditional trigger and we will then send buffered batch, so it won't get lost
* */
coldStart(startOpts?: Partial<StartOptions>, conditional?: boolean): Promise<never> | undefined;
/**
* Starts offline session recording. Keep in mind that only user device time will be used for timestamps.
* (no backend delay sync)
*
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* @returns methods to manipulate buffer:
*
* saveBuffer - to save it in localStorage
*
* getBuffer - returns current buffer
*
* setBuffer - replaces current buffer with given
* */
startOfflineRecording(startOpts: Partial<StartOptions>, onSessionSent: () => void): Promise<never> | {
saveBuffer: () => void;
getBuffer: () => import("./common/messages.gen.js").default[];
setBuffer: (buffer: import("./common/messages.gen.js").default[]) => void;
};
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
uploadOfflineRecording(): Promise<void> | undefined;
stop(): string | undefined;

@@ -48,0 +91,0 @@ forceFlushBatch(): void;

277

lib/index.js

@@ -25,3 +25,2 @@ import App, { DEFAULT_INGEST_POINT } from './app/index.js';

import { IN_BROWSER, deprecationWarn, DOCS_HOST } from './utils.js';
import FeatureFlags from './modules/featureFlags.js';
const DOCS_SETUP = '/installation/javascript-sdk';

@@ -57,4 +56,24 @@ function processOptions(obj) {

constructor(options) {
var _a;
this.options = options;
this.app = null;
this.checkDoNotTrack = () => {
return (this.options.respectDoNotTrack &&
(navigator.doNotTrack == '1' ||
// @ts-ignore
window.doNotTrack == '1'));
};
this.signalStartIssue = (reason, missingApi) => {
const doNotTrack = this.checkDoNotTrack();
const req = new XMLHttpRequest();
const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
req.open('POST', orig + '/v1/web/not-started');
req.send(JSON.stringify({
trackerVersion: '12.0.0-beta.9',
projectKey: this.options.projectKey,
doNotTrack,
reason,
missingApi,
}));
};
this.restartCanvasTracking = () => {

@@ -93,83 +112,91 @@ if (this.app === null) {

}
const doNotTrack = options.respectDoNotTrack &&
(navigator.doNotTrack == '1' ||
// @ts-ignore
window.doNotTrack == '1');
const app = (this.app =
doNotTrack ||
!('Map' in window) ||
!('Set' in window) ||
!('MutationObserver' in window) ||
!('performance' in window) ||
!('timing' in performance) ||
!('startsWith' in String.prototype) ||
!('Blob' in window) ||
!('Worker' in window)
? null
: new App(options.projectKey, options.sessionToken, options));
if (app !== null) {
Viewport(app);
CSSRules(app);
ConstructedStyleSheets(app);
Connection(app);
Console(app, options);
Exception(app, options);
Img(app);
Input(app, options);
Mouse(app, options.mouse);
Timing(app, options);
Performance(app, options);
Scroll(app);
Focus(app);
Fonts(app);
Network(app, options.network);
Selection(app);
Tabs(app);
this.featureFlags = new FeatureFlags(app);
window.__OPENREPLAY__ = this;
const doNotTrack = this.checkDoNotTrack();
const failReason = [];
const conditions = [
'Map',
'Set',
'MutationObserver',
'performance',
'timing',
'startsWith',
'Blob',
'Worker',
];
if (doNotTrack) {
failReason.push('doNotTrack');
}
else {
for (const condition of conditions) {
if (condition === 'timing') {
if ('performance' in window && !(condition in performance)) {
failReason.push(condition);
break;
}
}
else if (condition === 'startsWith') {
if (!(condition in String.prototype)) {
failReason.push(condition);
break;
}
}
else {
if (!(condition in window)) {
failReason.push(condition);
break;
}
}
}
}
if (failReason.length > 0) {
const missingApi = failReason.join(',');
console.error(`OpenReplay: browser doesn't support API required for tracking or doNotTrack is set to 1. Reason: ${missingApi}`);
this.signalStartIssue('missing_api', failReason);
return;
}
const app = new App(options.projectKey, options.sessionToken, options, this.signalStartIssue);
this.app = app;
Viewport(app);
CSSRules(app);
ConstructedStyleSheets(app);
Connection(app);
Console(app, options);
Exception(app, options);
Img(app);
Input(app, options);
Mouse(app, options.mouse);
Timing(app, options);
Performance(app, options);
Scroll(app);
Focus(app);
Fonts(app);
Network(app, options.network);
Selection(app);
Tabs(app);
window.__OPENREPLAY__ = this;
if ((_a = options.flags) === null || _a === void 0 ? void 0 : _a.onFlagsLoad) {
this.onFlagsLoad(options.flags.onFlagsLoad);
}
const wOpen = window.open;
if (options.autoResetOnWindowOpen || options.resetTabOnWindowOpen) {
app.attachStartCallback(() => {
var _a;
if ((_a = options.flags) === null || _a === void 0 ? void 0 : _a.onFlagsLoad) {
this.onFlagsLoad(options.flags.onFlagsLoad);
}
void this.featureFlags.reloadFlags();
const tabId = app.getTabId();
const sessStorage = (_a = app.sessionStorage) !== null && _a !== void 0 ? _a : window.sessionStorage;
// @ts-ignore ?
window.open = function (...args) {
if (options.autoResetOnWindowOpen) {
app.resetNextPageSession(true);
}
if (options.resetTabOnWindowOpen) {
sessStorage.removeItem(options.session_tabid_key || '__openreplay_tabid');
}
wOpen.call(window, ...args);
app.resetNextPageSession(false);
sessStorage.setItem(options.session_tabid_key || '__openreplay_tabid', tabId);
};
});
const wOpen = window.open;
if (options.autoResetOnWindowOpen || options.resetTabOnWindowOpen) {
app.attachStartCallback(() => {
var _a;
const tabId = app.getTabId();
const sessStorage = (_a = app.sessionStorage) !== null && _a !== void 0 ? _a : window.sessionStorage;
// @ts-ignore ?
window.open = function (...args) {
if (options.autoResetOnWindowOpen) {
app.resetNextPageSession(true);
}
if (options.resetTabOnWindowOpen) {
sessStorage.removeItem(options.session_tabid_key || '__openreplay_tabid');
}
wOpen.call(window, ...args);
app.resetNextPageSession(false);
sessStorage.setItem(options.session_tabid_key || '__openreplay_tabid', tabId);
};
});
app.attachStopCallback(() => {
window.open = wOpen;
});
}
app.attachStopCallback(() => {
window.open = wOpen;
});
}
else {
console.log("OpenReplay: browser doesn't support API required for tracking or doNotTrack is set to 1.");
const req = new XMLHttpRequest();
const orig = options.ingestPoint || DEFAULT_INGEST_POINT;
req.open('POST', orig + '/v1/web/not-started');
// no-cors issue only with text/plain or not-set Content-Type
// req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.send(JSON.stringify({
trackerVersion: '11.0.6',
projectKey: options.projectKey,
doNotTrack,
// TODO: add precise reason (an exact API missing)
}));
}
}

@@ -180,15 +207,20 @@ isFlagEnabled(flagName) {

onFlagsLoad(callback) {
this.featureFlags.onFlagsLoad(callback);
var _a;
(_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.onFlagsLoad(callback);
}
clearPersistFlags() {
this.featureFlags.clearPersistFlags();
var _a;
(_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.clearPersistFlags();
}
reloadFlags() {
return this.featureFlags.reloadFlags();
var _a;
return (_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.reloadFlags();
}
getFeatureFlag(flagName) {
return this.featureFlags.getFeatureFlag(flagName);
var _a;
return (_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.getFeatureFlag(flagName);
}
getAllFeatureFlags() {
return this.featureFlags.flags;
var _a;
return (_a = this.app) === null || _a === void 0 ? void 0 : _a.featureFlags.flags;
}

@@ -204,12 +236,85 @@ use(fn) {

}
/**
* Creates a named hook that expects event name, data string and msg direction (up/down),
* it will skip any message bigger than 5 mb or event name bigger than 255 symbols
* msg direction is "down" (incoming) by default
*
* @returns {(msgType: string, data: string, dir: 'up' | 'down') => void}
* */
trackWs(channelName) {
if (this.app === null) {
return;
}
return this.app.trackWs(channelName);
}
start(startOpts) {
if (this.browserEnvCheck()) {
if (this.app === null) {
return Promise.reject("Browser doesn't support required api, or doNotTrack is active.");
}
return this.app.start(startOpts);
}
else {
return Promise.reject('Trying to start not in browser.');
}
}
browserEnvCheck() {
if (!IN_BROWSER) {
console.error(`OpenReplay: you are trying to start Tracker on a node.js environment. If you want to use OpenReplay with SSR, please, use componentDidMount or useEffect API for placing the \`tracker.start()\` line. Check documentation on ${DOCS_HOST}${DOCS_SETUP}`);
return false;
}
return true;
}
/**
* start buffering messages without starting the actual session, which gives user 30 seconds to "activate" and record
* session by calling start() on conditional trigger and we will then send buffered batch, so it won't get lost
* */
coldStart(startOpts, conditional) {
if (this.browserEnvCheck()) {
if (this.app === null) {
return Promise.reject('Tracker not initialized');
}
void this.app.coldStart(startOpts, conditional);
}
else {
return Promise.reject('Trying to start not in browser.');
}
}
/**
* Starts offline session recording. Keep in mind that only user device time will be used for timestamps.
* (no backend delay sync)
*
* @param {Object} startOpts - options for session start, same as .start()
* @param {Function} onSessionSent - callback that will be called once session is fully sent
* @returns methods to manipulate buffer:
*
* saveBuffer - to save it in localStorage
*
* getBuffer - returns current buffer
*
* setBuffer - replaces current buffer with given
* */
startOfflineRecording(startOpts, onSessionSent) {
if (this.browserEnvCheck()) {
if (this.app === null) {
return Promise.reject('Tracker not initialized');
}
return this.app.offlineRecording(startOpts, onSessionSent);
}
else {
return Promise.reject('Trying to start not in browser.');
}
}
/**
* Uploads the stored session buffer to backend
* @returns promise that resolves once messages are loaded, it has to be awaited
* so the session can be uploaded properly
* @resolve {boolean} - if messages were loaded successfully
* @reject {string} - error message
* */
uploadOfflineRecording() {
if (this.app === null) {
return Promise.reject("Browser doesn't support required api, or doNotTrack is active.");
return;
}
// TODO: check argument type
return this.app.start(startOpts);
return this.app.uploadOfflineRecording();
}

@@ -216,0 +321,0 @@ stop() {

2

lib/modules/featureFlags.d.ts

@@ -21,3 +21,3 @@ import App from '../app/index.js';

onFlagsLoad(cb: (flags: IFeatureFlag[]) => void): void;
reloadFlags(): Promise<void>;
reloadFlags(token?: string): Promise<void>;
handleFlags(flags: IFeatureFlag[]): void;

@@ -24,0 +24,0 @@ clearPersistFlags(): void;

82

lib/modules/featureFlags.js

@@ -1,10 +0,1 @@

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 {

@@ -30,41 +21,40 @@ constructor(app) {

}
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,
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),
async reloadFlags(token) {
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 };
});
if (resp.status === 200) {
const data = yield resp.json();
return this.handleFlags(data.flags);
}
}
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,
os: userInfo.userOS,
device: userInfo.userDevice,
country: userInfo.userCountry,
state: userInfo.userState,
city: userInfo.userCity,
browser: userInfo.userBrowser,
persistFlags: persistFlags,
};
const authToken = token !== null && token !== void 0 ? token : this.app.session.getSessionToken();
const resp = await fetch(this.app.options.ingestPoint + '/v1/web/feature-flags', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authToken}`,
},
body: JSON.stringify(requestObject),
});
if (resp.status === 200) {
const data = await resp.json();
return this.handleFlags(data.flags);
}
}

@@ -71,0 +61,0 @@ handleFlags(flags) {

159

lib/modules/userTesting/recorder.js

@@ -1,10 +0,1 @@

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 const Quality = {

@@ -22,89 +13,81 @@ Standard: { width: 1280, height: 720 },

}
startRecording(fps, quality, micReq, camReq) {
return __awaiter(this, void 0, void 0, function* () {
this.recStartTs = this.app.timestamp();
const videoConstraints = quality;
try {
this.stream = yield navigator.mediaDevices.getUserMedia({
video: camReq ? Object.assign(Object.assign({}, videoConstraints), { frameRate: { ideal: fps } }) : false,
audio: micReq,
async startRecording(fps, quality, micReq, camReq) {
this.recStartTs = this.app.timestamp();
const videoConstraints = quality;
try {
this.stream = await navigator.mediaDevices.getUserMedia({
video: camReq ? Object.assign(Object.assign({}, videoConstraints), { frameRate: { ideal: fps } }) : false,
audio: micReq,
});
this.mediaRecorder = new MediaRecorder(this.stream, {
mimeType: 'video/webm;codecs=vp9',
});
this.recordedChunks = [];
this.mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
this.recordedChunks.push(event.data);
}
};
this.mediaRecorder.start();
}
catch (error) {
console.error(error);
}
}
async stopRecording() {
return new Promise((resolve) => {
if (!this.mediaRecorder)
return;
this.mediaRecorder.onstop = () => {
const blob = new Blob(this.recordedChunks, {
type: 'video/webm',
});
this.mediaRecorder = new MediaRecorder(this.stream, {
mimeType: 'video/webm;codecs=vp9',
});
this.recordedChunks = [];
this.mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
this.recordedChunks.push(event.data);
}
};
this.mediaRecorder.start();
resolve(blob);
};
this.mediaRecorder.stop();
});
}
async sendToAPI() {
const blob = await this.stopRecording();
// const formData = new FormData()
// formData.append('file', blob, 'record.webm')
// formData.append('start', this.recStartTs?.toString() ?? '')
return fetch(`${this.app.options.ingestPoint}/v1/web/uxt/upload-url`, {
headers: {
Authorization: `Bearer ${this.app.session.getSessionToken()}`,
},
})
.then((r) => {
if (r.ok) {
return r.json();
}
catch (error) {
console.error(error);
else {
throw new Error('Failed to get upload url');
}
});
}
stopRecording() {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve) => {
if (!this.mediaRecorder)
return;
this.mediaRecorder.onstop = () => {
const blob = new Blob(this.recordedChunks, {
type: 'video/webm',
});
resolve(blob);
};
this.mediaRecorder.stop();
});
});
}
sendToAPI() {
return __awaiter(this, void 0, void 0, function* () {
const blob = yield this.stopRecording();
// const formData = new FormData()
// formData.append('file', blob, 'record.webm')
// formData.append('start', this.recStartTs?.toString() ?? '')
return fetch(`${this.app.options.ingestPoint}/v1/web/uxt/upload-url`, {
})
.then(({ url }) => {
return fetch(url, {
method: 'PUT',
headers: {
Authorization: `Bearer ${this.app.session.getSessionToken()}`,
'Content-Type': 'video/webm',
},
})
.then((r) => {
if (r.ok) {
return r.json();
}
else {
throw new Error('Failed to get upload url');
}
})
.then(({ url }) => {
return fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'video/webm',
},
body: blob,
});
})
.catch(console.error)
.finally(() => {
this.discard();
body: blob,
});
})
.catch(console.error)
.finally(() => {
this.discard();
});
}
saveToFile(fileName = 'recorded-video.webm') {
return __awaiter(this, void 0, void 0, function* () {
const blob = yield this.stopRecording();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
});
async saveToFile(fileName = 'recorded-video.webm') {
const blob = await this.stopRecording();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}

@@ -111,0 +94,0 @@ discard() {

2

package.json
{
"name": "@openreplay/tracker",
"description": "The OpenReplay tracker main package",
"version": "11.0.6",
"version": "12.0.0-beta.9",
"keywords": [

@@ -6,0 +6,0 @@ "logging",

5

tsconfig-base.json

@@ -10,7 +10,8 @@ {

"alwaysStrict": true,
"target": "es6",
"target": "es2017",
"module": "es6",
"moduleResolution": "nodenext"
"moduleResolution": "nodenext",
"esModuleInterop": true
},
"exclude": ["**/*.test.ts"]
}
coverage/clover.xml

Sorry, the diff of this file is not supported yet

coverage/coverage-final.json

Sorry, the diff of this file is too big to display

coverage/lcov-report/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/canvas.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/guards.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/index.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/logger.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/messages.gen.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/nodes.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/observer/iframe_observer.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/observer/iframe_offsets.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/observer/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/observer/shadow_root_observer.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/observer/top_observer.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/sanitizer.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/session.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/app/ticker.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/index.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/attributeSender.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/axiosSpy.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/conditionsManager.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/connection.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/console.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/constructedStyleSheets.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/cssrules.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/exception.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/featureFlags.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/focus.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/fonts.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/img.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/input.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/mouse.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/network.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/beaconProxy.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/fetchProxy.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/index.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/networkMessage.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/utils.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/Network/xhrProxy.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/performance.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/scroll.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/selection.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/tabs.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/tagWatcher.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/timing.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/dnd.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/index.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/recorder.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/SignalManager.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/styles.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/userTesting/utils.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/modules/viewport.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/main/utils.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/webworker/BatchWriter.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/webworker/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/webworker/index.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/webworker/MessageEncoder.gen.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/webworker/PrimitiveEncoder.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/webworker/QueueSender.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov.info

Sorry, the diff of this file is not supported yet

lib/common/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc