@openreplay/tracker 17.2.2 → 17.2.4

package/dist/cjs/index.js

@@ -438,6 +438,23 @@ function deprecationWarn(nameOfFeature, useInstead, docsPath = '/') {
     console.warn(`OpenReplay: ${nameOfFeature} is deprecated. ${useInstead ? `Please, use ${useInstead} instead.` : ''} Visit ${DOCS_HOST}${docsPath} for more information.`);
     warnedFeatures[nameOfFeature] = true;
 }
+function getCustomAttributeLabel(e, customAttributes) {
+    if (!customAttributes || customAttributes.length === 0)
+        return '';
+    const parts = [];
+    for (const attr of customAttributes) {
+        const value = e.getAttribute(attr);
+        if (value !== null) {
+            parts.push(`[${attr}=${value}]`);
+        }
+    }
+    return parts.join('');
+}
+function getClassSelector(e) {
+    if (!e.classList || e.classList.length === 0)
+        return '';
+    return '.' + Array.from(e.classList).join('.');
+}
 function getLabelAttribute(e) {
     let value = e.getAttribute('data-openreplay-label');
     if (value !== null) {
@@ -3409,7 +3426,10 @@ class TopObserver extends Observer {
                 this.app.debug.info('doc already observed for', id);
                 return;
             }
-            const observer = new IFrameObserver(this.app, false, {});
+            const observer = new IFrameObserver(this.app, false, {
+                disableSprites: this.options.disableSprites,
+                ...getInlineOptions(this.options.inlineCss, console.warn),
+            });
             this.iframeObservers.set(iframe, observer);
             this.docObservers.set(currentDoc, observer);
             this.iframeObserversArr.push(observer);
@@ -3431,7 +3451,10 @@ class TopObserver extends Observer {
         handle();
     }
     handleShadowRoot(shRoot) {
-        const observer = new ShadowRootObserver(this.app);
+        const observer = new ShadowRootObserver(this.app, false, {
+            disableSprites: this.options.disableSprites,
+            ...getInlineOptions(this.options.inlineCss, console.warn),
+        });
         this.shadowRootObservers.set(shRoot, observer);
         observer.observe(shRoot.host);
     }
@@ -3467,7 +3490,10 @@ class TopObserver extends Observer {
         };
         this.app.nodes.clear();
         this.app.nodes.crossdomainMode(frameLevel, frameOder);
-        const iframeObserver = new IFrameObserver(this.app);
+        const iframeObserver = new IFrameObserver(this.app, false, {
+            disableSprites: this.options.disableSprites,
+            ...getInlineOptions(this.options.inlineCss, console.warn),
+        });
         this.iframeObservers.set(window.document, iframeObserver);
         iframeObserver.syntheticObserve(rootNodeId, window.document);
     }
@@ -3826,7 +3852,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '17.2.2'; // TODO: version compatability check inside each plugin.
+        this.version = '17.2.4'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4256,9 +4282,6 @@ class App {
             window.addEventListener('message', this.parentCrossDomainFrameListener);
             window.addEventListener('message', this.crossDomainIframeListener);
             setInterval(() => {
-                if (document.hidden) {
-                    return;
-                }
                 window.parent.postMessage({
                     line: proto.polling,
                     context: this.contextId,
@@ -5728,19 +5751,21 @@ const labelElementFor = IN_BROWSER && 'labels' in HTMLInputElement.prototype
             }
         }
     };
-function getInputLabel(node) {
-    let label = getLabelAttribute(node);
-    if (label === null) {
-        const labelElement = labelElementFor(node);
-        label =
-            (labelElement && labelElement.innerText) ||
-                node.placeholder ||
-                node.name ||
-                node.id ||
-                node.className ||
-                node.type;
-    }
-    return normSpaces(label).slice(0, 100);
+function getInputLabel(node, customAttributes) {
+    const openreplayLabel = getLabelAttribute(node);
+    if (openreplayLabel !== null)
+        return normSpaces(openreplayLabel).slice(0, 100);
+    const customAttributeLabel = getCustomAttributeLabel(node, customAttributes);
+    if (customAttributeLabel)
+        return customAttributeLabel;
+    if (node.id)
+        return `#${node.id}`;
+    const classLabel = getClassSelector(node);
+    if (classLabel)
+        return classLabel;
+    const labelElement = labelElementFor(node);
+    const label = node.name || node.placeholder || (labelElement && labelElement.innerText) || node.type;
+    return normSpaces(label || '').slice(0, 100);
 }
 const InputMode = {
     Plain: 0,
@@ -5821,7 +5846,7 @@ function Input (app, opts) {
     }, 3);
     function sendInputChange(id, node, hesitationTime, inputTime) {
         const { value, mask } = getInputValue(id, node);
-        let label = getInputLabel(node);
+        let label = getInputLabel(node, options.customAttributes);
         if (app.sanitizer.privateMode) {
             label = label.replaceAll(/./g, '*');
         }
@@ -5930,21 +5955,28 @@ function _getTarget(target, document) {
     return target === document.documentElement ? null : target;
 }
 function Mouse (app, options) {
-    const { disableClickmaps = false } = options || {};
+    const { disableClickmaps = false, customAttributes } = options || {};
     function getTargetLabel(target) {
         const dl = getLabelAttribute(target);
         if (dl !== null) {
             return dl;
         }
         if (hasTag(target, 'input')) {
-            return getInputLabel(target);
-        }
+            return getInputLabel(target, customAttributes);
+        }
+        const customAttributeLabel = getCustomAttributeLabel(target, customAttributes);
+        if (customAttributeLabel)
+            return customAttributeLabel;
+        if (target.id)
+            return `#${target.id}`;
+        const classLabel = getClassSelector(target);
+        if (classLabel)
+            return classLabel;
         if (isClickable(target)) {
             let label = '';
             if (target instanceof HTMLElement) {
                 label = app.sanitizer.getInnerTextSecure(target);
             }
-            label = label || target.id || target.className;
             return normSpaces(label).slice(0, 100);
         }
         return '';
@@ -6088,6 +6120,11 @@ function getCSSPath(el) {
         return false;
     if (el.id)
         return `#${cssEscape(el.id)}`;
+    // if has data attributes - use them as they are more likely to be stable and unique
+    const dataAttr = Array.from(el.attributes).find(attr => attr.name.startsWith('data-'));
+    if (dataAttr) {
+        return `[${dataAttr.name}="${cssEscape(dataAttr.value)}"]`;
+    }
     const parts = [];
     while (el && el.nodeType === 1 && el !== el.ownerDocument) {
         if (el.id) {
@@ -8619,7 +8656,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '17.2.2',
+            sdk_version: '17.2.4',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -8952,10 +8989,11 @@ class People {
  * Creates batches of events, then sends them at intervals.
  */
 class Batcher {
-    constructor(backendUrl, getToken, init) {
+    constructor(backendUrl, getToken, init, standalone) {
         this.backendUrl = backendUrl;
         this.getToken = getToken;
         this.init = init;
+        this.standalone = standalone;
         this.autosendInterval = 5 * 1000;
         this.retryTimeout = 3 * 1000;
         this.retryLimit = 3;
@@ -8965,10 +9003,20 @@ class Batcher {
             [categories.events]: [],
         };
         this.intervalId = null;
+        this.stopped = false;
+        this.paused = false;
+        this.onVisibilityChange = () => {
+            this.paused = document.hidden;
+        };
     }
     getBatches() {
         this.batch[categories.people] = this.dedupePeopleEvents();
-        const finalData = { data: this.batch };
+        const finalData = {
+            data: {
+                [categories.people]: [...this.batch[categories.people]],
+                [categories.events]: [...this.batch[categories.events]],
+            },
+        };
         return finalData;
     }
     addEvent(event) {
@@ -9044,6 +9092,9 @@ class Batcher {
         return Array.from(uniqueEventsByType.values());
     }
     sendBatch(batch) {
+        if (this.stopped) {
+            return;
+        }
         const sentBatch = batch;
         let attempts = 0;
         const send = () => {
@@ -9060,8 +9111,21 @@ class Batcher {
                 },
                 body: JSON.stringify(sentBatch),
             })
-                .then((response) => {
-                if ([403, 401].includes(response.status)) {
+                .then(async (response) => {
+                if (response.status === 401) {
+                    const body = await response.json().catch(() => null);
+                    if (!this.standalone && body?.error === 'token expired') {
+                        this.stop();
+                        return;
+                    }
+                    if (attempts < this.retryLimit) {
+                        return this.init().then(() => {
+                            send();
+                        });
+                    }
+                    return;
+                }
+                if (response.status === 403) {
                     if (attempts < this.retryLimit) {
                         return this.init().then(() => {
                             send();
@@ -9085,8 +9149,12 @@ class Batcher {
         if (this.intervalId) {
             clearInterval(this.intervalId);
         }
+        this.paused = document.hidden;
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
         this.intervalId = setInterval(() => {
-            this.flush();
+            if (!this.paused) {
+                this.flush();
+            }
         }, this.autosendInterval);
     }
     flush() {
@@ -9106,6 +9174,12 @@ class Batcher {
             clearInterval(this.intervalId);
             this.intervalId = null;
         }
+        document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this.stopped = true;
+    }
+    restart() {
+        this.stopped = false;
+        this.startAutosend();
     }
 }
 
@@ -9172,6 +9246,19 @@ class Analytics {
                 }
             }
         };
+        /**
+         * Used by tracker when running in blundled mode
+         */
+        this.onStart = () => {
+            if (!this.standalone) {
+                this.batcher.restart();
+            }
+        };
+        this.onStop = () => {
+            if (!this.standalone) {
+                this.batcher.stop();
+            }
+        };
         this.reset = () => {
             this.people.reset(true);
             this.events.reset();
@@ -9210,7 +9297,7 @@ class Analytics {
         this.standalone = !options.notStandalone;
         this.token = this.sessionStorage.getItem(STORAGEKEY);
         this.constantProperties = new ConstantProperties(this.localStorage, this.sessionStorage);
-        this.batcher = new Batcher(this.backendUrl, this._getToken, this.init);
+        this.batcher = new Batcher(this.backendUrl, this._getToken, this.init, this.standalone);
         this.events = new Events(this.constantProperties, this._getTimestamp, this.batcher);
         this.people = new People(this.constantProperties, this._getTimestamp, this.setUserId, this.batcher);
         if (options.notStandalone) {
@@ -9271,7 +9358,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '17.2.2',
+                trackerVersion: '17.2.4',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9423,6 +9510,12 @@ class API {
                     : (options.analytics?.ingestPoint ?? options.ingestPoint ?? defaultEdp),
                 projectKey: options.projectKey,
             });
+            app.attachStartCallback(() => {
+                this.analytics?.onStart();
+            });
+            app.attachStopCallback(() => {
+                this.analytics?.onStop();
+            });
         }
         if (!this.crossdomainMode) {
             // no need to send iframe viewport data since its a node for us
@@ -9434,7 +9527,7 @@ class API {
             // no tabs in iframes yet
             Tabs(app);
         }
-        Mouse(app, options.mouse);
+        Mouse(app, { ...options.mouse, customAttributes: options.customAttributes });
         // inside iframe, we ignore viewport scroll
         Scroll(app, this.crossdomainMode);
         CSSRules(app, options.css);