@statsig/web-analytics 3.23.0 → 3.24.0

package/package.json

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

package/src/AutoCapture.js

@@ -51,7 +51,7 @@ class AutoCapture {
         const { sdkKey, errorBoundary, values } = _client.getContext();
         this._disabledEvents = (_b = (_a = values === null || values === void 0 ? void 0 : values.auto_capture_settings) === null || _a === void 0 ? void 0 : _a.disabled_events) !== null && _b !== void 0 ? _b : {};
         this._errorBoundary = errorBoundary;
-        this._errorBoundary.wrap(this);
+        this._errorBoundary.wrap(this, 'autoCapture:');
         this._client.$on('values_updated', () => {
             var _a, _b;
             const values = this._client.getContext().values;
@@ -60,9 +60,9 @@ 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._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._webVitalsManager = new WebVitalsManager_1.WebVitalsManager(this._enqueueAutoCapture.bind(this), errorBoundary);
+        this._deadClickManager = new DeadClickManager_1.default(this._enqueueAutoCapture.bind(this), errorBoundary);
+        this._consoleLogManager = new ConsoleLogManager_1.ConsoleLogManager(this._enqueueAutoCapture.bind(this), errorBoundary, (_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)()) {

package/src/ConsoleLogManager.d.ts

@@ -1,14 +1,16 @@
+import { ErrorBoundary } from '@statsig/client-core';
 import { AutoCaptureEventName } from './AutoCaptureEvent';
 import { ConsoleLogAutoCaptureSettings } from './AutoCaptureOptions';
 export type ConsoleLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug' | 'trace';
 export declare class ConsoleLogManager {
     private _enqueueFn;
+    private _errorBoundary;
     private _options;
     private _restoreFns;
     private _isTracking;
     private _logLevel;
     private readonly __source;
-    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void, _options: ConsoleLogAutoCaptureSettings);
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void, _errorBoundary: ErrorBoundary, _options: ConsoleLogAutoCaptureSettings);
     startTracking(): void;
     stopTracking(): void;
     private _patchConsole;

package/src/ConsoleLogManager.js

@@ -15,9 +15,10 @@ const ConsoleLogPriority = {
     error: 50,
 };
 class ConsoleLogManager {
-    constructor(_enqueueFn, _options) {
+    constructor(_enqueueFn, _errorBoundary, _options) {
         var _a;
         this._enqueueFn = _enqueueFn;
+        this._errorBoundary = _errorBoundary;
         this._options = _options;
         this._restoreFns = [];
         this._isTracking = false;
@@ -26,13 +27,19 @@ class ConsoleLogManager {
         this._logLevel = (_a = this._options.logLevel) !== null && _a !== void 0 ? _a : 'info';
     }
     startTracking() {
-        if (this._isTracking || !this._options.enabled)
-            return;
-        const win = (0, client_core_1._getWindowSafe)();
-        if (!win)
-            return;
-        this._isTracking = true;
-        this._patchConsole();
+        try {
+            if (this._isTracking || !this._options.enabled)
+                return;
+            const win = (0, client_core_1._getWindowSafe)();
+            if (!win)
+                return;
+            this._patchConsole();
+            this._isTracking = true;
+        }
+        catch (error) {
+            client_core_1.Log.error('Error starting console log tracking', error);
+            this._errorBoundary.logError('autoCapture:ConsoleLogManager', error);
+        }
     }
     stopTracking() {
         if (!this._isTracking)
@@ -62,6 +69,7 @@ class ConsoleLogManager {
                     }
                     catch (err) {
                         original('console observer error:', err, ...args);
+                        this._errorBoundary.logError('autoCapture:ConsoleLogManager', err);
                     }
                     finally {
                         inStack = false;

package/src/DeadClickManager.d.ts

@@ -1,3 +1,4 @@
+import { ErrorBoundary } from '@statsig/client-core';
 import { AutoCaptureEventName } from './AutoCaptureEvent';
 export declare const DeadClickConfig: {
     CLICK_CHECK_TIMEOUT: number;
@@ -16,13 +17,14 @@ export interface PossibleDeadClick {
 }
 export default class DeadClickManager {
     private _enqueueFn;
+    private _errorBoundary;
     private _lastMutationTime;
     private _lastSelectionChangeTime;
     private _clickCheckTimer;
     private _observer;
     private _clicks;
     private _deadClickConfig;
-    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void);
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void, _errorBoundary: ErrorBoundary);
     startTracking(): void;
     private _handleClick;
     private _handleScroll;

package/src/DeadClickManager.js

@@ -15,8 +15,9 @@ exports.DeadClickConfig = {
 };
 // A dead click is a click that fires an event but produces no meaningful change within a set timeframe.
 class DeadClickManager {
-    constructor(_enqueueFn) {
+    constructor(_enqueueFn, _errorBoundary) {
         this._enqueueFn = _enqueueFn;
+        this._errorBoundary = _errorBoundary;
         this._lastMutationTime = 0;
         this._lastSelectionChangeTime = 0;
         this._clicks = [];
@@ -31,25 +32,31 @@ class DeadClickManager {
         }, 50);
     }
     startTracking() {
-        const win = (0, client_core_1._getWindowSafe)();
-        if (!win) {
-            return;
+        try {
+            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();
+        }
+        catch (error) {
+            client_core_1.Log.error('Error starting dead click tracking', error);
+            this._errorBoundary.logError('autoCapture:DeadClickManager', error);
         }
-        // `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;

package/src/WebVitalsManager.d.ts

@@ -1,8 +1,11 @@
+import { ErrorBoundary } from '@statsig/client-core';
 import { AutoCaptureEventName } from './AutoCaptureEvent';
 export declare class WebVitalsManager {
     private _enqueueFn;
+    private _errorBoundary;
     private _isInitialized;
-    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void);
+    private _metricEvent;
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void, _errorBoundary: ErrorBoundary);
     startTracking(): void;
     private _handleMetric;
     private _enqueueWebVitalsAutoCaptureEvent;

package/src/WebVitalsManager.js

@@ -7,27 +7,44 @@ const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
 const commonUtils_1 = require("./utils/commonUtils");
 const VALID_METRIC_NAMES = ['CLS', 'FCP', 'LCP', 'TTFB'];
 class WebVitalsManager {
-    constructor(_enqueueFn) {
+    constructor(_enqueueFn, _errorBoundary) {
         this._enqueueFn = _enqueueFn;
+        this._errorBoundary = _errorBoundary;
         this._isInitialized = false;
+        this._metricEvent = {
+            url: (0, commonUtils_1._getSafeUrlString)(),
+            sanitizedUrl: (0, commonUtils_1._getSanitizedPageUrl)(),
+            metrics: [],
+            firstMetricTimestamp: undefined,
+        };
     }
     startTracking() {
         var _a, _b;
-        if (this._isInitialized) {
-            return;
+        try {
+            if (this._isInitialized) {
+                return;
+            }
+            const protocol = (_b = (_a = (0, client_core_1._getWindowSafe)()) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.protocol;
+            if (protocol !== 'https:' && protocol !== 'http:') {
+                return;
+            }
+            (0, web_vitals_1.onCLS)((metric) => this._handleMetric(metric));
+            (0, web_vitals_1.onFCP)((metric) => this._handleMetric(metric));
+            (0, web_vitals_1.onLCP)((metric) => this._handleMetric(metric));
+            (0, web_vitals_1.onTTFB)((metric) => this._handleMetric(metric));
+            this._isInitialized = true;
         }
-        const protocol = (_b = (_a = (0, client_core_1._getWindowSafe)()) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.protocol;
-        if (protocol !== 'https:' && protocol !== 'http:') {
-            return;
+        catch (error) {
+            client_core_1.Log.error('Error starting web vitals tracking', error);
+            this._errorBoundary.logError('autoCapture:WebVitalsManager', error);
         }
-        (0, web_vitals_1.onCLS)((metric) => this._handleMetric(metric));
-        (0, web_vitals_1.onFCP)((metric) => this._handleMetric(metric));
-        (0, web_vitals_1.onLCP)((metric) => this._handleMetric(metric));
-        (0, web_vitals_1.onTTFB)((metric) => this._handleMetric(metric));
-        this._isInitialized = true;
     }
     _handleMetric(metric) {
-        if (metric === undefined || (metric === null || metric === void 0 ? void 0 : metric.name) === undefined) {
+        if (this._metricEvent.firstMetricTimestamp === undefined) {
+            this._metricEvent.firstMetricTimestamp = Date.now();
+        }
+        if (metric === undefined ||
+            (metric === null || metric === void 0 ? void 0 : metric.name) === undefined) {
             return;
         }
         const currentUrl = (0, commonUtils_1._getSafeUrlString)();
@@ -38,18 +55,40 @@ class WebVitalsManager {
         if (!VALID_METRIC_NAMES.includes(metric.name)) {
             return;
         }
-        this._enqueueWebVitalsAutoCaptureEvent(metric, currentUrl);
+        if (currentUrl !== this._metricEvent.url) {
+            this._enqueueWebVitalsAutoCaptureEvent();
+            this._metricEvent.url = currentUrl;
+        }
+        const metricData = metric;
+        this._metricEvent.metrics.push({
+            name: metricData.name,
+            value: metricData.value,
+            delta: metricData.delta,
+            id: metricData.id,
+        });
+        if (this._metricEvent.metrics.length === VALID_METRIC_NAMES.length) {
+            this._enqueueWebVitalsAutoCaptureEvent();
+        }
     }
-    _enqueueWebVitalsAutoCaptureEvent(metric, url) {
-        if (url === '') {
+    _enqueueWebVitalsAutoCaptureEvent() {
+        if (this._metricEvent.url === '' ||
+            this._metricEvent.metrics.length === 0) {
             return;
         }
-        this._enqueueFn(AutoCaptureEvent_1.AutoCaptureEventName.WEB_VITALS, url, {
-            name: metric.name,
-            value: metric.value,
-            delta: metric.delta,
-            id: metric.id,
+        const flattenedMetrics = {};
+        this._metricEvent.metrics.forEach((metric) => {
+            const prefix = metric.name.toLowerCase();
+            flattenedMetrics[`${prefix}_value`] = metric.value;
+            flattenedMetrics[`${prefix}_delta`] = metric.delta;
+            flattenedMetrics[`${prefix}_id`] = metric.id;
         });
+        this._enqueueFn(AutoCaptureEvent_1.AutoCaptureEventName.WEB_VITALS, this._metricEvent.sanitizedUrl, Object.assign(Object.assign({}, flattenedMetrics), { first_metric_timestamp: this._metricEvent.firstMetricTimestamp }));
+        this._metricEvent = {
+            url: (0, commonUtils_1._getSafeUrlString)(),
+            sanitizedUrl: (0, commonUtils_1._getSanitizedPageUrl)(),
+            metrics: [],
+            firstMetricTimestamp: undefined,
+        };
     }
 }
 exports.WebVitalsManager = WebVitalsManager;