@coralogix/react-native-plugin 0.2.10 → 0.2.11

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.2.11 (2026-03-10)
+
+### 🚀 Features
+
+- Add automatic user interaction instrumentation (clicks, scrolls, swipes) for React Native components ([CX-33494](https://coralogix.atlassian.net/browse/CX-33494))
+- Add native bridge method `reportUserInteraction` for Android and iOS
+- Bump Android native SDK to 2.9.0
+- Bump iOS native SDK (Coralogix/CoralogixInternal/SessionReplay) to 2.2.0
+
 ## 0.2.10 (2026-02-22)
 
 ### 🩹 Fixes

package/CxSdk.podspec

@@ -16,9 +16,9 @@ Pod::Spec.new do |s|
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
-  s.dependency 'Coralogix','2.0.0'
-  s.dependency 'CoralogixInternal','2.0.0'
-  s.dependency 'SessionReplay','2.0.0'
+  s.dependency 'Coralogix','2.2.0'
+  s.dependency 'CoralogixInternal','2.2.0'
+  s.dependency 'SessionReplay','2.2.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/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.7.2"
+  implementation "com.coralogix:android-sdk:2.9.0"
 }
 
 react {

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

@@ -14,6 +14,7 @@ import com.coralogix.android.sdk.model.CoralogixLogSeverity
 import com.coralogix.android.sdk.model.CoralogixOptions
 import com.coralogix.android.sdk.model.Framework
 import com.coralogix.android.sdk.model.HybridMetric
+import com.coralogix.android.sdk.model.UserInteractionDetails
 import com.coralogix.android.sdk.model.Instrumentation
 import com.coralogix.android.sdk.model.MobileVitalType
 import com.coralogix.android.sdk.model.TraceParentInHeaderConfig
@@ -195,6 +196,27 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  @ReactMethod
+  fun reportUserInteraction(interaction: ReadableMap) {
+    val attributesMap = if (interaction.hasKey("attributes") && !interaction.isNull("attributes"))
+      interaction.getMap("attributes") else null
+
+    val details = UserInteractionDetails(
+      type = interaction.getString("type") ?: run {
+        Log.w("CxSdkModule", "reportUserInteraction: missing required field 'type', dropping interaction")
+        return
+      },
+      direction = if (interaction.hasKey("direction") && !interaction.isNull("direction")) interaction.getString("direction") else null,
+      targetElement = if (interaction.hasKey("target_element") && !interaction.isNull("target_element")) interaction.getString("target_element") else null,
+      elementClasses = if (interaction.hasKey("element_classes") && !interaction.isNull("element_classes")) interaction.getString("element_classes") else null,
+      targetId = if (interaction.hasKey("target_id") && !interaction.isNull("target_id")) interaction.getString("target_id") else null,
+      innerText = if (interaction.hasKey("inner_text") && !interaction.isNull("inner_text")) interaction.getString("inner_text") else null,
+      x = if (attributesMap?.hasKey("x") == true && attributesMap.isNull("x") == false) attributesMap.getDouble("x") else null,
+      y = if (attributesMap?.hasKey("y") == true && attributesMap.isNull("y") == false) attributesMap.getDouble("y") else null,
+    )
+    CoralogixRum.reportUserInteraction(details)
+  }
+
   @ReactMethod
   fun addListener(eventName: String) {
     Log.d("CxSdkModule", "addListener called with eventName: $eventName")

package/index.cjs.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var reactNative = require('react-native');
-var instrumentationFetch = require('@opentelemetry/instrumentation-fetch');
+var React = require('react');
 var instrumentation = require('@opentelemetry/instrumentation');
+var instrumentationFetch = require('@opentelemetry/instrumentation-fetch');
 var sdkTraceWeb = require('@opentelemetry/sdk-trace-web');
 var core = require('@opentelemetry/core');
 
@@ -126,6 +127,308 @@ class CoralogixErrorInstrumentation extends instrumentation.InstrumentationBase
   disable() {}
 }
 
+const USER_INTERACTION_INSTRUMENTATION_NAME = 'user-interaction';
+const USER_INTERACTION_INSTRUMENTATION_VERSION = '1';
+
+// After onScrollEndDrag, how long to wait before classifying as scroll.
+// If onMomentumScrollBegin fires within this window, it's a swipe instead.
+const SWIPE_MOMENTUM_TIMEOUT_MS = 80;
+
+// Drag speed (px/ms) below which a gesture is classified as a deliberate scroll.
+// Computed from position delta and elapsed time in onScrollEndDrag; works on all platforms.
+// ~0.5 px/ms ≈ 300px in 600ms (slow deliberate drag); a fling is typically >1 px/ms.
+const SWIPE_VELOCITY_THRESHOLD = 0.5;
+
+// Mirrors Android SDK's direction inference: compare |dx| vs |dy|, sign gives direction.
+// contentOffset delta: dy > 0 = user scrolled DOWN, dx > 0 = user scrolled RIGHT.
+function inferDirectionFromDelta(dx, dy) {
+  if (Math.abs(dx) > Math.abs(dy)) {
+    return dx > 0 ? 'right' : 'left';
+  }
+  return dy > 0 ? 'down' : 'up';
+}
+
+// Shallow-recursive text extraction from React children.
+// Handles: string, number, arrays, and React elements with props.children.
+function extractInnerText(children) {
+  var _children$props;
+  if (children === null || children === undefined) return undefined;
+  if (typeof children === 'string') return children.trim() || undefined;
+  if (typeof children === 'number') return String(children);
+  if (Array.isArray(children)) {
+    const parts = children.map(extractInnerText).filter(Boolean);
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  }
+  if ((children == null || (_children$props = children.props) == null ? void 0 : _children$props.children) !== undefined) {
+    return extractInnerText(children.props.children);
+  }
+  return undefined;
+}
+
+let isEnabled = false;
+// No-op default so reportInteraction never needs a null-check.
+// Set to the real callback by the constructor and cleared on disable().
+let onInteraction = () => {};
+
+// Module-level scroll state shared across all ScrollView instances.
+// Hooks cannot be used in our forwardRef wrappers because the plugin's React import
+// and the renderer's React are different instances in a consuming app — hooks rely on
+// ReactCurrentDispatcher which is instance-specific. Non-hook APIs (forwardRef,
+// createElement) work fine because they use Symbol.for() which is global.
+// Concurrent scrolling of two ScrollViews is extremely rare on mobile, so shared
+// state is acceptable here.
+let scrollState = {
+  startOffset: null,
+  startTime: null,
+  timeout: null
+};
+function reportInteraction(ctx) {
+  if (!isEnabled) return;
+  onInteraction(ctx);
+}
+function makeInstrumentedPressable(OrigComp, componentName) {
+  const InstrumentedComp = /*#__PURE__*/React.forwardRef(function InstrumentedPressable(props, ref) {
+    const wrappedProps = props.onPress ? _extends({}, props, {
+      onPress: e => {
+        var _props$accessibilityL, _extractInnerText;
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        reportInteraction({
+          type: 'click',
+          attributes: {
+            x: Math.round(pageX * 100) / 100,
+            y: Math.round(pageY * 100) / 100
+          },
+          element_classes: componentName,
+          target_element: (_props$accessibilityL = props.accessibilityLabel) != null ? _props$accessibilityL : componentName,
+          target_id: props.testID,
+          inner_text: (_extractInnerText = extractInnerText(props.children)) != null ? _extractInnerText : props.title
+        });
+        props.onPress(e);
+      }
+    }) : props;
+    return /*#__PURE__*/React.createElement(OrigComp, _extends({}, wrappedProps, {
+      ref
+    }));
+  });
+  InstrumentedComp.displayName = componentName;
+  return InstrumentedComp;
+}
+function makeInstrumentedSwitch(OrigComp) {
+  const InstrumentedSwitch = /*#__PURE__*/React.forwardRef(function InstrumentedSwitch(props, ref) {
+    const wrappedProps = props.onValueChange ? _extends({}, props, {
+      onValueChange: value => {
+        var _props$accessibilityL2;
+        reportInteraction({
+          type: 'click',
+          element_classes: 'Switch',
+          target_element: (_props$accessibilityL2 = props.accessibilityLabel) != null ? _props$accessibilityL2 : 'Switch',
+          target_id: props.testID
+        });
+        props.onValueChange(value);
+      }
+    }) : props;
+    return /*#__PURE__*/React.createElement(OrigComp, _extends({}, wrappedProps, {
+      ref
+    }));
+  });
+  InstrumentedSwitch.displayName = 'Switch';
+  return InstrumentedSwitch;
+}
+function makeInstrumentedScrollView(OrigComp) {
+  const InstrumentedScrollView = /*#__PURE__*/React.forwardRef(function InstrumentedScrollView(props, ref) {
+    const wrappedProps = _extends({}, props, {
+      onScrollBeginDrag: e => {
+        scrollState.startOffset = _extends({}, e.nativeEvent.contentOffset);
+        scrollState.startTime = Date.now();
+        props.onScrollBeginDrag == null || props.onScrollBeginDrag(e);
+      },
+      onScrollEndDrag: e => {
+        var _scrollState$timeout;
+        const endOffset = _extends({}, e.nativeEvent.contentOffset);
+        // Capture start state immediately — scrollState may be mutated by a
+        // concurrent ScrollView's onScrollBeginDrag before the timeout fires.
+        const {
+          startOffset,
+          startTime
+        } = scrollState;
+        clearTimeout((_scrollState$timeout = scrollState.timeout) != null ? _scrollState$timeout : undefined);
+
+        // Compute drag speed (px/ms) to distinguish a deliberate scroll from a fling.
+        // Works on both iOS and Android without relying on native velocity fields.
+        let classified = false;
+        if (startOffset !== null && startTime !== null) {
+          const elapsed = Date.now() - startTime;
+          const dx = endOffset.x - startOffset.x;
+          const dy = endOffset.y - startOffset.y;
+          const speed = elapsed > 0 ? Math.sqrt(dx * dx + dy * dy) / elapsed : 0;
+          if (speed < SWIPE_VELOCITY_THRESHOLD) {
+            // Slow deliberate drag → report scroll immediately.
+            reportInteraction({
+              type: 'scroll',
+              target_element: 'ScrollView',
+              direction: inferDirectionFromDelta(dx, dy)
+            });
+            scrollState = {
+              startOffset: null,
+              startTime: null,
+              timeout: null
+            };
+            classified = true;
+          }
+        }
+        if (!classified) {
+          // Fast drag → wait for onMomentumScrollBegin to classify as swipe.
+          // If momentum doesn't fire within the window, fall back to scroll.
+          // Uses captured startOffset (not scrollState.startOffset) to avoid
+          // reading stale state if another scroll begins before the timeout fires.
+          scrollState.timeout = setTimeout(() => {
+            if (startOffset) {
+              reportInteraction({
+                type: 'scroll',
+                target_element: 'ScrollView',
+                direction: inferDirectionFromDelta(endOffset.x - startOffset.x, endOffset.y - startOffset.y)
+              });
+            }
+            scrollState = {
+              startOffset: null,
+              startTime: null,
+              timeout: null
+            };
+          }, SWIPE_MOMENTUM_TIMEOUT_MS);
+        }
+        props.onScrollEndDrag == null || props.onScrollEndDrag(e);
+      },
+      onMomentumScrollBegin: e => {
+        var _scrollState$timeout2;
+        clearTimeout((_scrollState$timeout2 = scrollState.timeout) != null ? _scrollState$timeout2 : undefined);
+        const currentOffset = _extends({}, e.nativeEvent.contentOffset);
+        const {
+          startOffset
+        } = scrollState;
+        if (startOffset) {
+          reportInteraction({
+            type: 'swipe',
+            target_element: 'ScrollView',
+            direction: inferDirectionFromDelta(currentOffset.x - startOffset.x, currentOffset.y - startOffset.y)
+          });
+        }
+        scrollState = {
+          startOffset: null,
+          startTime: null,
+          timeout: null
+        };
+        props.onMomentumScrollBegin == null || props.onMomentumScrollBegin(e);
+      }
+    });
+    return /*#__PURE__*/React.createElement(OrigComp, _extends({}, wrappedProps, {
+      ref
+    }));
+  });
+  InstrumentedScrollView.displayName = 'ScrollView';
+
+  // Copy static properties from OrigComp (e.g. ScrollView.Context used by VirtualizedList/FlatList).
+  // React.forwardRef returns a plain object so these statics are lost without explicit copying.
+  const skipKeys = new Set(['$$typeof', 'render', 'displayName']);
+  Object.getOwnPropertyNames(OrigComp).forEach(key => {
+    if (skipKeys.has(key)) return;
+    try {
+      const descriptor = Object.getOwnPropertyDescriptor(OrigComp, key);
+      if (descriptor) Object.defineProperty(InstrumentedScrollView, key, descriptor);
+    } catch (_unused) {/* ignore non-configurable descriptors */}
+  });
+  return InstrumentedScrollView;
+}
+
+// react-native is in Metro's nonInlinedRequires list, so app code reads properties
+// like _rn.Pressable from the shared module object at each render. Mutating the
+// module object here (via Object.defineProperty) means every subsequent property
+// read returns our wrappers.
+//
+// react-native/index.js defines exports as getter-only accessors with no setters,
+// so direct assignment is silently ignored. Object.defineProperty with a data
+// descriptor converts the accessor to a writable data property.
+const RN = require('react-native');
+const originals = {
+  Button: RN.Button,
+  Pressable: RN.Pressable,
+  TouchableOpacity: RN.TouchableOpacity,
+  TouchableHighlight: RN.TouchableHighlight,
+  TouchableNativeFeedback: RN.TouchableNativeFeedback,
+  TouchableWithoutFeedback: RN.TouchableWithoutFeedback,
+  Switch: RN.Switch,
+  ScrollView: RN.ScrollView
+};
+
+// Wrapper components are created once from the originals captured above.
+// They are patched into / restored from the RN module in enable() / disable().
+const instrumented = {
+  Button: makeInstrumentedPressable(originals.Button, 'Button'),
+  Pressable: makeInstrumentedPressable(originals.Pressable, 'Pressable'),
+  TouchableOpacity: makeInstrumentedPressable(originals.TouchableOpacity, 'TouchableOpacity'),
+  TouchableHighlight: makeInstrumentedPressable(originals.TouchableHighlight, 'TouchableHighlight'),
+  TouchableNativeFeedback: makeInstrumentedPressable(originals.TouchableNativeFeedback, 'TouchableNativeFeedback'),
+  TouchableWithoutFeedback: makeInstrumentedPressable(originals.TouchableWithoutFeedback, 'TouchableWithoutFeedback'),
+  Switch: makeInstrumentedSwitch(originals.Switch),
+  ScrollView: makeInstrumentedScrollView(originals.ScrollView)
+};
+function defineComp(key, value) {
+  Object.defineProperty(RN, key, {
+    value,
+    writable: true,
+    configurable: true,
+    enumerable: true
+  });
+}
+function patchComponents() {
+  defineComp('Button', instrumented.Button);
+  defineComp('Pressable', instrumented.Pressable);
+  defineComp('TouchableOpacity', instrumented.TouchableOpacity);
+  defineComp('TouchableHighlight', instrumented.TouchableHighlight);
+  defineComp('TouchableNativeFeedback', instrumented.TouchableNativeFeedback);
+  defineComp('TouchableWithoutFeedback', instrumented.TouchableWithoutFeedback);
+  defineComp('Switch', instrumented.Switch);
+  defineComp('ScrollView', instrumented.ScrollView);
+}
+function restoreComponents() {
+  defineComp('Button', originals.Button);
+  defineComp('Pressable', originals.Pressable);
+  defineComp('TouchableOpacity', originals.TouchableOpacity);
+  defineComp('TouchableHighlight', originals.TouchableHighlight);
+  defineComp('TouchableNativeFeedback', originals.TouchableNativeFeedback);
+  defineComp('TouchableWithoutFeedback', originals.TouchableWithoutFeedback);
+  defineComp('Switch', originals.Switch);
+  defineComp('ScrollView', originals.ScrollView);
+}
+class UserInteractionInstrumentation extends instrumentation.InstrumentationBase {
+  constructor(config) {
+    super(USER_INTERACTION_INSTRUMENTATION_NAME, USER_INTERACTION_INSTRUMENTATION_VERSION, {});
+    onInteraction = config.onInteraction;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  init() {}
+  enable() {
+    isEnabled = true;
+    patchComponents();
+  }
+  disable() {
+    isEnabled = false;
+    onInteraction = () => {};
+    restoreComponents();
+    if (scrollState.timeout) {
+      clearTimeout(scrollState.timeout);
+    }
+    scrollState = {
+      startOffset: null,
+      startTime: null,
+      timeout: null
+    };
+  }
+}
+
 const DEFAULT_SAMPLE_DURATION_MS = 5000;
 const DEFAULT_SAMPLE_INTERVAL_MS = 60000;
 let isSampling = false;
@@ -220,7 +523,7 @@ function stopJsRefreshRateSampler() {
   appStateSub = null;
 }
 
-var version = "0.2.10";
+var version = "0.2.11";
 var pkg = {
 	version: version};
 
@@ -596,6 +899,10 @@ const CoralogixRum = {
 const SessionReplay = {
   init: async options => {
     logger.debug("session replay: init called with options: ", options);
+    if (!CoralogixRum.isInited) {
+      logger.warn("SessionReplay.init called before CoralogixRum is initialized. Call and await CoralogixRum.init() first to avoid initialization errors.");
+      return false;
+    }
     const optionsValid = isSessionReplayOptionsValid(options);
     if (!optionsValid) {
       logger.warn("invalid options in SessionReplay.init: ", options);
@@ -709,6 +1016,20 @@ async function registerCoralogixInstrumentations(options) {
     trackMobileVitals(options);
   }
 
+  // User interaction instrumentation (clicks, scrolls, swipes)
+  const shouldInterceptUserInteractions = !instrumentationsOptions || instrumentationsOptions.user_interaction !== false;
+  if (shouldInterceptUserInteractions) {
+    instrumentations.push(new UserInteractionInstrumentation({
+      onInteraction: ctx => {
+        // isInited becomes true only after CxSdk.initialize() resolves,
+        // so this guard drops any interactions that fire in the brief window
+        // between instrumentation registration and native SDK init completing.
+        if (!isInited) return;
+        CxSdk.reportUserInteraction(ctx);
+      }
+    }));
+  }
+
   // Register Instrumentations
   _deregisterInstrumentations = instrumentation.registerInstrumentations({
     tracerProvider,

package/index.esm.js

@@ -1,6 +1,7 @@
 import { AppState, Platform, NativeModules, NativeEventEmitter, findNodeHandle } from 'react-native';
-import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import React from 'react';
 import { InstrumentationBase, registerInstrumentations } from '@opentelemetry/instrumentation';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { W3CTraceContextPropagator } from '@opentelemetry/core';
 
@@ -124,6 +125,308 @@ class CoralogixErrorInstrumentation extends InstrumentationBase {
   disable() {}
 }
 
+const USER_INTERACTION_INSTRUMENTATION_NAME = 'user-interaction';
+const USER_INTERACTION_INSTRUMENTATION_VERSION = '1';
+
+// After onScrollEndDrag, how long to wait before classifying as scroll.
+// If onMomentumScrollBegin fires within this window, it's a swipe instead.
+const SWIPE_MOMENTUM_TIMEOUT_MS = 80;
+
+// Drag speed (px/ms) below which a gesture is classified as a deliberate scroll.
+// Computed from position delta and elapsed time in onScrollEndDrag; works on all platforms.
+// ~0.5 px/ms ≈ 300px in 600ms (slow deliberate drag); a fling is typically >1 px/ms.
+const SWIPE_VELOCITY_THRESHOLD = 0.5;
+
+// Mirrors Android SDK's direction inference: compare |dx| vs |dy|, sign gives direction.
+// contentOffset delta: dy > 0 = user scrolled DOWN, dx > 0 = user scrolled RIGHT.
+function inferDirectionFromDelta(dx, dy) {
+  if (Math.abs(dx) > Math.abs(dy)) {
+    return dx > 0 ? 'right' : 'left';
+  }
+  return dy > 0 ? 'down' : 'up';
+}
+
+// Shallow-recursive text extraction from React children.
+// Handles: string, number, arrays, and React elements with props.children.
+function extractInnerText(children) {
+  var _children$props;
+  if (children === null || children === undefined) return undefined;
+  if (typeof children === 'string') return children.trim() || undefined;
+  if (typeof children === 'number') return String(children);
+  if (Array.isArray(children)) {
+    const parts = children.map(extractInnerText).filter(Boolean);
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  }
+  if ((children == null || (_children$props = children.props) == null ? void 0 : _children$props.children) !== undefined) {
+    return extractInnerText(children.props.children);
+  }
+  return undefined;
+}
+
+let isEnabled = false;
+// No-op default so reportInteraction never needs a null-check.
+// Set to the real callback by the constructor and cleared on disable().
+let onInteraction = () => {};
+
+// Module-level scroll state shared across all ScrollView instances.
+// Hooks cannot be used in our forwardRef wrappers because the plugin's React import
+// and the renderer's React are different instances in a consuming app — hooks rely on
+// ReactCurrentDispatcher which is instance-specific. Non-hook APIs (forwardRef,
+// createElement) work fine because they use Symbol.for() which is global.
+// Concurrent scrolling of two ScrollViews is extremely rare on mobile, so shared
+// state is acceptable here.
+let scrollState = {
+  startOffset: null,
+  startTime: null,
+  timeout: null
+};
+function reportInteraction(ctx) {
+  if (!isEnabled) return;
+  onInteraction(ctx);
+}
+function makeInstrumentedPressable(OrigComp, componentName) {
+  const InstrumentedComp = /*#__PURE__*/React.forwardRef(function InstrumentedPressable(props, ref) {
+    const wrappedProps = props.onPress ? _extends({}, props, {
+      onPress: e => {
+        var _props$accessibilityL, _extractInnerText;
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        reportInteraction({
+          type: 'click',
+          attributes: {
+            x: Math.round(pageX * 100) / 100,
+            y: Math.round(pageY * 100) / 100
+          },
+          element_classes: componentName,
+          target_element: (_props$accessibilityL = props.accessibilityLabel) != null ? _props$accessibilityL : componentName,
+          target_id: props.testID,
+          inner_text: (_extractInnerText = extractInnerText(props.children)) != null ? _extractInnerText : props.title
+        });
+        props.onPress(e);
+      }
+    }) : props;
+    return /*#__PURE__*/React.createElement(OrigComp, _extends({}, wrappedProps, {
+      ref
+    }));
+  });
+  InstrumentedComp.displayName = componentName;
+  return InstrumentedComp;
+}
+function makeInstrumentedSwitch(OrigComp) {
+  const InstrumentedSwitch = /*#__PURE__*/React.forwardRef(function InstrumentedSwitch(props, ref) {
+    const wrappedProps = props.onValueChange ? _extends({}, props, {
+      onValueChange: value => {
+        var _props$accessibilityL2;
+        reportInteraction({
+          type: 'click',
+          element_classes: 'Switch',
+          target_element: (_props$accessibilityL2 = props.accessibilityLabel) != null ? _props$accessibilityL2 : 'Switch',
+          target_id: props.testID
+        });
+        props.onValueChange(value);
+      }
+    }) : props;
+    return /*#__PURE__*/React.createElement(OrigComp, _extends({}, wrappedProps, {
+      ref
+    }));
+  });
+  InstrumentedSwitch.displayName = 'Switch';
+  return InstrumentedSwitch;
+}
+function makeInstrumentedScrollView(OrigComp) {
+  const InstrumentedScrollView = /*#__PURE__*/React.forwardRef(function InstrumentedScrollView(props, ref) {
+    const wrappedProps = _extends({}, props, {
+      onScrollBeginDrag: e => {
+        scrollState.startOffset = _extends({}, e.nativeEvent.contentOffset);
+        scrollState.startTime = Date.now();
+        props.onScrollBeginDrag == null || props.onScrollBeginDrag(e);
+      },
+      onScrollEndDrag: e => {
+        var _scrollState$timeout;
+        const endOffset = _extends({}, e.nativeEvent.contentOffset);
+        // Capture start state immediately — scrollState may be mutated by a
+        // concurrent ScrollView's onScrollBeginDrag before the timeout fires.
+        const {
+          startOffset,
+          startTime
+        } = scrollState;
+        clearTimeout((_scrollState$timeout = scrollState.timeout) != null ? _scrollState$timeout : undefined);
+
+        // Compute drag speed (px/ms) to distinguish a deliberate scroll from a fling.
+        // Works on both iOS and Android without relying on native velocity fields.
+        let classified = false;
+        if (startOffset !== null && startTime !== null) {
+          const elapsed = Date.now() - startTime;
+          const dx = endOffset.x - startOffset.x;
+          const dy = endOffset.y - startOffset.y;
+          const speed = elapsed > 0 ? Math.sqrt(dx * dx + dy * dy) / elapsed : 0;
+          if (speed < SWIPE_VELOCITY_THRESHOLD) {
+            // Slow deliberate drag → report scroll immediately.
+            reportInteraction({
+              type: 'scroll',
+              target_element: 'ScrollView',
+              direction: inferDirectionFromDelta(dx, dy)
+            });
+            scrollState = {
+              startOffset: null,
+              startTime: null,
+              timeout: null
+            };
+            classified = true;
+          }
+        }
+        if (!classified) {
+          // Fast drag → wait for onMomentumScrollBegin to classify as swipe.
+          // If momentum doesn't fire within the window, fall back to scroll.
+          // Uses captured startOffset (not scrollState.startOffset) to avoid
+          // reading stale state if another scroll begins before the timeout fires.
+          scrollState.timeout = setTimeout(() => {
+            if (startOffset) {
+              reportInteraction({
+                type: 'scroll',
+                target_element: 'ScrollView',
+                direction: inferDirectionFromDelta(endOffset.x - startOffset.x, endOffset.y - startOffset.y)
+              });
+            }
+            scrollState = {
+              startOffset: null,
+              startTime: null,
+              timeout: null
+            };
+          }, SWIPE_MOMENTUM_TIMEOUT_MS);
+        }
+        props.onScrollEndDrag == null || props.onScrollEndDrag(e);
+      },
+      onMomentumScrollBegin: e => {
+        var _scrollState$timeout2;
+        clearTimeout((_scrollState$timeout2 = scrollState.timeout) != null ? _scrollState$timeout2 : undefined);
+        const currentOffset = _extends({}, e.nativeEvent.contentOffset);
+        const {
+          startOffset
+        } = scrollState;
+        if (startOffset) {
+          reportInteraction({
+            type: 'swipe',
+            target_element: 'ScrollView',
+            direction: inferDirectionFromDelta(currentOffset.x - startOffset.x, currentOffset.y - startOffset.y)
+          });
+        }
+        scrollState = {
+          startOffset: null,
+          startTime: null,
+          timeout: null
+        };
+        props.onMomentumScrollBegin == null || props.onMomentumScrollBegin(e);
+      }
+    });
+    return /*#__PURE__*/React.createElement(OrigComp, _extends({}, wrappedProps, {
+      ref
+    }));
+  });
+  InstrumentedScrollView.displayName = 'ScrollView';
+
+  // Copy static properties from OrigComp (e.g. ScrollView.Context used by VirtualizedList/FlatList).
+  // React.forwardRef returns a plain object so these statics are lost without explicit copying.
+  const skipKeys = new Set(['$$typeof', 'render', 'displayName']);
+  Object.getOwnPropertyNames(OrigComp).forEach(key => {
+    if (skipKeys.has(key)) return;
+    try {
+      const descriptor = Object.getOwnPropertyDescriptor(OrigComp, key);
+      if (descriptor) Object.defineProperty(InstrumentedScrollView, key, descriptor);
+    } catch (_unused) {/* ignore non-configurable descriptors */}
+  });
+  return InstrumentedScrollView;
+}
+
+// react-native is in Metro's nonInlinedRequires list, so app code reads properties
+// like _rn.Pressable from the shared module object at each render. Mutating the
+// module object here (via Object.defineProperty) means every subsequent property
+// read returns our wrappers.
+//
+// react-native/index.js defines exports as getter-only accessors with no setters,
+// so direct assignment is silently ignored. Object.defineProperty with a data
+// descriptor converts the accessor to a writable data property.
+const RN = require('react-native');
+const originals = {
+  Button: RN.Button,
+  Pressable: RN.Pressable,
+  TouchableOpacity: RN.TouchableOpacity,
+  TouchableHighlight: RN.TouchableHighlight,
+  TouchableNativeFeedback: RN.TouchableNativeFeedback,
+  TouchableWithoutFeedback: RN.TouchableWithoutFeedback,
+  Switch: RN.Switch,
+  ScrollView: RN.ScrollView
+};
+
+// Wrapper components are created once from the originals captured above.
+// They are patched into / restored from the RN module in enable() / disable().
+const instrumented = {
+  Button: makeInstrumentedPressable(originals.Button, 'Button'),
+  Pressable: makeInstrumentedPressable(originals.Pressable, 'Pressable'),
+  TouchableOpacity: makeInstrumentedPressable(originals.TouchableOpacity, 'TouchableOpacity'),
+  TouchableHighlight: makeInstrumentedPressable(originals.TouchableHighlight, 'TouchableHighlight'),
+  TouchableNativeFeedback: makeInstrumentedPressable(originals.TouchableNativeFeedback, 'TouchableNativeFeedback'),
+  TouchableWithoutFeedback: makeInstrumentedPressable(originals.TouchableWithoutFeedback, 'TouchableWithoutFeedback'),
+  Switch: makeInstrumentedSwitch(originals.Switch),
+  ScrollView: makeInstrumentedScrollView(originals.ScrollView)
+};
+function defineComp(key, value) {
+  Object.defineProperty(RN, key, {
+    value,
+    writable: true,
+    configurable: true,
+    enumerable: true
+  });
+}
+function patchComponents() {
+  defineComp('Button', instrumented.Button);
+  defineComp('Pressable', instrumented.Pressable);
+  defineComp('TouchableOpacity', instrumented.TouchableOpacity);
+  defineComp('TouchableHighlight', instrumented.TouchableHighlight);
+  defineComp('TouchableNativeFeedback', instrumented.TouchableNativeFeedback);
+  defineComp('TouchableWithoutFeedback', instrumented.TouchableWithoutFeedback);
+  defineComp('Switch', instrumented.Switch);
+  defineComp('ScrollView', instrumented.ScrollView);
+}
+function restoreComponents() {
+  defineComp('Button', originals.Button);
+  defineComp('Pressable', originals.Pressable);
+  defineComp('TouchableOpacity', originals.TouchableOpacity);
+  defineComp('TouchableHighlight', originals.TouchableHighlight);
+  defineComp('TouchableNativeFeedback', originals.TouchableNativeFeedback);
+  defineComp('TouchableWithoutFeedback', originals.TouchableWithoutFeedback);
+  defineComp('Switch', originals.Switch);
+  defineComp('ScrollView', originals.ScrollView);
+}
+class UserInteractionInstrumentation extends InstrumentationBase {
+  constructor(config) {
+    super(USER_INTERACTION_INSTRUMENTATION_NAME, USER_INTERACTION_INSTRUMENTATION_VERSION, {});
+    onInteraction = config.onInteraction;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  init() {}
+  enable() {
+    isEnabled = true;
+    patchComponents();
+  }
+  disable() {
+    isEnabled = false;
+    onInteraction = () => {};
+    restoreComponents();
+    if (scrollState.timeout) {
+      clearTimeout(scrollState.timeout);
+    }
+    scrollState = {
+      startOffset: null,
+      startTime: null,
+      timeout: null
+    };
+  }
+}
+
 const DEFAULT_SAMPLE_DURATION_MS = 5000;
 const DEFAULT_SAMPLE_INTERVAL_MS = 60000;
 let isSampling = false;
@@ -218,7 +521,7 @@ function stopJsRefreshRateSampler() {
   appStateSub = null;
 }
 
-var version = "0.2.10";
+var version = "0.2.11";
 var pkg = {
 	version: version};
 
@@ -594,6 +897,10 @@ const CoralogixRum = {
 const SessionReplay = {
   init: async options => {
     logger.debug("session replay: init called with options: ", options);
+    if (!CoralogixRum.isInited) {
+      logger.warn("SessionReplay.init called before CoralogixRum is initialized. Call and await CoralogixRum.init() first to avoid initialization errors.");
+      return false;
+    }
     const optionsValid = isSessionReplayOptionsValid(options);
     if (!optionsValid) {
       logger.warn("invalid options in SessionReplay.init: ", options);
@@ -707,6 +1014,20 @@ async function registerCoralogixInstrumentations(options) {
     trackMobileVitals(options);
   }
 
+  // User interaction instrumentation (clicks, scrolls, swipes)
+  const shouldInterceptUserInteractions = !instrumentationsOptions || instrumentationsOptions.user_interaction !== false;
+  if (shouldInterceptUserInteractions) {
+    instrumentations.push(new UserInteractionInstrumentation({
+      onInteraction: ctx => {
+        // isInited becomes true only after CxSdk.initialize() resolves,
+        // so this guard drops any interactions that fire in the brief window
+        // between instrumentation registration and native SDK init completing.
+        if (!isInited) return;
+        CxSdk.reportUserInteraction(ctx);
+      }
+    }));
+  }
+
   // Register Instrumentations
   _deregisterInstrumentations = registerInstrumentations({
     tracerProvider,

package/ios/CxSdk.mm

@@ -41,6 +41,8 @@ RCT_EXTERN_METHOD(setApplicationContext:(NSDictionary *)applicationContext
 RCT_EXTERN_METHOD(getSessionId:(RCTPromiseResolveBlock)resolve
                   withRejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(reportUserInteraction:(NSDictionary *)interaction)
+
 RCT_EXTERN_METHOD(shutdown:(RCTPromiseResolveBlock)resolve
                   withRejecter:(RCTPromiseRejectBlock)reject)
 

package/ios/CxSdk.swift

@@ -168,6 +168,31 @@ class CxSdk: RCTEventEmitter {
     resolve("reportNetworkRequest success")
   }
 
+  @objc(reportUserInteraction:)
+  func reportUserInteraction(interaction: NSDictionary) {
+    var dictionary: [String: Any] = [:]
+
+    if let type = interaction["type"] as? String { dictionary["event_name"] = type }
+    if let targetElement = interaction["target_element"] as? String { dictionary["target_element"] = targetElement }
+    if let elementClasses = interaction["element_classes"] as? String { dictionary["element_classes"] = elementClasses }
+    if let targetId = interaction["target_id"] as? String { dictionary["element_id"] = targetId }
+    if let innerText = interaction["inner_text"] as? String { dictionary["target_element_inner_text"] = innerText }
+    if let direction = interaction["direction"] as? String { dictionary["scroll_direction"] = direction }
+    if let attributes = interaction["attributes"] as? [String: Any] {
+      if let x = attributes["x"] as? Double { dictionary["x"] = x }
+      if let y = attributes["y"] as? Double { dictionary["y"] = y }
+    }
+
+    let payload = dictionary
+    DispatchQueue.main.async { [weak self] in
+      guard let rum = self?.coralogixRum else {
+        print("[CxSdk] reportUserInteraction called before CoralogixRum is initialized, dropping interaction")
+        return
+      }
+      rum.setUserInteraction(payload)
+    }
+  }
+
   @objc(shutdown:withRejecter:)
   func shutdown(resolve:RCTPromiseResolveBlock,
                 reject:RCTPromiseRejectBlock) -> Void {
@@ -187,7 +212,7 @@ class CxSdk: RCTEventEmitter {
     let message = dictionary[Keys.errorMessage.rawValue] as? String ?? ""
     let errorType = dictionary[Keys.errorType.rawValue] as? String ?? "5"
     let isCrash = dictionary[Keys.isCrash.rawValue] as? Bool ?? false
-    
+
     coralogixRum?.reportError(message: message,
                               stackTrace: stackTrace,
                               errorType: errorType,
@@ -229,15 +254,19 @@ class CxSdk: RCTEventEmitter {
   func initializeSessionReplay(options: NSDictionary,
                                resolve:RCTPromiseResolveBlock,
                                reject:RCTPromiseRejectBlock) -> Void {
+    guard coralogixRum != nil else {
+      reject("CX_SDK_ERROR", "Coralogix RUM must be initialized before Session Replay. Call CoralogixRum.init() first and await it.", nil)
+      return
+    }
     do {
       let sessionReplayOptions = try self.toSessionReplayOptions(parameter: options)
       SessionReplay.initializeWithOptions(sessionReplayOptions:sessionReplayOptions)
+      resolve("initializeSessionReplay success")
     } 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:)
@@ -288,7 +317,7 @@ class CxSdk: RCTEventEmitter {
     }
     resolve("captureScreenshot success")
   }
-  
+
   @objc(maskViewByTag:withResolver:withRejecter:)
   func maskViewByTag(viewTag: NSNumber,
                      resolve:@escaping RCTPromiseResolveBlock,
@@ -300,7 +329,7 @@ class CxSdk: RCTEventEmitter {
       reject("MASK_VIEW_ERROR", "no ui manager found, aborting maskViewByTag", nil)
       return
     }
-    
+
     RCTExecuteOnUIManagerQueue {
       uiManager.addUIBlock { (_, viewRegistry) in
         if let view = viewRegistry?[viewTag] as? UIView {
@@ -400,7 +429,6 @@ class CxSdk: RCTEventEmitter {
                                            ignoreUrls: ignoreUrls,
                                            ignoreErrors: ignoreError,
                                            labels: labels,
-                                           fpsSampleRate: parameter["fpsSamplingSeconds"] as? TimeInterval ?? 300,
                                            instrumentations: instrumentationDict,
                                            collectIPData: parameter["collectIPData"] as? Bool ?? true,
                                           proxyUrl: parameter["proxyUrl"] as? String ?? nil,
@@ -449,9 +477,9 @@ class CxSdk: RCTEventEmitter {
 
   private func mapTraceParentInHeader(_ rnConfig: [String: Any]?) -> [String: Any]? {
     guard let rnConfig = rnConfig else { return nil }
-    
+
     var nativeConfig: [String: Any] = [:]
-    
+
     // Copy all keys, but rename "enabled" to "enable"
     for (key, value) in rnConfig {
       if key == "enabled" {
@@ -460,7 +488,7 @@ class CxSdk: RCTEventEmitter {
         nativeConfig[key] = value
       }
     }
-    
+
     return nativeConfig.isEmpty ? nil : nativeConfig
   }
 

package/package.json

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

package/src/index.d.ts

@@ -1,7 +1,7 @@
 import type { UserContextConfig } from './model/UserContextConfig';
 import type { ApplicationContextConfig } from './model/ApplicationContextConfig';
 import type { CoralogixOtelWebType } from './model/CoralogixOtelWebType';
-import type { CoralogixBrowserSdkConfig, CoralogixStackFrame, CxSpan, HybridMetric } from './model/Types';
+import type { CoralogixBrowserSdkConfig, CoralogixStackFrame, CxSpan, HybridMetric, InteractionContext } from './model/Types';
 import { CoralogixLogSeverity } from './model/Types';
 import type { NetworkRequestDetails } from './model/NetworkRequestDetails';
 import type { CustomMeasurement } from './model/CustomMeasurement';
@@ -36,6 +36,7 @@ interface CxSdkClient {
     stopSessionRecording(): void;
     captureScreenshot(): void;
     maskViewByTag(viewTag: number): void;
+    reportUserInteraction(interaction: InteractionContext): void;
 }
 export declare const CxSdk: CxSdkClient;
 export declare const CoralogixRum: CoralogixOtelWebType;

package/src/instrumentations/user-interaction/UserInteractionInstrumentation.d.ts

@@ -0,0 +1,10 @@
+import { InstrumentationBase } from '@opentelemetry/instrumentation';
+import type { InteractionContext } from '../../model/Types';
+export declare class UserInteractionInstrumentation extends InstrumentationBase {
+    constructor(config: {
+        onInteraction: (ctx: InteractionContext) => void;
+    });
+    init(): void;
+    enable(): void;
+    disable(): void;
+}

package/src/instrumentations/user-interaction/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const USER_INTERACTION_INSTRUMENTATION_NAME = "user-interaction";
+export declare const USER_INTERACTION_INSTRUMENTATION_VERSION = "1";
+export declare const SWIPE_MOMENTUM_TIMEOUT_MS = 80;
+export declare const SWIPE_VELOCITY_THRESHOLD = 0.5;

package/src/instrumentations/user-interaction/gestureUtils.d.ts

@@ -0,0 +1,3 @@
+export type Direction = 'up' | 'down' | 'left' | 'right';
+export declare function inferDirectionFromDelta(dx: number, dy: number): Direction;
+export declare function extractInnerText(children: any): string | undefined;

package/src/instrumentations/user-interaction/index.d.ts

@@ -0,0 +1 @@
+export { UserInteractionInstrumentation } from './UserInteractionInstrumentation';

package/src/model/CoralogixOtelWebType.d.ts

@@ -9,8 +9,9 @@ import { NetworkRequestDetails } from './NetworkRequestDetails';
 export interface CoralogixOtelWebType extends SendLog {
     /**
      * Init CoralogixRum.
+     * Returns a Promise that resolves when initialization is complete.
      */
-    init: (options: CoralogixBrowserSdkConfig) => void;
+    init: (options: CoralogixBrowserSdkConfig) => Promise<void>;
     /**
      * Turn CoralogixRum off.
      */

package/src/model/Types.d.ts

@@ -208,4 +208,17 @@ export type HybridMetric = {
     value: number;
     units: string;
 };
+export interface InteractionContext {
+    type: 'click' | 'scroll' | 'swipe';
+    /** Required. Element identifier: accessibilityLabel ?? componentName for clicks; 'ScrollView' for scroll/swipe. */
+    target_element: string;
+    direction?: 'up' | 'down' | 'left' | 'right';
+    element_classes?: string;
+    target_id?: string;
+    inner_text?: string;
+    attributes?: {
+        x?: number;
+        y?: number;
+    };
+}
 export {};