@statsig/web-analytics 3.20.3 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statsig/web-analytics",
-  "version": "3.20.3",
+  "version": "3.21.0",
   "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.3",
-    "@statsig/js-client": "3.20.3",
+    "@statsig/client-core": "3.21.0",
+    "@statsig/js-client": "3.21.0",
     "web-vitals": "5.0.3"
   },
   "jsdelivr": "./build/statsig-web-analytics.min.js",

package/src/AutoCapture.d.ts

@@ -1,8 +1,5 @@
 import { PrecomputedEvaluationsInterface, StatsigPlugin } from '@statsig/client-core';
-import { AutoCaptureEvent } from './AutoCaptureEvent';
-export type AutoCaptureOptions = {
-    eventFilterFunc?: (event: AutoCaptureEvent) => boolean;
-};
+import { AutoCaptureOptions } from './AutoCaptureOptions';
 export declare class StatsigAutoCapturePlugin implements StatsigPlugin<PrecomputedEvaluationsInterface> {
     private _options?;
     readonly __plugin = "auto-capture";
@@ -22,6 +19,7 @@ export declare class AutoCapture {
     private _pageViewLogged;
     private _webVitalsManager;
     private _deadClickManager;
+    private _consoleLogManager;
     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 ConsoleLogManager_1 = require("./ConsoleLogManager");
 const DeadClickManager_1 = require("./DeadClickManager");
 const EngagementManager_1 = require("./EngagementManager");
 const RageClickManager_1 = require("./RageClickManager");
@@ -13,6 +14,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) {
@@ -39,7 +42,7 @@ function runStatsigAutoCapture(client, options) {
 exports.runStatsigAutoCapture = runStatsigAutoCapture;
 class AutoCapture {
     constructor(_client, options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this._client = _client;
         this._disabledEvents = {};
         this._previousLoggedPageViewUrl = null;
@@ -59,11 +62,12 @@ class AutoCapture {
         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._consoleLogManager = new ConsoleLogManager_1.ConsoleLogManager(this._enqueueAutoCapture.bind(this), (_c = options === null || options === void 0 ? void 0 : options.consoleLogAutoCaptureSettings) !== null && _c !== void 0 ? _c : { enabled: false });
         this._eventFilterFunc = options === null || options === void 0 ? void 0 : options.eventFilterFunc;
         const doc = (0, client_core_1._getDocumentSafe)();
         if (!(0, client_core_1._isServerEnv)()) {
             __STATSIG__ = (0, client_core_1._getStatsigGlobal)();
-            const instances = (_c = __STATSIG__.acInstances) !== null && _c !== void 0 ? _c : {};
+            const instances = (_d = __STATSIG__.acInstances) !== null && _d !== void 0 ? _d : {};
             instances[sdkKey] = this;
             __STATSIG__.acInstances = instances;
         }
@@ -95,6 +99,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());
@@ -115,7 +121,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);
@@ -125,20 +131,33 @@ 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._consoleLogManager.startTracking();
         this._engagementManager.startInactivityTracking(() => this._tryLogPageViewEnd(true));
         this._addEventHandlers();
         this._addPageViewTracking();

package/src/AutoCaptureEvent.d.ts

@@ -10,6 +10,8 @@ export declare const AutoCaptureEventName: {
     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";
+    readonly CONSOLE_LOG: "statsig::log_line";
 };
 export type AutoCaptureEventName = (typeof AutoCaptureEventName)[keyof typeof AutoCaptureEventName] & string;
 export type AutoCaptureEvent = StatsigEvent & {

package/src/AutoCaptureEvent.js

@@ -12,4 +12,7 @@ exports.AutoCaptureEventName = {
     RAGE_CLICK: 'auto_capture::rage_click',
     WEB_VITALS: 'auto_capture::web_vitals',
     DEAD_CLICK: 'auto_capture::dead_click',
+    COPY: 'auto_capture::copy',
+    // log line is a special event name used to populate logs metrics explorer
+    CONSOLE_LOG: 'statsig::log_line',
 };

package/src/AutoCaptureOptions.d.ts

@@ -0,0 +1,14 @@
+import { LogLevel } from '@statsig/client-core';
+import { AutoCaptureEvent } from './AutoCaptureEvent';
+export type AutoCaptureOptions = {
+    eventFilterFunc?: (event: AutoCaptureEvent) => boolean;
+    consoleLogAutoCaptureSettings?: ConsoleLogAutoCaptureSettings;
+};
+export type ConsoleLogAutoCaptureSettings = {
+    enabled: boolean;
+    logLevel?: LogLevel;
+    serviceName?: string;
+    serviceVersion?: string;
+    sampleRate?: number;
+    resourceMetadata?: Record<string, string | number | boolean>;
+};

package/src/AutoCaptureOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/ConsoleLogManager.d.ts

@@ -0,0 +1,27 @@
+import { AutoCaptureEventName } from './AutoCaptureEvent';
+import { ConsoleLogAutoCaptureSettings } from './AutoCaptureOptions';
+export type LogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';
+export type ConsoleLogEvent = {
+    eventName: 'statsig::console_log';
+    value: string;
+    metadata: {
+        timestamp: string;
+        log_level: LogLevel;
+        payload: string[];
+        trace: string[];
+    };
+};
+export declare class ConsoleLogManager {
+    private _enqueueFn;
+    private _options;
+    private _restoreFns;
+    private _isTracking;
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void, _options: ConsoleLogAutoCaptureSettings);
+    startTracking(): void;
+    stopTracking(): void;
+    private _patchConsole;
+    private _enqueueConsoleLog;
+    private _shouldLog;
+    private _safeStringify;
+    private _getStackTrace;
+}

package/src/ConsoleLogManager.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsoleLogManager = void 0;
+/* eslint-disable no-console */
+const client_core_1 = require("@statsig/client-core");
+const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
+const commonUtils_1 = require("./utils/commonUtils");
+const metadataUtils_1 = require("./utils/metadataUtils");
+class ConsoleLogManager {
+    constructor(_enqueueFn, _options) {
+        this._enqueueFn = _enqueueFn;
+        this._options = _options;
+        this._restoreFns = [];
+        this._isTracking = false;
+    }
+    startTracking() {
+        if (this._isTracking || !this._options.enabled)
+            return;
+        const win = (0, client_core_1._getWindowSafe)();
+        if (!win)
+            return;
+        this._isTracking = true;
+        this._patchConsole();
+    }
+    stopTracking() {
+        if (!this._isTracking)
+            return;
+        this._restoreFns.forEach((restore) => restore());
+        this._restoreFns = [];
+        this._isTracking = false;
+    }
+    _patchConsole() {
+        ['log', 'info', 'warn', 'error', 'debug'].forEach((level) => {
+            if (!console[level])
+                return;
+            const original = console[level].bind(console);
+            let inStack = false;
+            const restore = (0, commonUtils_1.patch)(console, level, (originalFn) => {
+                return (...args) => {
+                    originalFn(...args);
+                    if (inStack)
+                        return;
+                    inStack = true;
+                    try {
+                        const payload = args.map((a) => this._safeStringify(a));
+                        const trace = this._getStackTrace();
+                        this._enqueueConsoleLog(level, payload, trace);
+                    }
+                    catch (err) {
+                        original('console observer error:', err, ...args);
+                    }
+                    finally {
+                        inStack = false;
+                    }
+                };
+            });
+            this._restoreFns.push(restore);
+        });
+    }
+    _enqueueConsoleLog(level, payload, trace) {
+        var _a, _b, _c;
+        if (!this._shouldLog())
+            return;
+        const metadata = Object.assign(Object.assign({ log_level: level, payload,
+            trace, timestamp: Date.now(), serviceName: (_a = this._options.serviceName) !== null && _a !== void 0 ? _a : '', serviceVersion: (_b = this._options.serviceVersion) !== null && _b !== void 0 ? _b : '' }, ((_c = this._options.resourceMetadata) !== null && _c !== void 0 ? _c : {})), (0, metadataUtils_1._gatherAllMetadata)((0, commonUtils_1._getSafeUrl)()));
+        this._enqueueFn(AutoCaptureEvent_1.AutoCaptureEventName.CONSOLE_LOG, (0, commonUtils_1._getSafeUrlString)(), metadata);
+    }
+    _shouldLog() {
+        if (!this._options.sampleRate ||
+            typeof this._options.sampleRate !== 'number' ||
+            this._options.sampleRate <= 0 ||
+            this._options.sampleRate >= 1) {
+            return true;
+        }
+        return Math.random() < this._options.sampleRate;
+    }
+    _safeStringify(val) {
+        try {
+            if (typeof val === 'string')
+                return val;
+            if (typeof val === 'object' && val !== null)
+                return JSON.stringify(val);
+            return String(val);
+        }
+        catch (_a) {
+            return '[Unserializable]';
+        }
+    }
+    _getStackTrace() {
+        var _a, _b;
+        try {
+            return (_b = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split('\n').slice(2)) !== null && _b !== void 0 ? _b : [];
+        }
+        catch (_c) {
+            return [];
+        }
+    }
+}
+exports.ConsoleLogManager = ConsoleLogManager;

package/src/utils/commonUtils.d.ts

@@ -7,7 +7,7 @@ interface NetworkInformation {
 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;
@@ -16,5 +16,7 @@ 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 declare function patch(source: Record<string, unknown>, name: string, replacement: (original: (...args: unknown[]) => void) => (...args: unknown[]) => void): () => void;
 export {};

package/src/utils/commonUtils.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.throttle = 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;
+exports.patch = 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',
@@ -30,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;
     }
@@ -40,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') {
@@ -143,6 +151,30 @@ 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) {
@@ -154,3 +186,38 @@ function throttle(fn, limit) {
     };
 }
 exports.throttle = throttle;
+// copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
+function patch(source, name, replacement) {
+    try {
+        if (!source[name])
+            return () => {
+                // noop
+            };
+        const original = source[name];
+        const wrapped = replacement(original);
+        // Make sure it's a function first, as we need to attach an empty prototype for `defineProperties` to work
+        // otherwise it'll throw "TypeError: Object.defineProperties called on non-object"
+        if (typeof wrapped === 'function') {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            wrapped.prototype = wrapped.prototype || {};
+            Object.defineProperties(wrapped, {
+                __statsig_original__: {
+                    enumerable: false,
+                    value: original,
+                },
+            });
+        }
+        source[name] = wrapped;
+        return () => {
+            source[name] = original;
+        };
+    }
+    catch (err) {
+        return () => {
+            // noop
+        };
+        // This can throw if multiple fill happens on a global object like XMLHttpRequest
+        // Fixes https://github.com/getsentry/sentry-javascript/issues/2043
+    }
+}
+exports.patch = patch;

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 = {};