@openreplay/tracker 12.0.2 → 12.0.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.
- package/CHANGELOG.md +11 -0
- package/bun.lockb +0 -0
- package/cjs/app/canvas.d.ts +1 -0
- package/cjs/app/canvas.js +18 -4
- package/cjs/app/index.d.ts +2 -0
- package/cjs/app/index.js +9 -10
- package/cjs/app/sanitizer.js +1 -1
- package/cjs/index.js +1 -1
- package/cjs/modules/constructedStyleSheets.js +1 -1
- package/lib/app/canvas.d.ts +1 -0
- package/lib/app/canvas.js +18 -4
- package/lib/app/index.d.ts +2 -0
- package/lib/app/index.js +9 -10
- package/lib/app/sanitizer.js +1 -1
- package/lib/index.js +1 -1
- package/lib/modules/constructedStyleSheets.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
# 12.0.4
|
|
2
|
+
|
|
3
|
+
- patch for email sanitizer (supports + now)
|
|
4
|
+
- update fflate version for better compression
|
|
5
|
+
- `disableCanvas` option to disable canvas capture
|
|
6
|
+
- better check for adopted stylesheets in doc (old browser support)
|
|
7
|
+
|
|
8
|
+
# 12.0.3
|
|
9
|
+
|
|
10
|
+
- fixed scaling option for canvas (to ignore window.devicePixelRatio and always render the canvas as 1)
|
|
11
|
+
|
|
1
12
|
# 12.0.2
|
|
2
13
|
|
|
3
14
|
- fix for canvas snapshot check
|
package/bun.lockb
CHANGED
|
Binary file
|
package/cjs/app/canvas.d.ts
CHANGED
package/cjs/app/canvas.js
CHANGED
|
@@ -54,6 +54,7 @@ class CanvasRecorder {
|
|
|
54
54
|
images: [],
|
|
55
55
|
createdAt: ts,
|
|
56
56
|
paused: false,
|
|
57
|
+
dummy: document.createElement('canvas'),
|
|
57
58
|
};
|
|
58
59
|
const canvasMsg = (0, messages_gen_js_1.CanvasNode)(id.toString(), ts);
|
|
59
60
|
this.app.send(canvasMsg);
|
|
@@ -66,7 +67,7 @@ class CanvasRecorder {
|
|
|
66
67
|
}
|
|
67
68
|
else {
|
|
68
69
|
if (!this.snapshots[id].paused) {
|
|
69
|
-
const snapshot = captureSnapshot(canvas, this.options.quality);
|
|
70
|
+
const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
|
|
70
71
|
this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
|
|
71
72
|
if (this.snapshots[id].images.length > 9) {
|
|
72
73
|
this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
|
|
@@ -122,13 +123,26 @@ class CanvasRecorder {
|
|
|
122
123
|
}
|
|
123
124
|
}
|
|
124
125
|
const qualityInt = {
|
|
125
|
-
low: 0.
|
|
126
|
+
low: 0.35,
|
|
126
127
|
medium: 0.55,
|
|
127
128
|
high: 0.8,
|
|
128
129
|
};
|
|
129
|
-
function captureSnapshot(canvas, quality = 'medium') {
|
|
130
|
+
function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
|
|
130
131
|
const imageFormat = 'image/jpeg'; // or /png'
|
|
131
|
-
|
|
132
|
+
if (fixedScaling) {
|
|
133
|
+
const canvasScaleRatio = window.devicePixelRatio || 1;
|
|
134
|
+
dummy.width = canvas.width / canvasScaleRatio;
|
|
135
|
+
dummy.height = canvas.height / canvasScaleRatio;
|
|
136
|
+
const ctx = dummy.getContext('2d');
|
|
137
|
+
if (!ctx) {
|
|
138
|
+
return '';
|
|
139
|
+
}
|
|
140
|
+
ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height);
|
|
141
|
+
return dummy.toDataURL(imageFormat, qualityInt[quality]);
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
return canvas.toDataURL(imageFormat, qualityInt[quality]);
|
|
145
|
+
}
|
|
132
146
|
}
|
|
133
147
|
function dataUrlToBlob(dataUrl) {
|
|
134
148
|
const [header, base64] = dataUrl.split(',');
|
package/cjs/app/index.d.ts
CHANGED
|
@@ -50,11 +50,13 @@ type AppOptions = {
|
|
|
50
50
|
__debug_report_edp: string | null;
|
|
51
51
|
__debug__?: ILogLevel;
|
|
52
52
|
__save_canvas_locally?: boolean;
|
|
53
|
+
fixedCanvasScaling?: boolean;
|
|
53
54
|
localStorage: Storage | null;
|
|
54
55
|
sessionStorage: Storage | null;
|
|
55
56
|
forceSingleTab?: boolean;
|
|
56
57
|
disableStringDict?: boolean;
|
|
57
58
|
assistSocketHost?: string;
|
|
59
|
+
disableCanvas?: boolean;
|
|
58
60
|
/** @deprecated */
|
|
59
61
|
onStart?: StartCallback;
|
|
60
62
|
network?: NetworkOptions;
|
package/cjs/app/index.js
CHANGED
|
@@ -81,7 +81,7 @@ class App {
|
|
|
81
81
|
this.stopCallbacks = [];
|
|
82
82
|
this.commitCallbacks = [];
|
|
83
83
|
this.activityState = ActivityState.NotActive;
|
|
84
|
-
this.version = '12.0.
|
|
84
|
+
this.version = '12.0.4'; // TODO: version compatability check inside each plugin.
|
|
85
85
|
this.compressionThreshold = 24 * 1000;
|
|
86
86
|
this.restartAttempts = 0;
|
|
87
87
|
this.bc = null;
|
|
@@ -141,6 +141,8 @@ class App {
|
|
|
141
141
|
disableStringDict: false,
|
|
142
142
|
forceSingleTab: false,
|
|
143
143
|
assistSocketHost: '',
|
|
144
|
+
fixedCanvasScaling: false,
|
|
145
|
+
disableCanvas: false,
|
|
144
146
|
}, options);
|
|
145
147
|
if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
|
|
146
148
|
const host = location.hostname.split('.').slice(-2).join('_');
|
|
@@ -175,7 +177,7 @@ class App {
|
|
|
175
177
|
this.session.applySessionHash(sessionToken);
|
|
176
178
|
}
|
|
177
179
|
try {
|
|
178
|
-
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=
|
|
180
|
+
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=250,h){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.ingestURL=t+"/v1/web/i",this.isCompressing=void 0!==h}getQueueStatus(){return 0===this.queue.length&&!this.busy}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){this.busy||!this.token?this.queue.push(t):(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t))}sendNext(){const t=this.queue.shift();t?(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t)):this.busy=!1}retry(t,s){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s){this.busy=!0;const i={Authorization:`Bearer ${this.token}`};s&&(i["Content-Encoding"]="gzip"),null!==this.token?fetch(this.ingestURL,{body:t,method:"POST",headers:i,keepalive:t.length<65536}).then((i=>{if(401===i.status)return this.busy=!1,void this.onUnauthorised();i.status>=400?this.retry(t,s):(this.attemptsCount=0,this.sendNext())})).catch((i=>{console.warn("OpenReplay:",i),this.retry(t,s)})):setTimeout((()=>{this.sendBatch(t,s)}),500)}sendCompressed(t){this.sendBatch(t,!0)}sendUncompressed(t){this.sendBatch(t,!1)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s="function"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 63:case 64:case 79:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:case 120:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 84:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2])}}}class n{constructor(t,s,i,n,h,r){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.onOfflineEnd=r,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn("OpenReplay: max message size overflow."),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){if("q_end"===t[0])return this.finaliseBatch(),this.onOfflineEnd();0===t[0]&&(this.timestamp=t[1]),4===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn("OpenReplay: beacon size overflow. Skipping large message.",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]="NotActive",t[t.Starting=1]="Starting",t[t.Stopping=2]="Stopping",t[t.Active=3]="Active",t[t.Stopped=4]="Stopped"}(h||(h={}));let r=null,u=null,a=h.NotActive;function o(){u&&u.finaliseBatch()}function c(){a=h.Stopping,null!==g&&(clearInterval(g),g=null),u&&(u.clean(),u=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{a=h.NotActive}),100)}function p(){a!==h.Stopped&&(postMessage("restart"),c())}let f,g=null;self.onmessage=({data:s})=>{if(null!=s){if("stop"===s)return o(),c(),a=h.Stopped;if("forceFlushBatch"!==s){if(!Array.isArray(s)){if("compressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Compressed batch."),void p();s.batch&&r.sendCompressed(s.batch)}if("uncompressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Uncompressed batch."),void p();s.batch&&r.sendUncompressed(s.batch)}return"start"===s.type?(a=h.Starting,r=new t(s.ingestPoint,(()=>{p()}),(t=>{!function(t){postMessage({type:"failure",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:"compress",batch:t},[t.buffer])})),u=new n(s.pageNo,s.timestamp,s.url,(t=>{r&&r.push(t)}),s.tabId,(()=>postMessage({type:"queue_empty"}))),null===g&&(g=setInterval(o,1e4)),a=h.Active):"auth"===s.type?r?u?(r.authorise(s.token),void(s.beaconSizeLimit&&u.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug("OR WebWorker: writer not initialised. Received auth."),void p()):(console.debug("OR WebWorker: sender not initialised. Received auth."),void p()):void 0}if(u){const t=u;s.forEach((s=>{55===s[0]&&(s[1]?f=setTimeout((()=>p()),18e5):clearTimeout(f)),t.writeMessage(s)}))}else postMessage("not_init"),p()}else o()}else o()};'], { type: 'text/javascript' })));
|
|
179
181
|
this.worker.onerror = (e) => {
|
|
180
182
|
this._debug('webworker_error', e);
|
|
181
183
|
};
|
|
@@ -198,17 +200,13 @@ class App {
|
|
|
198
200
|
const batchSize = batch.byteLength;
|
|
199
201
|
if (batchSize > this.compressionThreshold) {
|
|
200
202
|
(0, fflate_1.gzip)(data.batch, { mtime: 0 }, (err, result) => {
|
|
201
|
-
var _a;
|
|
203
|
+
var _a, _b;
|
|
202
204
|
if (err) {
|
|
203
205
|
this.debug.error('Openreplay compression error:', err);
|
|
204
|
-
this.
|
|
205
|
-
if (this.restartAttempts < 3) {
|
|
206
|
-
this.restartAttempts += 1;
|
|
207
|
-
void this.start({}, true);
|
|
208
|
-
}
|
|
206
|
+
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'uncompressed', batch: batch });
|
|
209
207
|
}
|
|
210
208
|
else {
|
|
211
|
-
(
|
|
209
|
+
(_b = this.worker) === null || _b === void 0 ? void 0 : _b.postMessage({ type: 'compressed', batch: result });
|
|
212
210
|
}
|
|
213
211
|
});
|
|
214
212
|
}
|
|
@@ -839,12 +837,13 @@ class App {
|
|
|
839
837
|
void this.featureFlags.reloadFlags();
|
|
840
838
|
await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
|
|
841
839
|
this.activityState = ActivityState.Active;
|
|
842
|
-
if (canvasEnabled) {
|
|
840
|
+
if (canvasEnabled && !this.options.disableCanvas) {
|
|
843
841
|
this.canvasRecorder =
|
|
844
842
|
(_a = this.canvasRecorder) !== null && _a !== void 0 ? _a : new canvas_js_1.default(this, {
|
|
845
843
|
fps: canvasFPS,
|
|
846
844
|
quality: canvasQuality,
|
|
847
845
|
isDebug: this.options.__save_canvas_locally,
|
|
846
|
+
fixedScaling: this.options.fixedCanvasScaling,
|
|
848
847
|
});
|
|
849
848
|
this.canvasRecorder.startTracking();
|
|
850
849
|
}
|
package/cjs/app/sanitizer.js
CHANGED
|
@@ -53,7 +53,7 @@ class Sanitizer {
|
|
|
53
53
|
data = data.replace(/\d/g, '0');
|
|
54
54
|
}
|
|
55
55
|
if (this.options.obscureTextEmails) {
|
|
56
|
-
data = data.replace(/^\w+([
|
|
56
|
+
data = data.replace(/^\w+([+.-]\w+)*@\w+([.-]\w+)*\.\w{2,3}$/g, (email) => {
|
|
57
57
|
const [name, domain] = email.split('@');
|
|
58
58
|
const [domainName, host] = domain.split('.');
|
|
59
59
|
return `${(0, utils_js_1.stars)(name)}@${(0, utils_js_1.stars)(domainName)}.${(0, utils_js_1.stars)(host)}`;
|
package/cjs/index.js
CHANGED
|
@@ -98,7 +98,7 @@ class API {
|
|
|
98
98
|
const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
|
|
99
99
|
req.open('POST', orig + '/v1/web/not-started');
|
|
100
100
|
req.send(JSON.stringify({
|
|
101
|
-
trackerVersion: '12.0.
|
|
101
|
+
trackerVersion: '12.0.4',
|
|
102
102
|
projectKey: this.options.projectKey,
|
|
103
103
|
doNotTrack,
|
|
104
104
|
reason,
|
|
@@ -38,7 +38,7 @@ function default_1(app) {
|
|
|
38
38
|
}
|
|
39
39
|
const nowOwning = [];
|
|
40
40
|
const styleSheets = root.adoptedStyleSheets;
|
|
41
|
-
if (Symbol.iterator in styleSheets) {
|
|
41
|
+
if (styleSheets && Symbol.iterator in styleSheets) {
|
|
42
42
|
for (const s of styleSheets) {
|
|
43
43
|
let sheetID = styleSheetIDMap.get(s);
|
|
44
44
|
const init = !sheetID;
|
package/lib/app/canvas.d.ts
CHANGED
package/lib/app/canvas.js
CHANGED
|
@@ -52,6 +52,7 @@ class CanvasRecorder {
|
|
|
52
52
|
images: [],
|
|
53
53
|
createdAt: ts,
|
|
54
54
|
paused: false,
|
|
55
|
+
dummy: document.createElement('canvas'),
|
|
55
56
|
};
|
|
56
57
|
const canvasMsg = CanvasNode(id.toString(), ts);
|
|
57
58
|
this.app.send(canvasMsg);
|
|
@@ -64,7 +65,7 @@ class CanvasRecorder {
|
|
|
64
65
|
}
|
|
65
66
|
else {
|
|
66
67
|
if (!this.snapshots[id].paused) {
|
|
67
|
-
const snapshot = captureSnapshot(canvas, this.options.quality);
|
|
68
|
+
const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
|
|
68
69
|
this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
|
|
69
70
|
if (this.snapshots[id].images.length > 9) {
|
|
70
71
|
this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
|
|
@@ -120,13 +121,26 @@ class CanvasRecorder {
|
|
|
120
121
|
}
|
|
121
122
|
}
|
|
122
123
|
const qualityInt = {
|
|
123
|
-
low: 0.
|
|
124
|
+
low: 0.35,
|
|
124
125
|
medium: 0.55,
|
|
125
126
|
high: 0.8,
|
|
126
127
|
};
|
|
127
|
-
function captureSnapshot(canvas, quality = 'medium') {
|
|
128
|
+
function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
|
|
128
129
|
const imageFormat = 'image/jpeg'; // or /png'
|
|
129
|
-
|
|
130
|
+
if (fixedScaling) {
|
|
131
|
+
const canvasScaleRatio = window.devicePixelRatio || 1;
|
|
132
|
+
dummy.width = canvas.width / canvasScaleRatio;
|
|
133
|
+
dummy.height = canvas.height / canvasScaleRatio;
|
|
134
|
+
const ctx = dummy.getContext('2d');
|
|
135
|
+
if (!ctx) {
|
|
136
|
+
return '';
|
|
137
|
+
}
|
|
138
|
+
ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height);
|
|
139
|
+
return dummy.toDataURL(imageFormat, qualityInt[quality]);
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
return canvas.toDataURL(imageFormat, qualityInt[quality]);
|
|
143
|
+
}
|
|
130
144
|
}
|
|
131
145
|
function dataUrlToBlob(dataUrl) {
|
|
132
146
|
const [header, base64] = dataUrl.split(',');
|
package/lib/app/index.d.ts
CHANGED
|
@@ -50,11 +50,13 @@ type AppOptions = {
|
|
|
50
50
|
__debug_report_edp: string | null;
|
|
51
51
|
__debug__?: ILogLevel;
|
|
52
52
|
__save_canvas_locally?: boolean;
|
|
53
|
+
fixedCanvasScaling?: boolean;
|
|
53
54
|
localStorage: Storage | null;
|
|
54
55
|
sessionStorage: Storage | null;
|
|
55
56
|
forceSingleTab?: boolean;
|
|
56
57
|
disableStringDict?: boolean;
|
|
57
58
|
assistSocketHost?: string;
|
|
59
|
+
disableCanvas?: boolean;
|
|
58
60
|
/** @deprecated */
|
|
59
61
|
onStart?: StartCallback;
|
|
60
62
|
network?: NetworkOptions;
|
package/lib/app/index.js
CHANGED
|
@@ -52,7 +52,7 @@ export default class App {
|
|
|
52
52
|
this.stopCallbacks = [];
|
|
53
53
|
this.commitCallbacks = [];
|
|
54
54
|
this.activityState = ActivityState.NotActive;
|
|
55
|
-
this.version = '12.0.
|
|
55
|
+
this.version = '12.0.4'; // TODO: version compatability check inside each plugin.
|
|
56
56
|
this.compressionThreshold = 24 * 1000;
|
|
57
57
|
this.restartAttempts = 0;
|
|
58
58
|
this.bc = null;
|
|
@@ -112,6 +112,8 @@ export default class App {
|
|
|
112
112
|
disableStringDict: false,
|
|
113
113
|
forceSingleTab: false,
|
|
114
114
|
assistSocketHost: '',
|
|
115
|
+
fixedCanvasScaling: false,
|
|
116
|
+
disableCanvas: false,
|
|
115
117
|
}, options);
|
|
116
118
|
if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
|
|
117
119
|
const host = location.hostname.split('.').slice(-2).join('_');
|
|
@@ -146,7 +148,7 @@ export default class App {
|
|
|
146
148
|
this.session.applySessionHash(sessionToken);
|
|
147
149
|
}
|
|
148
150
|
try {
|
|
149
|
-
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=
|
|
151
|
+
this.worker = new Worker(URL.createObjectURL(new Blob(['"use strict";class t{constructor(t,s,i,e=10,n=250,h){this.onUnauthorised=s,this.onFailure=i,this.MAX_ATTEMPTS_COUNT=e,this.ATTEMPT_TIMEOUT=n,this.onCompress=h,this.attemptsCount=0,this.busy=!1,this.queue=[],this.token=null,this.ingestURL=t+"/v1/web/i",this.isCompressing=void 0!==h}getQueueStatus(){return 0===this.queue.length&&!this.busy}authorise(t){this.token=t,this.busy||this.sendNext()}push(t){this.busy||!this.token?this.queue.push(t):(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t))}sendNext(){const t=this.queue.shift();t?(this.busy=!0,this.isCompressing&&this.onCompress?this.onCompress(t):this.sendBatch(t)):this.busy=!1}retry(t,s){this.attemptsCount>=this.MAX_ATTEMPTS_COUNT?this.onFailure(`Failed to send batch after ${this.attemptsCount} attempts.`):(this.attemptsCount++,setTimeout((()=>this.sendBatch(t,s)),this.ATTEMPT_TIMEOUT*this.attemptsCount))}sendBatch(t,s){this.busy=!0;const i={Authorization:`Bearer ${this.token}`};s&&(i["Content-Encoding"]="gzip"),null!==this.token?fetch(this.ingestURL,{body:t,method:"POST",headers:i,keepalive:t.length<65536}).then((i=>{if(401===i.status)return this.busy=!1,void this.onUnauthorised();i.status>=400?this.retry(t,s):(this.attemptsCount=0,this.sendNext())})).catch((i=>{console.warn("OpenReplay:",i),this.retry(t,s)})):setTimeout((()=>{this.sendBatch(t,s)}),500)}sendCompressed(t){this.sendBatch(t,!0)}sendUncompressed(t){this.sendBatch(t,!1)}clean(){this.sendNext(),setTimeout((()=>{this.token=null,this.queue.length=0}),10)}}const s="function"==typeof TextEncoder?new TextEncoder:{encode(t){const s=t.length,i=new Uint8Array(3*s);let e=-1;for(let n=0,h=0,r=0;r!==s;){if(n=t.charCodeAt(r),r+=1,n>=55296&&n<=56319){if(r===s){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;break}if(h=t.charCodeAt(r),!(h>=56320&&h<=57343)){i[e+=1]=239,i[e+=1]=191,i[e+=1]=189;continue}if(n=1024*(n-55296)+h-56320+65536,r+=1,n>65535){i[e+=1]=240|n>>>18,i[e+=1]=128|n>>>12&63,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n;continue}}n<=127?i[e+=1]=0|n:n<=2047?(i[e+=1]=192|n>>>6,i[e+=1]=128|63&n):(i[e+=1]=224|n>>>12,i[e+=1]=128|n>>>6&63,i[e+=1]=128|63&n)}return i.subarray(0,e+1)}};class i{constructor(t){this.size=t,this.offset=0,this.checkpointOffset=0,this.data=new Uint8Array(t)}getCurrentOffset(){return this.offset}checkpoint(){this.checkpointOffset=this.offset}get isEmpty(){return 0===this.offset}skip(t){return this.offset+=t,this.offset<=this.size}set(t,s){this.data.set(t,s)}boolean(t){return this.data[this.offset++]=+t,this.offset<=this.size}uint(t){for((t<0||t>Number.MAX_SAFE_INTEGER)&&(t=0);t>=128;)this.data[this.offset++]=t%256|128,t=Math.floor(t/128);return this.data[this.offset++]=t,this.offset<=this.size}int(t){return t=Math.round(t),this.uint(t>=0?2*t:-2*t-1)}string(t){const i=s.encode(t),e=i.byteLength;return!(!this.uint(e)||this.offset+e>this.size)&&(this.data.set(i,this.offset),this.offset+=e,!0)}reset(){this.offset=0,this.checkpointOffset=0}flush(){const t=this.data.slice(0,this.checkpointOffset);return this.reset(),t}}class e extends i{encode(t){switch(t[0]){case 0:case 11:case 114:case 115:return this.uint(t[1]);case 4:case 44:case 47:return this.string(t[1])&&this.string(t[2])&&this.uint(t[3]);case 5:case 20:case 38:case 70:case 75:case 76:case 77:case 82:return this.uint(t[1])&&this.uint(t[2]);case 6:return this.int(t[1])&&this.int(t[2]);case 7:return!0;case 8:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.string(t[4])&&this.boolean(t[5]);case 9:case 10:case 24:case 51:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3]);case 12:case 61:case 71:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3]);case 13:case 14:case 17:case 50:case 54:return this.uint(t[1])&&this.string(t[2]);case 16:return this.uint(t[1])&&this.int(t[2])&&this.int(t[3]);case 18:return this.uint(t[1])&&this.string(t[2])&&this.int(t[3]);case 19:return this.uint(t[1])&&this.boolean(t[2]);case 21:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8]);case 22:case 27:case 30:case 41:case 45:case 46:case 63:case 64:case 79:return this.string(t[1])&&this.string(t[2]);case 23:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 28:case 29:case 42:case 117:case 118:return this.string(t[1]);case 37:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3]);case 39:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.uint(t[7]);case 40:return this.string(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 48:case 78:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 49:return this.int(t[1])&&this.int(t[2])&&this.uint(t[3])&&this.uint(t[4]);case 53:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8]);case 55:return this.boolean(t[1]);case 57:case 60:return this.uint(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4]);case 58:case 120:return this.int(t[1]);case 59:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6])&&this.string(t[7]);case 67:case 73:return this.uint(t[1])&&this.string(t[2])&&this.uint(t[3])&&this.string(t[4]);case 69:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3])&&this.string(t[4]);case 81:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.int(t[4])&&this.string(t[5]);case 83:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.string(t[4])&&this.string(t[5])&&this.uint(t[6])&&this.uint(t[7])&&this.uint(t[8])&&this.uint(t[9]);case 84:return this.string(t[1])&&this.string(t[2])&&this.string(t[3])&&this.uint(t[4])&&this.string(t[5])&&this.string(t[6]);case 112:return this.uint(t[1])&&this.string(t[2])&&this.boolean(t[3])&&this.string(t[4])&&this.int(t[5])&&this.int(t[6]);case 113:return this.uint(t[1])&&this.uint(t[2])&&this.string(t[3]);case 116:return this.uint(t[1])&&this.uint(t[2])&&this.uint(t[3])&&this.uint(t[4])&&this.uint(t[5])&&this.uint(t[6])&&this.string(t[7])&&this.string(t[8])&&this.uint(t[9])&&this.boolean(t[10]);case 119:return this.string(t[1])&&this.uint(t[2])}}}class n{constructor(t,s,i,n,h,r){this.pageNo=t,this.timestamp=s,this.url=i,this.onBatch=n,this.tabId=h,this.onOfflineEnd=r,this.nextIndex=0,this.beaconSize=2e5,this.encoder=new e(this.beaconSize),this.sizeBuffer=new Uint8Array(3),this.isEmpty=!0,this.beaconSizeLimit=1e6,this.prepare()}writeType(t){return this.encoder.uint(t[0])}writeFields(t){return this.encoder.encode(t)}writeSizeAt(t,s){for(let s=0;s<3;s++)this.sizeBuffer[s]=t>>8*s;this.encoder.set(this.sizeBuffer,s)}prepare(){if(!this.encoder.isEmpty)return;const t=[81,1,this.pageNo,this.nextIndex,this.timestamp,this.url],s=[118,this.tabId];this.writeType(t),this.writeFields(t),this.writeWithSize(s),this.isEmpty=!0}writeWithSize(t){const s=this.encoder;if(!this.writeType(t)||!s.skip(3))return!1;const i=s.getCurrentOffset(),e=this.writeFields(t);if(e){const e=s.getCurrentOffset()-i;if(e>16777215)return console.warn("OpenReplay: max message size overflow."),!1;this.writeSizeAt(e,i-3),s.checkpoint(),this.isEmpty=this.isEmpty&&0===t[0],this.nextIndex++}return e}setBeaconSizeLimit(t){this.beaconSizeLimit=t}writeMessage(t){if("q_end"===t[0])return this.finaliseBatch(),this.onOfflineEnd();0===t[0]&&(this.timestamp=t[1]),4===t[0]&&(this.url=t[1]),this.writeWithSize(t)||(this.finaliseBatch(),this.writeWithSize(t)||(this.encoder=new e(this.beaconSizeLimit),this.prepare(),this.writeWithSize(t)?this.finaliseBatch():console.warn("OpenReplay: beacon size overflow. Skipping large message.",t,this),this.encoder=new e(this.beaconSize),this.prepare()))}finaliseBatch(){if(this.isEmpty)return;const t=this.encoder.flush();this.onBatch(t),this.prepare()}clean(){this.encoder.reset()}}var h;!function(t){t[t.NotActive=0]="NotActive",t[t.Starting=1]="Starting",t[t.Stopping=2]="Stopping",t[t.Active=3]="Active",t[t.Stopped=4]="Stopped"}(h||(h={}));let r=null,u=null,a=h.NotActive;function o(){u&&u.finaliseBatch()}function c(){a=h.Stopping,null!==g&&(clearInterval(g),g=null),u&&(u.clean(),u=null),r&&(r.clean(),setTimeout((()=>{r=null}),20)),setTimeout((()=>{a=h.NotActive}),100)}function p(){a!==h.Stopped&&(postMessage("restart"),c())}let f,g=null;self.onmessage=({data:s})=>{if(null!=s){if("stop"===s)return o(),c(),a=h.Stopped;if("forceFlushBatch"!==s){if(!Array.isArray(s)){if("compressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Compressed batch."),void p();s.batch&&r.sendCompressed(s.batch)}if("uncompressed"===s.type){if(!r)return console.debug("OR WebWorker: sender not initialised. Uncompressed batch."),void p();s.batch&&r.sendUncompressed(s.batch)}return"start"===s.type?(a=h.Starting,r=new t(s.ingestPoint,(()=>{p()}),(t=>{!function(t){postMessage({type:"failure",reason:t}),c()}(t)}),s.connAttemptCount,s.connAttemptGap,(t=>{postMessage({type:"compress",batch:t},[t.buffer])})),u=new n(s.pageNo,s.timestamp,s.url,(t=>{r&&r.push(t)}),s.tabId,(()=>postMessage({type:"queue_empty"}))),null===g&&(g=setInterval(o,1e4)),a=h.Active):"auth"===s.type?r?u?(r.authorise(s.token),void(s.beaconSizeLimit&&u.setBeaconSizeLimit(s.beaconSizeLimit))):(console.debug("OR WebWorker: writer not initialised. Received auth."),void p()):(console.debug("OR WebWorker: sender not initialised. Received auth."),void p()):void 0}if(u){const t=u;s.forEach((s=>{55===s[0]&&(s[1]?f=setTimeout((()=>p()),18e5):clearTimeout(f)),t.writeMessage(s)}))}else postMessage("not_init"),p()}else o()}else o()};'], { type: 'text/javascript' })));
|
|
150
152
|
this.worker.onerror = (e) => {
|
|
151
153
|
this._debug('webworker_error', e);
|
|
152
154
|
};
|
|
@@ -169,17 +171,13 @@ export default class App {
|
|
|
169
171
|
const batchSize = batch.byteLength;
|
|
170
172
|
if (batchSize > this.compressionThreshold) {
|
|
171
173
|
gzip(data.batch, { mtime: 0 }, (err, result) => {
|
|
172
|
-
var _a;
|
|
174
|
+
var _a, _b;
|
|
173
175
|
if (err) {
|
|
174
176
|
this.debug.error('Openreplay compression error:', err);
|
|
175
|
-
this.
|
|
176
|
-
if (this.restartAttempts < 3) {
|
|
177
|
-
this.restartAttempts += 1;
|
|
178
|
-
void this.start({}, true);
|
|
179
|
-
}
|
|
177
|
+
(_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'uncompressed', batch: batch });
|
|
180
178
|
}
|
|
181
179
|
else {
|
|
182
|
-
(
|
|
180
|
+
(_b = this.worker) === null || _b === void 0 ? void 0 : _b.postMessage({ type: 'compressed', batch: result });
|
|
183
181
|
}
|
|
184
182
|
});
|
|
185
183
|
}
|
|
@@ -810,12 +808,13 @@ export default class App {
|
|
|
810
808
|
void this.featureFlags.reloadFlags();
|
|
811
809
|
await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
|
|
812
810
|
this.activityState = ActivityState.Active;
|
|
813
|
-
if (canvasEnabled) {
|
|
811
|
+
if (canvasEnabled && !this.options.disableCanvas) {
|
|
814
812
|
this.canvasRecorder =
|
|
815
813
|
(_a = this.canvasRecorder) !== null && _a !== void 0 ? _a : new CanvasRecorder(this, {
|
|
816
814
|
fps: canvasFPS,
|
|
817
815
|
quality: canvasQuality,
|
|
818
816
|
isDebug: this.options.__save_canvas_locally,
|
|
817
|
+
fixedScaling: this.options.fixedCanvasScaling,
|
|
819
818
|
});
|
|
820
819
|
this.canvasRecorder.startTracking();
|
|
821
820
|
}
|
package/lib/app/sanitizer.js
CHANGED
|
@@ -49,7 +49,7 @@ export default class Sanitizer {
|
|
|
49
49
|
data = data.replace(/\d/g, '0');
|
|
50
50
|
}
|
|
51
51
|
if (this.options.obscureTextEmails) {
|
|
52
|
-
data = data.replace(/^\w+([
|
|
52
|
+
data = data.replace(/^\w+([+.-]\w+)*@\w+([.-]\w+)*\.\w{2,3}$/g, (email) => {
|
|
53
53
|
const [name, domain] = email.split('@');
|
|
54
54
|
const [domainName, host] = domain.split('.');
|
|
55
55
|
return `${stars(name)}@${stars(domainName)}.${stars(host)}`;
|
package/lib/index.js
CHANGED
|
@@ -67,7 +67,7 @@ export default class API {
|
|
|
67
67
|
const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
|
|
68
68
|
req.open('POST', orig + '/v1/web/not-started');
|
|
69
69
|
req.send(JSON.stringify({
|
|
70
|
-
trackerVersion: '12.0.
|
|
70
|
+
trackerVersion: '12.0.4',
|
|
71
71
|
projectKey: this.options.projectKey,
|
|
72
72
|
doNotTrack,
|
|
73
73
|
reason,
|
|
@@ -34,7 +34,7 @@ export default function (app) {
|
|
|
34
34
|
}
|
|
35
35
|
const nowOwning = [];
|
|
36
36
|
const styleSheets = root.adoptedStyleSheets;
|
|
37
|
-
if (Symbol.iterator in styleSheets) {
|
|
37
|
+
if (styleSheets && Symbol.iterator in styleSheets) {
|
|
38
38
|
for (const s of styleSheets) {
|
|
39
39
|
let sheetID = styleSheetIDMap.get(s);
|
|
40
40
|
const init = !sheetID;
|
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.
|
|
4
|
+
"version": "12.0.4",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"logging",
|
|
7
7
|
"replay"
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@medv/finder": "^3.1.0",
|
|
55
55
|
"error-stack-parser": "^2.0.6",
|
|
56
|
-
"fflate": "^0.8.
|
|
56
|
+
"fflate": "^0.8.2"
|
|
57
57
|
},
|
|
58
58
|
"engines": {
|
|
59
59
|
"node": ">=14.0"
|