@coralogix/react-native-plugin 0.2.10 → 0.3.0

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.3.0";
 var pkg = {
 	version: version};
 
@@ -317,6 +620,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 FetchInstrumentation {
   constructor(config) {
     var _traceParentInHeader$;
@@ -330,7 +679,9 @@ class CoralogixFetchInstrumentation extends FetchInstrumentation {
       // 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;
@@ -362,6 +713,66 @@ class CoralogixFetchInstrumentation extends FetchInstrumentation {
         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);
@@ -374,6 +785,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;
@@ -467,7 +885,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;
   },
@@ -594,6 +1013,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 +1130,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)