@openreplay/tracker 12.0.9-beta.1 → 12.0.9-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/app/index.js +7 -1
  2. package/cjs/app/nodes.js +1 -1
  3. package/cjs/app/observer/top_observer.js +1 -0
  4. package/cjs/index.js +1 -1
  5. package/cjs/utils.d.ts +1 -8
  6. package/cjs/utils.js +53 -20
  7. package/lib/app/index.js +7 -1
  8. package/lib/app/nodes.js +1 -1
  9. package/lib/app/observer/top_observer.js +1 -0
  10. package/lib/index.js +1 -1
  11. package/lib/utils.d.ts +1 -8
  12. package/lib/utils.js +53 -20
  13. package/package.json +1 -1
package/cjs/app/index.js CHANGED
@@ -80,7 +80,7 @@ class App {
80
80
  this.stopCallbacks = [];
81
81
  this.commitCallbacks = [];
82
82
  this.activityState = ActivityState.NotActive;
83
- this.version = '12.0.9-beta.1'; // TODO: version compatability check inside each plugin.
83
+ this.version = '12.0.9-beta.4'; // TODO: version compatability check inside each plugin.
84
84
  this.compressionThreshold = 24 * 1000;
85
85
  this.restartAttempts = 0;
86
86
  this.bc = null;
@@ -956,6 +956,12 @@ class App {
956
956
  * and here we just apply 10ms delay just in case
957
957
  * */
958
958
  start(...args) {
959
+ if (this.activityState === ActivityState.Active ||
960
+ this.activityState === ActivityState.Starting) {
961
+ const reason = 'OpenReplay: trying to call `start()` on the instance that has been started already.';
962
+ return Promise.resolve(UnsuccessfulStart(reason));
963
+ }
964
+ this.activityState = ActivityState.Starting;
959
965
  if (!document.hidden) {
960
966
  return new Promise((resolve) => {
961
967
  setTimeout(() => {
package/cjs/app/nodes.js CHANGED
@@ -43,6 +43,7 @@ class Nodes {
43
43
  unregisterNode(node) {
44
44
  const id = node[this.node_id];
45
45
  if (id !== undefined) {
46
+ ;
46
47
  node[this.node_id] = undefined;
47
48
  delete node[this.node_id];
48
49
  delete this.nodes[id];
@@ -87,7 +88,6 @@ class Nodes {
87
88
  if (!node) {
88
89
  continue;
89
90
  }
90
- this.nodes[id] = undefined;
91
91
  this.unregisterNode(node);
92
92
  }
93
93
  this.nodes.length = 0;
package/cjs/app/observer/top_observer.js CHANGED
@@ -94,6 +94,7 @@ class TopObserver extends observer_js_1.default {
94
94
  observer.handleShadowRoot(shadow);
95
95
  return shadow;
96
96
  };
97
+ this.app.nodes.clear();
97
98
  // Can observe documentElement (<html>) here, because it is not supposed to be changing.
98
99
  // However, it is possible in some exotic cases and may cause an ignorance of the newly created <html>
99
100
  // In this case context.document have to be observed, but this will cause
package/cjs/index.js CHANGED
@@ -97,7 +97,7 @@ class API {
97
97
  const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
98
98
  req.open('POST', orig + '/v1/web/not-started');
99
99
  req.send(JSON.stringify({
100
- trackerVersion: '12.0.9-beta.1',
100
+ trackerVersion: '12.0.9-beta.4',
101
101
  projectKey: this.options.projectKey,
102
102
  doNotTrack,
103
103
  reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
package/cjs/utils.d.ts CHANGED
@@ -25,11 +25,4 @@ export declare function ngSafeBrowserMethod(method: string): string;
25
25
  export declare function createMutationObserver(cb: MutationCallback): MutationObserver;
26
26
  export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
27
27
  export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
28
- /**
29
- * This is a brief polyfill that suits our needs
30
- * I took inspiration from Microsoft Clarity polyfill on this one
31
- * then adapted it a little bit
32
- *
33
- * I'm very grateful for their bright idea
34
- * */
35
- export declare function requestIdleCb(callback: () => void): number | undefined;
28
+ export declare function requestIdleCb(callback: () => void): void;
package/cjs/utils.js CHANGED
@@ -143,28 +143,61 @@ function deleteEventListener(target, event, cb, capture) {
143
143
  }
144
144
  }
145
145
  exports.deleteEventListener = deleteEventListener;
146
- /**
147
- * This is a brief polyfill that suits our needs
148
- * I took inspiration from Microsoft Clarity polyfill on this one
149
- * then adapted it a little bit
150
- *
151
- * I'm very grateful for their bright idea
152
- * */
153
- function requestIdleCb(callback) {
154
- const taskTimeout = 3000;
155
- if (window.requestIdleCallback) {
156
- return window.requestIdleCallback(callback, { timeout: taskTimeout });
146
+ class FIFOTaskScheduler {
147
+ constructor() {
148
+ this.taskQueue = [];
149
+ this.isRunning = false;
150
+ }
151
+ // Adds a task to the queue
152
+ addTask(task) {
153
+ this.taskQueue.push(task);
154
+ this.runTasks();
157
155
  }
158
- else {
159
- const channel = new MessageChannel();
160
- const incoming = channel.port1;
161
- const outgoing = channel.port2;
162
- incoming.onmessage = () => {
163
- callback();
156
+ // Runs tasks from the queue
157
+ runTasks() {
158
+ if (this.isRunning || this.taskQueue.length === 0) {
159
+ return;
160
+ }
161
+ this.isRunning = true;
162
+ const executeNextTask = () => {
163
+ if (this.taskQueue.length === 0) {
164
+ this.isRunning = false;
165
+ return;
166
+ }
167
+ // Get the next task and execute it
168
+ const nextTask = this.taskQueue.shift();
169
+ Promise.resolve(nextTask()).then(() => {
170
+ requestAnimationFrame(() => executeNextTask());
171
+ });
164
172
  };
165
- requestAnimationFrame(() => {
166
- outgoing.postMessage(1);
167
- });
173
+ executeNextTask();
168
174
  }
169
175
  }
176
+ const scheduler = new FIFOTaskScheduler();
177
+ function requestIdleCb(callback) {
178
+ // performance improvement experiment;
179
+ scheduler.addTask(callback);
180
+ /**
181
+ * This is a brief polyfill that suits our needs
182
+ * I took inspiration from Microsoft Clarity polyfill on this one
183
+ * then adapted it a little bit
184
+ *
185
+ * I'm very grateful for their bright idea
186
+ * */
187
+ // const taskTimeout = 3000
188
+ // if (window.requestIdleCallback) {
189
+ // return window.requestIdleCallback(callback, { timeout: taskTimeout })
190
+ // } else {
191
+ // const channel = new MessageChannel()
192
+ // const incoming = channel.port1
193
+ // const outgoing = channel.port2
194
+ //
195
+ // incoming.onmessage = (): void => {
196
+ // callback()
197
+ // }
198
+ // requestAnimationFrame((): void => {
199
+ // outgoing.postMessage(1)
200
+ // })
201
+ // }
202
+ }
170
203
  exports.requestIdleCb = requestIdleCb;
package/lib/app/index.js CHANGED
@@ -51,7 +51,7 @@ export default class App {
51
51
  this.stopCallbacks = [];
52
52
  this.commitCallbacks = [];
53
53
  this.activityState = ActivityState.NotActive;
54
- this.version = '12.0.9-beta.1'; // TODO: version compatability check inside each plugin.
54
+ this.version = '12.0.9-beta.4'; // TODO: version compatability check inside each plugin.
55
55
  this.compressionThreshold = 24 * 1000;
56
56
  this.restartAttempts = 0;
57
57
  this.bc = null;
@@ -927,6 +927,12 @@ export default class App {
927
927
  * and here we just apply 10ms delay just in case
928
928
  * */
929
929
  start(...args) {
930
+ if (this.activityState === ActivityState.Active ||
931
+ this.activityState === ActivityState.Starting) {
932
+ const reason = 'OpenReplay: trying to call `start()` on the instance that has been started already.';
933
+ return Promise.resolve(UnsuccessfulStart(reason));
934
+ }
935
+ this.activityState = ActivityState.Starting;
930
936
  if (!document.hidden) {
931
937
  return new Promise((resolve) => {
932
938
  setTimeout(() => {
package/lib/app/nodes.js CHANGED
@@ -41,6 +41,7 @@ export default class Nodes {
41
41
  unregisterNode(node) {
42
42
  const id = node[this.node_id];
43
43
  if (id !== undefined) {
44
+ ;
44
45
  node[this.node_id] = undefined;
45
46
  delete node[this.node_id];
46
47
  delete this.nodes[id];
@@ -85,7 +86,6 @@ export default class Nodes {
85
86
  if (!node) {
86
87
  continue;
87
88
  }
88
- this.nodes[id] = undefined;
89
89
  this.unregisterNode(node);
90
90
  }
91
91
  this.nodes.length = 0;
package/lib/app/observer/top_observer.js CHANGED
@@ -89,6 +89,7 @@ export default class TopObserver extends Observer {
89
89
  observer.handleShadowRoot(shadow);
90
90
  return shadow;
91
91
  };
92
+ this.app.nodes.clear();
92
93
  // Can observe documentElement (<html>) here, because it is not supposed to be changing.
93
94
  // However, it is possible in some exotic cases and may cause an ignorance of the newly created <html>
94
95
  // In this case context.document have to be observed, but this will cause
package/lib/index.js CHANGED
@@ -66,7 +66,7 @@ export default class API {
66
66
  const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
67
67
  req.open('POST', orig + '/v1/web/not-started');
68
68
  req.send(JSON.stringify({
69
- trackerVersion: '12.0.9-beta.1',
69
+ trackerVersion: '12.0.9-beta.4',
70
70
  projectKey: this.options.projectKey,
71
71
  doNotTrack,
72
72
  reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
package/lib/utils.d.ts CHANGED
@@ -25,11 +25,4 @@ export declare function ngSafeBrowserMethod(method: string): string;
25
25
  export declare function createMutationObserver(cb: MutationCallback): MutationObserver;
26
26
  export declare function createEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
27
27
  export declare function deleteEventListener(target: EventTarget, event: string, cb: EventListenerOrEventListenerObject, capture?: boolean): void;
28
- /**
29
- * This is a brief polyfill that suits our needs
30
- * I took inspiration from Microsoft Clarity polyfill on this one
31
- * then adapted it a little bit
32
- *
33
- * I'm very grateful for their bright idea
34
- * */
35
- export declare function requestIdleCb(callback: () => void): number | undefined;
28
+ export declare function requestIdleCb(callback: () => void): void;
package/lib/utils.js CHANGED
@@ -126,27 +126,60 @@ export function deleteEventListener(target, event, cb, capture) {
126
126
  `Openreplay: ${e.messages}; if this error is caused by an IframeObserver, ignore it`);
127
127
  }
128
128
  }
129
- /**
130
- * This is a brief polyfill that suits our needs
131
- * I took inspiration from Microsoft Clarity polyfill on this one
132
- * then adapted it a little bit
133
- *
134
- * I'm very grateful for their bright idea
135
- * */
136
- export function requestIdleCb(callback) {
137
- const taskTimeout = 3000;
138
- if (window.requestIdleCallback) {
139
- return window.requestIdleCallback(callback, { timeout: taskTimeout });
129
+ class FIFOTaskScheduler {
130
+ constructor() {
131
+ this.taskQueue = [];
132
+ this.isRunning = false;
133
+ }
134
+ // Adds a task to the queue
135
+ addTask(task) {
136
+ this.taskQueue.push(task);
137
+ this.runTasks();
140
138
  }
141
- else {
142
- const channel = new MessageChannel();
143
- const incoming = channel.port1;
144
- const outgoing = channel.port2;
145
- incoming.onmessage = () => {
146
- callback();
139
+ // Runs tasks from the queue
140
+ runTasks() {
141
+ if (this.isRunning || this.taskQueue.length === 0) {
142
+ return;
143
+ }
144
+ this.isRunning = true;
145
+ const executeNextTask = () => {
146
+ if (this.taskQueue.length === 0) {
147
+ this.isRunning = false;
148
+ return;
149
+ }
150
+ // Get the next task and execute it
151
+ const nextTask = this.taskQueue.shift();
152
+ Promise.resolve(nextTask()).then(() => {
153
+ requestAnimationFrame(() => executeNextTask());
154
+ });
147
155
  };
148
- requestAnimationFrame(() => {
149
- outgoing.postMessage(1);
150
- });
156
+ executeNextTask();
151
157
  }
152
158
  }
159
+ const scheduler = new FIFOTaskScheduler();
160
+ export function requestIdleCb(callback) {
161
+ // performance improvement experiment;
162
+ scheduler.addTask(callback);
163
+ /**
164
+ * This is a brief polyfill that suits our needs
165
+ * I took inspiration from Microsoft Clarity polyfill on this one
166
+ * then adapted it a little bit
167
+ *
168
+ * I'm very grateful for their bright idea
169
+ * */
170
+ // const taskTimeout = 3000
171
+ // if (window.requestIdleCallback) {
172
+ // return window.requestIdleCallback(callback, { timeout: taskTimeout })
173
+ // } else {
174
+ // const channel = new MessageChannel()
175
+ // const incoming = channel.port1
176
+ // const outgoing = channel.port2
177
+ //
178
+ // incoming.onmessage = (): void => {
179
+ // callback()
180
+ // }
181
+ // requestAnimationFrame((): void => {
182
+ // outgoing.postMessage(1)
183
+ // })
184
+ // }
185
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@openreplay/tracker",
3
3
  "description": "The OpenReplay tracker main package",
4
- "version": "12.0.9-beta.1",
4
+ "version": "12.0.9-beta.4",
5
5
  "keywords": [
6
6
  "logging",
7
7
  "replay"