mixpanel-browser 2.72.0 → 2.74.0

package/src/recorder/rrweb-entrypoint.js

@@ -1,6 +1,7 @@
 // this file exists as an entry point to be able to transpile rrweb packages to es5
 // compatible code without needing to transpile the entire mixpanel-js codebase
 import {record, EventType, IncrementalSource} from '@mixpanel/rrweb';
+import {classMatchesRegex} from '@mixpanel/rrweb-snapshot';
 import {getRecordConsolePlugin} from '@mixpanel/rrweb-plugin-console-record';
 
-export { record, EventType, IncrementalSource, getRecordConsolePlugin };
+export { record, EventType, IncrementalSource, getRecordConsolePlugin, classMatchesRegex };

package/src/recorder/session-recording.js

@@ -1,11 +1,17 @@
+/**
+ * @typedef {import('../index').RecordPrivacyConfig} RecordPrivacyConfig
+ */
+
 import { window } from '../window';
-import { IncrementalSource, EventType, getRecordConsolePlugin } from './rrweb-entrypoint';
+import { EventType, getRecordConsolePlugin, IncrementalSource } from './rrweb-entrypoint';
 import { MAX_RECORDING_MS, MAX_VALUE_FOR_MIN_RECORDING_MS, console_with_prefix, NOOP_FUNC, _, localStorageSupported, canUseCompressionStream, navigator, userAgent, windowOpera} from '../utils'; // eslint-disable-line camelcase
 import { IDBStorageWrapper, RECORDING_EVENTS_STORE_NAME } from '../storage/indexed-db';
 import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
 import { RequestBatcher } from '../request-batcher';
+
 import Config from '../config';
 import { RECORD_ENQUEUE_THROTTLE_MS } from './utils';
+import { shouldMaskInput, shouldMaskText, getPrivacyConfig } from './masking';
 
 var logger = console_with_prefix('recorder');
 var CompressionStream = window['CompressionStream'];
@@ -52,7 +58,7 @@ function isUserEvent(ev) {
  * @property {String} [options.replayId] - unique uuid for a single replay
  * @property {Function} [options.onIdleTimeout] - callback when a recording reaches idle timeout
  * @property {Function} [options.onMaxLengthReached] - callback when a recording reaches its maximum length
- * @property {Function} [options.rrwebRecord] - rrweb's `record` function
+ * @property {import('./rrweb-entrypoint').record} [options.rrwebRecord] - rrweb's `record` function
  * @property {Function} [options.onBatchSent] - callback when a batch of events is sent to the server
  * @property {Storage} [options.sharedLockStorage] - optional storage for shared lock, used for test dependency injection
  * optional properties for deserialization:
@@ -233,6 +239,8 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         blockSelector = undefined;
     }
 
+    var privacyConfig = getPrivacyConfig(this._mixpanel);
+
     try {
         this._stopRecording = this._rrwebRecord({
             'emit': function (ev) {
@@ -262,9 +270,11 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
                 'type': 'image/webp',
                 'quality': 0.6
             },
+            // mask all inputs and text by default, unmasking is applied via callbacks maskInputFn and maskTextFn
             'maskAllInputs': true,
-            'maskTextClass': this.getConfig('record_mask_text_class'),
-            'maskTextSelector': this.getConfig('record_mask_text_selector'),
+            'maskTextSelector': '*',
+            'maskInputFn': this._getMaskFn(shouldMaskInput, privacyConfig),
+            'maskTextFn': this._getMaskFn(shouldMaskText, privacyConfig),
             'recordCanvas': this.getConfig('record_canvas'),
             'sampling': {
                 'canvas': 15
@@ -536,4 +546,33 @@ SessionRecording.prototype._getRecordMinMs = function() {
     return configValue;
 };
 
+/**
+ * Creates a masking function for rrweb's maskInputFn or maskTextFn
+ * @param {(element: HTMLElement, privacyConfig: RecordPrivacyConfig) => boolean} shouldMaskFn - Function that determines if element should be masked
+ * @param {RecordPrivacyConfig} privacyConfig - Privacy configuration
+ * @returns {(text: string, element: HTMLElement) => string} Function that masks text based on privacy config
+ */
+SessionRecording.prototype._getMaskFn = function(shouldMaskFn, privacyConfig) {
+    return function(text, element) {
+        // prevent visual artifacts from random whitespace
+        if (!text.trim().length) {
+            return '';
+        }
+
+        var shouldMask = true;
+        try {
+            shouldMask = shouldMaskFn(element, privacyConfig);
+        } catch (err) {
+            this.reportError('Error checking if text should be masked, defaulting to masked', err);
+        }
+
+        if (shouldMask) {
+            var textLength = Math.min(text.length, 10000); // limit to 10000 chars to optimize performance
+            return '*'.repeat(textLength);
+        } else {
+            return text;
+        }
+    }.bind(this);
+};
+
 export { SessionRecording };

package/src/recorder/utils.js

@@ -7,6 +7,10 @@ var isRecordingExpired = function(serializedRecording) {
     return !serializedRecording || now > serializedRecording['maxExpires'] || now > serializedRecording['idleExpires'];
 };
 
+
 var RECORD_ENQUEUE_THROTTLE_MS = 250;
 
-export { isRecordingExpired, RECORD_ENQUEUE_THROTTLE_MS};
+export {
+    isRecordingExpired,
+    RECORD_ENQUEUE_THROTTLE_MS
+};

package/src/utils.js

@@ -1115,8 +1115,17 @@ function _storageWrapper(storage, name, is_supported_fn) {
     };
 }
 
-_.localStorage = _storageWrapper(window.localStorage, 'localStorage', localStorageSupported);
-_.sessionStorage = _storageWrapper(window.sessionStorage, 'sessionStorage', sessionStorageSupported);
+// Safari errors out accessing localStorage/sessionStorage when cookies are disabled,
+// so create dummy storage wrappers that silently fail as a fallback.
+var windowLocalStorage = null, windowSessionStorage = null;
+try {
+    windowLocalStorage = window.localStorage;
+    windowSessionStorage = window.sessionStorage;
+    // eslint-disable-next-line no-empty
+} catch (_err) {}
+
+_.localStorage = _storageWrapper(windowLocalStorage, 'localStorage', localStorageSupported);
+_.sessionStorage = _storageWrapper(windowSessionStorage, 'sessionStorage', sessionStorageSupported);
 
 _.register_event = (function() {
     // written by Dean Edwards, 2005

package/src/window.js

@@ -15,7 +15,9 @@ if (typeof(window) === 'undefined') {
         screen: { width: 0, height: 0 },
         location: loc,
         addEventListener: function() {},
-        removeEventListener: function() {}
+        removeEventListener: function() {},
+        dispatchEvent: function() {},
+        CustomEvent: function () {}
     };
 } else {
     win = window;

package/testServer.js

@@ -1,14 +1,40 @@
 'use strict';
 
-var express      = require('express');
-var cookieParser = require('cookie-parser');
-var logger       = require('morgan');
+const express      = require('express');
+const cookieParser = require('cookie-parser');
+const logger       = require('morgan');
 
-var app = express();
+const app = express();
+
+// Test suite definitions
+const TEST_SUITES = {
+    'dev': {
+        name: 'Development Build',
+        description: 'Unminified library for easier debugging',
+        customLibUrl: './static/build/mixpanel.js',
+        snippetUrl: './static/src/loaders/mixpanel-jslib-snippet.js',
+        testUrl: './static/build/test/browser/snippet-test.js'
+    },
+    'minified': {
+        name: 'Minified Build',
+        description: 'Production build (closure compiled, served via Mixpanel CDN)',
+        customLibUrl: './static/build/mixpanel.min.js',
+        snippetUrl: './static/build/mixpanel-jslib-snippet.min.test.js',
+        testUrl: './static/build/test/browser/snippet-test.js'
+    },
+    'module-cjs': {
+        name: 'CommonJS Module',
+        description: 'Node.js compatible module (served via npm install)',
+        testUrl: './static/build/test/browser/module-cjs-test.js'
+    }
+};
 
 app.use(cookieParser());
 app.use(logger('dev'));
 
+app.set('views', __dirname + '/tests');
+app.set('view engine', 'pug');
+
 app.use('/tests', express.static(__dirname + "/tests"));
 app.get('/tests/cookie_included/:cookieName', function(req, res) {
     if (req.cookies && req.cookies[req.params.cookieName]) {
@@ -19,9 +45,27 @@ app.get('/tests/cookie_included/:cookieName', function(req, res) {
 });
 app.use(express.static(__dirname));
 app.get('/', function(req, res) {
-    res.redirect(301, '/tests/');
+    res.redirect(301, '/tests/new');
 });
 
-var server = app.listen(3000, function () {
-  console.log('Mixpanel test app listening on port %s', server.address().port);
+app.get('/tests/new', function(req, res) {
+    res.render('directory.pug', { testSuites: TEST_SUITES });
+});
+
+app.use('/tests/new/static', express.static(__dirname));
+
+// register routes for each test suite
+for (const [suiteId, suite] of Object.entries(TEST_SUITES)) {
+    app.get('/tests/new/' + suiteId, function(req, res) {
+        res.render('integration.pug', {
+            suiteName: suite.name,
+            customLibUrl: suite.customLibUrl,
+            snippetUrl: suite.snippetUrl,
+            testUrl: suite.testUrl
+        });
+    });
+}
+
+const server = app.listen(3001, function () {
+    console.log(`Mixpanel test app listening on port ${server.address().port}`);
 });

package/.github/workflows/tests.yml

@@ -1,25 +0,0 @@
-name: Tests
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x, 22.x]
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm test
-      - run: npm run build-dist