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

package/lib/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/lib/modules/featureFlags.js

@@ -0,0 +1,97 @@
+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 {
+    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);
+    }
+}

package/lib/modules/img.js

@@ -1,5 +1,5 @@
 import { isURL, IS_FIREFOX, MAX_STR_LEN } from '../utils.js';
-import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from '../app/messages.gen.js';
+import { ResourceTiming, SetNodeAttributeURLBased } from '../app/messages.gen.js';
 import { hasTag } from '../app/guards.js';
 function resolveURL(url, location = document.location) {
     url = url.trim();
@@ -24,13 +24,13 @@ function isSVGInFireFox(url) {
 const PLACEHOLDER_SRC = 'https://static.openreplay.com/tracker/placeholder.jpeg';
 export default function (app) {
     function sendPlaceholder(id, node) {
-        app.send(SetNodeAttribute(id, 'src', PLACEHOLDER_SRC));
+        app.attributeSender.sendSetAttribute(id, 'src', PLACEHOLDER_SRC);
         const { width, height } = node.getBoundingClientRect();
         if (!node.hasAttribute('width')) {
-            app.send(SetNodeAttribute(id, 'width', String(width)));
+            app.attributeSender.sendSetAttribute(id, 'width', String(width));
         }
         if (!node.hasAttribute('height')) {
-            app.send(SetNodeAttribute(id, 'height', String(height)));
+            app.attributeSender.sendSetAttribute(id, 'height', String(height));
         }
     }
     const sendSrcset = function (id, img) {
@@ -42,7 +42,7 @@ export default function (app) {
             .split(',')
             .map((str) => resolveURL(str))
             .join(',');
-        app.send(SetNodeAttribute(id, 'srcset', resolvedSrcset));
+        app.attributeSender.sendSetAttribute(id, 'srcset', resolvedSrcset);
     };
     const sendSrc = function (id, img) {
         if (img.src.length > MAX_STR_LEN) {

package/lib/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/lib/modules/network.js

@@ -1,6 +1,7 @@
 import { NetworkRequest } from '../app/messages.gen.js';
 import { getTimeOrigin } from '../utils.js';
 import axiosSpy from './axiosSpy.js';
+import setProxy from './Network/index.js';
 function getXHRRequestDataObject(xhr) {
     // @ts-ignore  this is 3x faster than using Map<XHR, XHRRequestData>
     if (!xhr.__or_req_data__) {
@@ -21,6 +22,7 @@ export default function (app, opts = {}) {
         sessionTokenHeader: false,
         captureInIframes: true,
         axiosInstances: undefined,
+        useProxy: true,
     }, opts);
     const ignoreHeaders = options.ignoreHeaders;
     const isHIgnored = Array.isArray(ignoreHeaders)
@@ -37,13 +39,14 @@ export default function (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);
                 }
@@ -66,6 +69,10 @@ export default function (app, opts = {}) {
         return JSON.stringify(r);
     }
     const patchWindow = (context) => {
+        /* ====== modern way ====== */
+        if (options.useProxy) {
+            return setProxy(context, options.ignoreHeaders, setSessionTokenHeader, sanitize, (message) => app.send(message), (url) => app.isServiceURL(url));
+        }
         /* ====== Fetch ====== */
         const origFetch = context.fetch.bind(context);
         const trackFetch = (input, init = {}) => {
@@ -126,7 +133,8 @@ export default function (app, opts = {}) {
                         status: r.status,
                         request: {
                             headers: reqHs,
-                            body: init.body,
+                            // @ts-ignore
+                            body: init.body || null,
                         },
                         response: {
                             headers: resHs,
@@ -136,6 +144,7 @@ export default function (app, opts = {}) {
                     if (!reqResInfo) {
                         return;
                     }
+                    console.log('original', NetworkRequest('fetch', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), r.status, startTime + getTimeOrigin(), duration));
                     app.send(NetworkRequest('fetch', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), r.status, startTime + getTimeOrigin(), duration));
                 })
                     .catch((e) => app.debug.error('Could not process Fetch response:', e));
@@ -175,7 +184,8 @@ export default function (app, opts = {}) {
                     status: xhr.status,
                     request: {
                         headers: reqHs,
-                        body: reqBody,
+                        // @ts-ignore
+                        body: reqBody || null,
                     },
                     response: {
                         headers: headerMap,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.1-beta14",
   "keywords": [
     "logging",
     "replay"
@@ -24,7 +24,8 @@
     "lint-front": "lint-staged",
     "test": "jest --coverage=false",
     "test:ci": "jest --coverage=true",
-    "postversion": "npm run build"
+    "postversion": "npm run build",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",