@openreplay/tracker 3.5.16-beta.2 → 3.5.16-beta.3

package/cjs/app/index.d.ts

@@ -1,5 +1,5 @@
 import type Message from "../common/messages.js";
-import Nodes, { CheckOptions } from "./nodes.js";
+import Nodes from "./nodes.js";
 import Sanitizer from "./sanitizer.js";
 import Ticker from "./ticker.js";
 import Logger from "./logger.js";
@@ -46,10 +46,8 @@ declare type AppOptions = {
     __debug__?: LoggerOptions;
     localStorage: Storage;
     sessionStorage: Storage;
-    maxMemorySize: number;
-    memoryCheckInterval: number;
     onStart?: StartCallback;
-} & WebworkerOptions & CheckOptions;
+} & WebworkerOptions;
 export declare type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {

package/cjs/app/index.js

@@ -27,13 +27,12 @@ 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.16-beta.2'; // TODO: version compatability check inside each plugin.
+        this.version = '3.5.16-beta.3'; // TODO: version compatability check inside each plugin.
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',
@@ -49,12 +48,10 @@ 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.options.maxMemorySize, this.options.memoryCheckInterval);
+        this.nodes = new nodes_js_1.default(this.options.node_id);
         this.observer = new top_observer_js_1.default(this, options);
         this.ticker = new ticker_js_1.default(this);
         this.ticker.attach(() => this.commit());
@@ -320,16 +317,6 @@ 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);
@@ -366,7 +353,6 @@ class App {
     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();

package/cjs/app/nodes.d.ts

@@ -1,16 +1,10 @@
-/// <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;
-    gc: NodeJS.Timer | undefined;
-    constructor(node_id: string, maxMemorySize: CheckOptions["maxMemorySize"], memoryCheckInterval: CheckOptions["memoryCheckInterval"]);
+    constructor(node_id: string);
     attachNodeCallback(nodeCallback: NodeCallback): void;
     attachElementListener(type: string, node: Element, elementListener: EventListener): void;
     registerNode(node: Node): [id: number, isNew: boolean];

package/cjs/app/nodes.js

@@ -1,17 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class Nodes {
-    constructor(node_id, maxMemorySize, memoryCheckInterval) {
+    constructor(node_id) {
         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);
@@ -88,10 +82,6 @@ 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

@@ -32,11 +32,17 @@ function isObservable(node) {
     - fix unbinding logic + send all removals first (ensure sequence is correct)
     - use document as a 0-node in the upper context (should be updated in player at first)
 */
+/*
+  Nikita:
+    - rn we only send unbind event for parent (all child nodes will be cut in the live replay anyways)
+      to prevent sending 1k+ unbinds for child nodes and making replay file bigger than it should be
+*/
 var RecentsType;
 (function (RecentsType) {
     RecentsType[RecentsType["New"] = 0] = "New";
     RecentsType[RecentsType["Removed"] = 1] = "Removed";
     RecentsType[RecentsType["Changed"] = 2] = "Changed";
+    RecentsType[RecentsType["RemovedChild"] = 3] = "RemovedChild";
 })(RecentsType || (RecentsType = {}));
 class Observer {
     constructor(app, isTopContext = false) {
@@ -56,7 +62,7 @@ class Observer {
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        this.bindTree(mutation.removedNodes[i]);
+                        this.bindTree(mutation.removedNodes[i], true);
                     }
                     for (let i = 0; i < mutation.addedNodes.length; i++) {
                         this.bindTree(mutation.addedNodes[i]);
@@ -152,29 +158,30 @@ class Observer {
         data = this.app.sanitizer.sanitize(id, data);
         this.app.send(new messages_js_1.SetNodeData(id, data));
     }
-    bindNode(node) {
+    bindNode(node, isRemove = false) {
         const [id, isNew] = this.app.nodes.registerNode(node);
         if (isNew) {
             this.recents.set(id, RecentsType.New);
         }
         else if (this.recents.get(id) !== RecentsType.New) { // can we do just `else` here?
-            this.recents.set(id, RecentsType.Removed);
+            this.recents.set(id, isRemove ? RecentsType.RemovedChild : RecentsType.Removed);
         }
     }
-    bindTree(node) {
+    bindTree(node, isRemove = false) {
         if (!isObservable(node)) {
             return;
         }
         this.bindNode(node);
         const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
-            acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) !== undefined
+            acceptNode: (node) => isIgnored(node)
+                || (this.app.nodes.getID(node) !== undefined && !isRemove)
                 ? NodeFilter.FILTER_REJECT
                 : NodeFilter.FILTER_ACCEPT,
         }, 
         // @ts-ignore
         false);
         while (walker.nextNode()) {
-            this.bindNode(walker.currentNode);
+            this.bindNode(walker.currentNode, isRemove);
         }
     }
     unbindNode(node) {

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.16-beta.2',
+                trackerVersion: '3.5.16-beta.3',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/cjs/modules/input.js

@@ -114,11 +114,11 @@ function default_1(app, opts) {
     app.ticker.attach(() => {
         inputValues.forEach((value, id) => {
             const node = app.nodes.getNode(id);
-            if (!isTextEditable(node)) {
+            if (node && !isTextEditable(node)) {
                 inputValues.delete(id);
                 return;
             }
-            if (value !== node.value) {
+            if (node && value !== node.value) {
                 inputValues.set(id, node.value);
                 if (!registeredTargets.has(id)) {
                     registeredTargets.add(id);
@@ -129,11 +129,11 @@ function default_1(app, opts) {
         });
         checkableValues.forEach((checked, id) => {
             const node = app.nodes.getNode(id);
-            if (!isCheckable(node)) {
+            if (node && !isCheckable(node)) {
                 checkableValues.delete(id);
                 return;
             }
-            if (checked !== node.checked) {
+            if (node && checked !== node.checked) {
                 checkableValues.set(id, node.checked);
                 app.send(new messages_js_1.SetInputChecked(id, node.checked));
             }

package/lib/app/index.d.ts

@@ -1,5 +1,5 @@
 import type Message from "../common/messages.js";
-import Nodes, { CheckOptions } from "./nodes.js";
+import Nodes from "./nodes.js";
 import Sanitizer from "./sanitizer.js";
 import Ticker from "./ticker.js";
 import Logger from "./logger.js";
@@ -46,10 +46,8 @@ declare type AppOptions = {
     __debug__?: LoggerOptions;
     localStorage: Storage;
     sessionStorage: Storage;
-    maxMemorySize: number;
-    memoryCheckInterval: number;
     onStart?: StartCallback;
-} & WebworkerOptions & CheckOptions;
+} & WebworkerOptions;
 export declare type Options = AppOptions & ObserverOptions & SanitizerOptions;
 export declare const DEFAULT_INGEST_POINT = "https://api.openreplay.com/ingest";
 export default class App {

package/lib/app/index.js

@@ -24,13 +24,12 @@ 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.16-beta.2'; // TODO: version compatability check inside each plugin.
+        this.version = '3.5.16-beta.3'; // TODO: version compatability check inside each plugin.
         this.projectKey = projectKey;
         this.options = Object.assign({
             revID: '',
@@ -46,12 +45,10 @@ 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.options.maxMemorySize, this.options.memoryCheckInterval);
+        this.nodes = new Nodes(this.options.node_id);
         this.observer = new Observer(this, options);
         this.ticker = new Ticker(this);
         this.ticker.attach(() => this.commit());
@@ -317,16 +314,6 @@ 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);
@@ -363,7 +350,6 @@ export default class App {
     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();

package/lib/app/nodes.d.ts

@@ -1,16 +1,10 @@
-/// <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;
-    gc: NodeJS.Timer | undefined;
-    constructor(node_id: string, maxMemorySize: CheckOptions["maxMemorySize"], memoryCheckInterval: CheckOptions["memoryCheckInterval"]);
+    constructor(node_id: string);
     attachNodeCallback(nodeCallback: NodeCallback): void;
     attachElementListener(type: string, node: Element, elementListener: EventListener): void;
     registerNode(node: Node): [id: number, isNew: boolean];

package/lib/app/nodes.js

@@ -1,15 +1,9 @@
 export default class Nodes {
-    constructor(node_id, maxMemorySize, memoryCheckInterval) {
+    constructor(node_id) {
         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);
@@ -86,9 +80,5 @@ 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

@@ -30,11 +30,17 @@ function isObservable(node) {
     - fix unbinding logic + send all removals first (ensure sequence is correct)
     - use document as a 0-node in the upper context (should be updated in player at first)
 */
+/*
+  Nikita:
+    - rn we only send unbind event for parent (all child nodes will be cut in the live replay anyways)
+      to prevent sending 1k+ unbinds for child nodes and making replay file bigger than it should be
+*/
 var RecentsType;
 (function (RecentsType) {
     RecentsType[RecentsType["New"] = 0] = "New";
     RecentsType[RecentsType["Removed"] = 1] = "Removed";
     RecentsType[RecentsType["Changed"] = 2] = "Changed";
+    RecentsType[RecentsType["RemovedChild"] = 3] = "RemovedChild";
 })(RecentsType || (RecentsType = {}));
 export default class Observer {
     constructor(app, isTopContext = false) {
@@ -54,7 +60,7 @@ export default class Observer {
                 }
                 if (type === 'childList') {
                     for (let i = 0; i < mutation.removedNodes.length; i++) {
-                        this.bindTree(mutation.removedNodes[i]);
+                        this.bindTree(mutation.removedNodes[i], true);
                     }
                     for (let i = 0; i < mutation.addedNodes.length; i++) {
                         this.bindTree(mutation.addedNodes[i]);
@@ -150,29 +156,30 @@ export default class Observer {
         data = this.app.sanitizer.sanitize(id, data);
         this.app.send(new SetNodeData(id, data));
     }
-    bindNode(node) {
+    bindNode(node, isRemove = false) {
         const [id, isNew] = this.app.nodes.registerNode(node);
         if (isNew) {
             this.recents.set(id, RecentsType.New);
         }
         else if (this.recents.get(id) !== RecentsType.New) { // can we do just `else` here?
-            this.recents.set(id, RecentsType.Removed);
+            this.recents.set(id, isRemove ? RecentsType.RemovedChild : RecentsType.Removed);
         }
     }
-    bindTree(node) {
+    bindTree(node, isRemove = false) {
         if (!isObservable(node)) {
             return;
         }
         this.bindNode(node);
         const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
-            acceptNode: (node) => isIgnored(node) || this.app.nodes.getID(node) !== undefined
+            acceptNode: (node) => isIgnored(node)
+                || (this.app.nodes.getID(node) !== undefined && !isRemove)
                 ? NodeFilter.FILTER_REJECT
                 : NodeFilter.FILTER_ACCEPT,
         }, 
         // @ts-ignore
         false);
         while (walker.nextNode()) {
-            this.bindNode(walker.currentNode);
+            this.bindNode(walker.currentNode, isRemove);
         }
     }
     unbindNode(node) {

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.16-beta.2',
+                trackerVersion: '3.5.16-beta.3',
                 projectKey: options.projectKey,
                 doNotTrack,
                 // TODO: add precise reason (an exact API missing)

package/lib/modules/input.js

@@ -110,11 +110,11 @@ export default function (app, opts) {
     app.ticker.attach(() => {
         inputValues.forEach((value, id) => {
             const node = app.nodes.getNode(id);
-            if (!isTextEditable(node)) {
+            if (node && !isTextEditable(node)) {
                 inputValues.delete(id);
                 return;
             }
-            if (value !== node.value) {
+            if (node && value !== node.value) {
                 inputValues.set(id, node.value);
                 if (!registeredTargets.has(id)) {
                     registeredTargets.add(id);
@@ -125,11 +125,11 @@ export default function (app, opts) {
         });
         checkableValues.forEach((checked, id) => {
             const node = app.nodes.getNode(id);
-            if (!isCheckable(node)) {
+            if (node && !isCheckable(node)) {
                 checkableValues.delete(id);
                 return;
             }
-            if (checked !== node.checked) {
+            if (node && checked !== node.checked) {
                 checkableValues.set(id, node.checked);
                 app.send(new SetInputChecked(id, node.checked));
             }

package/package.json

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