@openreplay/tracker 16.0.0 → 16.0.1

package/dist/cjs/index.js

@@ -727,8 +727,8 @@ class StringDictionary {
             let isNew = false;
             if (!this.backDict[str]) {
                 isNew = true;
-                const digits = Math.floor(Math.log10(Date.now())) + 1;
-                const shavedTs = Date.now() % (10 ** (digits - 2));
+                // shaving the first 2 digits of the timestamp (since they are irrelevant for next millennia)
+                const shavedTs = Date.now() % 10 ** (13 - 2);
                 let id = shavedTs;
                 if (id === this.lastTs) {
                     id = id * 10000 + this.lastSuffix;
@@ -1254,7 +1254,7 @@ function hasOpenreplayAttribute(e, attr) {
         if (DEPRECATED_ATTRS[attr]) {
             deprecationWarn(`"${newName}" attribute`, 
             // @ts-ignore
-            `"${DEPRECATED_ATTRS[attr]}" attribute`, '/installation/sanitize-data');
+            `"${DEPRECATED_ATTRS[attr]}" attribute`, '/en/sdk/sanitize-data');
         }
         return true;
     }
@@ -3756,8 +3756,8 @@ class Nodes {
 }
 
 const iconCache = {};
-const domParser = new DOMParser();
-async function parseUseEl(useElement, mode) {
+const svgUrlCache = {};
+async function parseUseEl(useElement, mode, domParser) {
     try {
         const href = useElement.getAttribute('xlink:href') || useElement.getAttribute('href');
         if (!href) {
@@ -3772,13 +3772,43 @@ async function parseUseEl(useElement, mode) {
         if (iconCache[symbolId]) {
             return iconCache[symbolId];
         }
-        const response = await fetch(url);
-        const svgText = await response.text();
-        const svgDoc = domParser.parseFromString(svgText, 'image/svg+xml');
+        let svgDoc;
+        if (svgUrlCache[url]) {
+            if (svgUrlCache[url] === 1) {
+                await new Promise((resolve) => {
+                    let tries = 0;
+                    const interval = setInterval(() => {
+                        if (tries > 100) {
+                            clearInterval(interval);
+                            resolve(false);
+                        }
+                        if (svgUrlCache[url] !== 1) {
+                            svgDoc = svgUrlCache[url];
+                            clearInterval(interval);
+                            resolve(true);
+                        }
+                        else {
+                            tries++;
+                        }
+                    }, 100);
+                });
+            }
+            else {
+                svgDoc = svgUrlCache[url] ?? `<svg xmlns="http://www.w3.org/2000/svg"></svg>`;
+            }
+        }
+        else {
+            svgUrlCache[url] = 1;
+            const response = await fetch(url);
+            const svgText = await response.text();
+            svgDoc = domParser.parseFromString(svgText, 'image/svg+xml');
+            svgUrlCache[url] = svgDoc;
+        }
+        // @ts-ignore
         const symbol = svgDoc.getElementById(symbolId);
         if (!symbol) {
             console.debug('Openreplay: Symbol not found in SVG.');
-            return;
+            return '';
         }
         if (mode === 'inline') ;
         if (mode === 'svgtext') {
@@ -3833,7 +3863,7 @@ var RecentsType;
     RecentsType[RecentsType["Changed"] = 2] = "Changed";
 })(RecentsType || (RecentsType = {}));
 class Observer {
-    constructor(app, isTopContext = false) {
+    constructor(app, isTopContext = false, options = { disableSprites: false }) {
         this.app = app;
         this.isTopContext = isTopContext;
         this.commited = [];
@@ -3841,6 +3871,9 @@ class Observer {
         this.indexes = [];
         this.attributesMap = new Map();
         this.textSet = new Set();
+        this.disableSprites = false;
+        this.domParser = new DOMParser();
+        this.disableSprites = options.disableSprites;
         this.observer = createMutationObserver(this.app.safe((mutations) => {
             for (const mutation of mutations) {
                 // mutations order is sequential
@@ -3935,8 +3968,8 @@ class Observer {
             if (value === null) {
                 this.app.send(RemoveNodeAttribute(id, name));
             }
-            if (isUseElement(node) && name === 'href') {
-                parseUseEl(node, 'svgtext')
+            if (isUseElement(node) && name === 'href' && !this.disableSprites) {
+                parseUseEl(node, 'svgtext', this.domParser)
                     .then((svgData) => {
                     if (svgData) {
                         this.app.send(SetNodeAttribute(id, name, `_$OPENREPLAY_SPRITE$_${svgData}`));
@@ -4011,7 +4044,7 @@ class Observer {
         const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
             acceptNode: (node) => {
                 if (this.app.nodes.getID(node) !== undefined) {
-                    this.app.debug.error('! Node is already bound', node);
+                    this.app.debug.warn('! Node is already bound', node);
                 }
                 return isIgnored(node) || this.app.nodes.getID(node) !== undefined
                     ? NodeFilter.FILTER_REJECT
@@ -4289,7 +4322,11 @@ class IFrameOffsets {
 const attachShadowNativeFn = IN_BROWSER ? Element.prototype.attachShadow : () => new ShadowRoot();
 class TopObserver extends Observer {
     constructor(params) {
-        super(params.app, true);
+        const opts = Object.assign({
+            captureIFrames: true,
+            disableSprites: false,
+        }, params.options);
+        super(params.app, true, opts);
         this.iframeOffsets = new IFrameOffsets();
         this.contextCallbacks = [];
         // Attached once per Tracker instance
@@ -4299,9 +4336,7 @@ class TopObserver extends Observer {
         this.docObservers = new WeakMap();
         this.shadowRootObservers = new WeakMap();
         this.app = params.app;
-        this.options = Object.assign({
-            captureIFrames: true,
-        }, params.options);
+        this.options = opts;
         // IFrames
         this.app.nodes.attachNodeCallback((node) => {
             if (hasTag(node, 'iframe') &&
@@ -4730,7 +4765,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.0.0'; // TODO: version compatability check inside each plugin.
+        this.version = '16.0.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5001,7 +5036,7 @@ class App {
             this.canvasRecorder?.restartTracking();
         };
         this.flushBuffer = async (buffer) => {
-            return new Promise((res) => {
+            return new Promise((res, reject) => {
                 if (buffer.length === 0) {
                     res(null);
                     return;
@@ -5011,9 +5046,18 @@ class App {
                 while (endIndex < buffer.length && buffer[endIndex][0] !== 0 /* MType.Timestamp */) {
                     endIndex++;
                 }
-                const messagesBatch = buffer.splice(0, endIndex);
-                this.postToWorker(messagesBatch);
-                res(null);
+                requestIdleCb(() => {
+                    try {
+                        const messagesBatch = buffer.splice(0, endIndex);
+                        // Cast out potential proxy objects (produced from vue.js deep reactivity, for example) to a regular array.
+                        this.postToWorker(messagesBatch.map((x) => [...x]));
+                        res(null);
+                    }
+                    catch (e) {
+                        this._debug('flushBuffer', e);
+                        reject(new Error('flushBuffer failed'));
+                    }
+                });
             });
         };
         this.onUxtCb = [];
@@ -5054,6 +5098,7 @@ class App {
             fixedCanvasScaling: false,
             disableCanvas: false,
             captureIFrames: true,
+            disableSprites: false,
             obscureTextEmails: true,
             obscureTextNumbers: false,
             crossdomain: {
@@ -9133,7 +9178,7 @@ function Tabs (app) {
 }
 
 const Messages = _Messages;
-const DOCS_SETUP = '/installation/javascript-sdk';
+const DOCS_SETUP = '/en/sdk';
 function processOptions(obj) {
     if (obj == null) {
         console.error(`OpenReplay: invalid options argument type. Please, check documentation on ${DOCS_HOST}${DOCS_SETUP}`);
@@ -9183,7 +9228,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.0.0',
+                trackerVersion: '16.0.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,