@openreplay/tracker 9.0.12 → 10.0.2

package/lib/modules/Network/fetchProxy.js

@@ -113,6 +113,9 @@ export class FetchProxyHandler {
     apply(target, _, argsList) {
         const input = argsList[0];
         const init = argsList[1];
+        // @ts-ignore
+        if (!(input === null || input === void 0 ? void 0 : input.url) && !input)
+            return target.apply(window, argsList);
         const isORUrl = input instanceof URL || typeof input === 'string'
             ? this.isServiceUrl(String(input))
             : this.isServiceUrl(String(input.url));
@@ -261,4 +264,3 @@ export default class FetchProxy {
         return new Proxy(fetch, new FetchProxyHandler(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher));
     }
 }
-FetchProxy.origFetch = fetch;

package/lib/modules/Network/index.js

@@ -1,8 +1,10 @@
 import FetchProxy from './fetchProxy.js';
 import XHRProxy from './xhrProxy.js';
+import BeaconProxy from './beaconProxy.js';
 const getWarning = (api) => console.warn(`Openreplay: Can't find ${api} in global context. 
 If you're using serverside rendering in your app, make sure that tracker is loaded dynamically, otherwise ${api} won't be tracked.`);
 export default function setProxy(context, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher) {
+    var _a;
     if (context.XMLHttpRequest) {
         context.XMLHttpRequest = XHRProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
     }
@@ -15,4 +17,7 @@ export default function setProxy(context, ignoredHeaders, setSessionTokenHeader,
     else {
         getWarning('fetch');
     }
+    if ((_a = context === null || context === void 0 ? void 0 : context.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon) {
+        context.navigator.sendBeacon = BeaconProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl);
+    }
 }

package/lib/modules/Network/networkMessage.d.ts

@@ -27,7 +27,7 @@ export default class NetworkMessage {
         [key: string]: string;
     };
     responseType: XMLHttpRequest['responseType'];
-    requestType: 'xhr' | 'fetch' | 'ping' | 'custom';
+    requestType: 'xhr' | 'fetch' | 'ping' | 'custom' | 'beacon';
     requestHeader: HeadersInit;
     response: any;
     responseSize: number;

package/lib/modules/Network/networkMessage.js

@@ -50,7 +50,7 @@ export default class NetworkMessage {
             request,
             response,
         });
-        return NetworkRequest(this.requestType, messageInfo.method, messageInfo.url, JSON.stringify(messageInfo.request), JSON.stringify(messageInfo.response), messageInfo.status, this.startTime + getTimeOrigin(), this.duration);
+        return NetworkRequest(this.requestType, messageInfo.method, messageInfo.url, JSON.stringify(messageInfo.request), JSON.stringify(messageInfo.response), messageInfo.status, this.startTime + getTimeOrigin(), this.duration, this.responseSize);
     }
     writeHeaders() {
         const reqHs = {};
@@ -71,8 +71,11 @@ export default class NetworkMessage {
         return { reqHs, resHs };
     }
     isHeaderIgnored(key) {
-        if (Array.isArray(this.ignoredHeaders))
-            return this.ignoredHeaders.includes(key);
-        return this.ignoredHeaders;
+        if (Array.isArray(this.ignoredHeaders)) {
+            return this.ignoredHeaders.map((k) => k.toLowerCase()).includes(key.toLowerCase());
+        }
+        else {
+            return this.ignoredHeaders;
+        }
     }
 }

package/lib/modules/Network/xhrProxy.d.ts

@@ -35,14 +35,5 @@ export declare class XHRProxyHandler<T extends XMLHttpRequest> implements ProxyH
     protected updateItemByReadyState(): void;
 }
 export default class XHRProxy {
-    static origXMLHttpRequest: {
-        new (): XMLHttpRequest;
-        prototype: XMLHttpRequest;
-        readonly DONE: number;
-        readonly HEADERS_RECEIVED: number;
-        readonly LOADING: number;
-        readonly OPENED: number;
-        readonly UNSENT: number;
-    };
     static create(ignoredHeaders: boolean | string[], setSessionTokenHeader: (cb: (name: string, value: string) => void) => void, sanitize: (data: RequestResponseData) => RequestResponseData, sendMessage: (data: NetworkRequest) => void, isServiceUrl: (url: string) => boolean, tokenUrlMatcher?: (url: string) => boolean): any;
 }

package/lib/modules/Network/xhrProxy.js

@@ -210,4 +210,3 @@ export default class XHRProxy {
         });
     }
 }
-XHRProxy.origXMLHttpRequest = XMLHttpRequest;

package/lib/modules/axiosSpy.js

@@ -65,7 +65,7 @@ export default function (app, instance, opts, sanitize, stringify) {
         const requestStart = axiosResponseObj.config.__openreplay_timing;
         const duration = performance.now() - requestStart;
         app.debug.log('Openreplay: final req object', reqResInfo);
-        app.send(NetworkRequest('xhr', String(method), String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), reqResInfo.status, requestStart + getTimeOrigin(), duration));
+        app.send(NetworkRequest('xhr', String(method), String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), reqResInfo.status, requestStart + getTimeOrigin(), duration, 0));
     }
     function getStartTime(config) {
         app.debug.log('Openreplay: capturing API request', config);

package/lib/modules/constructedStyleSheets.js

@@ -5,7 +5,7 @@ function hasAdoptedSS(node) {
         // @ts-ignore
         !!node.adoptedStyleSheets);
 }
-// TODO: incapsulate to be init-ed on-start and join with cssrules.ts under one folder
+// TODO: encapsulate to be init-ed on-start and join with cssrules.ts under one folder
 let _id = 0xf;
 export function nextID() {
     return _id++;
@@ -34,35 +34,39 @@ export default function (app) {
         }
         const nowOwning = [];
         const styleSheets = root.adoptedStyleSheets;
-        for (const s of styleSheets) {
-            let sheetID = styleSheetIDMap.get(s);
-            const init = !sheetID;
-            if (!sheetID) {
-                sheetID = nextID();
-                styleSheetIDMap.set(s, sheetID);
-            }
-            if (!pastOwning.includes(sheetID)) {
-                app.send(AdoptedSSAddOwner(sheetID, nodeID));
-            }
-            if (init) {
-                const rules = s.cssRules;
-                for (let i = 0; i < rules.length; i++) {
-                    app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
+        if (Symbol.iterator in styleSheets) {
+            for (const s of styleSheets) {
+                let sheetID = styleSheetIDMap.get(s);
+                const init = !sheetID;
+                if (!sheetID) {
+                    sheetID = nextID();
+                    styleSheetIDMap.set(s, sheetID);
+                }
+                if (!pastOwning.includes(sheetID)) {
+                    app.send(AdoptedSSAddOwner(sheetID, nodeID));
                 }
+                if (init) {
+                    const rules = s.cssRules;
+                    for (let i = 0; i < rules.length; i++) {
+                        app.send(AdoptedSSInsertRuleURLBased(sheetID, rules[i].cssText, i, app.getBaseHref()));
+                    }
+                }
+                nowOwning.push(sheetID);
             }
-            nowOwning.push(sheetID);
         }
-        for (const sheetID of pastOwning) {
-            if (!nowOwning.includes(sheetID)) {
-                app.send(AdoptedSSRemoveOwner(sheetID, nodeID));
+        if (Symbol.iterator in pastOwning) {
+            for (const sheetID of pastOwning) {
+                if (!nowOwning.includes(sheetID)) {
+                    app.send(AdoptedSSRemoveOwner(sheetID, nodeID));
+                }
             }
         }
         adoptedStyleSheetsOwnings.set(nodeID, nowOwning);
-    }, 20); // Misterious bug:
+    }, 20); // Mysterious bug:
     /* On the page https://explore.fast.design/components/fast-accordion
       the only rule inside the only adoptedStyleSheet of the iframe-s document
       gets changed during first milliseconds after the load.
-      Howerer, none of the documented methods (replace, insertRule) is triggered.
+      However, none of the documented methods (replace, insertRule) is triggered.
       The rule is not substituted (remains the same object), however the text gets changed.
     */
     function patchAdoptedStyleSheets(prototype) {

package/lib/modules/featureFlags.js

@@ -45,7 +45,6 @@ export default class FeatureFlags {
                 userID: sessionInfo.userID,
                 metadata: sessionInfo.metadata,
                 referrer: document.referrer,
-                // todo: get from backend
                 os: userInfo.userOS,
                 device: userInfo.userDevice,
                 country: userInfo.userCountry,

package/lib/modules/img.js

@@ -1,4 +1,4 @@
-import { isURL, IS_FIREFOX, MAX_STR_LEN } from '../utils.js';
+import { isURL, IS_FIREFOX, MAX_STR_LEN, createMutationObserver } from '../utils.js';
 import { ResourceTiming, SetNodeAttributeURLBased } from '../app/messages.gen.js';
 import { hasTag } from '../app/guards.js';
 function resolveURL(url, location = document.location) {
@@ -75,7 +75,7 @@ export default function (app) {
             sendSrcset(id, img);
         }
     });
-    const observer = new MutationObserver((mutations) => {
+    const observer = createMutationObserver(app.safe((mutations) => {
         for (const mutation of mutations) {
             if (mutation.type === 'attributes') {
                 const target = mutation.target;
@@ -91,7 +91,7 @@ export default function (app) {
                 }
             }
         }
-    });
+    }));
     app.attachStopCallback(() => {
         observer.disconnect();
     });

package/lib/modules/network.js

@@ -17,12 +17,12 @@ function strMethod(method) {
 export default function (app, opts = {}) {
     const options = Object.assign({
         failuresOnly: false,
-        ignoreHeaders: ['Cookie', 'Set-Cookie', 'Authorization'],
+        ignoreHeaders: ['cookie', 'set-cookie', 'authorization'],
         capturePayload: false,
         sessionTokenHeader: false,
         captureInIframes: true,
         axiosInstances: undefined,
-        useProxy: false,
+        useProxy: true,
     }, opts);
     if (options.useProxy === false) {
         app.debug.warn('Network module is migrating to proxy api, to gradually migrate and test it set useProxy to true');
@@ -147,12 +147,13 @@ export default function (app, opts = {}) {
                     if (!reqResInfo) {
                         return;
                     }
-                    app.send(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, 0));
                 })
                     .catch((e) => app.debug.error('Could not process Fetch response:', e));
                 return response;
             });
         };
+        // @ts-ignore
         context.fetch = trackFetch;
         /* ====== <> ====== */
         /* ====== XHR ====== */
@@ -197,7 +198,7 @@ export default function (app, opts = {}) {
                 if (!reqResInfo) {
                     return;
                 }
-                app.send(NetworkRequest('xhr', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), xhr.status, startTime + getTimeOrigin(), duration));
+                app.send(NetworkRequest('xhr', method, String(reqResInfo.url), stringify(reqResInfo.request), stringify(reqResInfo.response), xhr.status, startTime + getTimeOrigin(), duration, 0));
             }));
             //TODO: handle error (though it has no Error API nor any useful information)
             //xhr.addEventListener('error', (e) => {})

package/lib/utils.d.ts

@@ -17,3 +17,19 @@ export declare function hasOpenreplayAttribute(e: Element, attr: string): boolea
 export declare function canAccessIframe(iframe: HTMLIFrameElement): boolean;
 export declare function generateRandomId(len?: number): string;
 export declare function inIframe(): boolean;
+/**
+ * Because angular devs decided that its a good idea to override a browser apis
+ * we need to use this to achieve safe behavior
+ * */
+export declare function ngSafeBrowserMethod(method: string): string;
+export declare function createMutationObserver(cb: MutationCallback): MutationObserver;
+export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
+export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
+/**
+ * This is a brief polyfill that suits our needs
+ * I took inspiration from Microsoft Clarity polyfill on this one
+ * then adapted it a little bit
+ *
+ * I'm very grateful for their bright idea
+ * */
+export declare function requestIdleCb(callback: () => void): number | undefined;

package/lib/utils.js

@@ -89,3 +89,50 @@ export function inIframe() {
         return true;
     }
 }
+/**
+ * Because angular devs decided that its a good idea to override a browser apis
+ * we need to use this to achieve safe behavior
+ * */
+export function ngSafeBrowserMethod(method) {
+    // @ts-ignore
+    return window.Zone && '__symbol__' in window.Zone
+        ? // @ts-ignore
+            window['Zone']['__symbol__'](method)
+        : method;
+}
+export function createMutationObserver(cb) {
+    const mObserver = ngSafeBrowserMethod('MutationObserver');
+    return new window[mObserver](cb);
+}
+export function createEventListener(target, event, cb, capture) {
+    const safeAddEventListener = ngSafeBrowserMethod('addEventListener');
+    target[safeAddEventListener](event, cb, capture);
+}
+export function deleteEventListener(target, event, cb, capture) {
+    const safeRemoveEventListener = ngSafeBrowserMethod('removeEventListener');
+    target[safeRemoveEventListener](event, cb, capture);
+}
+/**
+ * This is a brief polyfill that suits our needs
+ * I took inspiration from Microsoft Clarity polyfill on this one
+ * then adapted it a little bit
+ *
+ * I'm very grateful for their bright idea
+ * */
+export function requestIdleCb(callback) {
+    const taskTimeout = 3000;
+    if (window.requestIdleCallback) {
+        return window.requestIdleCallback(callback, { timeout: taskTimeout });
+    }
+    else {
+        const channel = new MessageChannel();
+        const incoming = channel.port1;
+        const outgoing = channel.port2;
+        incoming.onmessage = () => {
+            callback();
+        };
+        requestAnimationFrame(() => {
+            outgoing.postMessage(1);
+        });
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "9.0.12",
+  "version": "10.0.2",
   "keywords": [
     "logging",
     "replay"
@@ -19,40 +19,40 @@
     "tscRun": "tsc -b src/main && tsc -b src/webworker && tsc --project src/main/tsconfig-cjs.json",
     "rollup": "rollup --config rollup.config.js",
     "compile": "node --experimental-modules --experimental-json-modules scripts/compile.cjs",
-    "build": "npm run clean && npm run tscRun && npm run rollup && npm run compile",
+    "build": "bun run clean && bun run tscRun && bun run rollup && bun run compile",
     "prepare": "cd ../../ && husky install tracker/.husky/",
     "lint-front": "lint-staged",
     "test": "jest --coverage=false",
     "test:ci": "jest --coverage=true",
-    "postversion": "npm run build",
-    "prepublishOnly": "npm run build"
+    "postversion": "bun run build",
+    "prepublishOnly": "bun run build"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
     "@jest/globals": "^29.3.1",
-    "@rollup/plugin-babel": "^5.0.3",
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "eslint": "^7.8.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "husky": "^8.0.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.3",
     "replace-in-files": "^2.0.3",
-    "rollup": "^2.59.0",
-    "rollup-plugin-terser": "^6.1.0",
+    "rollup": "^4.1.4",
+    "rollup-plugin-terser": "^7.0.2",
     "semver": "^6.3.0",
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@medv/finder": "^3.0.0",
+    "@medv/finder": "^3.1.0",
     "error-stack-parser": "^2.0.6",
-    "fflate": "^0.7.4"
+    "fflate": "^0.8.1"
   },
   "engines": {
     "node": ">=14.0"

package/rollup.config.js

@@ -1,6 +1,6 @@
-import resolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
-import { terser } from 'rollup-plugin-terser';
+import resolve from '@rollup/plugin-node-resolve'
+import { babel } from '@rollup/plugin-babel'
+import { terser } from 'rollup-plugin-terser'
 
 export default {
   input: 'build/webworker/index.js',
@@ -9,4 +9,4 @@ export default {
     format: 'cjs',
   },
   plugins: [resolve(), babel({ babelHelpers: 'bundled' }), terser({ mangle: { reserved: ['$'] } })],
-};
+}