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

package/cjs/modules/console.js

@@ -92,26 +92,34 @@ function default_1(app, opts) {
         return;
     }
     const sendConsoleLog = app.safe((level, args) => app.send((0, messages_gen_js_1.ConsoleLog)(level, printf(args))));
-    let n;
+    let n = 0;
     const reset = () => {
         n = 0;
     };
     app.attachStartCallback(reset);
     app.ticker.attach(reset, 33, false);
-    const patchConsole = (console) => options.consoleMethods.forEach((method) => {
-        if (consoleMethods.indexOf(method) === -1) {
-            app.debug.error(`OpenReplay: unsupported console method "${method}"`);
-            return;
-        }
-        const fn = console[method];
-        console[method] = function (...args) {
-            fn.apply(this, args);
-            if (n++ > options.consoleThrottling) {
+    const patchConsole = (console) => {
+        const handler = {
+            apply: function (target, thisArg, argumentsList) {
+                target.apply(console, argumentsList);
+                n = n + 1;
+                if (n > options.consoleThrottling) {
+                    return;
+                }
+                else {
+                    sendConsoleLog(target.name, argumentsList);
+                }
+            },
+        };
+        options.consoleMethods.forEach((method) => {
+            if (consoleMethods.indexOf(method) === -1) {
+                app.debug.error(`OpenReplay: unsupported console method "${method}"`);
                 return;
             }
-            sendConsoleLog(method, args);
-        };
-    });
+            const fn = console[method];
+            console[method] = new Proxy(fn, handler);
+        });
+    };
     const patchContext = app.safe((context) => patchConsole(context.console));
     patchContext(window);
     app.observer.attachContextCallback(patchContext);

package/cjs/modules/featureFlags.d.ts

@@ -0,0 +1,25 @@
+import App from '../app/index.js';
+export interface IFeatureFlag {
+    key: string;
+    is_persist: boolean;
+    value: string | boolean;
+    payload: string;
+}
+export interface FetchPersistFlagsData {
+    key: string;
+    value: string | boolean;
+}
+export default class FeatureFlags {
+    private readonly app;
+    flags: IFeatureFlag[];
+    storageKey: string;
+    onFlagsCb: (flags: IFeatureFlag[]) => void;
+    constructor(app: App);
+    getFeatureFlag(flagName: string): IFeatureFlag | undefined;
+    isFlagEnabled(flagName: string): boolean;
+    onFlagsLoad(cb: (flags: IFeatureFlag[]) => void): void;
+    reloadFlags(): Promise<void>;
+    handleFlags(flags: IFeatureFlag[]): void;
+    clearPersistFlags(): void;
+    diffPersist(flags: IFeatureFlag[]): IFeatureFlag[];
+}

package/cjs/modules/featureFlags.js

@@ -0,0 +1,100 @@
+"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 });
+class FeatureFlags {
+    constructor(app) {
+        this.app = app;
+        this.storageKey = '__openreplay_flags';
+        const persistFlags = this.app.sessionStorage.getItem(this.storageKey);
+        if (persistFlags) {
+            const persistFlagsStrArr = persistFlags.split(';').filter(Boolean);
+            this.flags = persistFlagsStrArr.map((flag) => JSON.parse(flag));
+        }
+    }
+    getFeatureFlag(flagName) {
+        return this.flags.find((flag) => flag.key === flagName);
+    }
+    isFlagEnabled(flagName) {
+        return this.flags.findIndex((flag) => flag.key === flagName) !== -1;
+    }
+    onFlagsLoad(cb) {
+        this.onFlagsCb = cb;
+    }
+    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,
+                // todo: get from backend
+                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),
+            });
+            if (resp.status === 200) {
+                const data = yield resp.json();
+                return this.handleFlags(data.flags);
+            }
+        });
+    }
+    handleFlags(flags) {
+        var _a;
+        const persistFlags = [];
+        flags.forEach((flag) => {
+            if (flag.is_persist)
+                persistFlags.push(flag);
+        });
+        let str = '';
+        const uniquePersistFlags = this.diffPersist(persistFlags);
+        uniquePersistFlags.forEach((flag) => {
+            str += `${JSON.stringify(flag)};`;
+        });
+        this.app.sessionStorage.setItem(this.storageKey, str);
+        this.flags = flags;
+        return (_a = this.onFlagsCb) === null || _a === void 0 ? void 0 : _a.call(this, flags);
+    }
+    clearPersistFlags() {
+        this.app.sessionStorage.removeItem(this.storageKey);
+    }
+    diffPersist(flags) {
+        const persistFlags = this.app.sessionStorage.getItem(this.storageKey);
+        if (!persistFlags)
+            return flags;
+        const persistFlagsStrArr = persistFlags.split(';').filter(Boolean);
+        const persistFlagsArr = persistFlagsStrArr.map((flag) => JSON.parse(flag));
+        return flags.filter((flag) => persistFlagsArr.findIndex((pf) => pf.key === flag.key) === -1);
+    }
+}
+exports.default = FeatureFlags;

package/cjs/modules/img.js

@@ -26,13 +26,13 @@ function isSVGInFireFox(url) {
 const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
 function default_1(app) {
     function sendPlaceholder(id, node) {
-        app.send((0, messages_gen_js_1.SetNodeAttribute)(id, 'src', PLACEHOLDER_SRC));
+        app.attributeSender.sendSetAttribute(id, 'src', PLACEHOLDER_SRC);
         const { width, height } = node.getBoundingClientRect();
         if (!node.hasAttribute('width')) {
-            app.send((0, messages_gen_js_1.SetNodeAttribute)(id, 'width', String(width)));
+            app.attributeSender.sendSetAttribute(id, 'width', String(width));
         }
         if (!node.hasAttribute('height')) {
-            app.send((0, messages_gen_js_1.SetNodeAttribute)(id, 'height', String(height)));
+            app.attributeSender.sendSetAttribute(id, 'height', String(height));
         }
     }
     const sendSrcset = function (id, img) {
@@ -44,7 +44,7 @@ function default_1(app) {
             .split(',')
             .map((str) => resolveURL(str))
             .join(',');
-        app.send((0, messages_gen_js_1.SetNodeAttribute)(id, 'srcset', resolvedSrcset));
+        app.attributeSender.sendSetAttribute(id, 'srcset', resolvedSrcset);
     };
     const sendSrc = function (id, img) {
         if (img.src.length > utils_js_1.MAX_STR_LEN) {

package/cjs/modules/network.d.ts

@@ -1,9 +1,7 @@
 import type App from '../app/index.js';
 import type { AxiosInstance } from './axiosSpy.js';
-type XHRRequestBody = Parameters<XMLHttpRequest['send']>[0];
-type FetchRequestBody = RequestInit['body'];
 interface RequestData {
-    body: XHRRequestBody | FetchRequestBody;
+    body: string | null;
     headers: Record<string, string>;
 }
 interface ResponseData {
@@ -17,7 +15,7 @@ export interface RequestResponseData {
     request: RequestData;
     response: ResponseData;
 }
-type Sanitizer = (data: RequestResponseData) => RequestResponseData | null;
+type Sanitizer = (data: RequestResponseData) => RequestResponseData;
 export interface Options {
     sessionTokenHeader: string | boolean;
     failuresOnly: boolean;
@@ -26,6 +24,7 @@ export interface Options {
     captureInIframes: boolean;
     sanitizer?: Sanitizer;
     axiosInstances?: Array<AxiosInstance>;
+    useProxy?: boolean;
 }
 export default function (app: App, opts?: Partial<Options>): void;
 export {};

package/cjs/modules/network.js

@@ -3,6 +3,7 @@ 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");
 function getXHRRequestDataObject(xhr) {
     // @ts-ignore  this is 3x faster than using Map<XHR, XHRRequestData>
     if (!xhr.__or_req_data__) {
@@ -23,6 +24,7 @@ function default_1(app, opts = {}) {
         sessionTokenHeader: false,
         captureInIframes: true,
         axiosInstances: undefined,
+        useProxy: true,
     }, opts);
     const ignoreHeaders = options.ignoreHeaders;
     const isHIgnored = Array.isArray(ignoreHeaders)
@@ -39,13 +41,14 @@ function default_1(app, opts = {}) {
     }
     function sanitize(reqResInfo) {
         if (!options.capturePayload) {
+            // @ts-ignore
             delete reqResInfo.request.body;
             delete reqResInfo.response.body;
         }
         if (options.sanitizer) {
             const resBody = reqResInfo.response.body;
             if (typeof resBody === 'string') {
-                // Parse response in order to have handy view in sanitisation function
+                // Parse response in order to have handy view in sanitization function
                 try {
                     reqResInfo.response.body = JSON.parse(resBody);
                 }
@@ -68,6 +71,10 @@ function default_1(app, opts = {}) {
         return JSON.stringify(r);
     }
     const patchWindow = (context) => {
+        /* ====== modern way ====== */
+        if (options.useProxy) {
+            return (0, index_js_1.default)(context, options.ignoreHeaders, setSessionTokenHeader, sanitize, (message) => app.send(message), (url) => app.isServiceURL(url));
+        }
         /* ====== Fetch ====== */
         const origFetch = context.fetch.bind(context);
         const trackFetch = (input, init = {}) => {
@@ -128,7 +135,8 @@ function default_1(app, opts = {}) {
                         status: r.status,
                         request: {
                             headers: reqHs,
-                            body: init.body,
+                            // @ts-ignore
+                            body: init.body || null,
                         },
                         response: {
                             headers: resHs,
@@ -138,6 +146,7 @@ function default_1(app, opts = {}) {
                     if (!reqResInfo) {
                         return;
                     }
+                    console.log('original', (0, messages_gen_js_1.NetworkRequest)('fetch', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), r.status, startTime + (0, utils_js_1.getTimeOrigin)(), duration));
                     app.send((0, messages_gen_js_1.NetworkRequest)('fetch', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), r.status, startTime + (0, utils_js_1.getTimeOrigin)(), duration));
                 })
                     .catch((e) => app.debug.error('Could not process Fetch response:', e));
@@ -177,7 +186,8 @@ function default_1(app, opts = {}) {
                     status: xhr.status,
                     request: {
                         headers: reqHs,
-                        body: reqBody,
+                        // @ts-ignore
+                        body: reqBody || null,
                     },
                     response: {
                         headers: headerMap,