@mixpanel/react-native-session-replay 0.1.2

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/mixpanelreactnativesessionreplay/MixpanelReactNativeSessionReplayModule.kt

@@ -0,0 +1,287 @@
+package com.mixpanelreactnativesessionreplay
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+import com.mixpanel.android.sessionreplay.MPSessionReplay
+import com.mixpanel.android.sessionreplay.MPSessionReplayInstance
+import com.mixpanel.android.sessionreplay.MPSessionReplayError
+import com.mixpanel.android.sessionreplay.models.MPSessionReplayConfig
+import com.mixpanel.android.sessionreplay.sensitive_views.AutoMaskedView
+import com.mixpanel.android.sessionreplay.utils.APIConstants
+import org.json.JSONObject
+import org.json.JSONArray
+
+@ReactModule(name = MixpanelReactNativeSessionReplayModule.NAME)
+class MixpanelReactNativeSessionReplayModule(reactContext: ReactApplicationContext) :
+  NativeMixpanelReactNativeSessionReplaySpec(reactContext) {
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  override fun initialize(token: String, distinctId: String, configJSON: String, promise: Promise) {
+    try {
+      if (token.isEmpty() || distinctId.isEmpty()) {
+        promise.reject("INVALID_CONFIG", "Token and distinctId are required")
+        return
+      }
+
+      // Parse JSON configuration
+      val config = if (configJSON.isNotEmpty()) {
+        try {
+          JSONObject(configJSON)
+        } catch (e: Exception) {
+          println("Mixpanel - Failed to parse config JSON: ${e.message}")
+          JSONObject()
+        }
+      } else {
+        JSONObject()
+      }
+
+      // Configure Mixpanel Session Replay
+
+      val replayConfig = try {
+        MPSessionReplayConfig.fromJson(configJSON)
+      } catch (e: Exception) {
+        println("Mixpanel - Failed to parse config JSON in fromJson: ${e.message}")
+        promise.reject("CONFIG_JSON_PARSE_ERROR", "Failed to parse config JSON: ${e.message}", e)
+        return
+      }
+      println("Mixpanel - Config variable fromJson: $replayConfig")
+
+      // Set library version and name
+      APIConstants.setLibVersion(LIB_VERSION)
+      APIConstants.setMpLib(MP_LIB)
+
+      // Initialize Mixpanel Session Replay
+      MPSessionReplay.initialize(
+        reactApplicationContext,
+        token,
+        distinctId,
+        replayConfig
+      ) { result ->
+        result.fold(
+          onSuccess = { sessionReplayInstance ->
+            // Successfully initialized
+            sessionReplayInstance?.let { instance ->
+              try {
+                // Configure AutoMaskedView categories with comprehensive React Native support
+                configureSensitiveClasses(instance, replayConfig)
+                println("Mixpanel - Session Replay initialized successfully with enhanced view masking")
+                promise.resolve(null)
+              } catch (e: Exception) {
+                println("Mixpanel - Error configuring sensitive classes: ${e.message}")
+                // Still resolve as initialization succeeded, but log the configuration error
+                promise.resolve(null)
+              }
+            } ?: run {
+              promise.reject(
+                "INITIALIZATION_ERROR",
+                "Session Replay instance is null after successful initialization"
+              )
+            }
+          },
+          onFailure = { error ->
+            when (error) {
+              is MPSessionReplayError.Disabled -> {
+                promise.reject("SESSION_REPLAY_DISABLED", error.reason)
+              }
+
+              is MPSessionReplayError.InitializationError -> {
+                promise.reject("INITIALIZATION_ERROR", error.cause.message, error.cause)
+              }
+
+              else -> {
+                promise.reject(
+                  "UNKNOWN_ERROR",
+                  "An unknown error occurred during initialization",
+                  error
+                )
+              }
+            }
+          }
+        )
+      }
+    } catch (e: Exception) {
+      promise.reject("INITIALIZATION_ERROR", e.message, e)
+    }
+  }
+
+  override fun startRecording(recordingSessionsPercent: Double, promise: Promise) {
+    try {
+      MPSessionReplay.getInstance()?.startRecording(sessionsPercent = recordingSessionsPercent)
+      promise.resolve(null)
+    } catch (e: Exception) {
+      promise.reject("START_RECORDING_ERROR", e.message, e)
+    }
+  }
+
+  override fun stopRecording(promise: Promise) {
+    try {
+      MPSessionReplay.getInstance()?.stopRecording()
+      promise.resolve(null)
+    } catch (e: Exception) {
+      promise.reject("STOP_RECORDING_ERROR", e.message, e)
+    }
+  }
+
+  override fun isRecording(promise: Promise) {
+    try {
+      val recording = MPSessionReplay.getInstance()?.isRecording() ?: false
+      promise.resolve(recording)
+    } catch (e: Exception) {
+      promise.reject("IS_RECORDING_ERROR", e.message, e)
+    }
+  }
+
+  override fun identify(distinctId: String, promise: Promise) {
+    try {
+      if (distinctId.isEmpty()) {
+        promise.reject("INVALID_DISTINCT_ID", "distinctId is required")
+        return
+      }
+
+      MPSessionReplay.getInstance()?.identify(distinctId)
+      promise.resolve(null)
+    } catch (e: Exception) {
+      promise.reject("IDENTIFY_ERROR", e.message, e)
+    }
+  }
+
+
+  /**
+   * Safely configure sensitive classes for comprehensive React Native view masking
+   * Supports both old and new React Native architectures with crash prevention
+   */
+  private fun configureSensitiveClasses(
+    mpInstance: MPSessionReplayInstance,
+    config: MPSessionReplayConfig
+  ) {
+    // Always mask input text classes to protect user input fields
+    configureInputTextClasses(mpInstance)
+
+    if (config.autoMaskedViews.contains(AutoMaskedView.Text)) {
+      configureTextClasses(mpInstance)
+    }
+
+    if (config.autoMaskedViews.contains(AutoMaskedView.Image)) {
+      configureImageClasses(mpInstance)
+    }
+
+    if (config.autoMaskedViews.contains(AutoMaskedView.Web)) {
+      configureWebClasses(mpInstance)
+    }
+  }
+
+  /**
+   * Configure text display view classes for masking
+   */
+  private fun configureTextClasses(mpInstance: MPSessionReplayInstance) {
+    val textClasses = listOf(
+      // React Native specific text display views
+      "com.facebook.react.views.text.ReactTextView",
+      "com.facebook.react.views.text.ReactTextAnchorView",
+
+      // New Architecture (Fabric) text display views
+      "com.facebook.react.fabric.views.text.ReactTextView"
+    )
+
+    textClasses.forEach { className ->
+      safeAddSensitiveClass(mpInstance, className, "Text")
+    }
+  }
+
+  /**
+   * Configure text input view classes for masking
+   */
+  private fun configureInputTextClasses(mpInstance: MPSessionReplayInstance) {
+    val inputTextClasses = listOf(
+      // React Native specific text input views
+      "com.facebook.react.views.textinput.ReactEditText",
+
+      // New Architecture (Fabric) text input views
+      "com.facebook.react.fabric.views.textinput.ReactEditText"
+    )
+
+    inputTextClasses.forEach { className ->
+      safeAddSensitiveClass(mpInstance, className, "Input Text")
+    }
+  }
+
+  /**
+   * Configure image-related view classes for masking
+   */
+  private fun configureImageClasses(mpInstance: MPSessionReplayInstance) {
+    val imageClasses = listOf(
+      // React Native specific image views
+      "com.facebook.react.views.image.ReactImageView",
+      "com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageSpan",
+
+      // New Architecture (Fabric) image views
+      "com.facebook.react.fabric.views.image.ReactImageView",
+
+      // Common third-party image libraries
+      "com.facebook.drawee.view.SimpleDraweeView"
+    )
+
+    imageClasses.forEach { className ->
+      safeAddSensitiveClass(mpInstance, className, "Image")
+    }
+  }
+
+  /**
+   * Configure web-related view classes for masking
+   */
+  private fun configureWebClasses(mpInstance: MPSessionReplayInstance) {
+    val webClasses = listOf(
+      // React Native WebView (community package)
+      "com.reactnativecommunity.webview.RNCWebView",
+      "com.reactnativecommunity.webview.RNCWebViewManager.RNCWebView",
+
+      // Legacy React Native WebView
+      "com.facebook.react.views.webview.ReactWebView",
+
+      // New Architecture (Fabric) web views
+      "com.facebook.react.fabric.views.webview.ReactWebView"
+    )
+
+    webClasses.forEach { className ->
+      safeAddSensitiveClass(mpInstance, className, "Web")
+    }
+  }
+
+  /**
+   * Safely add a sensitive class with comprehensive error handling
+   * Prevents crashes from ClassNotFoundException or other reflection issues
+   */
+  private fun safeAddSensitiveClass(
+    mpInstance: MPSessionReplayInstance,
+    className: String,
+    category: String
+  ) {
+    try {
+      val clazz = Class.forName(className)
+      mpInstance.addSensitiveClass(clazz)
+      println("Mixpanel - Successfully added $category class: $className")
+    } catch (e: ClassNotFoundException) {
+      // Class not found - this is expected for architecture-specific or optional classes
+      println("Mixpanel - $category class not available (expected): $className")
+    } catch (e: NoClassDefFoundError) {
+      // Missing dependencies - log but don't crash
+      println("Mixpanel - $category class dependencies not available: $className - ${e.message}")
+    } catch (e: LinkageError) {
+      // Linking issues - log but don't crash
+      println("Mixpanel - $category class linking error: $className - ${e.message}")
+    } catch (e: Exception) {
+      // Any other reflection-related issues
+      println("Mixpanel - Unexpected error adding $category class $className: ${e.message}")
+    }
+  }
+
+  companion object {
+    const val NAME = "MixpanelReactNativeSessionReplay"
+    const val LIB_VERSION = "0.1.1"
+    const val MP_LIB = "react-native-sr"
+  }
+}

package/android/src/main/java/com/mixpanelreactnativesessionreplay/MixpanelReactNativeSessionReplayPackage.kt

@@ -0,0 +1,38 @@
+package com.mixpanelreactnativesessionreplay
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+import java.util.HashMap
+
+class MixpanelReactNativeSessionReplayPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == MixpanelReactNativeSessionReplayModule.NAME) {
+      MixpanelReactNativeSessionReplayModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(MixpanelSessionReplayViewManager())
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      val moduleInfos: MutableMap<String, ReactModuleInfo> = HashMap()
+      moduleInfos[MixpanelReactNativeSessionReplayModule.NAME] = ReactModuleInfo(
+        MixpanelReactNativeSessionReplayModule.NAME,
+        MixpanelReactNativeSessionReplayModule.NAME,
+        false,  // canOverrideExistingModule
+        false,  // needsEagerInit
+        false,  // isCxxModule
+        true // isTurboModule
+      )
+      moduleInfos
+    }
+  }
+}

package/android/src/main/java/com/mixpanelreactnativesessionreplay/MixpanelSessionReplayView.kt

@@ -0,0 +1,26 @@
+package com.mixpanelreactnativesessionreplay
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+import com.mixpanel.android.sessionreplay.MPSessionReplay
+
+class MixpanelSessionReplayView(context: Context) : ReactViewGroup(context) {
+    private var isSensitive: Boolean = false
+
+    fun setSensitive(sensitive: Boolean) {
+        if (isSensitive == sensitive) return
+        
+        isSensitive = sensitive
+        updateViewSensitivity()
+    }
+    
+    private fun updateViewSensitivity() {
+        MPSessionReplay.getInstance()?.let { sessionReplay ->
+            if (isSensitive) {
+                sessionReplay.addSensitiveView(this)
+            } else {
+                sessionReplay.addSafeView(this)
+            }
+        }
+    }
+}

package/android/src/main/java/com/mixpanelreactnativesessionreplay/MixpanelSessionReplayViewManager.kt

@@ -0,0 +1,29 @@
+package com.mixpanelreactnativesessionreplay
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+@ReactModule(name = MixpanelSessionReplayViewManager.REACT_CLASS)
+class MixpanelSessionReplayViewManager : ViewGroupManager<MixpanelSessionReplayView>() {
+
+    companion object {
+        const val REACT_CLASS = "MixpanelSessionReplayView"
+    }
+
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): MixpanelSessionReplayView {
+        return MixpanelSessionReplayView(reactContext)
+    }
+
+    @ReactProp(name = "sensitive")
+    fun setSensitive(view: MixpanelSessionReplayView, sensitive: Boolean) {
+        // log the sensitive property change
+        println("MixpanelSessionReplayView - setSensitive called with value: $sensitive for view: $view")
+        view.setSensitive(sensitive)
+    }
+}

package/ios/MixpanelReactNativeSessionReplay.h

@@ -0,0 +1,5 @@
+#import <MixpanelReactNativeSessionReplaySpec/MixpanelReactNativeSessionReplaySpec.h>
+
+@interface MixpanelReactNativeSessionReplay : NSObject <NativeMixpanelReactNativeSessionReplaySpec>
+
+@end

package/ios/MixpanelReactNativeSessionReplay.mm

@@ -0,0 +1,87 @@
+#import "MixpanelReactNativeSessionReplay.h"
+#if __has_include("MixpanelReactNativeSessionReplay-Swift.h")
+  #import <MixpanelReactNativeSessionReplay-Swift.h>
+#else
+  #import <MixpanelReactNativeSessionReplay/MixpanelReactNativeSessionReplay-Swift.h>
+#endif
+
+@implementation MixpanelReactNativeSessionReplay
+RCT_EXPORT_MODULE()
+
+- (void)initialize:(nonnull NSString *)token distinctId:(nonnull NSString *)distinctId configJSON:(nonnull NSString *)configJSON resolve:(nonnull RCTPromiseResolveBlock)resolve reject:(nonnull RCTPromiseRejectBlock)reject {
+    @try {
+        if (!token || !distinctId) {
+            reject(@"INVALID_CONFIG", @"Token and distinctId are required", nil);
+            return;
+        }
+      [MixpanelSwiftSessionReplay initialize:token distinctId:distinctId configJSON:configJSON completion:^(BOOL success, NSError * _Nullable error) {
+        if (success) {
+          resolve(nil);
+        } else {
+          reject(@"INITIALIZATION_FAILED", error.debugDescription, error);
+        }
+      }];
+    }
+    @catch (NSException *exception) {
+        reject(@"INITIALIZATION_ERROR", exception.reason, nil);
+    }
+}
+
+- (void)startRecording:(double)recordingSessionsPercent
+               resolve:(RCTPromiseResolveBlock)resolve
+                reject:(RCTPromiseRejectBlock)reject {
+    @try {
+      [MixpanelSwiftSessionReplay startRecordingWithRecordingSessionsPercent:recordingSessionsPercent];
+        resolve(nil);
+    }
+    @catch (NSException *exception) {
+        reject(@"START_RECORDING_ERROR", exception.reason, nil);
+    }
+}
+
+- (void)stopRecording:(RCTPromiseResolveBlock)resolve
+               reject:(RCTPromiseRejectBlock)reject {
+    @try {
+        [MixpanelSwiftSessionReplay stopRecording];
+        resolve(nil);
+    }
+    @catch (NSException *exception) {
+        reject(@"STOP_RECORDING_ERROR", exception.reason, nil);
+    }
+}
+
+- (void)isRecording:(RCTPromiseResolveBlock)resolve
+             reject:(RCTPromiseRejectBlock)reject {
+    @try {
+        BOOL recording = [MixpanelSwiftSessionReplay isRecording];
+        resolve(@(recording));
+    }
+    @catch (NSException *exception) {
+        reject(@"IS_RECORDING_ERROR", exception.reason, nil);
+    }
+}
+
+- (void)identify:(NSString *)distinctId
+         resolve:(RCTPromiseResolveBlock)resolve
+          reject:(RCTPromiseRejectBlock)reject {
+    @try {
+        if (!distinctId || [distinctId isEqualToString: @""]) {
+            reject(@"INVALID_DISTINCT_ID", @"distinctId is required", nil);
+            return;
+        }
+        
+        [MixpanelSwiftSessionReplay identify:distinctId];
+        resolve(nil);
+    }
+    @catch (NSException *exception) {
+        reject(@"IDENTIFY_ERROR", exception.reason, nil);
+    }
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+    return std::make_shared<facebook::react::NativeMixpanelReactNativeSessionReplaySpecJSI>(params);
+}
+
+@end

package/ios/MixpanelSessionReplayViewManager.mm

@@ -0,0 +1,36 @@
+#import <UIKit/UIKit.h>
+#import <React/RCTViewManager.h>
+#import <React/RCTView.h>
+
+#if __has_include("MixpanelReactNativeSessionReplay-Swift.h")
+  #import <MixpanelReactNativeSessionReplay-Swift.h>
+#else
+  #import <MixpanelReactNativeSessionReplay/MixpanelReactNativeSessionReplay-Swift.h>
+#endif
+
+@interface MixpanelSessionReplayViewManager : RCTViewManager
+@end
+
+@implementation MixpanelSessionReplayViewManager
+
+RCT_EXPORT_MODULE(MixpanelSessionReplayView)
+
+- (UIView *)view
+{
+  return [[RCTView alloc] init];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(sensitive, BOOL, RCTView)
+{
+  if (json == nil) {
+    return;
+  }
+  
+  if ([json boolValue] == YES) {
+     [MixpanelSwiftSessionReplay setMPReplaySensitiveWithValue:YES view:view];
+  } else if ([json boolValue] == NO) {
+    [MixpanelSwiftSessionReplay setMPReplaySensitiveWithValue:NO view:view];
+  }
+}
+
+@end

package/ios/MixpanelSwiftSessionReplay.swift

@@ -0,0 +1,93 @@
+import Foundation
+import UIKit
+import MixpanelSessionReplay
+
+@objc public class MixpanelSwiftSessionReplay: NSObject {
+  static let libVersion = "0.1.1"
+  static let mpLib = "react-native-sr"
+
+  @objc public static func startRecording(recordingSessionsPercent: Double = 100.0) {
+    MPSessionReplay.getInstance()?.startRecording(sessionsPercent: recordingSessionsPercent)
+  }
+
+  @objc public static func stopRecording() {
+    MPSessionReplay.getInstance()?.stopRecording()
+  }
+
+  @objc public static func captureScreenshot() {
+    MPSessionReplay.getInstance()?.captureScreenshot()
+  }
+
+  @objc public static func initialize(_ token: String, distinctId: String, configJSON: String, completion: @escaping (Bool, NSError?) -> Void) {
+    guard let data = configJSON.data(using: .utf8) else {
+      let error =  createError("Invalid config JSON string", code: 3840)
+      completion(false, error)
+      return
+    }
+    
+    do {
+      APIConstants.setLibVersion(libVersion)
+      APIConstants.setMpLib(mpLib)
+      let config = try MPSessionReplayConfig.from(json: data)
+      MPSessionReplay.initialize(token: token, distinctId: distinctId, config: config) { result in
+        switch result {
+        case .success(_?):
+          setSensitiveClasses(config: config)
+          completion(true, nil)
+          
+        case .success(nil):
+          completion(false, createError("Instance found nil after successful initialisation."))
+          
+        case .failure(let error as MPSessionReplayError):
+          let message = switch error {
+          case .disabledByRemoteSetting(let message): message
+          case .failedToInitialize: "Failed to initialize the SDK: \(error)"
+          }
+          completion(false, createError(message))
+          
+        case .failure(let error):
+          completion(false, createError("Session replay initialization failed: \(error)"))
+        }
+      }
+    } catch {
+      completion(false, error as NSError)
+    }
+  }
+  
+  @objc public static func isRecording() -> Bool {
+    return MPSessionReplay.getInstance()?.isRecording ?? false
+  }
+  
+  @objc public static func identify(_ distinctId: String) {
+    MPSessionReplay.getInstance()?.identify(distinctId: distinctId)
+  }
+  
+  @objc public static func setMPReplaySensitive(value: Bool, view: UIView) {
+    view.mpReplaySensitive = value
+  }
+  
+  private static func createError(_ message: String, code: Int = -1) -> NSError {
+    return NSError(domain: "MixpanelSessionReplay",
+                   code: code,
+                   userInfo: [NSLocalizedDescriptionKey: message])
+  }
+  
+  private static func setSensitiveClasses(config: MPSessionReplayConfig) {
+    let legacyTextViewClass: AnyClass? = NSClassFromString("RCTTextView")
+    let fabricTextViewClass: AnyClass? = NSClassFromString("RCTParagraphTextView")
+    let imageViewClass: AnyClass? = NSClassFromString("RCTImageView")
+    let sessionReplay = MPSessionReplay.getInstance()
+
+    if let imageViewClass, config.autoMaskedViews.contains(.image) {
+      sessionReplay?.addSensitiveClass(imageViewClass)
+    }
+    
+    if let fabricTextViewClass, config.autoMaskedViews.contains(.text) {
+      sessionReplay?.addSensitiveClass(fabricTextViewClass)
+    }
+    
+    if let legacyTextViewClass, config.autoMaskedViews.contains(.text) {
+      sessionReplay?.addSensitiveClass(legacyTextViewClass)
+    }
+  }
+}

package/lib/module/MixpanelSessionReplayView.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { requireNativeComponent } from 'react-native';
+export const MixpanelSessionReplayView = requireNativeComponent('MixpanelSessionReplayView');
+//# sourceMappingURL=MixpanelSessionReplayView.js.map

package/lib/module/MixpanelSessionReplayView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["requireNativeComponent","MixpanelSessionReplayView"],"sourceRoot":"../../src","sources":["MixpanelSessionReplayView.tsx"],"mappings":";;AAAA,SAASA,sBAAsB,QAAwB,cAAc;AAMrE,OAAO,MAAMC,yBAAyB,GACpCD,sBAAsB,CACpB,2BACF,CAAC","ignoreList":[]}

package/lib/module/NativeMixpanelReactNativeSessionReplay.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.getEnforcing('MixpanelReactNativeSessionReplay');
+//# sourceMappingURL=NativeMixpanelReactNativeSessionReplay.js.map

package/lib/module/NativeMixpanelReactNativeSessionReplay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeMixpanelReactNativeSessionReplay.ts"],"mappings":";;AACA,SAASA,mBAAmB,QAAQ,cAAc;AAelD,eAAeA,mBAAmB,CAACC,YAAY,CAC7C,kCACF,CAAC","ignoreList":[]}