@statsig/web-analytics 3.24.4 → 3.25.0

package/package.json

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

package/src/AutoCapture.js

@@ -240,6 +240,9 @@ class AutoCapture {
         });
     }
     _logRageClick(e) {
+        if (!(0, commonUtils_1._shouldLogEvent)(e, e.target)) {
+            return;
+        }
         const { value, metadata } = (0, eventUtils_1._gatherEventData)(e.target);
         this._enqueueAutoCapture(AutoCaptureEvent_1.AutoCaptureEventName.RAGE_CLICK, value, Object.assign(Object.assign({ x: e.clientX, y: e.clientY, timestamp: Date.now() }, (0, metadataUtils_1._gatherAllMetadata)((0, commonUtils_1._getSafeUrl)())), metadata));
     }
@@ -311,7 +314,10 @@ class AutoCapture {
         const typedClient = this._client;
         typedClient._possibleFirstTouchMetadata =
             (0, metadataUtils_1._getPossibleFirstTouchMetadata)((0, commonUtils_1._getSafeUrl)());
-        typedClient._user = Object.assign(Object.assign({}, typedClient._user), { analyticsOnlyMetadata: Object.assign(Object.assign({}, typedClient._possibleFirstTouchMetadata), typedClient._user.analyticsOnlyMetadata) });
+        // Only update user if first touch metadata is not empty
+        if (Object.keys(typedClient._possibleFirstTouchMetadata).length > 0) {
+            typedClient._user = Object.assign(Object.assign({}, typedClient._user), { analyticsOnlyMetadata: Object.assign(Object.assign({}, typedClient._possibleFirstTouchMetadata), typedClient._user.analyticsOnlyMetadata) });
+        }
     }
     _flushImmediately() {
         this._client.flush().catch((e) => {

package/src/utils/commonUtils.js

@@ -59,7 +59,14 @@ function _shouldLogEvent(e, el, isCopyEvent = false) {
             return ['change', 'click'].indexOf(eventType) >= 0;
         default:
             if (eventType === 'click') {
-                if (tagName === 'button') {
+                const compStyles = window.getComputedStyle(el);
+                if (compStyles && compStyles.getPropertyValue('cursor') === 'pointer') {
+                    return true;
+                }
+                if (exports.interactiveElements.includes(tagName)) {
+                    return true;
+                }
+                if (el.getAttribute('contenteditable') === 'true') {
                     return true;
                 }
                 const anchor = _getAnchorNodeInHierarchy(el);

package/src/utils/eventUtils.d.ts

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

package/src/utils/eventUtils.js

@@ -7,12 +7,13 @@ const MAX_ATTRIBUTE_LENGTH = 1000;
 const MAX_CLASS_LIST_LENGTH = 100;
 const MAX_SELECTOR_DEPTH = 50;
 function _gatherEventData(target) {
+    const value = (0, commonUtils_1._getSanitizedPageUrl)() || '';
+    const tagName = target.tagName.toLowerCase();
+    // If the element is sensitive, we only gather safe attribute fields
     if (_isSensitiveElement(target)) {
-        return { value: null, metadata: {} };
+        return { value, metadata: _getSafeMetadataAttributes(target) };
     }
-    const tagName = target.tagName.toLowerCase();
     const metadata = {};
-    const value = (0, commonUtils_1._getSanitizedPageUrl)() || '';
     metadata['tagName'] = tagName;
     const elementMetadata = _getMetadataFromElement(target);
     Object.assign(metadata, elementMetadata);
@@ -95,14 +96,21 @@ function _truncateString(str, maxLength) {
         return null;
     return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
 }
+function _getSafeMetadataAttributes(elem) {
+    const metadata = {};
+    metadata['class'] = _normalizeClassAttribute(_truncateString(elem.getAttribute('class'), MAX_ATTRIBUTE_LENGTH) || '');
+    metadata['id'] = _truncateString(elem.getAttribute('id'), MAX_ATTRIBUTE_LENGTH);
+    metadata['ariaLabel'] = _truncateString(elem.getAttribute('aria-label'), MAX_ATTRIBUTE_LENGTH);
+    metadata['name'] = _truncateString(elem.getAttribute('name'), MAX_ATTRIBUTE_LENGTH);
+    return metadata;
+}
 function _getMetadataFromElement(target) {
     const metadata = {};
+    const safeAttributes = _getSafeMetadataAttributes(target);
+    Object.assign(metadata, safeAttributes);
     const classList = Array.from(target.classList);
     metadata['classList'] =
         classList.length > 0 ? classList.slice(0, MAX_CLASS_LIST_LENGTH) : null;
-    metadata['class'] = _normalizeClassAttribute(_truncateString(target.getAttribute('class'), MAX_ATTRIBUTE_LENGTH) || '');
-    metadata['id'] = _truncateString(target.getAttribute('id'), MAX_ATTRIBUTE_LENGTH);
-    metadata['ariaLabel'] = _truncateString(target.getAttribute('aria-label'), MAX_ATTRIBUTE_LENGTH);
     metadata['selector'] = _generateCssSelector(target);
     return metadata;
 }