@coralogix/react-native-plugin 0.2.10 → 0.3.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.3.0 (2026-03-10)
+
+### 🚀 Features
+
+- Add network payload and header capture support ([CX-32504](https://coralogix.atlassian.net/browse/CX-32504)): configure `networkExtraConfig` rules to capture request/response headers and payloads per URL pattern
+- Add `NetworkCaptureRule` type to public API for typed configuration
+- Android: pass `networkExtraConfig` rules through native bridge to Android SDK
+- JS: async fetch instrumentation with response payload capture via `Response.clone()`
+- Android version bumped to 2.9.3
+- iOS version bumped to 2.3.0
+
+### 🩹 Fixes
+
+- add explicit types to Headers.forEach callback
+- use Headers.forEach() instead of entries() for es2022 lib compat
+- cast serializeNetworkCaptureRules return type to any[] for native bridge
+- update CoralogixRum.init return type to Promise<void>
+
+## 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.3.0'
+  s.dependency 'CoralogixInternal','2.3.0'
+  s.dependency 'SessionReplay','2.3.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.3"
 }
 
 react {

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

@@ -14,8 +14,10 @@ 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.NetworkCaptureRule
 import com.coralogix.android.sdk.model.TraceParentInHeaderConfig
 import com.coralogix.android.sdk.model.TraceParentInHeaderConfigOptions
 import com.coralogix.android.sdk.model.UserContext
@@ -195,6 +197,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")
@@ -327,6 +350,10 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
 
     val collectIpData = if (hasKey("collectIPData")) getBoolean("collectIPData") else true
 
+    val networkExtraConfig = if (hasKey("networkExtraConfig") && !isNull("networkExtraConfig"))
+      getArray("networkExtraConfig")?.toNetworkCaptureRuleList() ?: emptyList()
+    else emptyList()
+
     return CoralogixOptions(
       applicationName = applicationName,
       coralogixDomain = coralogixDomain,
@@ -345,7 +372,8 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
       debug = if (hasKey("debug")) getBoolean("debug") else false,
       proxyUrl = getString("proxyUrl"),
       beforeSendCallback = ::beforeSendCallback,
-      collectIPData = collectIpData
+      collectIPData = collectIpData,
+      networkCaptureConfig = networkExtraConfig
     )
   }
 
@@ -691,9 +719,45 @@ class CxSdkModule(reactContext: ReactApplicationContext) :
       getDouble("responseContentLength").toLong() else 0,
     errorMessage = getString("errorMessage"),
     traceId = getString("customTraceId"),
-    spanId = getString("customSpanId")
+    spanId = getString("customSpanId"),
+    requestHeaders = if (hasKey("request_headers") && !isNull("request_headers"))
+      getMap("request_headers")?.toStringMap() else null,
+    responseHeaders = if (hasKey("response_headers") && !isNull("response_headers"))
+      getMap("response_headers")?.toStringMap() else null,
+    requestPayload = if (hasKey("request_payload") && !isNull("request_payload"))
+      getString("request_payload") else null,
+    responsePayload = if (hasKey("response_payload") && !isNull("response_payload"))
+      getString("response_payload") else null
   ).also { Log.d("CxSdkModule", "toNetworkRequestDetails: $it") }
 
+  private fun ReadableArray.toNetworkCaptureRuleList(): List<NetworkCaptureRule> {
+    val result = mutableListOf<NetworkCaptureRule>()
+    for (i in 0 until size()) {
+      val map = getMap(i) ?: continue
+      result.add(NetworkCaptureRule(
+        url = if (map.hasKey("url") && !map.isNull("url")) map.getString("url") else null,
+        urlPattern = if (map.hasKey("urlPattern") && !map.isNull("urlPattern")) {
+          val source = map.getString("urlPattern") ?: ""
+          val flags = if (map.hasKey("urlPatternFlags") && !map.isNull("urlPatternFlags"))
+            map.getString("urlPatternFlags") ?: "" else ""
+          val options = mutableSetOf<RegexOption>()
+          if (flags.contains('i')) options.add(RegexOption.IGNORE_CASE)
+          if (flags.contains('m')) options.add(RegexOption.MULTILINE)
+          source.toRegex(options)
+        } else null,
+        reqHeaders = if (map.hasKey("reqHeaders") && !map.isNull("reqHeaders"))
+          map.getArray("reqHeaders")?.toStringList() ?: emptyList()
+        else emptyList(),
+        resHeaders = if (map.hasKey("resHeaders") && !map.isNull("resHeaders"))
+          map.getArray("resHeaders")?.toStringList() ?: emptyList()
+        else emptyList(),
+        collectReqPayload = if (map.hasKey("collectReqPayload")) map.getBoolean("collectReqPayload") else false,
+        collectResPayload = if (map.hasKey("collectResPayload")) map.getBoolean("collectResPayload") else false,
+      ))
+    }
+    return result
+  }
+
   private fun ReadableArray.toHybridMetricList(): List<HybridMetric> {
     val out = ArrayList<HybridMetric>(size())
     for (i in 0 until size()) {

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.3.0";
 var pkg = {
 	version: version};
 
@@ -319,6 +622,52 @@ let OtelNetworkAttrs = /*#__PURE__*/function (OtelNetworkAttrs) {
   return OtelNetworkAttrs;
 }({});
 
+/**
+ * Returns the first rule whose `urlPattern` regex or exact `url` matches the
+ * given URL. Returns undefined if no rule matches or the list is empty.
+ */
+function resolveNetworkCaptureRule(url, rules) {
+  return rules.find(rule => rule.urlPattern ? rule.urlPattern.test(url) : rule.url === url);
+}
+
+/**
+ * Filters a headers map to only the keys present in `allowlist`.
+ * Matching is case-insensitive; output keys use the casing from `allowlist`.
+ */
+function filterHeaders(headers, allowlist) {
+  const result = {};
+  for (const [key, value] of Object.entries(headers)) {
+    const configKey = allowlist.find(k => k.toLowerCase() === key.toLowerCase());
+    if (configKey !== undefined) result[configKey] = value;
+  }
+  return result;
+}
+
+/**
+ * Returns `body` if it is within `maxChars`, otherwise returns `undefined`.
+ * Bodies over the limit are dropped entirely — never truncated.
+ */
+function applyPayloadLimit(body, maxChars = 1024) {
+  return body.length <= maxChars ? body : undefined;
+}
+
+/**
+ * Converts NetworkCaptureRule[] to a form that can cross the JS→native bridge.
+ * RegExp cannot be serialized directly, so `urlPattern` is split into its
+ * `source` and `flags` strings; the native side reconstructs the regex.
+ */
+function serializeNetworkCaptureRules(rules) {
+  return rules.map(rule => {
+    var _rule$urlPattern, _rule$urlPattern2;
+    return _extends({}, rule, {
+      urlPattern: (_rule$urlPattern = rule.urlPattern) == null ? void 0 : _rule$urlPattern.source,
+      // Strip 'g' and 'y' flags — stateful flags cause RegExp.lastIndex side-effects
+      // when the native side calls .test() repeatedly on a shared instance.
+      urlPatternFlags: (_rule$urlPattern2 = rule.urlPattern) == null ? void 0 : _rule$urlPattern2.flags.replace(/[gy]/g, '')
+    });
+  });
+}
+
 class CoralogixFetchInstrumentation extends instrumentationFetch.FetchInstrumentation {
   constructor(config) {
     var _traceParentInHeader$;
@@ -332,7 +681,9 @@ class CoralogixFetchInstrumentation extends instrumentationFetch.FetchInstrument
       // If enabled and user didn't provide urls -> match all
       propagateTraceHeaderCorsUrls: enabled ? urls != null ? urls : /.*/ : allowNone()
     };
-    fetchConfig.applyCustomAttributesOnSpan = (span, request, result) => {
+    fetchConfig.applyCustomAttributesOnSpan = async function (span, request, result) {
+      // span.end() must remain synchronous and first — this completes the OTel span
+      // regardless of any async work that follows for capture enrichment.
       span.end();
       const readableSpan = span;
       const attrs = readableSpan.attributes;
@@ -364,6 +715,66 @@ class CoralogixFetchInstrumentation extends instrumentationFetch.FetchInstrument
         customTraceId,
         customSpanId
       };
+      const networkExtraConfig = config.networkExtraConfig;
+      if (networkExtraConfig != null && networkExtraConfig.length) {
+        const rule = resolveNetworkCaptureRule(url, networkExtraConfig);
+        if (rule) {
+          var _rule$reqHeaders, _rule$resHeaders;
+          // Request headers
+          if ((_rule$reqHeaders = rule.reqHeaders) != null && _rule$reqHeaders.length) {
+            let rawHeaders;
+            if (request instanceof Request) {
+              rawHeaders = headersToRecord(request.headers);
+            } else {
+              const h = request.headers;
+              if (h instanceof Headers) {
+                rawHeaders = headersToRecord(h);
+              } else if (Array.isArray(h)) {
+                rawHeaders = Object.fromEntries(h);
+              } else {
+                var _ref;
+                rawHeaders = (_ref = h) != null ? _ref : {};
+              }
+            }
+            const filtered = filterHeaders(rawHeaders, rule.reqHeaders);
+            if (Object.keys(filtered).length > 0) details.request_headers = filtered;
+          }
+
+          // Response headers
+          if ((_rule$resHeaders = rule.resHeaders) != null && _rule$resHeaders.length && result instanceof Response) {
+            const filtered = filterHeaders(headersToRecord(result.headers), rule.resHeaders);
+            if (Object.keys(filtered).length > 0) details.response_headers = filtered;
+          }
+
+          // Request payload — string bodies only (FormData/Blob/ReadableStream skipped)
+          if (rule.collectReqPayload) {
+            let reqBody;
+            if (request instanceof Request) {
+              try {
+                reqBody = await request.clone().text();
+              } catch (_unused) {/* consumed or unavailable */}
+            } else {
+              const body = request == null ? void 0 : request.body;
+              if (typeof body === 'string') reqBody = body;
+            }
+            if (reqBody !== undefined) {
+              const limited = applyPayloadLimit(reqBody);
+              if (limited !== undefined) details.request_payload = limited;
+            }
+          }
+
+          // Response payload — clone before body is consumed by app code (best-effort)
+          if (rule.collectResPayload && result instanceof Response && !result.bodyUsed) {
+            try {
+              const text = await result.clone().text();
+              const limited = applyPayloadLimit(text);
+              if (limited !== undefined) details.response_payload = limited;
+            } catch (_unused2) {/* consumed or unavailable */}
+          }
+        }
+      }
+
+      // reportNetworkRequest must always be last, after all awaits
       CoralogixRum.reportNetworkRequest(details);
     };
     super(fetchConfig);
@@ -376,6 +787,13 @@ function allowNone() {
   // matches nothing
   return /^$/;
 }
+function headersToRecord(headers) {
+  const result = {};
+  headers.forEach((value, key) => {
+    result[key] = value;
+  });
+  return result;
+}
 
 function isSessionReplayOptionsValid(options) {
   const scaleValid = options.captureScale > 0 && options.captureScale <= 1;
@@ -469,7 +887,8 @@ const CoralogixRum = {
       finalOptions = resolvedOptions;
     }
     await CxSdk.initialize(_extends({}, finalOptions, {
-      frameworkVersion: pkg.version
+      frameworkVersion: pkg.version,
+      networkExtraConfig: finalOptions.networkExtraConfig ? serializeNetworkCaptureRules(finalOptions.networkExtraConfig) : undefined
     }));
     isInited = true;
   },
@@ -596,6 +1015,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 +1132,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,