mixpanel-browser 2.75.0 → 2.76.0

package/src/recorder/session-recording.js

@@ -9,9 +9,10 @@ import { IDBStorageWrapper, RECORDING_EVENTS_STORE_NAME } from '../storage/index
 import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
 import { RequestBatcher } from '../request-batcher';
 
-import Config from '../config';
+import { Config } from '../config';
 import { RECORD_ENQUEUE_THROTTLE_MS } from './utils';
 import { shouldMaskInput, shouldMaskText, getPrivacyConfig } from './masking';
+import { getRecordNetworkPlugin } from './rrweb-network-plugin';
 
 var logger = console_with_prefix('recorder');
 var CompressionStream = window['CompressionStream'];
@@ -241,6 +242,29 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
 
     var privacyConfig = getPrivacyConfig(this._mixpanel);
 
+    var plugins = [];
+    if (this.getConfig('record_network')) {
+        var options = this.getConfig('record_network_options') || {};
+        // don't track requests to Mixpanel /record API
+        var ignoreRequestUrls = (options.ignoreRequestUrls || []).slice();
+        ignoreRequestUrls.push(this._getApiRoute());
+        options.ignoreRequestUrls = ignoreRequestUrls;
+
+        plugins.push(getRecordNetworkPlugin(options));
+    }
+
+    if (this.getConfig('record_console')) {
+        plugins.push(
+            getRecordConsolePlugin({
+                stringifyOptions: {
+                    stringLengthLimit: 1000,
+                    numOfKeysLimit: 50,
+                    depthOfLimit: 2
+                }
+            })
+        );
+    }
+
     try {
         this._stopRecording = this._rrwebRecord({
             'emit': function (ev) {
@@ -279,15 +303,7 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
             'sampling': {
                 'canvas': 15
             },
-            'plugins': this.getConfig('record_console') ? [
-                getRecordConsolePlugin({
-                    stringifyOptions: {
-                        stringLengthLimit: 1000,
-                        numOfKeysLimit: 50,
-                        depthOfLimit: 2
-                    }
-                })
-            ] : []
+            'plugins': plugins,
         });
     } catch (err) {
         this.reportError('Unexpected error when starting rrweb recording.', err);
@@ -402,6 +418,10 @@ SessionRecording.deserialize = function (serializedRecording, options) {
     return recording;
 };
 
+SessionRecording.prototype._getApiRoute = function () {
+    return this.getConfig('api_routes')['record'];
+};
+
 SessionRecording.prototype._sendRequest = function(currentReplayId, reqParams, reqBody, callback) {
     var onSuccess = function (response, responseBody) {
         // Update batch specific props only if the request was successful to guarantee ordering.
@@ -421,7 +441,7 @@ SessionRecording.prototype._sendRequest = function(currentReplayId, reqParams, r
         });
     }.bind(this);
     var apiHost = (this._mixpanel.get_api_host && this._mixpanel.get_api_host('record')) || this.getConfig('api_host');
-    window['fetch'](apiHost + '/' + this.getConfig('api_routes')['record'] + '?' + new URLSearchParams(reqParams), {
+    window['fetch'](apiHost + '/' + this._getApiRoute() + '?' + new URLSearchParams(reqParams), {
         'method': 'POST',
         'headers': {
             'Authorization': 'Basic ' + btoa(this.getConfig('token') + ':'),

package/src/recorder-manager.js

@@ -0,0 +1,216 @@
+/* eslint camelcase: "off" */
+import {RECORDER_FILENAME, TARGETING_FILENAME, RECORDER_GLOBAL_NAME} from './config';
+import { _, console, safewrap, safewrapClass } from './utils';
+import { window } from './window';
+import { Promise } from './promise-polyfill';
+import { IDBStorageWrapper, RECORDING_REGISTRY_STORE_NAME } from './storage/indexed-db';
+import { isRecordingExpired } from './recorder/utils';
+import { getTargetingPromise } from './targeting/loader';
+
+
+/**
+ * RecorderManager: manages session recording initialization, lifecycle and state
+ * @constructor
+ */
+var RecorderManager = function(initOptions) {
+    // TODO - Passing in mixpanel instance as it is still needed for recorder creation
+    // but ideally we should be able to remove this dependency.
+    this.mixpanelInstance = initOptions.mixpanelInstance;
+
+    this.getMpConfig = initOptions.getConfigFunc;
+    this.getTabId = initOptions.getTabIdFunc;
+    this.reportError = initOptions.reportErrorFunc;
+    this.getDistinctId = initOptions.getDistinctIdFunc;
+    this.loadExtraBundle = initOptions.loadExtraBundle;
+    this.recorderSrc = initOptions.recorderSrc;
+    this.targetingSrc = initOptions.targetingSrc;
+    this.libBasePath = initOptions.libBasePath;
+
+    this._recorder = null;
+};
+
+RecorderManager.prototype.shouldLoadRecorder = function() {
+    if (this.getMpConfig('disable_persistence')) {
+        console.log('Load recorder check skipped due to disable_persistence config');
+        return Promise.resolve(false);
+    }
+
+    var recording_registry_idb = new IDBStorageWrapper(RECORDING_REGISTRY_STORE_NAME);
+    var tab_id = this.getTabId();
+    return recording_registry_idb.init()
+        .then(function () {
+            return recording_registry_idb.getAll();
+        })
+        .then(function (recordings) {
+            for (var i = 0; i < recordings.length; i++) {
+                // if there are expired recordings in the registry, we should load the recorder to flush them
+                // if there's a recording for this tab id, we should load the recorder to continue the recording
+                if (isRecordingExpired(recordings[i]) || recordings[i]['tabId'] === tab_id) {
+                    return true;
+                }
+            }
+            return false;
+        })
+        .catch(_.bind(function (err) {
+            this.reportError('Error checking recording registry', err);
+            return false;
+        }, this));
+};
+
+RecorderManager.prototype.checkAndStartSessionRecording = function(force_start, rate) {
+    if (!window['MutationObserver']) {
+        console.critical('Browser does not support MutationObserver; skipping session recording');
+        return Promise.resolve();
+    }
+
+    var loadRecorder = _.bind(function(startNewIfInactive) {
+        return new Promise(_.bind(function(resolve) {
+            var handleLoadedRecorder = safewrap(_.bind(function() {
+                this._recorder = this._recorder || new window[RECORDER_GLOBAL_NAME](this.mixpanelInstance);
+                this._recorder['resumeRecording'](startNewIfInactive);
+                resolve();
+            }, this));
+
+            if (_.isUndefined(window[RECORDER_GLOBAL_NAME])) {
+                var recorderSrc = this.recorderSrc || (this.libBasePath + RECORDER_FILENAME);
+                this.loadExtraBundle(recorderSrc, handleLoadedRecorder);
+            } else {
+                handleLoadedRecorder();
+            }
+        }, this));
+    }, this);
+
+    /**
+     * If the user is sampled or start_session_recording is called, we always load the recorder since it's guaranteed a recording should start.
+     * Otherwise, if the recording registry has any records then it's likely there's a recording in progress or orphaned data that needs to be flushed.
+     */
+    var effective_rate = _.isUndefined(rate) ? this.getMpConfig('record_sessions_percent') : rate;
+    var is_sampled = effective_rate > 0 && Math.random() * 100 <= effective_rate;
+    if (force_start || is_sampled) {
+        return loadRecorder(true);
+    } else {
+        return this.shouldLoadRecorder()
+            .then(_.bind(function (shouldLoad) {
+                if (shouldLoad) {
+                    return loadRecorder(false);
+                }
+                return Promise.resolve();
+            }, this));
+    }
+};
+
+RecorderManager.prototype.isRecording = function() {
+    // Safety check: ensure isRecording method exists (older CDN builds may not have it)
+    if (!this._recorder || !_.isFunction(this._recorder['isRecording'])) {
+        return false;
+    }
+    try {
+        return this._recorder['isRecording']();
+    } catch (e) {
+        this.reportError('Error checking if recording is active', e);
+        return false;
+    }
+};
+
+RecorderManager.prototype.startRecordingOnEvent = function(event_name, properties) {
+    var isRecording = this.isRecording();
+    var recordingTriggerEvents = this.getMpConfig('recording_event_triggers');
+
+    if (!isRecording && recordingTriggerEvents) {
+        var trigger = recordingTriggerEvents[event_name];
+        if (trigger && typeof trigger['percentage'] === 'number') {
+            var newRate = trigger['percentage'];
+            var propertyFilters = trigger['property_filters'];
+            if (propertyFilters && !_.isEmptyObject(propertyFilters)) {
+                var targetingSrc = this.targetingSrc || (this.libBasePath + TARGETING_FILENAME);
+                getTargetingPromise(this.loadExtraBundle, targetingSrc)
+                    .then(function(targeting) {
+                        try {
+                            var result = targeting['eventMatchesCriteria'](
+                                event_name,
+                                properties,
+                                {
+                                    'event_name': event_name,
+                                    'property_filters': propertyFilters
+                                }
+                            );
+                            if (result['matches']) {
+                                this.checkAndStartSessionRecording(false, newRate);
+                            }
+                        } catch (err) {
+                            console.critical('Could not parse recording event trigger properties logic:', err);
+                        }
+                    }.bind(this)).catch(function(err) {
+                        console.critical('Failed to load targeting library:', err);
+                    });
+            } else {
+                this.checkAndStartSessionRecording(false, newRate);
+            }
+        }
+    }
+};
+
+RecorderManager.prototype.stopSessionRecording = function() {
+    if (this._recorder) {
+        return this._recorder['stopRecording']();
+    }
+    return Promise.resolve();
+};
+
+RecorderManager.prototype.pauseSessionRecording = function() {
+    if (this._recorder) {
+        return this._recorder['pauseRecording']();
+    }
+    return Promise.resolve();
+};
+
+RecorderManager.prototype.resumeSessionRecording = function() {
+    if (this._recorder) {
+        return this._recorder['resumeRecording']();
+    }
+    return Promise.resolve();
+};
+
+RecorderManager.prototype.isRecordingHeatmapData = function() {
+    return this.getSessionReplayId() && this.getMpConfig('record_heatmap_data');
+};
+
+RecorderManager.prototype.getSessionRecordingProperties = function() {
+    var props = {};
+    var replay_id = this.getSessionReplayId();
+    if (replay_id) {
+        props['$mp_replay_id'] = replay_id;
+    }
+    return props;
+};
+
+RecorderManager.prototype.getSessionReplayUrl = function() {
+    var replay_url = null;
+    var replay_id = this.getSessionReplayId();
+    if (replay_id) {
+        var query_params = _.HTTPBuildQuery({
+            'replay_id': replay_id,
+            'distinct_id': this.getDistinctId(),
+            'token': this.getMpConfig('token')
+        });
+        replay_url = 'https://mixpanel.com/projects/replay-redirect?' + query_params;
+    }
+    return replay_url;
+};
+
+RecorderManager.prototype.getSessionReplayId = function() {
+    var replay_id = null;
+    if (this._recorder) {
+        replay_id = this._recorder['replayId'];
+    }
+    return replay_id || null;
+};
+
+// "private" public method to reach into the recorder in test cases
+RecorderManager.prototype.getRecorder = function() {
+    return this._recorder;
+};
+
+safewrapClass(RecorderManager);
+
+export { RecorderManager };

package/src/request-batcher.js

@@ -1,4 +1,4 @@
-import Config from './config';
+import { Config } from './config';
 import { Promise } from './promise-polyfill';
 import { RequestQueue } from './request-queue';
 import { console_with_prefix, isOnline, _ } from './utils'; // eslint-disable-line camelcase

package/src/targeting/event-matcher.js

@@ -1,53 +1,6 @@
 import { _ } from '../utils';
 import jsonLogic from 'json-logic-js';
 
-/**
- * Shared helper to recursively lowercase strings in nested structures
- * @param {*} obj - Value to process
- * @param {boolean} lowercaseKeys - Whether to lowercase object keys
- * @returns {*} Processed value with lowercased strings
- */
-var lowercaseJson = function(obj, lowercaseKeys) {
-    if (obj === null || obj === undefined) {
-        return obj;
-    } else if (typeof obj === 'string') {
-        return obj.toLowerCase();
-    } else if (Array.isArray(obj)) {
-        return obj.map(function(item) {
-            return lowercaseJson(item, lowercaseKeys);
-        });
-    } else if (obj === Object(obj)) {
-        var result = {};
-        for (var key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                var newKey = lowercaseKeys && typeof key === 'string' ? key.toLowerCase() : key;
-                result[newKey] = lowercaseJson(obj[key], lowercaseKeys);
-            }
-        }
-        return result;
-    } else {
-        return obj;
-    }
-};
-
-/**
- * Lowercase all string keys and values in a nested structure
- * @param {*} val - Value to process
- * @returns {*} Processed value with lowercased strings
- */
-var lowercaseKeysAndValues = function(val) {
-    return lowercaseJson(val, true);
-};
-
-/**
- * Lowercase only leaf node string values in a nested structure (keys unchanged)
- * @param {*} val - Value to process
- * @returns {*} Processed value with lowercased leaf strings
- */
-var lowercaseOnlyLeafNodes = function(val) {
-    return lowercaseJson(val, false);
-};
-
 /**
  * Check if an event matches the given criteria
  * @param {string} eventName - The name of the event being checked
@@ -71,13 +24,8 @@ var eventMatchesCriteria = function(eventName, properties, criteria) {
 
     if (propertyFilters && !_.isEmptyObject(propertyFilters)) {
         try {
-            // Lowercase all keys and values in event properties for case-insensitive matching
-            var lowercasedProperties = lowercaseKeysAndValues(properties || {});
-
-            // Lowercase only leaf nodes in JsonLogic filters (keep operators intact)
-            var lowercasedFilters = lowercaseOnlyLeafNodes(propertyFilters);
-
-            filtersMatch = jsonLogic.apply(lowercasedFilters, lowercasedProperties);
+            // Use properties as-is for case-sensitive matching
+            filtersMatch = jsonLogic.apply(propertyFilters, properties || {});
         } catch (error) {
             return {
                 matches: false,
@@ -90,8 +38,5 @@ var eventMatchesCriteria = function(eventName, properties, criteria) {
 };
 
 export {
-    lowercaseJson,
-    lowercaseKeysAndValues,
-    lowercaseOnlyLeafNodes,
     eventMatchesCriteria
 };

package/src/targeting/index.js

@@ -1,5 +1,5 @@
 import { window } from '../window';
-import { TARGETING_GLOBAL_NAME } from '../globals';
+import { TARGETING_GLOBAL_NAME } from '../config';
 import { eventMatchesCriteria } from './event-matcher';
 
 // Create targeting library object

package/src/targeting/loader.js

@@ -1,5 +1,5 @@
 import { window } from '../window';
-import { TARGETING_GLOBAL_NAME } from '../globals';
+import { TARGETING_GLOBAL_NAME } from '../config';
 
 /**
  * Get the promise-based targeting loader

package/src/utils.js

@@ -1,5 +1,5 @@
 /* eslint camelcase: "off", eqeqeq: "off" */
-import Config from './config';
+import { Config } from './config';
 import { NpoPromise, Promise } from './promise-polyfill';
 import { window } from './window';
 
@@ -1732,6 +1732,17 @@ var isOnline = function() {
 
 var NOOP_FUNC = function () {};
 
+var urlMatchesRegexList = function (url, regexList) {
+    var matches = false;
+    for (var i = 0; i < regexList.length; i++) {
+        if (url.match(regexList[i])) {
+            matches = true;
+            break;
+        }
+    }
+    return matches;
+};
+
 var JSONStringify = null, JSONParse = null;
 if (typeof JSON !== 'undefined') {
     JSONStringify = JSON.stringify;
@@ -1797,6 +1808,7 @@ export {
     safewrap,
     safewrapClass,
     slice,
+    urlMatchesRegexList,
     userAgent,
     windowOpera,
 };

package/testServer.js

@@ -31,10 +31,65 @@ const TEST_SUITES = {
 
 app.use(cookieParser());
 app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
 
 app.set('views', __dirname + '/tests');
 app.set('view engine', 'pug');
 
+// ========================================
+// Test API endpoints for network plugin tests
+// ========================================
+
+// Main test endpoint - handles all HTTP methods
+app.all('/api/test', function(req, res) {
+    res.json({
+        success: true,
+        method: req.method,
+        headers: req.headers,
+        query: req.query,
+        body: req.body,
+        url: req.originalUrl,
+        timestamp: Date.now()
+    });
+});
+
+// Form submission endpoint
+app.post('/api/test/form', function(req, res) {
+    res.json({
+        success: true,
+        method: 'POST',
+        contentType: req.get('Content-Type'),
+        formData: req.body,
+        timestamp: Date.now()
+    });
+});
+
+// Endpoint with custom response headers
+app.get('/api/test/headers', function(req, res) {
+    res.set({
+        'X-Custom-Header': 'custom-value',
+        'X-Request-Id': 'test-request-123'
+    });
+    res.json({
+        success: true,
+        message: 'Response includes custom headers'
+    });
+});
+
+// Error response endpoint
+app.get('/api/test/error/:status', function(req, res) {
+    const status = parseInt(req.params.status, 10) || 500;
+    res.status(status).json({ success: false, status: status });
+});
+
+// Session recording endpoint (mimics Mixpanel's /record API)
+app.post(/^\/record\/.*/, express.raw({ type: '*/*', limit: '10mb' }), function(req, res) {
+    res.json({ code: 200, status: 'OK' });
+});
+
+// ========================================
+
 app.use('/tests', express.static(__dirname + "/tests"));
 app.get('/tests/cookie_included/:cookieName', function(req, res) {
     if (req.cookies && req.cookies[req.params.cookieName]) {

package/src/globals.js

@@ -1,14 +0,0 @@
-/**
- * Shared global window property names used across modules
- */
-
-// Targeting library global (used by flags and targeting modules)
-var TARGETING_GLOBAL_NAME = '__mp_targeting';
-
-// Recorder library global (used by recorder and mixpanel-core)
-var RECORDER_GLOBAL_NAME = '__mp_recorder';
-
-export {
-    TARGETING_GLOBAL_NAME,
-    RECORDER_GLOBAL_NAME
-};