mixpanel-browser 2.74.0 → 2.76.0

package/src/flags/index.js

@@ -1,15 +1,36 @@
 import { _, console_with_prefix, generateTraceparent, safewrapClass } from '../utils'; // eslint-disable-line camelcase
 import { window } from '../window';
-import Config from '../config';
+import { Config, TARGETING_GLOBAL_NAME } from '../config';
+import {
+    getTargetingPromise
+} from '../targeting/loader';
 
 var logger = console_with_prefix('flags');
-
 var FLAGS_CONFIG_KEY = 'flags';
 
 var CONFIG_CONTEXT = 'context';
 var CONFIG_DEFAULTS = {};
 CONFIG_DEFAULTS[CONFIG_CONTEXT] = {};
 
+/**
+ * Generate a unique key for a pending first-time event
+ * @param {string} flagKey - The flag key
+ * @param {string} firstTimeEventHash - The first_time_event_hash from the pending event definition
+ * @returns {string} Composite key in format "flagKey:firstTimeEventHash"
+ */
+var getPendingEventKey = function(flagKey, firstTimeEventHash) {
+    return flagKey + ':' + firstTimeEventHash;
+};
+
+/**
+ * Extract the flag key from a pending event key
+ * @param {string} eventKey - The composite event key in format "flagKey:firstTimeEventHash"
+ * @returns {string} The flag key portion
+ */
+var getFlagKeyFromPendingEventKey = function(eventKey) {
+    return eventKey.split(':')[0];
+};
+
 /**
  * FeatureFlagManager: support for Mixpanel's feature flagging product
  * @constructor
@@ -21,6 +42,8 @@ var FeatureFlagManager = function(initOptions) {
     this.setMpConfig = initOptions.setConfigFunc;
     this.getMpProperty = initOptions.getPropertyFunc;
     this.track = initOptions.trackingFunc;
+    this.loadExtraBundle = initOptions.loadExtraBundle || function() {};
+    this.targetingSrc = initOptions.targetingSrc || '';
 };
 
 FeatureFlagManager.prototype.init = function() {
@@ -33,6 +56,8 @@ FeatureFlagManager.prototype.init = function() {
     this.fetchFlags();
 
     this.trackedFeatures = new Set();
+    this.pendingFirstTimeEvents = {};
+    this.activatedFirstTimeEvents = {};
 };
 
 FeatureFlagManager.prototype.getFullConfig = function() {
@@ -113,17 +138,78 @@ FeatureFlagManager.prototype.fetchFlags = function() {
                 throw new Error('No flags in API response');
             }
             var flags = new Map();
+            var pendingFirstTimeEvents = {};
+
+            // Process flags from response
             _.each(responseFlags, function(data, key) {
-                flags.set(key, {
-                    'key': data['variant_key'],
-                    'value': data['variant_value'],
-                    'experiment_id': data['experiment_id'],
-                    'is_experiment_active': data['is_experiment_active'],
-                    'is_qa_tester': data['is_qa_tester']
+                // Check if this flag has any activated first-time events this session
+                var hasActivatedEvent = false;
+                var prefix = key + ':';
+                _.each(this.activatedFirstTimeEvents, function(activated, eventKey) {
+                    if (eventKey.startsWith(prefix)) {
+                        hasActivatedEvent = true;
+                    }
                 });
-            });
+
+                if (hasActivatedEvent) {
+                    // Preserve the activated variant, don't overwrite with server's current variant
+                    var currentFlag = this.flags && this.flags.get(key);
+                    if (currentFlag) {
+                        flags.set(key, currentFlag);
+                    }
+                } else {
+                    // Use server's current variant
+                    flags.set(key, {
+                        'key': data['variant_key'],
+                        'value': data['variant_value'],
+                        'experiment_id': data['experiment_id'],
+                        'is_experiment_active': data['is_experiment_active'],
+                        'is_qa_tester': data['is_qa_tester']
+                    });
+                }
+            }, this);
+
+            // Process top-level pending_first_time_events array
+            var topLevelDefinitions = responseBody['pending_first_time_events'];
+            if (topLevelDefinitions && topLevelDefinitions.length > 0) {
+                _.each(topLevelDefinitions, function(def) {
+                    var flagKey = def['flag_key'];
+                    var eventKey = getPendingEventKey(flagKey, def['first_time_event_hash']);
+
+                    // Skip if this specific event has already been activated this session
+                    if (this.activatedFirstTimeEvents[eventKey]) {
+                        return;
+                    }
+
+                    // Store pending event definition using composite key
+                    pendingFirstTimeEvents[eventKey] = {
+                        'flag_key': flagKey,
+                        'flag_id': def['flag_id'],
+                        'project_id': def['project_id'],
+                        'first_time_event_hash': def['first_time_event_hash'],
+                        'event_name': def['event_name'],
+                        'property_filters': def['property_filters'],
+                        'pending_variant': def['pending_variant']
+                    };
+                }, this);
+            }
+
+            // Preserve any activated orphaned flags (flags that were activated but are no longer in response)
+            if (this.activatedFirstTimeEvents) {
+                _.each(this.activatedFirstTimeEvents, function(activated, eventKey) {
+                    var flagKey = getFlagKeyFromPendingEventKey(eventKey);
+                    if (activated && !flags.has(flagKey) && this.flags && this.flags.has(flagKey)) {
+                        // Keep the activated flag even though it's not in the new response
+                        flags.set(flagKey, this.flags.get(flagKey));
+                    }
+                }, this);
+            }
+
             this.flags = flags;
+            this.pendingFirstTimeEvents = pendingFirstTimeEvents;
             this._traceparent = traceparent;
+
+            this._loadTargetingIfNeeded();
         }.bind(this)).catch(function(error) {
             this.markFetchComplete();
             logger.error(error);
@@ -147,6 +233,177 @@ FeatureFlagManager.prototype.markFetchComplete = function() {
     this._fetchInProgressStartTime = null;
 };
 
+/**
+ * Proactively load targeting bundle if any pending events have property filters
+ */
+FeatureFlagManager.prototype._loadTargetingIfNeeded = function() {
+    var hasPropertyFilters = false;
+    _.each(this.pendingFirstTimeEvents, function(evt) {
+        if (evt['property_filters'] && !_.isEmptyObject(evt['property_filters'])) {
+            hasPropertyFilters = true;
+        }
+    });
+
+    if (hasPropertyFilters) {
+        this.getTargeting().then(function() {
+            logger.log('targeting loaded for property filter evaluation');
+        });
+    }
+};
+
+/**
+ * Get the targeting library (initializes if not already loaded)
+ * This method is primarily for testing - production code should rely on automatic loading
+ * @returns {Promise} Promise that resolves with targeting library
+ */
+FeatureFlagManager.prototype.getTargeting = function() {
+    return getTargetingPromise(
+        this.loadExtraBundle.bind(this),
+        this.targetingSrc
+    ).catch(function(error) {
+        logger.error('Failed to load targeting: ' + error);
+    }.bind(this));
+};
+
+/**
+ * Check if a tracked event matches any pending first-time events and activate the corresponding flag variant
+ * @param {string} eventName - The name of the event being tracked
+ * @param {Object} properties - Event properties to evaluate against property filters
+ *
+ * When a match is found (event name matches and property filters pass), this method:
+ * - Switches the flag to the pending variant
+ * - Marks the event as activated for this session
+ * - Records the activation via the API (fire-and-forget)
+ */
+FeatureFlagManager.prototype.checkFirstTimeEvents = function(eventName, properties) {
+    if (!this.pendingFirstTimeEvents || _.isEmptyObject(this.pendingFirstTimeEvents)) {
+        return;
+    }
+
+    // Check if targeting promise exists (either bundled or async loaded)
+    if (window[TARGETING_GLOBAL_NAME] && _.isFunction(window[TARGETING_GLOBAL_NAME].then)) {
+        window[TARGETING_GLOBAL_NAME].then(function(library) {
+            this._processFirstTimeEventCheck(eventName, properties, library);
+        }.bind(this)).catch(function() {
+            // If targeting failed to load, process with null
+            // Events without property filters will still match
+            this._processFirstTimeEventCheck(eventName, properties, null);
+        }.bind(this));
+    } else {
+        // No targeting available, process with null
+        // Events without property filters will still match
+        this._processFirstTimeEventCheck(eventName, properties, null);
+    }
+};
+
+/**
+ * Internal method to process first-time event checks with loaded targeting library
+ * @param {string} eventName - The name of the event being tracked
+ * @param {Object} properties - Event properties to evaluate against property filters
+ * @param {Object} targeting - The loaded targeting library
+ */
+FeatureFlagManager.prototype._processFirstTimeEventCheck = function(eventName, properties, targeting) {
+    _.each(this.pendingFirstTimeEvents, function(pendingEvent, eventKey) {
+        if (this.activatedFirstTimeEvents[eventKey]) {
+            return;
+        }
+
+        var flagKey = pendingEvent['flag_key'];
+
+        // Use targeting module to check if event matches
+        var matchResult;
+
+        // If no targeting library and event has property filters, skip it
+        if (!targeting && pendingEvent['property_filters'] && !_.isEmptyObject(pendingEvent['property_filters'])) {
+            logger.warn('Skipping event check for "' + flagKey + '" - property filters require targeting library');
+            return;
+        }
+
+        // For simple events (no property filters), just check event name
+        if (!targeting) {
+            matchResult = {
+                matches: eventName === pendingEvent['event_name'],
+                error: null
+            };
+        } else {
+            var criteria = {
+                'event_name': pendingEvent['event_name'],
+                'property_filters': pendingEvent['property_filters']
+            };
+            matchResult = targeting['eventMatchesCriteria'](
+                eventName,
+                properties,
+                criteria
+            );
+        }
+
+        if (matchResult.error) {
+            logger.error('Error checking first-time event for flag "' + flagKey + '": ' + matchResult.error);
+            return;
+        }
+
+        if (!matchResult.matches) {
+            return;
+        }
+
+        logger.log('First-time event matched for flag "' + flagKey + '": ' + eventName);
+
+        var newVariant = {
+            'key': pendingEvent['pending_variant']['variant_key'],
+            'value': pendingEvent['pending_variant']['variant_value'],
+            'experiment_id': pendingEvent['pending_variant']['experiment_id'],
+            'is_experiment_active': pendingEvent['pending_variant']['is_experiment_active']
+        };
+
+        this.flags.set(flagKey, newVariant);
+        this.activatedFirstTimeEvents[eventKey] = true;
+
+        this.recordFirstTimeEvent(
+            pendingEvent['flag_id'],
+            pendingEvent['project_id'],
+            pendingEvent['first_time_event_hash']
+        );
+    }, this);
+};
+
+FeatureFlagManager.prototype.getFirstTimeEventApiRoute = function(flagId) {
+    // Construct URL: {api_host}/flags/{flagId}/first-time-events
+    return this.getFullApiRoute() + '/' + flagId + '/first-time-events';
+};
+
+FeatureFlagManager.prototype.recordFirstTimeEvent = function(flagId, projectId, firstTimeEventHash) {
+    var distinctId = this.getMpProperty('distinct_id');
+    var traceparent = generateTraceparent();
+
+    // Build URL with query string parameters
+    var searchParams = new URLSearchParams();
+    searchParams.set('mp_lib', 'web');
+    searchParams.set('$lib_version', Config.LIB_VERSION);
+    var url = this.getFirstTimeEventApiRoute(flagId) + '?' + searchParams.toString();
+
+    var payload = {
+        'distinct_id': distinctId,
+        'project_id': projectId,
+        'first_time_event_hash': firstTimeEventHash
+    };
+
+    logger.log('Recording first-time event for flag: ' + flagId);
+
+    // Fire-and-forget POST request
+    this.fetch.call(window, url, {
+        'method': 'POST',
+        'headers': {
+            'Content-Type': 'application/json',
+            'Authorization': 'Basic ' + btoa(this.getMpConfig('token') + ':'),
+            'traceparent': traceparent
+        },
+        'body': JSON.stringify(payload)
+    }).catch(function(error) {
+        // Silent failure - cohort sync will catch up
+        logger.error('Failed to record first-time event for flag ' + flagId + ': ' + error);
+    });
+};
+
 FeatureFlagManager.prototype.getVariant = function(featureName, fallback) {
     if (!this.fetchPromise) {
         return new Promise(function(resolve) {
@@ -265,4 +522,7 @@ FeatureFlagManager.prototype['update_context'] = FeatureFlagManager.prototype.up
 // Deprecated method
 FeatureFlagManager.prototype['get_feature_data'] = FeatureFlagManager.prototype.getFeatureData;
 
+// Exports intended only for testing
+FeatureFlagManager.prototype['getTargeting'] = FeatureFlagManager.prototype.getTargeting;
+
 export { FeatureFlagManager };

package/src/index.d.ts

@@ -1,3 +1,5 @@
+import type { RulesLogic } from 'json-logic-js';
+
 export type Persistence = "cookie" | "localStorage";
 
 export type ApiPayloadFormat = "base64" | "json";
@@ -8,6 +10,16 @@ export type Query = string | Element | Element[];
 
 export type RemoteSettingType = "disabled" | "fallback" | "strict";
 
+
+export interface EventTriggerProps {
+    percentage: number;
+    property_filters?: RulesLogic;
+}
+
+export interface RecordingEventTriggers {
+    [eventName: string]: EventTriggerProps;
+}
+
 export interface Dict {
   [key: string]: any;
 }
@@ -225,6 +237,9 @@ export interface Config {
   recorder_src: string;
   record_block_class: string | RegExp;
   record_block_selector: string;
+  record_console: boolean;
+  record_network: boolean;
+  record_network_options: NetworkRecordOptions;
   record_collect_fonts: boolean;
   record_idle_timeout_ms: number;
   record_inline_images: boolean;
@@ -239,6 +254,7 @@ export interface Config {
   record_max_ms: number;
   record_sessions_percent: number;
   record_canvas: boolean;
+  recording_event_triggers: RecordingEventTriggers;
   record_heatmap_data: boolean;
   remote_settings_mode: RemoteSettingType;
   hooks: {
@@ -518,5 +534,57 @@ export function get_session_recording_properties():
   | { $mp_replay_id?: string }
   | {};
 
+// Network Recording Plugin Types
+export type InitiatorType =
+  | 'audio'
+  | 'beacon'
+  | 'body'
+  | 'css'
+  | 'early-hint'
+  | 'embed'
+  | 'fetch'
+  | 'frame'
+  | 'iframe'
+  | 'icon'
+  | 'image'
+  | 'img'
+  | 'input'
+  | 'link'
+  | 'navigation'
+  | 'object'
+  | 'ping'
+  | 'script'
+  | 'track'
+  | 'video'
+  | 'xmlhttprequest';
+
+export interface NetworkRequest {
+  url: string;
+  method?: string;
+  initiatorType: InitiatorType;
+  status?: number;
+  startTime: number;
+  endTime: number;
+  timeOrigin: number;
+  requestHeaders?: Record<string, string>;
+  requestBody?: string;
+  responseHeaders?: Record<string, string>;
+  responseBody?: string;
+}
+
+export interface NetworkRecordOptions {
+  initiatorTypes?: InitiatorType[];
+  ignoreRequestUrls?: string[];
+  ignoreRequestFn?: (data: NetworkRequest) => boolean;
+  recordHeaders?: { request: string[]; response: string[] };
+  recordBodyUrls?: { request: string[]; response: string[] };
+  recordInitialRequests?: boolean;
+}
+
+export interface NetworkData {
+  requests: NetworkRequest[];
+  isInitial?: boolean;
+}
+
 declare const mixpanel: OverridedMixpanel;
 export default mixpanel;

package/src/loaders/loader-module.js

@@ -1,5 +1,6 @@
 /* eslint camelcase: "off" */
 import '../recorder';
+import '../targeting';
 
 import { init_as_module } from '../mixpanel-core';
 import { loadNoop } from './bundle-loaders';