@openreplay/tracker 3.5.15-beta.0 → 3.5.16-beta.2

package/cjs/app/index.d.ts

@@ -1,5 +1,5 @@
 import type Message from "../common/messages.js";
-import Nodes from "./nodes.js";
+import Nodes, { CheckOptions } from "./nodes.js";
 import Sanitizer from "./sanitizer.js";
 import Ticker from "./ticker.js";
 import Logger from "./logger.js";
@@ -46,8 +46,10 @@ declare type AppOptions = {
     __debug__?: LoggerOptions;
     localStorage: Storage;
     sessionStorage: Storage;
+    maxMemorySize: number;
+    memoryCheckInterval: number;
     onStart?: StartCallback;
-} & WebworkerOptions;
+} & WebworkerOptions & CheckOptions;
 export declare type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
@@ -103,6 +105,7 @@ export default class App {
     resetNextPageSession(flag: boolean): void;
     private _start;
     start(options?: StartOptions): Promise<StartPromiseReturn>;
-    stop(calledFromAPI?: boolean): void;
+    stop(calledFromAPI?: boolean, restarting?: boolean): void;
+    restart(): void;
 }
 export {};

package/cjs/app/index.js

@@ -27,12 +27,13 @@ class App {
         // if (options.onStart !== undefined) {
         //   deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
         // } ?? maybe onStart is good
+        // private gc?: NodeJS.Timer = undefined;
         this.messages = [];
         this.startCallbacks = [];
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '3.5.15-beta.0'; // TODO: version compatability check inside each plugin.
+        this.version = '3.5.16-beta.2'; // TODO: version compatability check inside each plugin.
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',
@@ -48,10 +49,12 @@ class App {
             __debug_report_edp: null,
             localStorage: window.localStorage,
             sessionStorage: window.sessionStorage,
+            maxMemorySize: 550 * 1e6,
+            memoryCheckInterval: 2 * 60 * 1000,
         }, options);
         this.revID = this.options.revID;
         this.sanitizer = new sanitizer_js_1.default(this, options);
-        this.nodes = new nodes_js_1.default(this.options.node_id);
+        this.nodes = new nodes_js_1.default(this.options.node_id, this.options.maxMemorySize, this.options.memoryCheckInterval);
         this.observer = new top_observer_js_1.default(this, options);
         this.ticker = new ticker_js_1.default(this);
         this.ticker.attach(() => this.commit());
@@ -143,6 +146,7 @@ class App {
                 fn.apply(this, args);
             }
             catch (e) {
+                console.error(e);
                 app._debug("safe_fn_call", e);
                 // time: timestamp(),
                 // name: e.name,
@@ -316,6 +320,16 @@ class App {
             this.observer.observe();
             this.ticker.start();
             this.notify.log("OpenReplay tracking started.");
+            // // GC
+            // if (!this.gc) {
+            //   this.gc = setInterval(() => {
+            //   console.log('checking')
+            //   // @ts-ignore
+            //   if (window.performance.memory.usedJSHeapSize > this.options.maxMemorySize) {
+            //     this.restart();
+            //   }
+            //   }, this.options.memoryCheckInterval)
+            // }
             // get rid of onStart ?
             if (typeof this.options.onStart === 'function') {
                 this.options.onStart(onStartInfo);
@@ -349,9 +363,10 @@ class App {
             });
         }
     }
-    stop(calledFromAPI = false) {
+    stop(calledFromAPI = false, restarting = false) {
         if (this.activityState !== ActivityState.NotActive) {
             try {
+                // this.gc && clearInterval(this.gc)
                 this.sanitizer.clear();
                 this.observer.disconnect();
                 this.nodes.clear();
@@ -361,7 +376,7 @@ class App {
                     this.session.reset();
                 }
                 this.notify.log("OpenReplay tracking stopped.");
-                if (this.worker) {
+                if (this.worker && !restarting) {
                     this.worker.postMessage("stop");
                 }
             }
@@ -370,5 +385,9 @@ class App {
             }
         }
     }
+    restart() {
+        this.stop(false, true);
+        this.start({ forceNew: false });
+    }
 }
 exports.default = App;

package/cjs/app/nodes.d.ts

@@ -1,15 +1,21 @@
+/// <reference types="node" resolution-mode="require"/>
 declare type NodeCallback = (node: Node, isStart: boolean) => void;
+export interface CheckOptions {
+    maxMemorySize: number;
+    memoryCheckInterval: number;
+}
 export default class Nodes {
     private readonly node_id;
     private nodes;
     private readonly nodeCallbacks;
     private readonly elementListeners;
-    constructor(node_id: string);
+    gc: NodeJS.Timer | undefined;
+    constructor(node_id: string, maxMemorySize: CheckOptions["maxMemorySize"], memoryCheckInterval: CheckOptions["memoryCheckInterval"]);
     attachNodeCallback(nodeCallback: NodeCallback): void;
     attachElementListener(type: string, node: Element, elementListener: EventListener): void;
     registerNode(node: Node): [id: number, isNew: boolean];
     unregisterNode(node: Node): number | undefined;
-    cleanTree(): (Node | undefined)[];
+    cleanTree(): void;
     callNodeCallbacks(node: Node, isStart: boolean): void;
     getID(node: Node): number | undefined;
     getNode(id: number): Node | undefined;

package/cjs/app/nodes.js

@@ -1,11 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class Nodes {
-    constructor(node_id) {
+    constructor(node_id, maxMemorySize, memoryCheckInterval) {
         this.node_id = node_id;
         this.nodes = [];
         this.nodeCallbacks = [];
         this.elementListeners = new Map();
+        this.gc = setInterval(() => {
+            // @ts-ignore should use settings object here
+            if (window.performance.memory.usedJSHeapSize > maxMemorySize) {
+                this.cleanTree();
+            }
+        }, memoryCheckInterval);
     }
     attachNodeCallback(nodeCallback) {
         this.nodeCallbacks.push(nodeCallback);
@@ -48,7 +54,21 @@ class Nodes {
         return id;
     }
     cleanTree() {
-        return this.nodes = this.nodes.filter((n) => n !== undefined);
+        // sadly we keep empty items in array here resulting in some memory still being used
+        // but its still better than keeping dead nodes or undef elements
+        // plus we keep our index positions for new/alive nodes
+        // performance test: 3ms for 30k nodes with 17k dead ones
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (node === undefined) {
+                delete this.nodes[i];
+                continue;
+            }
+            if (!document.contains(node)) {
+                this.unregisterNode(node);
+                delete this.nodes[i];
+            }
+        }
     }
     callNodeCallbacks(node, isStart) {
         this.nodeCallbacks.forEach((cb) => cb(node, isStart));
@@ -68,6 +88,10 @@ class Nodes {
             this.unregisterNode(node);
         }
         this.nodes.length = 0;
+        if (this.gc) {
+            clearInterval(this.gc);
+            this.gc = undefined;
+        }
     }
 }
 exports.default = Nodes;

package/cjs/app/observer/observer.js

@@ -51,16 +51,12 @@ class Observer {
             for (const mutation of mutations) { // mutations order is sequential
                 const target = mutation.target;
                 const type = mutation.type;
-                // const deleted: number[] = [];
                 if (!isObservable(target)) {
                     continue;
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        // this.bindTree(mutation.removedNodes[i]);
-                        const id = this.unbindNode(mutation.removedNodes[i]);
-                        // id && this.recents.delete(id)
-                        // id && deleted.push(id)
+                        this.bindTree(mutation.removedNodes[i]);
                     }
                     for (let i = 0; i < mutation.addedNodes.length; i++) {
                         this.bindTree(mutation.addedNodes[i]);
@@ -92,7 +88,6 @@ class Observer {
                 }
             }
             this.commitNodes();
-            this.app.nodes.cleanTree();
         }));
     }
     clear() {

package/cjs/index.js

@@ -127,7 +127,7 @@ class API {
             // 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: '3.5.15-beta.0',
+                trackerVersion: '3.5.16-beta.2',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/lib/app/index.d.ts

@@ -1,5 +1,5 @@
 import type Message from "../common/messages.js";
-import Nodes from "./nodes.js";
+import Nodes, { CheckOptions } from "./nodes.js";
 import Sanitizer from "./sanitizer.js";
 import Ticker from "./ticker.js";
 import Logger from "./logger.js";
@@ -46,8 +46,10 @@ declare type AppOptions = {
     __debug__?: LoggerOptions;
     localStorage: Storage;
     sessionStorage: Storage;
+    maxMemorySize: number;
+    memoryCheckInterval: number;
     onStart?: StartCallback;
-} & WebworkerOptions;
+} & WebworkerOptions & CheckOptions;
 export declare type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {
@@ -103,6 +105,7 @@ export default class App {
     resetNextPageSession(flag: boolean): void;
     private _start;
     start(options?: StartOptions): Promise<StartPromiseReturn>;
-    stop(calledFromAPI?: boolean): void;
+    stop(calledFromAPI?: boolean, restarting?: boolean): void;
+    restart(): void;
 }
 export {};

package/lib/app/index.js

@@ -24,12 +24,13 @@ export default class App {
         // if (options.onStart !== undefined) {
         //   deprecationWarn("'onStart' option", "tracker.start().then(/* handle session info */)")
         // } ?? maybe onStart is good
+        // private gc?: NodeJS.Timer = undefined;
         this.messages = [];
         this.startCallbacks = [];
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '3.5.15-beta.0'; // TODO: version compatability check inside each plugin.
+        this.version = '3.5.16-beta.2'; // TODO: version compatability check inside each plugin.
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',
@@ -45,10 +46,12 @@ export default class App {
             __debug_report_edp: null,
             localStorage: window.localStorage,
             sessionStorage: window.sessionStorage,
+            maxMemorySize: 550 * 1e6,
+            memoryCheckInterval: 2 * 60 * 1000,
         }, options);
         this.revID = this.options.revID;
         this.sanitizer = new Sanitizer(this, options);
-        this.nodes = new Nodes(this.options.node_id);
+        this.nodes = new Nodes(this.options.node_id, this.options.maxMemorySize, this.options.memoryCheckInterval);
         this.observer = new Observer(this, options);
         this.ticker = new Ticker(this);
         this.ticker.attach(() => this.commit());
@@ -140,6 +143,7 @@ export default class App {
                 fn.apply(this, args);
             }
             catch (e) {
+                console.error(e);
                 app._debug("safe_fn_call", e);
                 // time: timestamp(),
                 // name: e.name,
@@ -313,6 +317,16 @@ export default class App {
             this.observer.observe();
             this.ticker.start();
             this.notify.log("OpenReplay tracking started.");
+            // // GC
+            // if (!this.gc) {
+            //   this.gc = setInterval(() => {
+            //   console.log('checking')
+            //   // @ts-ignore
+            //   if (window.performance.memory.usedJSHeapSize > this.options.maxMemorySize) {
+            //     this.restart();
+            //   }
+            //   }, this.options.memoryCheckInterval)
+            // }
             // get rid of onStart ?
             if (typeof this.options.onStart === 'function') {
                 this.options.onStart(onStartInfo);
@@ -346,9 +360,10 @@ export default class App {
             });
         }
     }
-    stop(calledFromAPI = false) {
+    stop(calledFromAPI = false, restarting = false) {
         if (this.activityState !== ActivityState.NotActive) {
             try {
+                // this.gc && clearInterval(this.gc)
                 this.sanitizer.clear();
                 this.observer.disconnect();
                 this.nodes.clear();
@@ -358,7 +373,7 @@ export default class App {
                     this.session.reset();
                 }
                 this.notify.log("OpenReplay tracking stopped.");
-                if (this.worker) {
+                if (this.worker && !restarting) {
                     this.worker.postMessage("stop");
                 }
             }
@@ -367,4 +382,8 @@ export default class App {
             }
         }
     }
+    restart() {
+        this.stop(false, true);
+        this.start({ forceNew: false });
+    }
 }

package/lib/app/nodes.d.ts

@@ -1,15 +1,21 @@
+/// <reference types="node" resolution-mode="require"/>
 declare type NodeCallback = (node: Node, isStart: boolean) => void;
+export interface CheckOptions {
+    maxMemorySize: number;
+    memoryCheckInterval: number;
+}
 export default class Nodes {
     private readonly node_id;
     private nodes;
     private readonly nodeCallbacks;
     private readonly elementListeners;
-    constructor(node_id: string);
+    gc: NodeJS.Timer | undefined;
+    constructor(node_id: string, maxMemorySize: CheckOptions["maxMemorySize"], memoryCheckInterval: CheckOptions["memoryCheckInterval"]);
     attachNodeCallback(nodeCallback: NodeCallback): void;
     attachElementListener(type: string, node: Element, elementListener: EventListener): void;
     registerNode(node: Node): [id: number, isNew: boolean];
     unregisterNode(node: Node): number | undefined;
-    cleanTree(): (Node | undefined)[];
+    cleanTree(): void;
     callNodeCallbacks(node: Node, isStart: boolean): void;
     getID(node: Node): number | undefined;
     getNode(id: number): Node | undefined;

package/lib/app/nodes.js

@@ -1,9 +1,15 @@
 export default class Nodes {
-    constructor(node_id) {
+    constructor(node_id, maxMemorySize, memoryCheckInterval) {
         this.node_id = node_id;
         this.nodes = [];
         this.nodeCallbacks = [];
         this.elementListeners = new Map();
+        this.gc = setInterval(() => {
+            // @ts-ignore should use settings object here
+            if (window.performance.memory.usedJSHeapSize > maxMemorySize) {
+                this.cleanTree();
+            }
+        }, memoryCheckInterval);
     }
     attachNodeCallback(nodeCallback) {
         this.nodeCallbacks.push(nodeCallback);
@@ -46,7 +52,21 @@ export default class Nodes {
         return id;
     }
     cleanTree() {
-        return this.nodes = this.nodes.filter((n) => n !== undefined);
+        // sadly we keep empty items in array here resulting in some memory still being used
+        // but its still better than keeping dead nodes or undef elements
+        // plus we keep our index positions for new/alive nodes
+        // performance test: 3ms for 30k nodes with 17k dead ones
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (node === undefined) {
+                delete this.nodes[i];
+                continue;
+            }
+            if (!document.contains(node)) {
+                this.unregisterNode(node);
+                delete this.nodes[i];
+            }
+        }
     }
     callNodeCallbacks(node, isStart) {
         this.nodeCallbacks.forEach((cb) => cb(node, isStart));
@@ -66,5 +86,9 @@ export default class Nodes {
             this.unregisterNode(node);
         }
         this.nodes.length = 0;
+        if (this.gc) {
+            clearInterval(this.gc);
+            this.gc = undefined;
+        }
     }
 }

package/lib/app/observer/observer.js

@@ -49,16 +49,12 @@ export default class Observer {
             for (const mutation of mutations) { // mutations order is sequential
                 const target = mutation.target;
                 const type = mutation.type;
-                // const deleted: number[] = [];
                 if (!isObservable(target)) {
                     continue;
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        // this.bindTree(mutation.removedNodes[i]);
-                        const id = this.unbindNode(mutation.removedNodes[i]);
-                        // id && this.recents.delete(id)
-                        // id && deleted.push(id)
+                        this.bindTree(mutation.removedNodes[i]);
                     }
                     for (let i = 0; i < mutation.addedNodes.length; i++) {
                         this.bindTree(mutation.addedNodes[i]);
@@ -90,7 +86,6 @@ export default class Observer {
                 }
             }
             this.commitNodes();
-            this.app.nodes.cleanTree();
         }));
     }
     clear() {

package/lib/index.js

@@ -123,7 +123,7 @@ export default class API {
             // 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: '3.5.15-beta.0',
+                trackerVersion: '3.5.16-beta.2',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.5.15-beta.0",
+  "version": "3.5.16-beta.2",
   "keywords": [
     "logging",
     "replay"