@openreplay/tracker 16.3.0-beta.0 → 16.3.0-beta.2

package/dist/cjs/main/app/observer/observer.d.ts

@@ -34,6 +34,7 @@ export default abstract class Observer {
      */
     private handleIframeSrcChange;
     private sendNodeAttribute;
+    private throttledSetNodeData;
     private sendNodeData;
     private bindNode;
     private bindTree;

package/dist/cjs/main/modules/cssrules.d.ts

@@ -1,7 +1,9 @@
 import type App from '../app/index.js';
 export interface CssRulesOptions {
-    checkCssInterval?: number;
+    /** turn this on if you have issues with emotionjs created styles */
     scanInMemoryCSS?: boolean;
+    /** how often to scan tracked stylesheets (with "empty" rules) */
+    checkCssInterval?: number;
     /**
     Useful for cases where you expect limited amount of mutations
   

package/dist/cjs/main/utils.d.ts

@@ -28,3 +28,6 @@ export declare function createEventListener(target: EventTarget, event: string,
 export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean, forceNgOff?: boolean): void;
 export declare function requestIdleCb(callback: () => void): void;
 export declare function simpleMerge<T>(defaultObj: T, givenObj: Partial<T>): T;
+export declare function throttleWithTrailing<K, Args extends any[]>(fn: (key: K, ...args: Args) => void, interval: number): ((key: K, ...args: Args) => void) & {
+    clear: () => void;
+};

package/dist/lib/entry.js

@@ -1465,6 +1465,43 @@ function simpleMerge(defaultObj, givenObj) {
     }
     return result;
 }
+function throttleWithTrailing(fn, interval) {
+    const lastCalls = new Map();
+    const timeouts = new Map();
+    const lastArgs = new Map();
+    const throttled = function (key, ...args) {
+        const now = Date.now();
+        const lastCall = lastCalls.get(key) ?? 0;
+        const remaining = interval - (now - lastCall);
+        lastArgs.set(key, args);
+        if (remaining <= 0) {
+            if (timeouts.has(key)) {
+                clearTimeout(timeouts.get(key));
+                timeouts.delete(key);
+            }
+            lastCalls.set(key, now);
+            fn(key, ...args);
+        }
+        else if (!timeouts.has(key)) {
+            const timeoutId = setTimeout(() => {
+                lastCalls.set(key, Date.now());
+                timeouts.delete(key);
+                const finalArgs = lastArgs.get(key);
+                fn(key, ...finalArgs);
+            }, remaining);
+            timeouts.set(key, timeoutId);
+        }
+    };
+    throttled.clear = () => {
+        for (const timeout of timeouts.values()) {
+            clearTimeout(timeout);
+        }
+        timeouts.clear();
+        lastArgs.clear();
+        lastCalls.clear();
+    };
+    return throttled;
+}
 
 // Auto-generated, do not edit
 /* eslint-disable */
@@ -4215,6 +4252,7 @@ class Observer {
         this.inlineRemoteCss = false;
         this.inlinerOptions = undefined;
         this.domParser = new DOMParser();
+        this.throttledSetNodeData = throttleWithTrailing((id, parentElement, data) => this.sendNodeData(id, parentElement, data), 30);
         this.disableSprites = Boolean(options.disableSprites);
         this.inlineRemoteCss = Boolean(options.inlineRemoteCss);
         this.inlinerOptions = options.inlinerOptions;
@@ -4526,7 +4564,7 @@ class Observer {
             else if (isTextNode(node)) {
                 // for text node id != 0, hence parentID !== undefined and parent is Element
                 this.app.send(CreateTextNode(id, parentID, index));
-                this.sendNodeData(id, parent, node.data);
+                this.throttledSetNodeData(id, parent, node.data);
             }
             return true;
         }
@@ -4547,7 +4585,7 @@ class Observer {
                 throw 'commitNode: node is not a text';
             }
             // for text node id != 0, hence parent is Element
-            this.sendNodeData(id, parent, node.data);
+            this.throttledSetNodeData(id, parent, node.data);
         }
         return true;
     }
@@ -4590,6 +4628,7 @@ class Observer {
     disconnect() {
         this.observer.disconnect();
         this.clear();
+        this.throttledSetNodeData.clear();
     }
 }
 
@@ -5202,7 +5241,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.3.0-beta.0'; // TODO: version compatability check inside each plugin.
+        this.version = '16.3.0-beta.2'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -8434,152 +8473,6 @@ function isObject(thing) {
     return thing !== null && typeof thing === 'object';
 }
 
-const sensitiveParams = new Set([
-    "password",
-    "pass",
-    "pwd",
-    "mdp",
-    "token",
-    "bearer",
-    "jwt",
-    "api_key",
-    "api-key",
-    "apiKey",
-    "secret",
-    "ssn",
-    "zip",
-    "zipcode",
-    "x-api-key",
-    "www-authenticate",
-    "x-csrf-token",
-    "x-requested-with",
-    "x-forwarded-for",
-    "x-real-ip",
-    "cookie",
-    "authorization",
-    "auth",
-    "proxy-authorization",
-    "set-cookie",
-    "account_key",
-]);
-function numDigits(x) {
-    return (Math.log10((x ^ (x >> 31)) - (x >> 31)) | 0) + 1;
-}
-function obscure(value) {
-    if (typeof value === "number") {
-        const digits = numDigits(value);
-        return "9".repeat(digits);
-    }
-    if (typeof value === "string") {
-        return value.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
-    }
-    return value;
-}
-function filterHeaders(headers) {
-    const filteredHeaders = {};
-    if (Array.isArray(headers)) {
-        headers.forEach(({ name, value }) => {
-            if (sensitiveParams.has(name.toLowerCase())) {
-                filteredHeaders[name] = obscure(value);
-            }
-            else {
-                filteredHeaders[name] = value;
-            }
-        });
-    }
-    else {
-        for (const [key, value] of Object.entries(headers)) {
-            if (sensitiveParams.has(key.toLowerCase())) {
-                filteredHeaders[key] = obscure(value);
-            }
-            else {
-                filteredHeaders[key] = value;
-            }
-        }
-    }
-    return filteredHeaders;
-}
-function filterBody(body) {
-    if (!body) {
-        return body;
-    }
-    let parsedBody;
-    let isJSON = false;
-    try {
-        parsedBody = JSON.parse(body);
-        isJSON = true;
-    }
-    catch (e) {
-        // not json
-    }
-    if (isJSON) {
-        obscureSensitiveData(parsedBody);
-        return JSON.stringify(parsedBody);
-    }
-    else {
-        const isUrlSearch = typeof body === "string" && body.includes("?") && body.includes("=");
-        if (isUrlSearch) {
-            try {
-                const params = new URLSearchParams(body);
-                for (const key of params.keys()) {
-                    if (sensitiveParams.has(key.toLowerCase())) {
-                        const value = obscure(params.get(key));
-                        params.set(key, value);
-                    }
-                }
-                return params.toString();
-            }
-            catch (e) {
-                // not url query ?
-                return body;
-            }
-        }
-        else {
-            // not json or url query
-            return body;
-        }
-    }
-}
-function sanitizeObject(obj) {
-    obscureSensitiveData(obj);
-    return obj;
-}
-function obscureSensitiveData(obj) {
-    if (Array.isArray(obj)) {
-        obj.forEach(obscureSensitiveData);
-    }
-    else if (obj && typeof obj === "object") {
-        for (const key in obj) {
-            if (Object.hasOwn(obj, key)) {
-                if (sensitiveParams.has(key.toLowerCase())) {
-                    obj[key] = obscure(obj[key]);
-                }
-                else if (obj[key] !== null && typeof obj[key] === "object") {
-                    obscureSensitiveData(obj[key]);
-                }
-            }
-        }
-    }
-}
-function tryFilterUrl(url) {
-    if (!url)
-        return "";
-    try {
-        const urlObj = new URL(url);
-        if (urlObj.searchParams) {
-            for (const key of urlObj.searchParams.keys()) {
-                if (sensitiveParams.has(key.toLowerCase())) {
-                    urlObj.searchParams.set(key, "******");
-                }
-            }
-        }
-        return urlObj.toString();
-    }
-    catch (e) {
-        return url;
-    }
-}
-
 /**
  * I know we're not using most of the information from this class
  * but it can be useful in the future if we will decide to display more stuff in our ui
@@ -8611,18 +8504,13 @@ class NetworkMessage {
     }
     getMessage() {
         const { reqHs, resHs } = this.writeHeaders();
-        const reqBody = this.method === 'GET'
-            ? JSON.stringify(sanitizeObject(this.getData)) : filterBody(this.requestData);
         const request = {
-            headers: filterHeaders(reqHs),
-            body: reqBody,
-        };
-        const response = {
-            headers: filterHeaders(resHs),
-            body: filterBody(this.response)
+            headers: reqHs,
+            body: this.method === 'GET' ? JSON.stringify(this.getData) : this.requestData,
         };
+        const response = { headers: resHs, body: this.response };
         const messageInfo = this.sanitize({
-            url: tryFilterUrl(this.url),
+            url: this.url,
             method: this.method,
             status: this.status,
             request,
@@ -8938,10 +8826,9 @@ class ResponseProxyHandler {
         if (typeof this.resp.body.getReader !== 'function') {
             return;
         }
-        const clonedResp = this.resp.clone();
-        const _getReader = clonedResp.body.getReader;
+        const _getReader = this.resp.body.getReader;
         // @ts-ignore
-        clonedResp.body.getReader = () => {
+        this.resp.body.getReader = () => {
             const reader = _getReader.apply(this.resp.body);
             // when readyState is already 4,
             // it's not a chunked stream, or it had already been read.
@@ -9783,7 +9670,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.3.0-beta.0',
+                trackerVersion: '16.3.0-beta.2',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,