mixpanel-browser 2.74.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

@@ -0,0 +1,42 @@
+import { _ } from '../utils';
+import jsonLogic from 'json-logic-js';
+
+/**
+ * Check if an event matches the given criteria
+ * @param {string} eventName - The name of the event being checked
+ * @param {Object} properties - Event properties to evaluate against property filters
+ * @param {Object} criteria - Criteria to match against, with:
+ *   - event_name: string - Required event name (case-sensitive match)
+ *   - property_filters: Object - Optional JsonLogic filters for properties
+ * @returns {Object} Result object with:
+ *   - matches: boolean - Whether the event matches the criteria
+ *   - error: string|undefined - Error message if evaluation failed
+ */
+var eventMatchesCriteria = function(eventName, properties, criteria) {
+    // Check exact event name match (case-sensitive)
+    if (eventName !== criteria.event_name) {
+        return { matches: false };
+    }
+
+    // Evaluate property filters using JsonLogic
+    var propertyFilters = criteria.property_filters;
+    var filtersMatch = true; // default to true if no filters
+
+    if (propertyFilters && !_.isEmptyObject(propertyFilters)) {
+        try {
+            // Use properties as-is for case-sensitive matching
+            filtersMatch = jsonLogic.apply(propertyFilters, properties || {});
+        } catch (error) {
+            return {
+                matches: false,
+                error: error.toString()
+            };
+        }
+    }
+
+    return { matches: filtersMatch };
+};
+
+export {
+    eventMatchesCriteria
+};

package/src/targeting/index.js

@@ -0,0 +1,11 @@
+import { window } from '../window';
+import { TARGETING_GLOBAL_NAME } from '../config';
+import { eventMatchesCriteria } from './event-matcher';
+
+// Create targeting library object
+var targetingLibrary = {};
+targetingLibrary['eventMatchesCriteria'] = eventMatchesCriteria;
+
+// Set global Promise (use bracket notation to prevent minification)
+// This is the ONE AND ONLY global - matches recorder pattern
+window[TARGETING_GLOBAL_NAME] = Promise.resolve(targetingLibrary);

package/src/targeting/loader.js

@@ -0,0 +1,36 @@
+import { window } from '../window';
+import { TARGETING_GLOBAL_NAME } from '../config';
+
+/**
+ * Get the promise-based targeting loader
+ * @param {Function} loadExtraBundle - Function to load external bundle (callback-based)
+ * @param {string} targetingSrc - URL to targeting bundle
+ * @returns {Promise} Promise that resolves with targeting library
+ */
+var getTargetingPromise = function(loadExtraBundle, targetingSrc) {
+    // Return existing promise if already initialized or loading
+    if (window[TARGETING_GLOBAL_NAME] && typeof window[TARGETING_GLOBAL_NAME].then === 'function') {
+        return window[TARGETING_GLOBAL_NAME];
+    }
+
+    // Create loading promise and set it as the global immediately
+    // This makes minified build behavior consistent with dev/CJS builds
+    window[TARGETING_GLOBAL_NAME] = new Promise(function (resolve) {
+        loadExtraBundle(targetingSrc, resolve);
+    }).then(function () {
+        var p = window[TARGETING_GLOBAL_NAME];
+        if (p && typeof p.then === 'function') {
+            return p;
+        }
+        throw new Error('targeting failed to load');
+    }).catch(function (err) {
+        delete window[TARGETING_GLOBAL_NAME];
+        throw err;
+    });
+
+    return window[TARGETING_GLOBAL_NAME];
+};
+
+export {
+    getTargetingPromise
+};

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';
 
@@ -204,15 +204,8 @@ _.isArray = nativeIsArray || function(obj) {
     return toString.call(obj) === '[object Array]';
 };
 
-// from a comment on http://dbj.org/dbj/?p=286
-// fails on only one very rare and deliberate custom object:
-// var bomb = { toString : undefined, valueOf: function(o) { return "function BOMBA!"; }};
 _.isFunction = function(f) {
-    try {
-        return /^\s*\bfunction\b/.test(f);
-    } catch (x) {
-        return false;
-    }
+    return typeof f === 'function';
 };
 
 _.isArguments = function(obj) {
@@ -1739,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;
@@ -1804,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]) {