mixpanel-browser 2.69.1 → 2.71.0

package/src/autocapture/utils.js

@@ -1,17 +1,23 @@
 // stateless utils
 // mostly from https://github.com/mixpanel/mixpanel-js/blob/989ada50f518edab47b9c4fd9535f9fbd5ec5fc0/src/autotrack-utils.js
 
-import { _, console_with_prefix, document } from '../utils'; // eslint-disable-line camelcase
+import { _, console_with_prefix, document, safewrap } from '../utils'; // eslint-disable-line camelcase
 import { window } from '../window';
 
 var EV_CHANGE = 'change';
 var EV_CLICK = 'click';
 var EV_HASHCHANGE = 'hashchange';
+var EV_INPUT = 'input';
+var EV_LOAD = 'load';
 var EV_MP_LOCATION_CHANGE = 'mp_locationchange';
 var EV_POPSTATE = 'popstate';
 // TODO scrollend isn't available in Safari: document or polyfill?
 var EV_SCROLLEND = 'scrollend';
+var EV_SCROLL = 'scroll';
+var EV_SELECT = 'select';
 var EV_SUBMIT = 'submit';
+var EV_TOGGLE = 'toggle';
+var EV_VISIBILITYCHANGE = 'visibilitychange';
 
 var CLICK_EVENT_PROPS = [
     'clientX', 'clientY',
@@ -28,6 +34,77 @@ var TRACKED_ATTRS = [
     'href', 'name', 'role', 'title', 'type'
 ];
 
+var INTERACTIVE_ARIA_ROLES = {
+    'button': true,
+    'checkbox': true,
+    'combobox': true,
+    'grid': true,
+    'link': true,
+    'listbox': true,
+    'menu': true,
+    'menubar': true,
+    'menuitem': true,
+    'menuitemcheckbox': true,
+    'menuitemradio': true,
+    'navigation': true,
+    'option': true,
+    'radio': true,
+    'radiogroup': true,
+    'searchbox': true,
+    'slider': true,
+    'spinbutton': true,
+    'switch': true,
+    'tab': true,
+    'tablist': true,
+    'textbox': true,
+    'tree': true,
+    'treegrid': true,
+    'treeitem': true
+};
+
+var ALWAYS_NON_INTERACTIVE_TAGS = {
+    // Document metadata
+    'base': true,
+    'head': true,
+    'html': true,
+    'link': true,
+    'meta': true,
+    'script': true,
+    'style': true,
+    'title': true,
+    // Text formatting
+    'br': true,
+    'hr': true,
+    'wbr': true,
+    // Other
+    'noscript': true,
+    'picture': true,
+    'source': true,
+    'template': true,
+    'track': true
+};
+
+// Common container tags that need additional checks
+var TEXT_CONTAINER_TAGS = {
+    'article': true,
+    'div': true,
+    'h1': true,
+    'h2': true,
+    'h3': true,
+    'h4': true,
+    'h5': true,
+    'h6': true,
+    'p': true,
+    'section': true,
+    'span': true
+};
+
+var EVENT_HANDLER_ATTRIBUTES = [
+    'onclick', 'onmousedown', 'onmouseup', 'onpointerdown', 'onpointerup', 'ontouchend', 'ontouchstart'
+];
+
+var MAX_DEPTH = 5;
+
 var logger = console_with_prefix('autocapture');
 
 
@@ -395,6 +472,10 @@ function minDOMApisSupported() {
     }
 }
 
+function weakSetSupported() {
+    return typeof WeakSet !== 'undefined';
+}
+
 /*
  * Check whether a DOM event should be "tracked" or if it may contain sensitive data
  * using a variety of heuristics.
@@ -520,12 +601,158 @@ function shouldTrackValue(value) {
     return true;
 }
 
+/**
+ * Creates a cross-browser compatible scroll end function with appropriate event listener.
+ * For browsers that support scrollend, returns the original function with scrollend event.
+ * For browsers without scrollend support, returns a debounced function that triggers
+ * 100ms after the last scroll event to simulate scrollend behavior.
+ * @param {Function} originalFunction - The function to call when scrolling ends
+ * @returns {Object} Object containing listener function and eventType string
+ * @returns {Function} returns.listener - The wrapped function to use as event listener
+ * @returns {string} returns.eventType - The event type to listen for ('scrollend' or 'scroll')
+ */
+function getPolyfillScrollEndFunction(originalFunction) {
+    var supportsScrollEnd = 'onscrollend' in window;
+    var polyfillFunction = safewrap(originalFunction);
+    var polyfillEvent = EV_SCROLLEND;
+    if (!supportsScrollEnd) {
+        // Polyfill for browsers without scrollend support: wait 100ms after the last scroll event
+        // https://developer.chrome.com/blog/scrollend-a-new-javascript-event
+        var scrollTimer = null;
+        var scrollDelayMs = 100;
+
+        polyfillFunction = safewrap(function() {
+            clearTimeout(scrollTimer);
+            scrollTimer = setTimeout(originalFunction, scrollDelayMs);
+        });
+
+        polyfillEvent = EV_SCROLL;
+    }
+
+    return {
+        listener: polyfillFunction,
+        eventType: polyfillEvent
+    };
+}
+
+function hasInlineEventHandlers(element) {
+    for (var i = 0; i < EVENT_HANDLER_ATTRIBUTES.length; i++) {
+        if (element.hasAttribute(EVENT_HANDLER_ATTRIBUTES[i])) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function hasInteractiveAriaRole(element) {
+    var role = element.getAttribute('role');
+    if (!role) return false;
+
+    // Handle invalid markup where multiple roles might be specified
+    // Only the first token is recognized per ARIA spec
+    var primaryRole = role.trim().split(/\s+/)[0].toLowerCase();
+
+    return INTERACTIVE_ARIA_ROLES[primaryRole];
+}
+
+function hasAnyInteractivityIndicators(element) {
+    var tagName = element.tagName.toLowerCase();
+
+    // Check for interactive HTML elements
+    if (tagName === 'button' ||
+        tagName === 'input' ||
+        tagName === 'select' ||
+        tagName === 'textarea' ||
+        tagName === 'details' ||
+        tagName === 'dialog') {
+        return true;
+    }
+
+    if (element.isContentEditable) {
+        return true;
+    }
+
+    if (element.onclick || element.onmousedown || element.onmouseup || element.ontouchstart || element.ontouchend) {
+        return true;
+    }
+
+    if (hasInlineEventHandlers(element)) {
+        return true;
+    }
+
+    if (hasInteractiveAriaRole(element)) {
+        return true;
+    }
+
+    if (tagName === 'a' && element.hasAttribute('href')) {
+        return true;
+    }
+
+    if (element.hasAttribute('tabindex')) {
+        return true;
+    }
+
+    return false;
+}
+
+
+function isDefinitelyNonInteractive(element) {
+    if (!element || !element.tagName) {
+        return true;
+    }
+
+    var tagName = element.tagName.toLowerCase();
+
+    // These tags are definitely non-interactive
+    if (ALWAYS_NON_INTERACTIVE_TAGS[tagName]) {
+        return true;
+    }
+
+    // For all other elements, we can only be certain they're non-interactive if they lack ALL indicators of interactivity
+    // Check for any signs of interactivity
+    if (hasAnyInteractivityIndicators(element)) {
+        return false;
+    }
+
+    // Check parent chain for interactive context
+    var parent = element.parentElement;
+    var depth = 0;
+
+    while (parent && depth < MAX_DEPTH) {
+        if (hasAnyInteractivityIndicators(parent)) {
+            return false; // Element is inside an interactive parent
+        }
+
+        if (parent.getRootNode && parent.getRootNode() !== document) {
+            var root = parent.getRootNode();
+            if (root.host && hasAnyInteractivityIndicators(root.host)) {
+                return false; // Inside an interactive shadow host
+            }
+        }
+
+        parent = parent.parentElement;
+        depth++;
+    }
+
+    // Pure text containers without any interactive context
+    if (TEXT_CONTAINER_TAGS[tagName]) {
+        // These are non-interactive ONLY if they have no interactive indicators (already checked as part of hasAnyInteractivityIndicators)
+        return true;
+    }
+
+    // Default: we can't be certain it's non-interactive
+    return false;
+}
+
 export {
+    EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_INPUT, EV_LOAD,EV_MP_LOCATION_CHANGE, EV_POPSTATE,
+    EV_SCROLL, EV_SCROLLEND, EV_SELECT, EV_SUBMIT, EV_TOGGLE, EV_VISIBILITYCHANGE,
+    getPolyfillScrollEndFunction,
     getPropsForDOMEvent,
     getSafeText,
+    isDefinitelyNonInteractive,
     logger,
     minDOMApisSupported,
     shouldTrackDomEvent, shouldTrackElementDetails, shouldTrackValue,
-    EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_MP_LOCATION_CHANGE, EV_POPSTATE,
-    EV_SCROLLEND, EV_SUBMIT
+    weakSetSupported
 };

package/src/config.js

@@ -1,6 +1,6 @@
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.69.0'
+    LIB_VERSION: '2.71.0'
 };
 
 export default Config;

package/src/flags/index.js

@@ -1,7 +1,7 @@
-import { _, console_with_prefix, safewrapClass } from '../utils'; // eslint-disable-line camelcase
+import { _, console_with_prefix, generateTraceparent, safewrapClass } from '../utils'; // eslint-disable-line camelcase
 import { window } from '../window';
+import Config from '../config';
 
-var fetch = window['fetch'];
 var logger = console_with_prefix('flags');
 
 var FLAGS_CONFIG_KEY = 'flags';
@@ -15,6 +15,7 @@ CONFIG_DEFAULTS[CONFIG_CONTEXT] = {};
  * @constructor
  */
 var FeatureFlagManager = function(initOptions) {
+    this.fetch = window['fetch'];
     this.getFullApiRoute = initOptions.getFullApiRoute;
     this.getMpConfig = initOptions.getConfigFunc;
     this.setMpConfig = initOptions.setConfigFunc;
@@ -23,7 +24,7 @@ var FeatureFlagManager = function(initOptions) {
 };
 
 FeatureFlagManager.prototype.init = function() {
-    if (!minApisSupported()) {
+    if (!this.minApisSupported()) {
         logger.critical('Feature Flags unavailable: missing minimum required APIs');
         return;
     }
@@ -86,18 +87,24 @@ FeatureFlagManager.prototype.fetchFlags = function() {
 
     var distinctId = this.getMpProperty('distinct_id');
     var deviceId = this.getMpProperty('$device_id');
+    var traceparent = generateTraceparent();
     logger.log('Fetching flags for distinct ID: ' + distinctId);
-    var reqParams = {
-        'context': _.extend({'distinct_id': distinctId, 'device_id': deviceId}, this.getConfig(CONFIG_CONTEXT))
-    };
+
+    var context = _.extend({'distinct_id': distinctId, 'device_id': deviceId}, this.getConfig(CONFIG_CONTEXT));
+    var searchParams = new URLSearchParams();
+    searchParams.set('context', JSON.stringify(context));
+    searchParams.set('token', this.getMpConfig('token'));
+    searchParams.set('mp_lib', 'web');
+    searchParams.set('$lib_version', Config.LIB_VERSION);
+    var url = this.getFullApiRoute() + '?' + searchParams.toString();
+
     this._fetchInProgressStartTime = Date.now();
-    this.fetchPromise = window['fetch'](this.getFullApiRoute(), {
-        'method': 'POST',
+    this.fetchPromise = this.fetch.call(window, url, {
+        'method': 'GET',
         'headers': {
             'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
-            'Content-Type': 'application/octet-stream'
-        },
-        'body': JSON.stringify(reqParams)
+            'traceparent': traceparent
+        }
     }).then(function(response) {
         this.markFetchComplete();
         return response.json().then(function(responseBody) {
@@ -109,10 +116,14 @@ FeatureFlagManager.prototype.fetchFlags = function() {
             _.each(responseFlags, function(data, key) {
                 flags.set(key, {
                     'key': data['variant_key'],
-                    'value': data['variant_value']
+                    'value': data['variant_value'],
+                    'experiment_id': data['experiment_id'],
+                    'is_experiment_active': data['is_experiment_active'],
+                    'is_qa_tester': data['is_qa_tester']
                 });
             });
             this.flags = flags;
+            this._traceparent = traceparent;
         }.bind(this)).catch(function(error) {
             this.markFetchComplete();
             logger.error(error);
@@ -209,22 +220,36 @@ FeatureFlagManager.prototype.trackFeatureCheck = function(featureName, feature)
         return;
     }
     this.trackedFeatures.add(featureName);
-    this.track('$experiment_started', {
+
+    var trackingProperties = {
         'Experiment name': featureName,
         'Variant name': feature['key'],
         '$experiment_type': 'feature_flag',
         'Variant fetch start time': new Date(this._fetchStartTime).toISOString(),
         'Variant fetch complete time': new Date(this._fetchCompleteTime).toISOString(),
-        'Variant fetch latency (ms)': this._fetchLatency
-    });
+        'Variant fetch latency (ms)': this._fetchLatency,
+        'Variant fetch traceparent': this._traceparent,
+    };
+
+    if (feature['experiment_id'] !== 'undefined') {
+        trackingProperties['$experiment_id'] = feature['experiment_id'];
+    }
+    if (feature['is_experiment_active'] !== 'undefined') {
+        trackingProperties['$is_experiment_active'] = feature['is_experiment_active'];
+    }
+    if (feature['is_qa_tester'] !== 'undefined') {
+        trackingProperties['$is_qa_tester'] = feature['is_qa_tester'];
+    }
+
+    this.track('$experiment_started', trackingProperties);
 };
 
-function minApisSupported() {
-    return !!fetch &&
+FeatureFlagManager.prototype.minApisSupported = function() {
+    return !!this.fetch &&
       typeof Promise !== 'undefined' &&
       typeof Map !== 'undefined' &&
       typeof Set !== 'undefined';
-}
+};
 
 safewrapClass(FeatureFlagManager);
 

package/src/index.d.ts

@@ -40,7 +40,7 @@ export interface OutTrackingOptions extends ClearOptOutInOutOptions {
   delete_user: boolean;
 }
 
-export type RageClickConfig = 
+export type RageClickConfig =
   | boolean
   | {
     /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
@@ -51,6 +51,13 @@ export type RageClickConfig =
     click_count?: number;
   };
 
+export type DeadClickConfig =
+  | boolean
+  | {
+    /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
+    timeout_ms?: number;
+  };
+
 export interface RegisterOptions {
   persistent: boolean;
 }
@@ -83,6 +90,12 @@ export interface AutocaptureConfig {
    * @default true
    */
   rage_click?: RageClickConfig;
+  /**
+   * When set to `true`, Mixpanel will track dead clicks (clicks that produce no response).
+   * Can also be configured as an object to customize dead click detection parameters.
+   * @default true
+   */
+  dead_click?: DeadClickConfig;
   /**
    * When set, Mixpanel will collect page scrolls at specified scroll intervals.
    * @default true
@@ -191,12 +204,12 @@ export interface Config {
   batch_size: number;
   batch_flush_interval_ms: number;
   batch_request_timeout_ms: number;
-  record_block_class: string;
+  record_block_class: string | RegExp;
   record_block_selector: string;
   record_collect_fonts: boolean;
   record_idle_timeout_ms: number;
   record_inline_images: boolean;
-  record_mask_text_class: string;
+  record_mask_text_class: string | RegExp;
   record_mask_text_selector: string;
   record_min_ms: number;
   record_max_ms: number;

package/src/loaders/loader-module-core.d.ts

@@ -0,0 +1 @@
+export * from '../index';

package/src/loaders/loader-module-with-async-recorder.d.ts

@@ -0,0 +1 @@
+export * from '../index';

package/src/loaders/loader-module.d.ts

@@ -0,0 +1 @@
+export * from '../index';

package/src/utils.js

@@ -1677,6 +1677,20 @@ var cheap_guid = function(maxlen) {
     return maxlen ? guid.substring(0, maxlen) : guid;
 };
 
+/**
+ * Generates a W3C traceparent header for easy interop with distributed tracing systems i.e Open Telemetry
+ * https://www.w3.org/TR/trace-context/#traceparent-header
+*/
+var generateTraceparent = function() {
+    var traceID = _.UUID().replace(/-/g, '');
+    var parentID = _.UUID().replace(/-/g, '').substring(0, 16);
+
+    // Sampled trace
+    var traceFlags = '01';
+
+    return '00-' + traceID + '-' + parentID + '-' + traceFlags;
+};
+
 // naive way to extract domain name (example.com) from full hostname (my.sub.example.com)
 var SIMPLE_DOMAIN_MATCH_REGEX = /[a-z0-9][a-z0-9-]*\.[a-z]+$/i;
 // this next one attempts to account for some ccSLDs, e.g. extracting oxford.ac.uk from www.oxford.ac.uk
@@ -1746,6 +1760,7 @@ export {
     console,
     document,
     extract_domain,
+    generateTraceparent,
     JSONParse,
     JSONStringify,
     isOnline,