@statsig/web-analytics 3.18.1 → 3.18.3

package/package.json

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

package/src/AutoCapture.d.ts

@@ -19,6 +19,7 @@ export declare class AutoCapture {
     private _hasLoggedPageViewEnd;
     private _engagementManager;
     private _rageClickManager;
+    private _webVitalsManager;
     constructor(_client: PrecomputedEvaluationsInterface, options?: AutoCaptureOptions);
     private _addEventHandlers;
     private _addPageViewTracking;
@@ -31,6 +32,7 @@ export declare class AutoCapture {
     private _logRageClick;
     private _logPerformance;
     private _enqueueAutoCapture;
+    private _flushImmediately;
     private _isNewSession;
     private _getSessionFromClient;
 }

package/src/AutoCapture.js

@@ -5,9 +5,10 @@ const client_core_1 = require("@statsig/client-core");
 const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
 const EngagementManager_1 = require("./EngagementManager");
 const RageClickManager_1 = require("./RageClickManager");
-const commonUtils_1 = require("./commonUtils");
-const eventUtils_1 = require("./eventUtils");
-const metadataUtils_1 = require("./metadataUtils");
+const WebVitalsManager_1 = require("./WebVitalsManager");
+const commonUtils_1 = require("./utils/commonUtils");
+const eventUtils_1 = require("./utils/eventUtils");
+const metadataUtils_1 = require("./utils/metadataUtils");
 const AUTO_EVENT_MAPPING = {
     submit: AutoCaptureEvent_1.AutoCaptureEventName.FORM_SUBMIT,
     click: AutoCaptureEvent_1.AutoCaptureEventName.CLICK,
@@ -23,6 +24,15 @@ class StatsigAutoCapturePlugin {
 }
 exports.StatsigAutoCapturePlugin = StatsigAutoCapturePlugin;
 function runStatsigAutoCapture(client, options) {
+    var _a;
+    const { sdkKey } = client.getContext();
+    if (!(0, client_core_1._isServerEnv)()) {
+        const global = (0, client_core_1._getStatsigGlobal)();
+        const instances = (_a = global.acInstances) !== null && _a !== void 0 ? _a : {};
+        if (instances[sdkKey]) {
+            return instances[sdkKey];
+        }
+    }
     return new AutoCapture(client, options);
 }
 exports.runStatsigAutoCapture = runStatsigAutoCapture;
@@ -45,6 +55,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._eventFilterFunc = options === null || options === void 0 ? void 0 : options.eventFilterFunc;
         const doc = (0, client_core_1._getDocumentSafe)();
         if (!(0, client_core_1._isServerEnv)()) {
@@ -123,6 +134,7 @@ class AutoCapture {
         this._enqueueAutoCapture(eventName, value, Object.assign(Object.assign({}, allMetadata), metadata));
     }
     _initialize() {
+        this._webVitalsManager.startTracking();
         this._engagementManager.startInactivityTracking(() => this._tryLogPageViewEnd(true));
         this._addEventHandlers();
         this._addPageViewTracking();
@@ -249,15 +261,18 @@ class AutoCapture {
             }
             this._client.logEvent(event);
             if (options === null || options === void 0 ? void 0 : options.flushImmediately) {
-                this._client.flush().catch((e) => {
-                    client_core_1.Log.error(e);
-                });
+                this._flushImmediately();
             }
         }
         catch (err) {
             this._errorBoundary.logError('AC::enqueue', err);
         }
     }
+    _flushImmediately() {
+        this._client.flush().catch((e) => {
+            client_core_1.Log.error(e);
+        });
+    }
     _isNewSession(session) {
         // within the last second
         return Math.abs(session.data.startTime - Date.now()) < 1000;

package/src/AutoCaptureEvent.d.ts

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

package/src/AutoCaptureEvent.js

@@ -10,4 +10,5 @@ exports.AutoCaptureEventName = {
     FORM_SUBMIT: 'auto_capture::form_submit',
     CLICK: 'auto_capture::click',
     RAGE_CLICK: 'auto_capture::rage_click',
+    WEB_VITALS: 'auto_capture::web_vitals',
 };

package/src/WebVitalsManager.d.ts

@@ -0,0 +1,9 @@
+import { AutoCaptureEventName } from './AutoCaptureEvent';
+export declare class WebVitalsManager {
+    private _enqueueFn;
+    private _isInitialized;
+    constructor(_enqueueFn: (eventName: AutoCaptureEventName, value: string, metadata: Record<string, unknown>) => void);
+    startTracking(): void;
+    private _handleMetric;
+    private _enqueueWebVitalsAutoCaptureEvent;
+}

package/src/WebVitalsManager.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebVitalsManager = void 0;
+const web_vitals_1 = require("web-vitals");
+const client_core_1 = require("@statsig/client-core");
+const AutoCaptureEvent_1 = require("./AutoCaptureEvent");
+const commonUtils_1 = require("./utils/commonUtils");
+const VALID_METRIC_NAMES = ['CLS', 'FCP', 'LCP', 'TTFB'];
+class WebVitalsManager {
+    constructor(_enqueueFn) {
+        this._enqueueFn = _enqueueFn;
+        this._isInitialized = false;
+    }
+    startTracking() {
+        var _a, _b;
+        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;
+    }
+    _handleMetric(metric) {
+        if (metric === undefined || (metric === null || metric === void 0 ? void 0 : metric.name) === undefined) {
+            return;
+        }
+        const currentUrl = (0, commonUtils_1._getSafeUrlString)();
+        if (currentUrl === '') {
+            // If the URL is not valid, we don't want to track the metric
+            return;
+        }
+        if (!VALID_METRIC_NAMES.includes(metric.name)) {
+            return;
+        }
+        this._enqueueWebVitalsAutoCaptureEvent(metric, currentUrl);
+    }
+    _enqueueWebVitalsAutoCaptureEvent(metric, url) {
+        if (url === '') {
+            return;
+        }
+        this._enqueueFn(AutoCaptureEvent_1.AutoCaptureEventName.WEB_VITALS, url, {
+            name: metric.name,
+            value: metric.value,
+            delta: metric.delta,
+            id: metric.id,
+        });
+    }
+}
+exports.WebVitalsManager = WebVitalsManager;

package/src/{commonUtils.d.ts → utils/commonUtils.d.ts}

@@ -8,6 +8,7 @@ export declare function _stripEmptyValues<T extends Record<string, string | numb
 export declare function _getTargetNode(e: Event): Element | null;
 export declare function _shouldLogEvent(e: Event, el: Element): boolean;
 export declare function _getSafeUrl(): URL;
+export declare function _getSafeUrlString(): string;
 export declare function _getSanitizedPageUrl(): string;
 export declare function _registerEventHandler(element: Document | Window, eventType: string, handler: (event: Event) => void): void;
 export declare function _getSafeNetworkInformation(): NetworkInformation | null;

package/src/{commonUtils.js → utils/commonUtils.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = void 0;
+exports._getAnchorNodeInHierarchy = exports._getSafeTimezoneOffset = exports._getSafeTimezone = exports._getSafeNetworkInformation = exports._registerEventHandler = exports._getSanitizedPageUrl = exports._getSafeUrlString = exports._getSafeUrl = exports._shouldLogEvent = exports._getTargetNode = exports._stripEmptyValues = void 0;
 const client_core_1 = require("@statsig/client-core");
 function _stripEmptyValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value != null && value !== '' && value !== undefined));
@@ -62,6 +62,14 @@ function _getSafeUrl() {
     return url;
 }
 exports._getSafeUrl = _getSafeUrl;
+function _getSafeUrlString() {
+    const urlString = _getSafeUrl().toString();
+    if (urlString.startsWith('error:')) {
+        return '';
+    }
+    return urlString;
+}
+exports._getSafeUrlString = _getSafeUrlString;
 function _getSanitizedPageUrl() {
     return (0, client_core_1._getCurrentPageUrlSafe)() || '';
 }