@openreplay/tracker 11.0.6 → 12.0.0

package/lib/index.js

@@ -22,7 +22,6 @@ import ConstructedStyleSheets from './modules/constructedStyleSheets.js';
 import Selection from './modules/selection.js';
 import Tabs from './modules/tabs.js';
 import { IN_BROWSER, deprecationWarn, DOCS_HOST } from './utils.js';
-import FeatureFlags from './modules/featureFlags.js';
 const DOCS_SETUP = '/installation/javascript-sdk';
 function processOptions(obj) {
     if (obj == null) {
@@ -53,8 +52,28 @@ function processOptions(obj) {
 }
 export default class API {
     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',
+                projectKey: this.options.projectKey,
+                doNotTrack,
+                reason,
+                missingApi,
+            }));
+        };
         this.restartCanvasTracking = () => {
             if (this.app === null) {
                 return;
@@ -88,105 +107,118 @@ export default class API {
             console.error('OpenReplay: Your website must be publicly accessible and running on SSL in order for OpenReplay to properly capture and replay the user session. You can disable this check by setting `__DISABLE_SECURE_MODE` option to `true` if you are testing in localhost. Keep in mind, that asset files on a local machine are not available to the outside world. This might affect tracking if you use css files.');
             return;
         }
-        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;
-            app.attachStartCallback(() => {
-                var _a;
-                if ((_a = options.flags) === null || _a === void 0 ? void 0 : _a.onFlagsLoad) {
-                    this.onFlagsLoad(options.flags.onFlagsLoad);
+        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;
+                    }
                 }
-                void this.featureFlags.reloadFlags();
-            });
-            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;
-                });
             }
         }
-        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)
-            }));
+        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;
+                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;
+            });
         }
     }
     isFlagEnabled(flagName) {
         return this.featureFlags.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;
     }
     use(fn) {
         return fn(this.app, this.options);
@@ -197,16 +229,89 @@ export default class API {
         }
         return this.app.active();
     }
+    /**
+     * 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 - if messages were loaded into service worker 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();
     }
     stop() {
         if (this.app === null) {

package/lib/modules/conditionsManager.d.ts

@@ -0,0 +1,84 @@
+import Message, { CustomEvent, JSException, MouseClick, NetworkRequest, SetPageLocation } from '../common/messages.gen.js';
+import App, { StartOptions } from '../app/index.js';
+import { IFeatureFlag } from './featureFlags.js';
+interface Filter {
+    filters: {
+        operator: string;
+        value: string[];
+        type: string;
+        source?: string;
+    }[];
+    operator: string;
+    value: string[];
+    type: string;
+    source?: string;
+}
+export default class ConditionsManager {
+    private readonly app;
+    private readonly startParams;
+    conditions: Condition[];
+    hasStarted: boolean;
+    constructor(app: App, startParams: StartOptions);
+    setConditions(conditions: Condition[]): void;
+    fetchConditions(projectId: string, token: string): Promise<void>;
+    createConditionFromFilter: (filter: Filter) => Condition | undefined;
+    trigger(conditionName: string): void;
+    processMessage(message: Message): void;
+    processFlags(flag: IFeatureFlag[]): void;
+    durationInt: ReturnType<typeof setInterval> | null;
+    processDuration(durationMs: number, condName: string): void;
+    networkRequest(message: NetworkRequest): void;
+    customEvent(message: CustomEvent): void;
+    clickEvent(message: MouseClick): void;
+    pageLocationEvent(message: SetPageLocation): void;
+    jsExceptionEvent(message: JSException): void;
+}
+type CommonCondition = {
+    type: 'visited_url' | 'click' | 'custom_event';
+    operator: keyof typeof operators;
+    value: string[];
+    name: string;
+};
+type ExceptionCondition = {
+    type: 'exception';
+    operator: 'contains' | 'startsWith' | 'endsWith';
+    value: string[];
+    name: string;
+};
+type FeatureFlagCondition = {
+    type: 'feature_flag';
+    operator: 'is';
+    value: string[];
+    name: string;
+};
+type SessionDurationCondition = {
+    type: 'session_duration';
+    value: number[];
+    name: string;
+};
+type SubCondition = {
+    type: 'network_request';
+    key: 'url' | 'status' | 'method' | 'duration';
+    operator: keyof typeof operators;
+    value: string[];
+};
+type NetworkRequestCondition = {
+    type: 'network_request';
+    subConditions: SubCondition[];
+    name: string;
+};
+type Condition = CommonCondition | ExceptionCondition | FeatureFlagCondition | SessionDurationCondition | NetworkRequestCondition;
+declare const operators: {
+    is: (val: string, target: string[]) => boolean;
+    isAny: () => boolean;
+    isNot: (val: string, target: string[]) => boolean;
+    contains: (val: string, target: string[]) => boolean;
+    notContains: (val: string, target: string[]) => boolean;
+    startsWith: (val: string, target: string[]) => boolean;
+    endsWith: (val: string, target: string[]) => boolean;
+    greaterThan: (val: number, target: number) => boolean;
+    greaterOrEqual: (val: number, target: number) => boolean;
+    lessOrEqual: (val: number, target: number) => boolean;
+    lessThan: (val: number, target: number) => boolean;
+};
+export {};