mixpanel-browser 2.71.1 → 2.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mixpanel-browser",
-  "version": "2.71.1",
+  "version": "2.72.0",
   "description": "The official Mixpanel JavaScript browser client library",
   "main": "dist/mixpanel.cjs.js",
   "module": "dist/mixpanel.module.js",
@@ -66,6 +66,7 @@
     "webpack": "1.12.2"
   },
   "dependencies": {
-    "@mixpanel/rrweb": "2.0.0-alpha.18.2"
+    "@mixpanel/rrweb": "2.0.0-alpha.18.2",
+    "@mixpanel/rrweb-plugin-console-record": "2.0.0-alpha.18.2"
   }
 }

package/rollup.config.mjs

@@ -7,10 +7,11 @@ import fs from 'fs';
 import path from 'path';
 
 const COMPILED_RRWEB_PATH = 'build/rrweb-compiled.js';
+const BUNDLED_RRWEB_PATH = 'build/rrweb-bundled.js';
 
 const aliasRrweb = () => alias({
     entries: [
-        { find: '@mixpanel/rrweb', replacement: COMPILED_RRWEB_PATH },
+        { find: /rrweb-entrypoint(?:\.js)?$/, replacement: COMPILED_RRWEB_PATH },
     ]
 });
 
@@ -42,15 +43,25 @@ const MINIFY = process.env.MINIFY || process.env.FULL;
 
 // Main builds used to develop / iterate quickly
 const MAIN_BUILDS = [
-    // compile rrweb first to es5 with swc, we'll replace the import later on
     {
-        'input': '@mixpanel/rrweb',
+        'input': 'src/recorder/rrweb-entrypoint.js',
+        'output': [
+            {
+                file: BUNDLED_RRWEB_PATH,
+                format: 'es',
+            }
+        ],
+        plugins: [nodeResolve({browser: true})]
+    },
+    {
+        'input': BUNDLED_RRWEB_PATH,
         'output': [
             {
                 file: COMPILED_RRWEB_PATH,
+                format: 'es',
             }
         ],
-        plugins: [nodeResolve({browser: true}), swc({swc: {jsc: {target: 'es5'}}})]
+        plugins: [swc({swc: {jsc: {target: 'es5'}}})]
     },
 
     // IIFE recorder bundle that is loaded asynchronously

package/src/autocapture/index.js

@@ -449,7 +449,7 @@ Autocapture.prototype.initRageClickTracking = function() {
             return;
         }
 
-        if (this._rageClickTracker.isRageClick(ev['pageX'], ev['pageY'], currentRageClickConfig)) {
+        if (this._rageClickTracker.isRageClick(ev, currentRageClickConfig)) {
             this.trackDomEvent(ev, MP_EV_RAGE_CLICK);
         }
     }.bind(this);

package/src/autocapture/rageclick.js

@@ -1,17 +1,36 @@
+import { getClickEventTargetElement, isDefinitelyNonInteractive } from './utils';
+
 /** @const */ var DEFAULT_RAGE_CLICK_THRESHOLD_PX = 30;
 /** @const */ var DEFAULT_RAGE_CLICK_TIMEOUT_MS = 1000;
 /** @const */ var DEFAULT_RAGE_CLICK_CLICK_COUNT = 4;
+/** @const */ var DEFAULT_RAGE_CLICK_INTERACTIVE_ELEMENTS_ONLY = false;
 
 function RageClickTracker() {
     this.clicks = [];
 }
 
-RageClickTracker.prototype.isRageClick = function(x, y, options) {
+/**
+ * Determines if a click event is part of a rage click sequence.
+ * @param {Event} event - the original click event.
+ * @param {import('../index.d.ts').RageClickConfig} options - configuration options for rage click detection.
+ * @returns {boolean} - true if the click is considered a rage click, false otherwise.
+ */
+RageClickTracker.prototype.isRageClick = function(event, options) {
     options = options || {};
     var thresholdPx = options['threshold_px'] || DEFAULT_RAGE_CLICK_THRESHOLD_PX;
     var timeoutMs = options['timeout_ms'] || DEFAULT_RAGE_CLICK_TIMEOUT_MS;
     var clickCount = options['click_count'] || DEFAULT_RAGE_CLICK_CLICK_COUNT;
+    var interactiveElementsOnly = options['interactive_elements_only'] || DEFAULT_RAGE_CLICK_INTERACTIVE_ELEMENTS_ONLY;
+
+    if (interactiveElementsOnly) {
+        var target = getClickEventTargetElement(event);
+        if (!target || isDefinitelyNonInteractive(target)) {
+            return false;
+        }
+    }
+
     var timestamp = Date.now();
+    var x = event['pageX'], y = event['pageY'];
 
     var lastClick = this.clicks[this.clicks.length - 1];
     if (

package/src/autocapture/shadow-dom-observer.js

@@ -1,4 +1,4 @@
-import { logger, weakSetSupported } from './utils';
+import { getClickEventComposedPath, getClickEventTargetElement, logger, weakSetSupported } from './utils';
 
 function ShadowDOMObserver(changeCallback, observerConfig) {
     this.changeCallback = changeCallback || function() {};
@@ -12,28 +12,16 @@ ShadowDOMObserver.prototype.getEventTarget = function(event) {
     if (!this.observedShadowRoots) {
         return;
     }
-    var path = this.getComposedPath(event);
-    if (path && path.length) {
-        return path[0];
-    }
 
-    return event['target'] || event['srcElement'];
+    return getClickEventTargetElement(event);
 };
 
-
-ShadowDOMObserver.prototype.getComposedPath = function(event) {
-    if ('composedPath' in event) {
-        return event['composedPath']();
-    }
-
-    return [];
-};
 ShadowDOMObserver.prototype.observeFromEvent = function(event) {
     if (!this.observedShadowRoots) {
         return;
     }
 
-    var path = this.getComposedPath(event);
+    var path = getClickEventComposedPath(event);
 
     // Check each element in path for shadow roots
     for (var i = 0; i < path.length; i++) {

package/src/autocapture/utils.js

@@ -744,9 +744,39 @@ function isDefinitelyNonInteractive(element) {
     return false;
 }
 
+/**
+ * Get the composed path of a click event for elements embedded in shadow DOM.
+ * @param {Event} event - event to get the composed path from
+ * @returns {Array} the composed path of the click event
+*/
+function getClickEventComposedPath(event) {
+    if ('composedPath' in event) {
+        return event['composedPath']();
+    }
+
+    return [];
+}
+
+/**
+ * Get the element from a click event, accounting for elements embedded in shadow DOM.
+ * @param {Event} event - event to get the target from
+ * @returns {Element | null} the element that was the target of the click event
+ */
+function getClickEventTargetElement(event) {
+    var path = getClickEventComposedPath(event);
+
+    if (path && path.length > 0) {
+        return path[0];
+    }
+
+    return event['target'] || event['srcElement'];
+}
+
 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,
+    getClickEventComposedPath,
+    getClickEventTargetElement,
     getPolyfillScrollEndFunction,
     getPropsForDOMEvent,
     getSafeText,

package/src/config.js

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

package/src/index.d.ts

@@ -43,20 +43,22 @@ export interface OutTrackingOptions extends ClearOptOutInOutOptions {
 export type RageClickConfig =
   | boolean
   | {
-    /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
-    threshold_px?: number;
-    /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
-    timeout_ms?: number;
-    /** Number of clicks required to trigger a rage click event (default: 3) */
-    click_count?: number;
-  };
+      /** Distance threshold in pixels for clicks to be considered within the same area (default: 30) */
+      threshold_px?: number;
+      /** Time window in milliseconds for clicks to be considered rapid (default: 1000) */
+      timeout_ms?: number;
+      /** Number of clicks required to trigger a rage click event (default: 3) */
+      click_count?: number;
+      /** Whether to only track rage clicks on interactive elements like buttons, links, inputs (default: false) */
+      interactive_elements_only?: boolean;
+    };
 
 export type DeadClickConfig =
   | boolean
   | {
-    /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
-    timeout_ms?: number;
-  };
+      /** Time in milliseconds to wait after a click before qualifying it as dead (default: 500) */
+      timeout_ms?: number;
+    };
 
 export interface RegisterOptions {
   persistent: boolean;
@@ -149,6 +151,10 @@ export interface AutocaptureConfig {
   block_element_callback?: (element: Element, event: Event) => boolean;
 }
 
+export interface FlagsConfig {
+  context: Dict;
+}
+
 export interface Config {
   api_host: string;
   api_routes: {
@@ -165,6 +171,7 @@ export interface Config {
   cookie_domain: string;
   cross_site_cookie: boolean;
   cross_subdomain_cookie: boolean;
+  flags: boolean | FlagsConfig;
   persistence: Persistence;
   persistence_name: string;
   cookie_name: string;
@@ -277,11 +284,41 @@ export interface Group {
   unset(prop: string, callback?: Callback): void;
 }
 
+export interface FlagsVariant {
+  key: string;
+  value: any;
+  experiment_id?: string;
+  is_experiment_active?: boolean;
+  is_qa_tester?: boolean;
+}
+
+export interface FlagsUpdateContextOptions {
+  replace?: boolean;
+}
+
+export interface FlagsManager {
+  are_flags_ready(): boolean;
+  get_variant(
+    featureName: string,
+    fallback: FlagsVariant
+  ): Promise<FlagsVariant>;
+  get_variant_sync(featureName: string, fallback: FlagsVariant): FlagsVariant;
+  get_variant_value(featureName: string, fallbackValue: any): Promise<any>;
+  get_variant_value_sync(featureName: string, fallbackValue: any): any;
+  is_enabled(featureName: string, fallbackValue?: boolean): Promise<boolean>;
+  is_enabled_sync(featureName: string, fallbackValue?: boolean): boolean;
+  update_context(
+    context: Dict,
+    options?: FlagsUpdateContextOptions
+  ): Promise<void>;
+}
+
 export interface Mixpanel {
   add_group(group_key: string, group_id: string, callback?: Callback): void;
   alias(alias: string, original?: string): void;
   clear_opt_in_out_tracking(options?: Partial<ClearOptOutInOutOptions>): void;
   disable(events?: string[]): void;
+  flags: FlagsManager;
   get_config(prop_name?: string): any;
   get_distinct_id(): any;
   get_group(group_key: string, group_id: string): Group;

package/src/mixpanel-core.js

@@ -152,6 +152,7 @@ var DEFAULT_CONFIG = {
     'record_block_selector':             'img, video, audio',
     'record_canvas':                     false,
     'record_collect_fonts':              false,
+    'record_console':                    true,
     'record_heatmap_data':               false,
     'record_idle_timeout_ms':            30 * 60 * 1000, // 30 minutes
     'record_mask_text_class':            new RegExp('^(mp-mask|fs-mask|amp-mask|rr-mask|ph-mask)$'),

package/src/recorder/recorder.js

@@ -1,4 +1,4 @@
-import { record } from '@mixpanel/rrweb';
+import { record } from './rrweb-entrypoint';
 import { Promise } from '../promise-polyfill';
 import { SessionRecording } from './session-recording';
 import { RecordingRegistry } from './recording-registry';

package/src/recorder/rrweb-entrypoint.js

@@ -0,0 +1,6 @@
+// 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 {getRecordConsolePlugin} from '@mixpanel/rrweb-plugin-console-record';
+
+export { record, EventType, IncrementalSource, getRecordConsolePlugin };

package/src/recorder/session-recording.js

@@ -1,6 +1,6 @@
 import { window } from '../window';
-import { IncrementalSource, EventType } from '@mixpanel/rrweb';
-import { MAX_RECORDING_MS, MAX_VALUE_FOR_MIN_RECORDING_MS, console_with_prefix, NOOP_FUNC, _, localStorageSupported} from '../utils'; // eslint-disable-line camelcase
+import { IncrementalSource, EventType, getRecordConsolePlugin } 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';
@@ -38,6 +38,7 @@ function isUserEvent(ev) {
  * @property {number} idleExpires
  * @property {number} maxExpires
  * @property {number} replayStartTime
+ * @property {number} lastEventTimestamp
  * @property {number} seqNo
  * @property {string} batchStartUrl
  * @property {string} replayId
@@ -58,6 +59,7 @@ function isUserEvent(ev) {
  * @property {number} idleExpires
  * @property {number} maxExpires
  * @property {number} replayStartTime
+ * @property {number} lastEventTimestamp - the unix timestamp of the last recorded event from rrweb
  * @property {number} seqNo
  * @property {string} batchStartUrl
  * @property {string} replayStartUrl
@@ -91,6 +93,7 @@ var SessionRecording = function(options) {
     this.idleExpires = options.idleExpires || null;
     this.maxExpires = options.maxExpires || null;
     this.replayStartTime = options.replayStartTime || null;
+    this.lastEventTimestamp = options.lastEventTimestamp || null;
     this.seqNo = options.seqNo || 0;
 
     this.idleTimeoutId = null;
@@ -150,10 +153,20 @@ SessionRecording.prototype.getUserIdInfo = function () {
 
 SessionRecording.prototype.unloadPersistedData = function () {
     this.batcher.stop();
-    return this.batcher.flush()
-        .then(function () {
+
+    return this.queueStorage.init().catch(function () {
+        this.reportError('Error initializing IndexedDB storage for unloading persisted data.');
+    }.bind(this)).then(function () {
+        // if the recording is too short, just delete any stored events without flushing
+        if (this.getDurationMs() < this._getRecordMinMs()) {
             return this.queueStorage.removeItem(this.batcherKey);
-        }.bind(this));
+        }
+
+        return this.batcher.flush()
+            .then(function () {
+                return this.queueStorage.removeItem(this.batcherKey);
+            }.bind(this));
+    }.bind(this));
 };
 
 SessionRecording.prototype.getConfig = function(configVar) {
@@ -188,11 +201,7 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         this.maxExpires = new Date().getTime() + this.recordMaxMs;
     }
 
-    this.recordMinMs = this.getConfig('record_min_ms');
-    if (this.recordMinMs > MAX_VALUE_FOR_MIN_RECORDING_MS) {
-        this.recordMinMs = MAX_VALUE_FOR_MIN_RECORDING_MS;
-        logger.critical('record_min_ms cannot be greater than ' + MAX_VALUE_FOR_MIN_RECORDING_MS + 'ms. Capping value.');
-    }
+    this.recordMinMs = this._getRecordMinMs();
 
     if (!this.replayStartTime) {
         this.replayStartTime = new Date().getTime();
@@ -240,6 +249,11 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
                 }
                 // promise only used to await during tests
                 this.__enqueuePromise = this.batcher.enqueue(ev);
+
+                // Capture the timestamp of the last event for duration calculation.
+                if (this.lastEventTimestamp === null || ev.timestamp > this.lastEventTimestamp) {
+                    this.lastEventTimestamp = ev.timestamp;
+                }
             }.bind(this),
             'blockClass': this.getConfig('record_block_class'),
             'blockSelector': blockSelector,
@@ -254,7 +268,16 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
             'recordCanvas': this.getConfig('record_canvas'),
             'sampling': {
                 'canvas': 15
-            }
+            },
+            'plugins': this.getConfig('record_console') ? [
+                getRecordConsolePlugin({
+                    stringifyOptions: {
+                        stringLengthLimit: 1000,
+                        numOfKeysLimit: 50,
+                        depthOfLimit: 2
+                    }
+                })
+            ] : []
         });
     } catch (err) {
         this.reportError('Unexpected error when starting rrweb recording.', err);
@@ -339,6 +362,7 @@ SessionRecording.prototype.serialize = function () {
         'replayStartTime': this.replayStartTime,
         'batchStartUrl': this.batchStartUrl,
         'replayStartUrl': this.replayStartUrl,
+        'lastEventTimestamp': this.lastEventTimestamp,
         'idleExpires': this.idleExpires,
         'maxExpires': this.maxExpires,
         'tabId': tabId,
@@ -360,6 +384,7 @@ SessionRecording.deserialize = function (serializedRecording, options) {
         idleExpires: serializedRecording['idleExpires'],
         maxExpires: serializedRecording['maxExpires'],
         replayStartTime: serializedRecording['replayStartTime'],
+        lastEventTimestamp: serializedRecording['lastEventTimestamp'],
         seqNo: serializedRecording['seqNo'],
         sharedLockStorage: options.sharedLockStorage,
     }));
@@ -450,7 +475,7 @@ SessionRecording.prototype._flushEvents = addOptOutCheckMixpanelLib(function (da
         var eventsJson = JSON.stringify(data);
         Object.assign(reqParams, this.getUserIdInfo());
 
-        if (CompressionStream) {
+        if (canUseCompressionStream(userAgent, navigator.vendor, windowOpera)) {
             var jsonStream = new Blob([eventsJson], {type: 'application/json'}).stream();
             var gzipStream = jsonStream.pipeThrough(new CompressionStream('gzip'));
             new Response(gzipStream)
@@ -479,4 +504,36 @@ SessionRecording.prototype.reportError = function(msg, err) {
     }
 };
 
+/**
+ * Calculates the duration of the recording in milliseconds, based on the start time and time of last recorded event.
+ * @returns {number} The duration of the recording in milliseconds. Returns 0 if recording hasn't started.
+ */
+SessionRecording.prototype.getDurationMs = function() {
+    if (this.replayStartTime === null) {
+        return 0;
+    }
+
+    // If the recording has no events, assume it is in progress and use the current time as the end time.
+    if (this.lastEventTimestamp === null) {
+        return new Date().getTime() - this.replayStartTime;
+    }
+
+    return this.lastEventTimestamp - this.replayStartTime;
+};
+
+/**
+ * Lazily loads the minimum recording length config in milliseconds, respecting the maximum limit.
+ * @returns {number} The minimum recording length in milliseconds.
+ */
+SessionRecording.prototype._getRecordMinMs = function() {
+    var configValue = this.getConfig('record_min_ms');
+
+    if (configValue > MAX_VALUE_FOR_MIN_RECORDING_MS) {
+        logger.critical('record_min_ms cannot be greater than ' + MAX_VALUE_FOR_MIN_RECORDING_MS + 'ms. Capping value.');
+        return MAX_VALUE_FOR_MIN_RECORDING_MS;
+    }
+
+    return configValue;
+};
+
 export { SessionRecording };

package/src/utils.js

@@ -1738,6 +1738,28 @@ if (typeof JSON !== 'undefined') {
 JSONStringify = JSONStringify || _.JSONEncode;
 JSONParse = JSONParse || _.JSONDecode;
 
+/**
+ * Determines if CompressionStream API should be used.
+ * Returns false for Safari 16.4 and 16.5 which have breaking CompressionStream bugs.
+ * https://bugs.webkit.org/show_bug.cgi?id=254021
+ * fixed in 16.6 https://developer.apple.com/documentation/safari-release-notes/safari-16_6-release-notes
+ */
+var canUseCompressionStream = function(userAgent, vendor, opera) {
+    if (!window.CompressionStream) {
+        return false;
+    }
+
+    var browser = _.info.browser(userAgent, vendor, opera);
+    var version = _.info.browserVersion(userAgent, vendor, opera);
+    if (browser === 'Safari' || browser === 'Mobile Safari') {
+        if (version >= 16.4 && version < 16.6) {
+            return false;
+        }
+    }
+
+    return true;
+};
+
 // UNMINIFIED EXPORTS (for closure compiler)
 _['info']                   = _.info;
 _['info']['browser']        = _.info.browser;
@@ -1755,6 +1777,7 @@ _['NPO']                    = NpoPromise;
 export {
     _,
     batchedThrottle,
+    canUseCompressionStream,
     cheap_guid,
     console_with_prefix,
     console,
@@ -1773,4 +1796,5 @@ export {
     safewrapClass,
     slice,
     userAgent,
+    windowOpera,
 };