@statsig/web-analytics 3.20.2 → 3.20.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/web-analytics",
-  "version": "3.20.2",
+  "version": "3.20.4",
   "license": "ISC",
   "homepage": "https://github.com/statsig-io/js-client-monorepo",
   "repository": {
@@ -9,8 +9,8 @@
     "directory": "packages/web-analytics"
   },
   "dependencies": {
-    "@statsig/client-core": "3.20.2",
-    "@statsig/js-client": "3.20.2",
+    "@statsig/client-core": "3.20.4",
+    "@statsig/js-client": "3.20.4",
     "web-vitals": "5.0.3"
   },
   "jsdelivr": "./build/statsig-web-analytics.min.js",

package/src/AutoCapture.d.ts

@@ -21,6 +21,7 @@ export declare class AutoCapture {
     private _rageClickManager;
     private _pageViewLogged;
     private _webVitalsManager;
+    private _deadClickManager;
     constructor(_client: PrecomputedEvaluationsInterface, options?: AutoCaptureOptions);
     private _addEventHandlers;
     private _addPageViewTracking;

package/src/AutoCapture.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoCapture = exports.runStatsigAutoCapture = exports.StatsigAutoCapturePlugin = void 0;
 const client_core_1 = require("@statsig/client-core");
 const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
+const DeadClickManager_1 = require("./DeadClickManager");
 const EngagementManager_1 = require("./EngagementManager");
 const RageClickManager_1 = require("./RageClickManager");
 const WebVitalsManager_1 = require("./WebVitalsManager");
@@ -12,6 +13,8 @@ const metadataUtils_1 = require("./utils/metadataUtils");
 const AUTO_EVENT_MAPPING = {
     submit: AutoCaptureEvent_1.AutoCaptureEventName.FORM_SUBMIT,
     click: AutoCaptureEvent_1.AutoCaptureEventName.CLICK,
+    copy: AutoCaptureEvent_1.AutoCaptureEventName.COPY,
+    cut: AutoCaptureEvent_1.AutoCaptureEventName.COPY,
 };
 class StatsigAutoCapturePlugin {
     constructor(_options) {
@@ -57,6 +60,7 @@ class AutoCapture {
         this._engagementManager = new EngagementManager_1.EngagementManager();
         this._rageClickManager = new RageClickManager_1.default();
         this._webVitalsManager = new WebVitalsManager_1.WebVitalsManager(this._enqueueAutoCapture.bind(this));
+        this._deadClickManager = new DeadClickManager_1.default(this._enqueueAutoCapture.bind(this));
         this._eventFilterFunc = options === null || options === void 0 ? void 0 : options.eventFilterFunc;
         const doc = (0, client_core_1._getDocumentSafe)();
         if (!(0, client_core_1._isServerEnv)()) {
@@ -93,6 +97,8 @@ class AutoCapture {
         };
         (0, commonUtils_1._registerEventHandler)(doc, 'click', (e) => eventHandler(e));
         (0, commonUtils_1._registerEventHandler)(doc, 'submit', (e) => eventHandler(e));
+        (0, commonUtils_1._registerEventHandler)(doc, 'copy', (e) => eventHandler(e));
+        (0, commonUtils_1._registerEventHandler)(doc, 'cut', (e) => eventHandler(e));
         (0, commonUtils_1._registerEventHandler)(win, 'error', (e) => eventHandler(e, false));
         (0, commonUtils_1._registerEventHandler)(win, 'pagehide', () => this._tryLogPageViewEnd());
         (0, commonUtils_1._registerEventHandler)(win, 'beforeunload', () => this._tryLogPageViewEnd());
@@ -113,7 +119,7 @@ class AutoCapture {
         this._tryLogPageView();
     }
     _autoLogEvent(event) {
-        var _a;
+        var _a, _b, _c;
         const eventType = (_a = event.type) === null || _a === void 0 ? void 0 : _a.toLowerCase();
         if (eventType === 'error' && event instanceof ErrorEvent) {
             this._logError(event);
@@ -123,19 +129,32 @@ class AutoCapture {
         if (!target) {
             return;
         }
-        if (!(0, commonUtils_1._shouldLogEvent)(event, target)) {
-            return;
-        }
         const eventName = AUTO_EVENT_MAPPING[eventType];
         if (!eventName) {
             return;
         }
-        const { value, metadata } = (0, eventUtils_1._gatherEventData)(target);
+        const isCopyEvent = eventName === AutoCaptureEvent_1.AutoCaptureEventName.COPY;
+        if (!(0, commonUtils_1._shouldLogEvent)(event, target, isCopyEvent)) {
+            return;
+        }
+        const metadata = {};
+        if (isCopyEvent) {
+            const selectedText = (_c = (_b = (0, client_core_1._getWindowSafe)()) === null || _b === void 0 ? void 0 : _b.getSelection()) === null || _c === void 0 ? void 0 : _c.toString();
+            if (!selectedText) {
+                return;
+            }
+            metadata['selectedText'] = (0, commonUtils_1._sanitizeString)(selectedText);
+            const clipType = event.type || 'clipboard';
+            metadata['clipType'] = clipType;
+        }
+        const { value, metadata: eventMetadata } = (0, eventUtils_1._gatherEventData)(target);
+        Object.assign(metadata, eventMetadata);
         const allMetadata = (0, metadataUtils_1._gatherAllMetadata)((0, commonUtils_1._getSafeUrl)());
         this._enqueueAutoCapture(eventName, value, Object.assign(Object.assign({}, allMetadata), metadata));
     }
     _initialize() {
         this._webVitalsManager.startTracking();
+        this._deadClickManager.startTracking();
         this._engagementManager.startInactivityTracking(() => this._tryLogPageViewEnd(true));
         this._addEventHandlers();
         this._addPageViewTracking();

package/src/AutoCaptureEvent.d.ts

@@ -9,6 +9,8 @@ export declare const AutoCaptureEventName: {
     readonly CLICK: "auto_capture::click";
     readonly RAGE_CLICK: "auto_capture::rage_click";
     readonly WEB_VITALS: "auto_capture::web_vitals";
+    readonly DEAD_CLICK: "auto_capture::dead_click";
+    readonly COPY: "auto_capture::copy";
 };
 export type AutoCaptureEventName = (typeof AutoCaptureEventName)[keyof typeof AutoCaptureEventName] & string;
 export type AutoCaptureEvent = StatsigEvent & {

package/src/AutoCaptureEvent.js

@@ -11,4 +11,6 @@ exports.AutoCaptureEventName = {
     CLICK: 'auto_capture::click',
     RAGE_CLICK: 'auto_capture::rage_click',
     WEB_VITALS: 'auto_capture::web_vitals',
+    DEAD_CLICK: 'auto_capture::dead_click',
+    COPY: 'auto_capture::copy',
 };

package/src/DeadClickManager.d.ts

@@ -0,0 +1,34 @@
+import { AutoCaptureEventName } from './AutoCaptureEvent';
+export declare const DeadClickConfig: {
+    CLICK_CHECK_TIMEOUT: number;
+    SCROLL_DELAY_MS: number;
+    SELECTION_CHANGE_DELAY_MS: number;
+    MUTATION_DELAY_MS: number;
+    ABSOLUTE_DEAD_CLICK_TIMEOUT: number;
+};
+export interface PossibleDeadClick {
+    timestamp: number;
+    eventTarget: HTMLElement;
+    scrollDelayMs?: number;
+    selectionChangeDelayMs?: number;
+    mutationDelayMs?: number;
+    absoluteDelayMs?: number;
+}
+export default class DeadClickManager {
+    private _enqueueFn;
+    private _lastMutationTime;
+    private _lastSelectionChangeTime;
+    private _clickCheckTimer;
+    private _observer;
+    private _clicks;
+    private _deadClickConfig;
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void);
+    startTracking(): void;
+    private _handleClick;
+    private _handleScroll;
+    private _handleSelectionChange;
+    private _setupMutationObserver;
+    private _checkForDeadClick;
+    private _logDeadClick;
+    private _updateClickDelayMs;
+}

package/src/DeadClickManager.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeadClickConfig = void 0;
+const client_core_1 = require("@statsig/client-core");
+const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
+const commonUtils_1 = require("./utils/commonUtils");
+const eventUtils_1 = require("./utils/eventUtils");
+exports.DeadClickConfig = {
+    CLICK_CHECK_TIMEOUT: 1000,
+    SCROLL_DELAY_MS: 100,
+    SELECTION_CHANGE_DELAY_MS: 100,
+    MUTATION_DELAY_MS: 2500,
+    ABSOLUTE_DEAD_CLICK_TIMEOUT: 2750,
+};
+// A dead click is a click that fires an event but produces no meaningful change within a set timeframe.
+class DeadClickManager {
+    constructor(_enqueueFn) {
+        this._enqueueFn = _enqueueFn;
+        this._lastMutationTime = 0;
+        this._lastSelectionChangeTime = 0;
+        this._clicks = [];
+        this._deadClickConfig = exports.DeadClickConfig;
+        this._handleScroll = (0, commonUtils_1.throttle)(() => {
+            const scrollTime = Date.now();
+            this._clicks.forEach((click) => {
+                if (!click.scrollDelayMs) {
+                    click.scrollDelayMs = scrollTime - click.timestamp;
+                }
+            });
+        }, 50);
+    }
+    startTracking() {
+        const win = (0, client_core_1._getWindowSafe)();
+        if (!win) {
+            return;
+        }
+        // `capture: true` - Needed to listen to scroll events on all scrollable elements, not just the window.
+        // docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture
+        //
+        // `passive: true` - Indicates the scroll handler won’t call preventDefault(),
+        // allowing the browser to optimize scrolling performance by not blocking it.
+        // docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive
+        win.addEventListener('click', (event) => this._handleClick(event), {
+            capture: true,
+        });
+        win.addEventListener('scroll', () => this._handleScroll(), {
+            capture: true,
+            passive: true,
+        });
+        win.addEventListener('selectionchange', () => this._handleSelectionChange());
+        this._setupMutationObserver();
+    }
+    _handleClick(event) {
+        var _a, _b;
+        const eventTarget = event.target;
+        if (!eventTarget) {
+            return;
+        }
+        const click = {
+            timestamp: Date.now(),
+            eventTarget,
+        };
+        if (!commonUtils_1.interactiveElements.includes((_a = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
+            this._clicks.push(click);
+        }
+        if (this._clicks.length && !this._clickCheckTimer) {
+            this._clickCheckTimer = (_b = (0, client_core_1._getWindowSafe)()) === null || _b === void 0 ? void 0 : _b.setTimeout(() => {
+                this._checkForDeadClick();
+            }, this._deadClickConfig.CLICK_CHECK_TIMEOUT);
+        }
+    }
+    _handleSelectionChange() {
+        this._lastSelectionChangeTime = Date.now();
+    }
+    _setupMutationObserver() {
+        const doc = (0, client_core_1._getDocumentSafe)();
+        if (!doc) {
+            return;
+        }
+        this._observer = new MutationObserver(() => {
+            this._lastMutationTime = Date.now();
+        });
+        this._observer.observe(doc.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    _checkForDeadClick() {
+        var _a;
+        if (!this._clicks.length) {
+            return;
+        }
+        clearTimeout(this._clickCheckTimer);
+        this._clickCheckTimer = undefined;
+        const clicksToCheck = this._clicks;
+        this._clicks = [];
+        for (const click of clicksToCheck) {
+            this._updateClickDelayMs(click);
+            const hadScroll = click.scrollDelayMs != null &&
+                click.scrollDelayMs < this._deadClickConfig.SCROLL_DELAY_MS;
+            const hadSelectionChange = click.selectionChangeDelayMs != null &&
+                click.selectionChangeDelayMs <
+                    this._deadClickConfig.SELECTION_CHANGE_DELAY_MS;
+            const hadMutation = click.mutationDelayMs != null &&
+                click.mutationDelayMs < this._deadClickConfig.MUTATION_DELAY_MS;
+            if (hadScroll || hadSelectionChange || hadMutation) {
+                continue;
+            }
+            const scrollTimeout = click.scrollDelayMs != null &&
+                click.scrollDelayMs > this._deadClickConfig.SCROLL_DELAY_MS;
+            const selectionChangeTimeout = click.selectionChangeDelayMs != null &&
+                click.selectionChangeDelayMs >
+                    this._deadClickConfig.SELECTION_CHANGE_DELAY_MS;
+            const mutationTimeout = click.mutationDelayMs != null &&
+                click.mutationDelayMs > this._deadClickConfig.MUTATION_DELAY_MS;
+            const absoluteTimeout = click.absoluteDelayMs != null &&
+                click.absoluteDelayMs >
+                    this._deadClickConfig.ABSOLUTE_DEAD_CLICK_TIMEOUT;
+            if (scrollTimeout ||
+                selectionChangeTimeout ||
+                mutationTimeout ||
+                absoluteTimeout) {
+                this._logDeadClick(click, {
+                    scrollTimeout,
+                    selectionChangeTimeout,
+                    mutationTimeout,
+                    absoluteTimeout,
+                });
+            }
+            else if (click.absoluteDelayMs != null &&
+                click.absoluteDelayMs <
+                    this._deadClickConfig.ABSOLUTE_DEAD_CLICK_TIMEOUT) {
+                this._clicks.push(click);
+            }
+        }
+        if (this._clicks.length && !this._clickCheckTimer) {
+            this._clickCheckTimer = (_a = (0, client_core_1._getWindowSafe)()) === null || _a === void 0 ? void 0 : _a.setTimeout(() => {
+                this._checkForDeadClick();
+            }, this._deadClickConfig.CLICK_CHECK_TIMEOUT);
+        }
+    }
+    _logDeadClick(click, extraMetadata) {
+        const { value, metadata } = (0, eventUtils_1._gatherEventData)(click.eventTarget);
+        this._enqueueFn(AutoCaptureEvent_1.AutoCaptureEventName.DEAD_CLICK, value, Object.assign(Object.assign(Object.assign({}, metadata), extraMetadata), { scrollDelayMs: click.scrollDelayMs, selectionChangeDelayMs: click.selectionChangeDelayMs, mutationDelayMs: click.mutationDelayMs, absoluteDelayMs: click.absoluteDelayMs }));
+    }
+    _updateClickDelayMs(click) {
+        if (!click.mutationDelayMs &&
+            this._lastMutationTime > 0 &&
+            click.timestamp <= this._lastMutationTime) {
+            click.mutationDelayMs = Date.now() - this._lastMutationTime;
+        }
+        if (!click.selectionChangeDelayMs &&
+            this._lastSelectionChangeTime > 0 &&
+            click.timestamp <= this._lastSelectionChangeTime) {
+            click.selectionChangeDelayMs = Date.now() - this._lastSelectionChangeTime;
+        }
+        click.absoluteDelayMs = Date.now() - click.timestamp;
+    }
+}
+exports.default = DeadClickManager;

package/src/utils/commonUtils.d.ts

@@ -4,9 +4,10 @@ interface NetworkInformation {
     rtt: number;
     saveData: boolean;
 }
+export declare const interactiveElements: string[];
 export declare function _stripEmptyValues<T extends Record<string, string | number | null | undefined>>(obj: T): Partial<Record<keyof T, string | number>>;
 export declare function _getTargetNode(e: Event): Element | null;
-export declare function _shouldLogEvent(e: Event, el: Element): boolean;
+export declare function _shouldLogEvent(e: Event, el: Element, isCopyEvent?: boolean): boolean;
 export declare function _getSafeUrl(): URL;
 export declare function _getSafeUrlString(): string;
 export declare function _getSanitizedPageUrl(): string;
@@ -15,4 +16,6 @@ export declare function _getSafeNetworkInformation(): NetworkInformation | null;
 export declare function _getSafeTimezone(): string | null;
 export declare function _getSafeTimezoneOffset(): number | null;
 export declare function _getAnchorNodeInHierarchy(node: Element | null): Element | null;
+export declare function _sanitizeString(maybeString: string | null | undefined): string | null;
+export declare function throttle<T extends (...args: unknown[]) => void>(fn: T, limit: number): T;
 export {};

package/src/utils/commonUtils.js

@@ -1,7 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrlString = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = void 0;
+exports.throttle = exports._sanitizeString = exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrlString = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = exports.interactiveElements = void 0;
 const client_core_1 = require("@statsig/client-core");
+const coreCCPattern = `(4[0-9]{12}(?:[0-9]{3})?)|(5[1-5][0-9]{14})|(6(?:011|5[0-9]{2})[0-9]{12})|(3[47][0-9]{13})|(3(?:0[0-5]|[68][0-9])[0-9]{11})|((?:2131|1800|35[0-9]{3})[0-9]{11})`;
+const CC_REGEX = new RegExp(`^(?:${coreCCPattern})$`);
+const coreSSNPattern = `\\d{3}-?\\d{2}-?\\d{4}`;
+const SSN_REGEX = new RegExp(`^(${coreSSNPattern})$`);
+exports.interactiveElements = [
+    'button',
+    'a',
+    'input',
+    'select',
+    'textarea',
+    'form',
+    'select',
+    'label',
+];
 function _stripEmptyValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value != null && value !== '' && value !== undefined));
 }
@@ -20,7 +34,7 @@ function _getTargetNode(e) {
     return target;
 }
 exports._getTargetNode = _getTargetNode;
-function _shouldLogEvent(e, el) {
+function _shouldLogEvent(e, el, isCopyEvent = false) {
     if (!e || !el || el.nodeType !== 1) {
         return false;
     }
@@ -30,15 +44,19 @@ function _shouldLogEvent(e, el) {
     if (classList.contains('statsig-no-capture')) {
         return false;
     }
+    if (isCopyEvent) {
+        // We don't want to force strict event filtering for copy events
+        return true;
+    }
     switch (tagName) {
         case 'html':
             return false;
         case 'form':
-            return eventType === 'submit';
+            return ['submit'].indexOf(eventType) >= 0;
         case 'input':
         case 'select':
         case 'textarea':
-            return ['change'].includes(eventType);
+            return ['change', 'click'].indexOf(eventType) >= 0;
         default:
             if (eventType === 'click') {
                 if (tagName === 'button') {
@@ -133,3 +151,38 @@ function _getAnchorNodeInHierarchy(node) {
     return null;
 }
 exports._getAnchorNodeInHierarchy = _getAnchorNodeInHierarchy;
+function _sanitizeString(maybeString) {
+    if (!maybeString) {
+        return null;
+    }
+    return maybeString
+        .replace(/<[^>]*>/g, '')
+        .trim()
+        .split(/(\s+)/)
+        .filter((s) => _shouldCaptureTextValue(s))
+        .join('')
+        .replace(/[\r\n]/g, ' ')
+        .replace(/[ ]+/g, ' ')
+        .substring(0, 255);
+}
+exports._sanitizeString = _sanitizeString;
+function _shouldCaptureTextValue(text) {
+    if (CC_REGEX.test((text || '').replace(/[- ]/g, ''))) {
+        return false;
+    }
+    if (SSN_REGEX.test((text || '').replace(/[- ]/g, ''))) {
+        return false;
+    }
+    return true;
+}
+function throttle(fn, limit) {
+    let lastCall = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (now - lastCall >= limit) {
+            lastCall = now;
+            fn(...args);
+        }
+    };
+}
+exports.throttle = throttle;

package/src/utils/eventUtils.d.ts

@@ -2,4 +2,5 @@ export declare function _gatherEventData(target: Element): {
     value: string;
     metadata: Record<string, unknown>;
 };
+export declare function _gatherCopyEventData(e: Event): Record<string, unknown>;
 export declare function _getMetadataFromElement(target: Element): Record<string, unknown>;

package/src/utils/eventUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._getMetadataFromElement = exports._gatherEventData = void 0;
+exports._getMetadataFromElement = exports._gatherCopyEventData = exports._gatherEventData = void 0;
 const client_core_1 = require("@statsig/client-core");
 const commonUtils_1 = require("./commonUtils");
 const MAX_ATTRIBUTE_LENGTH = 1000;
@@ -30,6 +30,16 @@ function _gatherEventData(target) {
     return { value, metadata };
 }
 exports._gatherEventData = _gatherEventData;
+function _gatherCopyEventData(e) {
+    var _a, _b;
+    const selectedText = (_b = (_a = (0, client_core_1._getWindowSafe)()) === null || _a === void 0 ? void 0 : _a.getSelection()) === null || _b === void 0 ? void 0 : _b.toString();
+    const metadata = {};
+    metadata['selectedText'] = (0, commonUtils_1._sanitizeString)(selectedText);
+    const clipType = e.type || 'clipboard';
+    metadata['clipType'] = clipType;
+    return metadata;
+}
+exports._gatherCopyEventData = _gatherCopyEventData;
 function _getFormMetadata(target) {
     var _a;
     const metadata = {};