feat: add session replay for mixpanel

packages/analytics-js-integrations/__tests__/integrations/Mixpanel/browser.test.js

@@ -76,6 +76,214 @@ describe('Init tests', () => {
       loaded: expect.any(Function),
     });
   });
+
+  test('Session replay configuration', () => {
+    const analytics = {
+      loadOnlyIntegrations: {
+        Mixpanel: {
+          recordBlockClass: 'block-class',
+          recordCollectFonts: true,
+          recordIdleTimeout: 5000,
+          recordMaskTextClass: 'mask-text',
+          recordMaskTextSelector: '.sensitive',
+          recordMaxMs: 30000,
+          recordMinMs: 1000,
+        },
+      },
+      logLevel: 'debug',
+    };
+
+    mixpanel = new Mixpanel(
+      {
+        persistenceType: 'localStorage',
+        persistenceName: 'test',
+        sessionReplayPercentage: 50,
+      },
+      analytics,
+      { logLevel: 'debug' },
+    );
+    mixpanel.init();
+
+    expect(window.mixpanel._i[0][1]).toEqual({
+      cross_subdomain_cookie: false,
+      secure_cookie: false,
+      persistence: 'localStorage',
+      persistence_name: 'test',
+      record_block_class: 'block-class',
+      record_collect_fonts: true,
+      record_idle_timeout_ms: 5000,
+      record_mask_text_class: 'mask-text',
+      record_mask_text_selector: '.sensitive',
+      record_max_ms: 30000,
+      record_min_ms: 1000,
+      record_sessions_percent: 50,
+      loaded: expect.any(Function),
+    });
+  });
+
+  test('Session replay configuration with partial options', () => {
+    const analytics = {
+      loadOnlyIntegrations: {
+        MP: {
+          recordBlockClass: 'block-class',
+          recordCollectFonts: true,
+        },
+      },
+      logLevel: 'debug',
+    };
+
+    mixpanel = new Mixpanel(
+      {
+        persistenceType: 'localStorage',
+        persistenceName: 'test',
+      },
+      analytics,
+      { logLevel: 'debug' },
+    );
+    mixpanel.init();
+
+    expect(window.mixpanel._i[0][1]).toEqual({
+      cross_subdomain_cookie: false,
+      secure_cookie: false,
+      persistence: 'localStorage',
+      persistence_name: 'test',
+      loaded: expect.any(Function),
+    });
+  });
+
+  test('Session replay configuration without loadOnlyIntegrations', () => {
+    const analytics = {
+      logLevel: 'debug',
+    };
+
+    mixpanel = new Mixpanel(
+      {
+        persistenceType: 'localStorage',
+        persistenceName: 'test',
+        sessionReplayPercentage: 75,
+      },
+      analytics,
+      { logLevel: 'debug' },
+    );
+    mixpanel.init();
+
+    expect(window.mixpanel._i[0][1]).toEqual({
+      cross_subdomain_cookie: false,
+      secure_cookie: false,
+      persistence: 'localStorage',
+      persistence_name: 'test',
+      record_sessions_percent: 75,
+      loaded: expect.any(Function),
+    });
+  });
+
+  test('Session replay configuration with invalid percentage', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const analytics = {
+      logLevel: 'debug',
+    };
+
+    mixpanel = new Mixpanel(
+      {
+        persistenceType: 'localStorage',
+        persistenceName: 'test',
+        sessionReplayPercentage: '101',
+      },
+      analytics,
+      { logLevel: 'debug' },
+    );
+    mixpanel.init();
+
+    expect(window.mixpanel._i[0][1]).toEqual({
+      cross_subdomain_cookie: false,
+      secure_cookie: false,
+      persistence: 'localStorage',
+      persistence_name: 'test',
+      loaded: expect.any(Function),
+    });
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '%c RS SDK - Mixpanel %c Invalid sessionReplayPercentage: 101. It should be a string matching the pattern "^(100|[1-9]?[0-9])$"',
+      'font-weight: bold; background: black; color: white;',
+      'font-weight: normal;',
+    );
+
+    consoleSpy.mockRestore();
+  });
+
+  test('Session replay configuration with emppty load integration', () => {
+    const analytics = {
+      loadOnlyIntegrations: {
+        Mixpanel: {},
+      },
+      logLevel: 'debug',
+    };
+
+    mixpanel = new Mixpanel(
+      {
+        persistenceType: 'localStorage',
+        persistenceName: 'test',
+        sessionReplayPercentage: 50,
+      },
+      analytics,
+      { logLevel: 'debug' },
+    );
+    mixpanel.init();
+
+    expect(window.mixpanel._i[0][1]).toEqual({
+      cross_subdomain_cookie: false,
+      secure_cookie: false,
+      persistence: 'localStorage',
+      persistence_name: 'test',
+      record_sessions_percent: 50,
+      loaded: expect.any(Function),
+    });
+  });
+
+  test('Session replay configuration with all options', () => {
+    const analytics = {
+      loadOnlyIntegrations: {
+        Mixpanel: {
+          recordBlockClass: 'block-class',
+          recordCollectFonts: true,
+          recordIdleTimeout: 5000,
+          recordMaskTextClass: 'mask-text',
+          recordMaskTextSelector: '.sensitive',
+          recordMaxMs: 30000,
+          recordMinMs: 1000,
+        },
+      },
+      logLevel: 'debug',
+    };
+
+    mixpanel = new Mixpanel(
+      {
+        persistenceType: 'localStorage',
+        persistenceName: 'test',
+        sessionReplayPercentage: 50,
+      },
+      analytics,
+      { logLevel: 'debug' },
+    );
+    mixpanel.init();
+
+    expect(window.mixpanel._i[0][1]).toEqual({
+      cross_subdomain_cookie: false,
+      secure_cookie: false,
+      persistence: 'localStorage',
+      persistence_name: 'test',
+      record_block_class: 'block-class',
+      record_collect_fonts: true,
+      record_idle_timeout_ms: 5000,
+      record_mask_text_class: 'mask-text',
+      record_mask_text_selector: '.sensitive',
+      record_max_ms: 30000,
+      record_min_ms: 1000,
+      record_sessions_percent: 50,
+      loaded: expect.any(Function),
+    });
+  });
 });
 
 describe('isLoaded and isReady tests', () => {

packages/analytics-js-integrations/src/integrations/Mixpanel/browser.js

@@ -5,7 +5,12 @@ import {
   DISPLAY_NAME,
 } from '@rudderstack/analytics-js-common/constants/integrations/Mixpanel/constants';
 import Logger from '../../utils/logger';
-import { pick, removeUndefinedAndNullValues, isNotEmpty } from '../../utils/commonUtils';
+import {
+  pick,
+  removeUndefinedAndNullValues,
+  isNotEmpty,
+  isDefinedAndNotNull,
+} from '../../utils/commonUtils';
 import {
   mapTraits,
   unionArrays,
@@ -16,6 +21,7 @@ import {
   inverseObjectArrays,
   getConsolidatedPageCalls,
   generatePageCustomEventName,
+  getDestinationOptions,
 } from './util';
 import { loadNativeSdk } from './nativeSdkLoader';
 
@@ -66,13 +72,14 @@ class Mixpanel {
     this.ignoreDnt = config.ignoreDnt || false;
     this.useUserDefinedPageEventName = config.useUserDefinedPageEventName || false;
     this.userDefinedPageEventTemplate = config.userDefinedPageEventTemplate;
+    this.sessionReplayPercentage = config.sessionReplayPercentage;
     this.isNativeSDKLoaded = false;
   }
 
   init() {
     // eslint-disable-next-line no-var
     loadNativeSdk();
-    const options = {
+    let options = {
       cross_subdomain_cookie: this.crossSubdomainCookie || false,
       secure_cookie: this.secureCookie || false,
     };
@@ -94,6 +101,34 @@ class Mixpanel {
     if (this.ignoreDnt) {
       options.ignore_dnt = true;
     }
+
+    const mixpanelIntgConfig = getDestinationOptions(this.analytics.loadOnlyIntegrations);
+
+    // ref : https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#session-replay
+    if (isDefinedAndNotNull(this.sessionReplayPercentage)) {
+      const percentageInt = parseInt(this.sessionReplayPercentage, 10);
+      if (percentageInt >= 0 && percentageInt <= 100) {
+        options.record_sessions_percent = percentageInt;
+
+        if (mixpanelIntgConfig) {
+          const sessionReplayConfig = removeUndefinedAndNullValues({
+            record_block_class: mixpanelIntgConfig.recordBlockClass,
+            record_collect_fonts: mixpanelIntgConfig.recordCollectFonts,
+            record_idle_timeout_ms: mixpanelIntgConfig.recordIdleTimeout,
+            record_mask_text_class: mixpanelIntgConfig.recordMaskTextClass,
+            record_mask_text_selector: mixpanelIntgConfig.recordMaskTextSelector,
+            record_max_ms: mixpanelIntgConfig.recordMaxMs,
+            record_min_ms: mixpanelIntgConfig.recordMinMs,
+          });
+          options = { ...options, ...sessionReplayConfig };
+        }
+      } else {
+        logger.warn(
+          `Invalid sessionReplayPercentage: ${this.sessionReplayPercentage}. It should be a string matching the pattern "^(100|[1-9]?[0-9])$"`,
+        );
+      }
+    }
+
     options.loaded = () => {
       this.isNativeSDKLoaded = true;
     };

packages/analytics-js-integrations/src/integrations/Mixpanel/util.js

@@ -2,7 +2,7 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-prototype-builtins */
 import get from 'get-value';
-import { DISPLAY_NAME } from '@rudderstack/analytics-js-common/constants/integrations/Mixpanel/constants';
+import { DISPLAY_NAME, NAME } from '@rudderstack/analytics-js-common/constants/integrations/Mixpanel/constants';
 import Logger from '../../utils/logger';
 import { getDefinedTraits, extractCustomFields, isDefinedAndNotNull } from '../../utils/utils';
 
@@ -273,6 +273,18 @@ const generatePageCustomEventName = (message, userDefinedEventTemplate) => {
   return eventName;
 };
 
+/**
+ * Get destination specific options from integrations options
+ * By default, it will return options for the destination using its display name
+ * If display name is not present, it will return options for the destination using its name
+ * The fallback is only for backward compatibility with SDK versions < v1.1
+ * @param {object} integrationsOptions Integrations options object
+ * @returns destination specific options
+ */
+const getDestinationOptions = integrationsOptions =>
+  integrationsOptions && (integrationsOptions[DISPLAY_NAME] || integrationsOptions[NAME]);
+
+
 export {
   mapTraits,
   unionArrays,
@@ -285,4 +297,5 @@ export {
   filterSetOnceTraits,
   unset,
   generatePageCustomEventName,
+  getDestinationOptions
 };