@coralogix/react-native-plugin 0.1.10 → 0.2.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 0.2.1 (2025-11-18)
+
+### 🚀 Features
+
+- update git ignore ([#72](https://github.com/coralogix/cx-react-native-plugin/pull/72))
+
+### 🩹 Patch
+
+- Bump Android native version to 2.6.0, updated the code to support latest changes in the native sdk
+
+## 0.2.0 (2025-11-11)
+
+### 🚀 Features
+
+- add session replay Documents
+- added manual masking functionality
+- added missing session replay options
+- added basic session replay bridge implementation for react native
+
+### 🩹 Fixes
+
+- pr changes
+- update readme.md
+- changed implementation for masking specific elements to a hook on onLayout to not influence the app's layout with an extra layout node
+- iOS masking view + version bump 1.4.0
+- mask all texts default value
+- moved android impl for shutdown to a handler to run on main
+
 ## 0.1.10 (2025-11-11)
 
 ### 🩹 Fixes

package/CxSdk.podspec

@@ -18,7 +18,7 @@ Pod::Spec.new do |s|
 
   s.dependency 'Coralogix','1.4.0'
   s.dependency 'CoralogixInternal','1.4.0'
-
+  s.dependency 'SessionReplay','1.4.0'
 
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.

package/README.md

@@ -210,7 +210,7 @@ await CoralogixRum.init({
 Proxy configuration to route requests.  
 By specifying a proxy URL, all RUM data will be directed to this URL via the POST method.
 However, it is necessary for this data to be subsequently relayed from the proxy to Coralogix.
-The Coralogix route for each request that is sent to the proxy is available in the request’s cxforward parameter
+The Coralogix route for each request that is sent to the proxy is available in the request's cxforward parameter
 (for example, https://www.your-proxy.com/endpoint?cxforward=https%3A%2F%2Fingress.eu1.rum-ingress-coralogix.com%2Fbrowser%2Fv1beta%2Flogs).
 
 ```javascript
@@ -221,6 +221,107 @@ await CoralogixRum.init({
 });
 ```
 
+### Session Replay
+
+Session Replay allows you to record and replay user sessions to understand user behavior and debug issues.
+
+#### Initialize Session Replay
+
+To initialize Session Replay, call `SessionReplay.init(options)` with the desired configuration options.
+
+```javascript
+import { SessionReplay } from '@coralogix/react-native-plugin';
+
+await SessionReplay.init({
+  captureScale: 0.5,                    // Scale factor for screenshots (0.0 to 1.0)
+  captureCompressQuality: 0.8,         // Compression quality for screenshots (0.0 to 1.0)
+  sessionRecordingSampleRate: 100,      // Percentage of sessions to record (0 to 100)
+  autoStartSessionRecording: true,      // Automatically start recording when initialized
+  maskAllTexts: true,                   // Mask all text content by default (optional, default: true)
+  textsToMask: ['password', '^card.*'], // Array of strings/regex patterns for specific text masking (optional)
+  maskAllImages: false,                 // Mask all images (optional, default: false)
+});
+```
+
+**Options:**
+- `captureScale` (required): Scale factor for screenshots. Must be between 0.0 and 1.0. Lower values reduce file size but may decrease quality.
+- `captureCompressQuality` (required): Compression quality for screenshots. Must be between 0.0 and 1.0. Higher values improve quality but increase file size.
+- `sessionRecordingSampleRate` (required): Percentage of sessions to record. Must be between 0 and 100. Use 100 to record all sessions.
+- `autoStartSessionRecording` (required): If `true`, recording starts automatically after initialization. If `false`, you must manually call `startSessionRecording()`.
+- `maskAllTexts` (optional): If `true`, all text content is masked by default. Defaults to `true`.
+- `textsToMask` (optional): Array of strings or regex patterns to mask specific text content. Only used when `maskAllTexts` is `false`.
+- `maskAllImages` (optional): If `true`, all images are masked. Defaults to `false`.
+
+#### Check Initialization Status
+
+Check if Session Replay has been initialized:
+
+```javascript
+const isInited = await SessionReplay.isInited();
+console.log('Session Replay initialized:', isInited);
+```
+
+#### Check Recording Status
+
+Check if Session Replay is currently recording:
+
+```javascript
+const isRecording = await SessionReplay.isRecording();
+console.log('Session Replay recording:', isRecording);
+```
+
+#### Start Recording
+
+Manually start session recording:
+
+```javascript
+SessionReplay.startSessionRecording();
+```
+
+**Note:** If `autoStartSessionRecording` is set to `true` in the init options, recording starts automatically and you don't need to call this method.
+
+#### Stop Recording
+
+Manually stop session recording:
+
+```javascript
+SessionReplay.stopSessionRecording();
+```
+
+#### Capture Screenshot
+
+Manually capture a screenshot during a session:
+
+```javascript
+SessionReplay.captureScreenshot();
+```
+
+This is useful for capturing specific moments in the user journey that you want to highlight.
+
+#### Shutdown Session Replay
+
+Shutdown Session Replay to clean up resources:
+
+```javascript
+await SessionReplay.shutdown();
+```
+
+#### Masking Sensitive Content
+
+To mask sensitive content in your app, use the `onLayout` prop with `SessionReplay.maskView` on any View component that should be masked:
+
+```javascript
+import { SessionReplay } from '@coralogix/react-native-plugin';
+
+<View onLayout={SessionReplay.maskView}>
+  <Text>This text will be masked in session replay</Text>
+  <TextInput placeholder="Password" />
+</View>
+```
+
+The `SessionReplay.maskView` function accepts a `LayoutChangeEvent` and will mask the view in session replay recordings.
+
+
 ### Optional - Coralogix Gradle Plugin (Android)
 
 The Coralogix Gradle Plugin automatically instruments all OkHttp clients in your app (including third-party SDKs) at build time.

package/android/build.gradle

@@ -75,7 +75,7 @@ dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 
-  implementation "com.coralogix:android-sdk:2.5.6"
+  implementation "com.coralogix:android-sdk:2.6.0"
 }
 
 react {

package/android/src/main/java/com/cxsdk/CxSdkModule.kt

@@ -18,6 +18,9 @@ import com.coralogix.android.sdk.model.Instrumentation
 import com.coralogix.android.sdk.model.MobileVitalType
 import com.coralogix.android.sdk.model.UserContext
 import com.coralogix.android.sdk.model.ViewContext
+import com.coralogix.android.sdk.session_replay.SessionReplay
+import com.coralogix.android.sdk.session_replay.SessionReplay.maskView
+import com.coralogix.android.sdk.session_replay.model.SessionReplayOptions
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
@@ -32,14 +35,16 @@ import com.facebook.react.modules.core.DeviceEventManagerModule
 import org.json.JSONArray
 import org.json.JSONObject
 import java.lang.Long.getLong
+import com.facebook.react.uimanager.UIManagerModule
 
 class CxSdkModule(reactContext: ReactApplicationContext) :
-  ReactContextBaseJavaModule(reactContext), ICxSdkModule {
+  ReactContextBaseJavaModule(reactContext), RUMClient, SessionReplayClient {
 
   override fun getName(): String {
     return NAME
   }
 
+  // region - SDK methods
   @ReactMethod
   override fun initialize(config: ReadableMap, promise: Promise) {
     val application = reactApplicationContext.applicationContext as Application
@@ -88,13 +93,14 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
 
   @ReactMethod
   override fun setLabels(labelsMap: ReadableMap) {
-    val labels = labelsMap.toStringMap()
+    val labels = labelsMap.toStringAnyMap()
     CoralogixRum.setLabels(labels)
   }
 
   @ReactMethod
   override fun getLabels(promise: Promise) {
-    promise.resolve(CoralogixRum.getLabels().toWritableMap())
+    val labelsMap = convertMapToWritableMap(CoralogixRum.getLabels())
+    promise.resolve(labelsMap)
   }
 
   @ReactMethod
@@ -104,7 +110,7 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
 
   @ReactMethod
   override fun log(severity: Int, message: String, data: ReadableMap, labels: ReadableMap) {
-    CoralogixRum.log(severity.toCoralogixLogSeverity(), message, data.toStringMap(), labels.toStringMap())
+    CoralogixRum.log(severity.toCoralogixLogSeverity(), message, data.toStringAnyMap(), labels.toStringAnyMap())
   }
 
   @ReactMethod
@@ -197,7 +203,70 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
   fun removeListeners(count: Int) {
     Log.d("CxSdkModule", "removeListeners: $count")
   }
+  // endregion
 
+  // region - Session Replay methods
+  @ReactMethod
+  override fun initializeSessionReplay(options: ReadableMap, promise: Promise) {
+    val sessionReplayOptions = options.toSessionReplayOptions()
+
+    Handler(Looper.getMainLooper()).post {
+      SessionReplay.initialize(reactApplicationContext, sessionReplayOptions)
+      promise.resolve(true)
+    }
+  }
+
+  @ReactMethod
+  override fun shutdownSessionReplay(promise: Promise) {
+    Handler(Looper.getMainLooper()).post {
+      SessionReplay.shutdown()
+      promise.resolve(true)
+    }
+  }
+
+  @ReactMethod
+  override fun isSessionReplayInitialized(promise: Promise) {
+    val isInitialized = SessionReplay.isInitialized()
+    promise.resolve(isInitialized)
+  }
+
+  @ReactMethod
+  override fun isRecording(promise: Promise) {
+    val isRecording = SessionReplay.isRecording()
+    promise.resolve(isRecording)
+  }
+
+  @ReactMethod
+  override fun startSessionRecording() {
+    SessionReplay.startSessionRecording()
+  }
+
+  @ReactMethod
+  override fun stopSessionRecording() {
+    SessionReplay.stopSessionRecording()
+  }
+
+  @ReactMethod
+  override fun captureScreenshot() {
+    SessionReplay.captureScreenshot()
+  }
+
+  @ReactMethod
+  override fun maskViewByTag(viewTag: Int) {
+    val uiManager = reactApplicationContext.getNativeModule(UIManagerModule::class.java)
+
+    uiManager?.addUIBlock { nativeViewHierarchyManager ->
+      try {
+        val view = nativeViewHierarchyManager.resolveView(viewTag)
+        view?.maskView()
+      } catch (t: Throwable) {
+        t.printStackTrace()
+      }
+    }
+  }
+  // endregion
+
+  // region - utils
   override fun invalidate() {
     super.invalidate()
 
@@ -207,6 +276,29 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  private fun ReadableMap.toSessionReplayOptions(): SessionReplayOptions {
+    val scale = if (hasKey("captureScale")) getDouble("captureScale") else 0.5
+    val quality = if (hasKey("captureCompressQuality")) getDouble("captureCompressQuality") else 1
+    val sampleRate = if (hasKey("sessionRecordingSampleRate")) getInt("sessionRecordingSampleRate") else 100
+    val autoStart = if (hasKey("autoStartSessionRecording")) getBoolean("autoStartSessionRecording") else true
+    val maskAllTexts = if (hasKey("maskAllTexts")) getBoolean("maskAllTexts") else true
+    val maskAllImages = if (hasKey("maskAllImages")) getBoolean("maskAllImages") else false
+
+    val textsToMask = if (hasKey("textsToMask") && !isNull("textsToMask")) {
+      getArray("textsToMask")?.handleStringOrRegexList() ?: emptyList()
+    } else emptyList()
+
+    return SessionReplayOptions(
+      captureScale = scale.toFloat(),
+      captureCompressQuality = quality.toFloat(),
+      sessionRecordingSampleRate = sampleRate,
+      autoStartSessionRecording = autoStart,
+      maskAllTexts = maskAllTexts,
+      textsToMask = textsToMask,
+      maskAllImages = maskAllImages
+    )
+  }
+
   private fun ReadableMap.toCoralogixOptions(): CoralogixOptions {
     val applicationName = getString("application")
       ?: throw IllegalArgumentException("Missing required parameter: application")
@@ -225,7 +317,7 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
       applicationName = applicationName,
       coralogixDomain = coralogixDomain,
       publicKey = publicKey,
-      labels = getMap("labels")?.toStringMap() ?: mapOf(),
+      labels = getMap("labels")?.toStringAnyMap() ?: mapOf(),
       environment = getString("environment") ?: "",
       version = getString("version") ?: "",
       userContext = getMap("user_context")?.toUserContext() ?: UserContext(),
@@ -426,6 +518,27 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
     )
   }
 
+  private fun ReadableMap.toStringAnyMap(): Map<String, Any?> {
+    val result = mutableMapOf<String, Any?>()
+    val iterator = keySetIterator()
+    while (iterator.hasNextKey()) {
+      val key = iterator.nextKey()
+      val jsonValue = when (getType(key)) {
+        ReadableType.Null -> JSONObject.NULL
+        ReadableType.Boolean -> getBoolean(key)
+        ReadableType.Number -> getDouble(key)
+        ReadableType.String -> getString(key)
+        ReadableType.Map -> getMap(key)?.toStringAnyMap()
+        ReadableType.Array -> convertReadableArrayToAnyList(getArray(key))
+        else -> JSONObject.NULL
+      }
+
+      result[key] = jsonValue
+    }
+
+    return result
+  }
+
   private fun ReadableMap.toStringMap(): Map<String, String> {
     val result = mutableMapOf<String, String>()
     val iterator = keySetIterator()
@@ -550,6 +663,7 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
     }
     return out
   }
+  // endregion
 
   companion object {
     const val NAME = "CxSdk"

package/android/src/main/java/com/cxsdk/{ICxSdkModule.kt → RUMClient.kt}

@@ -4,7 +4,7 @@ import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 
-interface ICxSdkModule {
+interface RUMClient {
   fun initialize(config: ReadableMap, promise: Promise)
   fun setUserContext(userContextMap: ReadableMap)
   fun getUserContext(promise: Promise)

package/android/src/main/java/com/cxsdk/SessionReplayClient.kt

@@ -0,0 +1,15 @@
+package com.cxsdk
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReadableMap
+
+interface SessionReplayClient {
+  fun initializeSessionReplay(options: ReadableMap, promise: Promise)
+  fun shutdownSessionReplay(promise: Promise)
+  fun isSessionReplayInitialized(promise: Promise)
+  fun isRecording(promise: Promise)
+  fun startSessionRecording()
+  fun stopSessionRecording()
+  fun captureScreenshot()
+  fun maskViewByTag(viewTag: Int)
+}

package/index.cjs.js

@@ -219,7 +219,7 @@ function stopJsRefreshRateSampler() {
   appStateSub = null;
 }
 
-var version = "0.1.10";
+var version = "0.2.1";
 var pkg = {
 	version: version};
 
@@ -373,6 +373,13 @@ class CoralogixFetchInstrumentation extends instrumentationFetch.FetchInstrument
   }
 }
 
+function isSessionReplayOptionsValid(options) {
+  const scaleValid = options.captureScale > 0 && options.captureScale <= 1;
+  const sampleRateValid = options.sessionRecordingSampleRate >= 0 && options.sessionRecordingSampleRate <= 100;
+  const qualityValid = options.captureCompressQuality > 0 && options.captureCompressQuality <= 1;
+  return scaleValid && sampleRateValid && qualityValid;
+}
+
 let lastRouteName;
 function getLastNavigationRouteDetected() {
   return lastRouteName;
@@ -582,6 +589,48 @@ const CoralogixRum = {
     CxSdk.reportError(errorDetails);
   }
 };
+const SessionReplay = {
+  init: async options => {
+    logger.debug("session replay: init called with options: ", options);
+    const optionsValid = isSessionReplayOptionsValid(options);
+    if (!optionsValid) {
+      logger.warn("invalid options in SessionReplay.init: ", options);
+      return false;
+    }
+    return await CxSdk.initializeSessionReplay(options);
+  },
+  shutdown: async () => {
+    logger.debug("session replay: shutdown called");
+    return await CxSdk.shutdownSessionReplay();
+  },
+  captureScreenshot: () => {
+    logger.debug("session replay: captureScreenshot called");
+    CxSdk.captureScreenshot();
+  },
+  isInited: async () => {
+    logger.debug("session replay: isInited called");
+    return await CxSdk.isSessionReplayInitialized();
+  },
+  isRecording: async () => {
+    logger.debug("session replay: isRecording called");
+    return await CxSdk.isRecording();
+  },
+  startSessionRecording: () => {
+    logger.debug("session replay: startSessionRecording called");
+    CxSdk.startSessionRecording();
+  },
+  stopSessionRecording: () => {
+    logger.debug("session replay: stopSessionRecording called");
+    CxSdk.stopSessionRecording();
+  },
+  maskView: event => {
+    logger.debug("session replay: maskViewByTag called");
+    const viewTag = reactNative.findNodeHandle(event.target);
+    if (viewTag) {
+      CxSdk.maskViewByTag(viewTag);
+    }
+  }
+};
 function trackMobileVitals(options) {
   var _options$mobileVitals;
   const shouldEnableJsRefreshRateDetector = ((_options$mobileVitals = options.mobileVitals) == null ? void 0 : _options$mobileVitals.jsRefreshRate) !== false;
@@ -729,4 +778,5 @@ const subscription = eventEmitter.addListener('onBeforeSend', events => {
 exports.CoralogixDomain = CoralogixDomain;
 exports.CoralogixLogSeverity = CoralogixLogSeverity;
 exports.CoralogixRum = CoralogixRum;
+exports.SessionReplay = SessionReplay;
 exports.attachReactNavigationObserver = attachReactNavigationObserver;

package/index.esm.js

@@ -1,4 +1,4 @@
-import { AppState, Platform, NativeModules, NativeEventEmitter } from 'react-native';
+import { AppState, Platform, NativeModules, NativeEventEmitter, findNodeHandle } from 'react-native';
 import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
 import { InstrumentationBase, registerInstrumentations } from '@opentelemetry/instrumentation';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
@@ -217,7 +217,7 @@ function stopJsRefreshRateSampler() {
   appStateSub = null;
 }
 
-var version = "0.1.10";
+var version = "0.2.1";
 var pkg = {
 	version: version};
 
@@ -371,6 +371,13 @@ class CoralogixFetchInstrumentation extends FetchInstrumentation {
   }
 }
 
+function isSessionReplayOptionsValid(options) {
+  const scaleValid = options.captureScale > 0 && options.captureScale <= 1;
+  const sampleRateValid = options.sessionRecordingSampleRate >= 0 && options.sessionRecordingSampleRate <= 100;
+  const qualityValid = options.captureCompressQuality > 0 && options.captureCompressQuality <= 1;
+  return scaleValid && sampleRateValid && qualityValid;
+}
+
 let lastRouteName;
 function getLastNavigationRouteDetected() {
   return lastRouteName;
@@ -580,6 +587,48 @@ const CoralogixRum = {
     CxSdk.reportError(errorDetails);
   }
 };
+const SessionReplay = {
+  init: async options => {
+    logger.debug("session replay: init called with options: ", options);
+    const optionsValid = isSessionReplayOptionsValid(options);
+    if (!optionsValid) {
+      logger.warn("invalid options in SessionReplay.init: ", options);
+      return false;
+    }
+    return await CxSdk.initializeSessionReplay(options);
+  },
+  shutdown: async () => {
+    logger.debug("session replay: shutdown called");
+    return await CxSdk.shutdownSessionReplay();
+  },
+  captureScreenshot: () => {
+    logger.debug("session replay: captureScreenshot called");
+    CxSdk.captureScreenshot();
+  },
+  isInited: async () => {
+    logger.debug("session replay: isInited called");
+    return await CxSdk.isSessionReplayInitialized();
+  },
+  isRecording: async () => {
+    logger.debug("session replay: isRecording called");
+    return await CxSdk.isRecording();
+  },
+  startSessionRecording: () => {
+    logger.debug("session replay: startSessionRecording called");
+    CxSdk.startSessionRecording();
+  },
+  stopSessionRecording: () => {
+    logger.debug("session replay: stopSessionRecording called");
+    CxSdk.stopSessionRecording();
+  },
+  maskView: event => {
+    logger.debug("session replay: maskViewByTag called");
+    const viewTag = findNodeHandle(event.target);
+    if (viewTag) {
+      CxSdk.maskViewByTag(viewTag);
+    }
+  }
+};
 function trackMobileVitals(options) {
   var _options$mobileVitals;
   const shouldEnableJsRefreshRateDetector = ((_options$mobileVitals = options.mobileVitals) == null ? void 0 : _options$mobileVitals.jsRefreshRate) !== false;
@@ -724,4 +773,4 @@ const subscription = eventEmitter.addListener('onBeforeSend', events => {
   }
 });
 
-export { CoralogixDomain, CoralogixLogSeverity, CoralogixRum, attachReactNavigationObserver };
+export { CoralogixDomain, CoralogixLogSeverity, CoralogixRum, SessionReplay, attachReactNavigationObserver };

package/ios/CxSdk.mm

@@ -78,6 +78,32 @@ RCT_EXTERN_METHOD(sendCustomMeasurement:(NSDictionary *)measurement
                   withResolver:(RCTPromiseResolveBlock)resolve
                   withRejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(initializeSessionReplay:(NSDictionary *)options
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(shutdownSessionReplay:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(isSessionReplayInitialized:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(isRecording:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(startSessionRecording:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(stopSessionRecording:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(captureScreenshot:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(maskViewByTag:(nonnull NSNumber *)viewTag
+                  withResolver:(RCTPromiseResolveBlock)resolve
+                  withRejecter:(RCTPromiseRejectBlock)reject)
+
 + (BOOL)requiresMainQueueSetup
 {
   return NO;

package/ios/CxSdk.swift

@@ -1,5 +1,6 @@
 import Foundation
 import Coralogix
+import SessionReplay
 import React
 
 enum CxSdkError: Error {
@@ -193,8 +194,8 @@ class CxSdk: RCTEventEmitter {
 
   @objc(sendCxSpanData:withResolver:withRejecter:)
   func sendCxSpanData(beforeSendResults: NSArray,
-                          resolve:RCTPromiseResolveBlock,
-                          reject:RCTPromiseRejectBlock) -> Void {
+                      resolve:RCTPromiseResolveBlock,
+                      reject:RCTPromiseRejectBlock) -> Void {
     guard let beforeSendResults = beforeSendResults as? [[String: Any]] else {
       reject("Invalid sendBeforeSendData", "sendBeforeSendData is not a dictionary", nil)
       return
@@ -205,8 +206,8 @@ class CxSdk: RCTEventEmitter {
 
   @objc(reportMobileVitalsMeasurementSet:metrics:withResolver:withRejecter:)
   func reportMobileVitalsMeasurementSet(type: String, metrics: NSArray,
-                                  resolve:RCTPromiseResolveBlock,
-                                  reject:RCTPromiseRejectBlock) -> Void {
+                                        resolve:RCTPromiseResolveBlock,
+                                        reject:RCTPromiseRejectBlock) -> Void {
     let list = self.toHybridMetricList(metrics: metrics)
     coralogixRum?.reportMobileVitalsMeasurement(type: type, metrics: list)
     resolve("reportMobileVitalsMeasurement success")
@@ -214,12 +215,103 @@ class CxSdk: RCTEventEmitter {
 
   @objc(reportMobileVitalsMeasurement:value:units:withResolver:withRejecter:)
   func reportMobileVitalsMeasurement(type: String, value: Double, units: String,
-                               resolve:RCTPromiseResolveBlock,
-                               reject:RCTPromiseRejectBlock) -> Void {
+                                     resolve:RCTPromiseResolveBlock,
+                                     reject:RCTPromiseRejectBlock) -> Void {
     coralogixRum?.reportMobileVitalsMeasurement(type: type, value: value, units: units)
     resolve("reportMobileVitalsMeasurement success")
   }
 
+
+  @objc(initializeSessionReplay:withResolver:withRejecter:)
+  func initializeSessionReplay(options: NSDictionary,
+                               resolve:RCTPromiseResolveBlock,
+                               reject:RCTPromiseRejectBlock) -> Void {
+    do {
+      let sessionReplayOptions = try self.toSessionReplayOptions(parameter: options)
+      SessionReplay.initializeWithOptions(sessionReplayOptions:sessionReplayOptions)
+    } catch let error as CxSdkError {
+      reject("CX_SDK_ERROR", error.localizedDescription, error)
+    } catch {
+      reject("UNEXPECTED_ERROR", "An unexpected error occurred: \(error.localizedDescription)", error)
+    }
+    resolve("initializeSessionReplay success")
+  }
+
+  @objc(shutdownSessionReplay:withRejecter:)
+  func shutdownSessionReplay(resolve:RCTPromiseResolveBlock,
+                             reject:RCTPromiseRejectBlock) -> Void {
+      SessionReplay.shared.stopRecording()
+      resolve("shutdownSessionReplay success")
+  }
+
+  @objc(isSessionReplayInitialized:withRejecter:)
+  func isSessionReplayInitialized(resolve:@escaping RCTPromiseResolveBlock,
+                                  reject:@escaping RCTPromiseRejectBlock) -> Void {
+    let isInitialized = SessionReplay.shared.isInitialized()
+    resolve("\(String(describing: isInitialized))")
+  }
+
+  @objc(isRecording:withRejecter:)
+  func isRecording(resolve:@escaping RCTPromiseResolveBlock,
+                   reject:@escaping RCTPromiseRejectBlock) -> Void {
+    let isRecording = SessionReplay.shared.isRecording()
+    resolve("\(String(describing: isRecording))")
+  }
+
+  @objc(startSessionRecording:withRejecter:)
+  func startSessionRecording(resolve:RCTPromiseResolveBlock,
+                             reject:RCTPromiseRejectBlock) -> Void {
+    SessionReplay.shared.startRecording()
+    resolve("startSessionRecording success")
+  }
+
+  @objc(stopSessionRecording:withRejecter:)
+  func stopSessionRecording(resolve:RCTPromiseResolveBlock,
+                            reject:RCTPromiseRejectBlock) -> Void {
+    SessionReplay.shared.stopRecording()
+    resolve("stopSessionRecording success")
+  }
+
+  @objc(captureScreenshot:withRejecter:)
+  func captureScreenshot(resolve:RCTPromiseResolveBlock,
+                         reject:RCTPromiseRejectBlock) -> Void {
+    let result = SessionReplay.shared.captureEvent(properties: ["event": "screenshot"])
+    switch result {
+      case .failure(let error):
+      print("Error capturing screenshot: \(error)")
+      return
+      case .success:
+      break
+    }
+    resolve("captureScreenshot success")
+  }
+  
+  @objc(maskViewByTag:withResolver:withRejecter:)
+  func maskViewByTag(viewTag: NSNumber,
+                     resolve:@escaping RCTPromiseResolveBlock,
+                     reject:@escaping RCTPromiseRejectBlock) -> Void {
+    guard
+      let bridge = RCTBridge.current(),
+      let uiManager = bridge.uiManager
+    else {
+      reject("MASK_VIEW_ERROR", "no ui manager found, aborting maskViewByTag", nil)
+      return
+    }
+    
+    RCTExecuteOnUIManagerQueue {
+      uiManager.addUIBlock { (_, viewRegistry) in
+        if let view = viewRegistry?[viewTag] as? UIView {
+          DispatchQueue.main.async {
+            view.cxMask = true
+            resolve("view with tag \(viewTag) marked for masking")
+          }
+        } else {
+          reject("MASK_VIEW_ERROR", "view with tag \(viewTag) not found, aborting maskViewByTag", nil)
+        }
+      }
+    }
+  }
+
   @objc(sendCustomMeasurement:withResolver:withRejecter:)
   func sendCustomMeasurement(measurement: NSDictionary,
                              resolve:RCTPromiseResolveBlock,
@@ -316,6 +408,42 @@ class CxSdk: RCTEventEmitter {
     return options
   }
 
+  private func toSessionReplayOptions(parameter: NSDictionary) throws -> SessionReplayOptions {
+    guard let captureScale = parameter["captureScale"] as? Double else {
+      debugPrint("CaptureScale Key Missing")
+      throw CxSdkError.invalidPublicKey
+    }
+
+    guard let captureCompressionQuality = parameter["captureCompressQuality"] as? Double else {
+      debugPrint("Capture Compress Quality Key Missing")
+      throw CxSdkError.invalidPublicKey
+    }
+
+    guard let sessionRecordingSampleRate = parameter["sessionRecordingSampleRate"] as? Double else {
+      debugPrint("Session Recording SampleRate Key Missing")
+      throw CxSdkError.invalidPublicKey
+    }
+
+    guard let autoStartSessionRecording = parameter["autoStartSessionRecording"] as? Bool else {
+      debugPrint("AutoStart Session Recording Key Missing")
+      throw CxSdkError.invalidPublicKey
+    }
+
+    let maskAllTexts = parameter["maskAllTexts"] as? Bool ?? true
+    let textsToMask = parameter["textsToMask"] as? [String] ?? []
+    let maskAllImages = parameter["maskAllImages"] as? Bool ?? false
+
+    let sessionReplayOptions = SessionReplayOptions(recordingType: .image,
+                                                    captureScale: captureScale, // 2.0
+                                                    captureCompressionQuality: captureCompressionQuality, // 0.8
+                                                    sessionRecordingSampleRate: Int(sessionRecordingSampleRate),
+                                                    maskText: maskAllTexts ? [".*"] : textsToMask,
+                                                    maskOnlyCreditCards: false,
+                                                    maskAllImages: maskAllImages,
+                                                    autoStartSessionRecording: autoStartSessionRecording)
+    return sessionReplayOptions
+  }
+
   private func convertToJSCompatibleEvent(event: [String: Any]) -> [String: Any] {
     var jsEvent: [String: Any] = [:]
     for (key, value) in event {
@@ -362,7 +490,7 @@ class CxSdk: RCTEventEmitter {
       return nil
     }
   }
-  
+
   private func instrumentationType(from string: String) -> CoralogixExporterOptions.InstrumentationType? {
     switch string {
     case "mobile_vitals":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralogix/react-native-plugin",
-  "version": "0.1.10",
+  "version": "0.2.1",
   "description": "Official Coralogix React Native plugin",
   "license": "Apache-2.0",
   "author": "Coralogix",

package/src/index.d.ts

@@ -1,5 +1,7 @@
 import type { CoralogixOtelWebType } from './model/CoralogixOtelWebType';
+import { SessionReplayType } from './model/SessionReplayType';
 export declare const CoralogixRum: CoralogixOtelWebType;
+export declare const SessionReplay: SessionReplayType;
 export { type ApplicationContextConfig } from './model/ApplicationContextConfig';
 export { type ViewContextConfig } from './model/ViewContextConfig';
 export { CoralogixDomain } from './model/CoralogixDomain';

package/src/model/SessionReplayType.d.ts

@@ -0,0 +1,21 @@
+import { LayoutChangeEvent } from 'react-native';
+export interface SessionReplayType {
+    init: (options: SessionReplayOptions) => Promise<boolean>;
+    shutdown: () => Promise<boolean>;
+    isInited: () => Promise<boolean>;
+    isRecording: () => Promise<boolean>;
+    startSessionRecording: () => void;
+    stopSessionRecording: () => void;
+    captureScreenshot: () => void;
+    maskView: (event: LayoutChangeEvent) => void;
+}
+export type SessionReplayOptions = {
+    captureScale: number;
+    captureCompressQuality: number;
+    sessionRecordingSampleRate: number;
+    autoStartSessionRecording: boolean;
+    maskAllTexts?: boolean;
+    textsToMask?: Array<string>;
+    maskAllImages?: boolean;
+};
+export declare function isSessionReplayOptionsValid(options: SessionReplayOptions): boolean;