@ansight/react-native 1.3.0-preview.10 → 1.3.0-preview.12

package/index.js

@@ -1,7 +1,20 @@
 "use strict";
 
+const { ensureReactInspectionHook } = require("./react-inspection-hook");
+const { createReactCoordinateSpace } = require("./react-tree-geometry");
+const { reactSemanticRole, reactSupportedActions } = require("./react-tree-semantics");
+
+// Production React Native renderers only look for the DevTools hook once, when
+// the renderer module initializes. Install a minimal root tracker while this
+// package is loading so Fabric and Paper can report their roots before the app's
+// first render. Development runtimes keep their full React DevTools hook.
+if (typeof __DEV__ === "undefined" || !__DEV__) {
+  ensureReactInspectionHook(typeof global !== "undefined" ? global : undefined);
+}
+
 const {
   AppState,
+  Dimensions,
   NativeEventEmitter,
   NativeModules,
   Platform,
@@ -10,6 +23,15 @@ const {
   findNodeHandle,
   processColor,
 } = require("react-native");
+const { version: reactVersion } = require("react");
+const {
+  createAutomaticSessionProperties,
+  mergeSessionProperties,
+} = require("./session-properties");
+const {
+  installNetworkCapture: installNetworkCaptureCore,
+  sanitizeNetworkRequest,
+} = require("./network");
 
 const nativeModule = NativeModules.AnsightReactNative;
 
@@ -33,6 +55,9 @@ const hostConnectionStatusListeners = new Set();
 let lastHostConnectionStatusKey = null;
 const logListeners = new Set();
 let logEventSubscription = null;
+let networkCaptureSubscription = null;
+let networkCaptureRegistration = null;
+let networkConnectionEventSubscription = null;
 const REACT_COMPONENT_TREE_TOOL_ID = "react.get_component_tree";
 const REACT_SHADOW_TREE_TOOL_ID = "react.get_shadow_tree";
 
@@ -44,7 +69,28 @@ function normalizePairingPayload(payload) {
 }
 
 function normalizeOptions(options = {}) {
-  return { ...options };
+  const normalized = {
+    ...options,
+    customProperties: mergeSessionProperties(
+      automaticSessionProperties(),
+      options.customProperties
+    ),
+  };
+  delete normalized.networkCapture;
+  return normalized;
+}
+
+function automaticSessionProperties() {
+  return createAutomaticSessionProperties({
+    platform: Platform,
+    reactVersion,
+    runtimeGlobal: global,
+    developmentMode: typeof __DEV__ !== "undefined" && __DEV__,
+  });
+}
+
+function automaticSessionPropertyValue(group, key) {
+  return automaticSessionProperties()[group]?.[key];
 }
 
 function cloneOptions(options = {}) {
@@ -73,6 +119,17 @@ function cloneOptions(options = {}) {
   if (options.hostConnection) {
     clone.hostConnection = { ...options.hostConnection };
   }
+  if (options.networkCapture && typeof options.networkCapture === "object") {
+    clone.networkCapture = {
+      ...options.networkCapture,
+      additionalSensitiveHeaderNames: options.networkCapture.additionalSensitiveHeaderNames
+        ? [...options.networkCapture.additionalSensitiveHeaderNames]
+        : undefined,
+      additionalSensitiveQueryParameterNames: options.networkCapture.additionalSensitiveQueryParameterNames
+        ? [...options.networkCapture.additionalSensitiveQueryParameterNames]
+        : undefined,
+    };
+  }
   if (options.secureStorage) {
     clone.secureStorage = {
       ...options.secureStorage,
@@ -339,6 +396,52 @@ class AnsightOptionsBuilder {
     return this;
   }
 
+  withNetworkCapture(networkCapture = {}) {
+    this._options.networkCapture = { ...networkCapture };
+    return this;
+  }
+
+  withNetworkRequestBodies(maximumBodyBytes) {
+    if (!this._options.networkCapture || typeof this._options.networkCapture !== "object") return this;
+    const current = this._options.networkCapture;
+    this._options.networkCapture = {
+      ...current,
+      captureRequestBody: true,
+      ...(maximumBodyBytes == null ? {} : { maximumBodyBytes }),
+    };
+    return this;
+  }
+
+  withoutNetworkRequestBodies() {
+    if (!this._options.networkCapture || typeof this._options.networkCapture !== "object") return this;
+    const current = this._options.networkCapture;
+    this._options.networkCapture = { ...current, captureRequestBody: false };
+    return this;
+  }
+
+  withNetworkResponseBodies(maximumBodyBytes) {
+    if (!this._options.networkCapture || typeof this._options.networkCapture !== "object") return this;
+    const current = this._options.networkCapture;
+    this._options.networkCapture = {
+      ...current,
+      captureResponseBody: true,
+      ...(maximumBodyBytes == null ? {} : { maximumBodyBytes }),
+    };
+    return this;
+  }
+
+  withoutNetworkResponseBodies() {
+    if (!this._options.networkCapture || typeof this._options.networkCapture !== "object") return this;
+    const current = this._options.networkCapture;
+    this._options.networkCapture = { ...current, captureResponseBody: false };
+    return this;
+  }
+
+  withoutNetworkCapture() {
+    this._options.networkCapture = false;
+    return this;
+  }
+
   withToolGuard(toolGuard) {
     this._options.toolGuard = toolGuard;
     return this;
@@ -581,6 +684,7 @@ function addHostConnectionStatusListener(listener, options = {}) {
 
 async function notifyAfterHostConnectionChange(operation) {
   const result = await operation();
+  await refreshNetworkCaptureConnection();
   await emitHostConnectionStatusChangedIfNeeded();
   return result;
 }
@@ -1440,36 +1544,16 @@ function summarizeProps(props) {
   return summary;
 }
 
-function reactSemanticRole(type, props, fiberTag) {
-  const declared = props && (props.accessibilityRole || props.role);
-  if (declared) return String(declared).toLowerCase();
-  if (fiberTag === 6 || /text/i.test(type)) return "text";
-  if (/button|pressable|touchable/i.test(type)) return "button";
-  if (/textinput/i.test(type)) return "textbox";
-  if (/switch/i.test(type)) return "switch";
-  if (/scrollview|flatlist|sectionlist/i.test(type)) return "scrollview";
-  return "view";
-}
-
-function reactSupportedActions(type, props) {
-  const actions = [];
-  if (props && typeof props.onPress === "function") actions.push("tap");
-  if (props && (typeof props.onChangeText === "function" || /textinput/i.test(type))) {
-    actions.push("typeText", "focus");
-  }
-  if (/scrollview|flatlist|sectionlist/i.test(type) || (props && typeof props.onScroll === "function")) {
-    actions.push("scroll", "swipe");
-  }
-  return actions;
-}
-
 function applyReactTargetability(node, fiber, props, type) {
   const style = StyleSheet && typeof StyleSheet.flatten === "function"
     ? StyleSheet.flatten(props && props.style)
     : props && props.style;
   node.text = node.label || (node.visual && node.visual.text) || null;
-  node.role = reactSemanticRole(type, props, fiber.tag);
   node.supportedActions = reactSupportedActions(type, props);
+  node.role = reactSemanticRole(type, props, fiber.tag);
+  if (node.role === "view" && node.supportedActions.includes("tap")) {
+    node.role = "button";
+  }
   node.visible = !(style && style.display === "none") && !(props && props.accessibilityElementsHidden);
   node.enabled = !(props && (props.disabled === true || props.accessibilityState && props.accessibilityState.disabled === true));
   node.focusable = !!(props && props.focusable) || node.supportedActions.includes("focus");
@@ -1823,6 +1907,7 @@ async function captureReactVisualTree(rawOptions = {}) {
     source: "react",
     adapter: "react.fiber",
     treeKind: "component",
+    coordinateSpace: createReactCoordinateSpace(Dimensions, context.nodesWithNativeTags),
     capturedAtUtc: new Date().toISOString(),
     hookAvailable: roots.hookAvailable,
     renderers: roots.renderers,
@@ -1883,6 +1968,7 @@ async function captureReactShadowTree(rawOptions = {}) {
     source: "react-native",
     adapter: "react-native.host-fiber",
     treeKind: "shadow",
+    coordinateSpace: createReactCoordinateSpace(Dimensions, context.nodesWithNativeTags),
     capturedAtUtc: new Date().toISOString(),
     hookAvailable: roots.hookAvailable,
     renderers: roots.renderers,
@@ -2313,6 +2399,7 @@ function installErrorHandlers(options = {}) {
 
 async function initialize(options = {}) {
   const result = await nativeModule.initialize(normalizeOptions(options));
+  await configureNetworkCapture(options.networkCapture);
   if (options.lifecycle !== false) {
     startAppStateTracking();
   }
@@ -2322,6 +2409,7 @@ async function initialize(options = {}) {
 
 async function initializeAndActivate(options = {}) {
   const result = await nativeModule.initializeAndActivate(normalizeOptions(options));
+  await configureNetworkCapture(options.networkCapture);
   if (options.lifecycle !== false) {
     startAppStateTracking();
   }
@@ -2396,6 +2484,93 @@ function recordCrashCandidate(input = {}) {
   });
 }
 
+function recordNetworkRequest(input, sanitizationOptions = {}) {
+  const sanitized = sanitizeNetworkRequest(input, sanitizationOptions, global);
+  if (!sanitized) {
+    return Promise.resolve({ success: false, message: "Network request capture was suppressed by the sanitizer." });
+  }
+  return nativeModule.recordNetworkRequest(sanitized);
+}
+
+function installNetworkCapture(options = {}) {
+  uninstallNetworkCapture();
+  const registration = { options };
+  networkCaptureRegistration = registration;
+  ensureNetworkConnectionEventSubscription();
+  void refreshNetworkCaptureConnection();
+  return {
+    remove() {
+      if (networkCaptureRegistration === registration) {
+        uninstallNetworkCapture();
+      }
+    },
+  };
+}
+
+function uninstallNetworkCapture() {
+  networkCaptureRegistration = null;
+  if (networkConnectionEventSubscription) {
+    networkConnectionEventSubscription.remove();
+    networkConnectionEventSubscription = null;
+  }
+  detachNetworkCapture();
+}
+
+function detachNetworkCapture() {
+  if (!networkCaptureSubscription) return;
+  networkCaptureSubscription.remove();
+  networkCaptureSubscription = null;
+}
+
+async function refreshNetworkCaptureConnection() {
+  const registration = networkCaptureRegistration;
+  if (!registration) {
+    detachNetworkCapture();
+    return;
+  }
+  try {
+    const status = await nativeModule.hostConnectionStatus();
+    if (networkCaptureRegistration !== registration) return;
+    applyNetworkConnectionStatus(status);
+  } catch {
+    if (networkCaptureRegistration === registration) detachNetworkCapture();
+  }
+}
+
+function ensureNetworkConnectionEventSubscription() {
+  if (networkConnectionEventSubscription) return;
+  const emitter = new NativeEventEmitter(nativeModule);
+  networkConnectionEventSubscription = emitter.addListener(
+    "AnsightHostConnectionStatus",
+    applyNetworkConnectionStatus,
+  );
+}
+
+function applyNetworkConnectionStatus(status) {
+  const registration = networkCaptureRegistration;
+  if (!registration || !status || status.isConnected !== true) {
+    detachNetworkCapture();
+    return;
+  }
+  if (!networkCaptureSubscription) {
+    networkCaptureSubscription = installNetworkCaptureCore({
+      globalObject: global,
+      options: registration.options,
+      sourcePrefix: "react-native",
+      capture: (request) => nativeModule.recordNetworkRequest(request),
+    });
+  }
+}
+
+async function configureNetworkCapture(value) {
+  uninstallNetworkCapture();
+  if (!value) return;
+  const registration = { options: typeof value === "object" ? value : {} };
+  networkCaptureRegistration = registration;
+  ensureNetworkConnectionEventSubscription();
+  await refreshNetworkCaptureConnection();
+}
+
 function screenViewed(name, details) {
   return nativeModule.screenViewed(name, details || {});
 }
@@ -2439,6 +2614,7 @@ const Ansight = {
   event: recordEvent,
   recordEvent,
   recordCrashCandidate,
+  recordNetworkRequest,
   screenViewed,
   trackRoute,
   setAppLifecycleState: (state) => nativeModule.setAppLifecycleState(state),
@@ -2473,12 +2649,21 @@ const Ansight = {
   captureScreenFrame: (options = {}) => nativeModule.captureScreenFrame(options || {}),
   enableTouchCapture: () => nativeModule.enableTouchCapture(),
   disableTouchCapture: () => nativeModule.disableTouchCapture(),
-  updateSessionProperties: (properties) => nativeModule.updateSessionProperties(properties || {}),
-  clearSessionProperties: () => nativeModule.clearSessionProperties(),
-  updateCustomProperties: (properties) => nativeModule.updateSessionProperties(properties || {}),
+  updateSessionProperties: (properties) => nativeModule.updateSessionProperties(
+    mergeSessionProperties(automaticSessionProperties(), properties || {})
+  ),
+  clearSessionProperties: () => nativeModule.updateSessionProperties(automaticSessionProperties()),
+  updateCustomProperties: (properties) => nativeModule.updateSessionProperties(
+    mergeSessionProperties(automaticSessionProperties(), properties || {})
+  ),
   registerCustomProperty: (group, key, value) => nativeModule.registerCustomProperty(group, key, value),
-  removeCustomProperty: (group, key) => nativeModule.removeCustomProperty(group, key),
-  clearCustomProperties: () => nativeModule.clearSessionProperties(),
+  removeCustomProperty: (group, key) => {
+    const automaticValue = automaticSessionPropertyValue(group, key);
+    return automaticValue == null
+      ? nativeModule.removeCustomProperty(group, key)
+      : nativeModule.registerCustomProperty(group, key, automaticValue);
+  },
+  clearCustomProperties: () => nativeModule.updateSessionProperties(automaticSessionProperties()),
   registerTool,
   unregisterTool,
   registerArtifactProvider,
@@ -2500,6 +2685,9 @@ const Ansight = {
   installReactTools,
   uninstallReactTools,
   installErrorHandlers,
+  installNetworkCapture,
+  uninstallNetworkCapture,
+  sanitizeNetworkRequest,
   createReactNavigationTracker,
   platform: Platform.OS,
 };
@@ -2518,3 +2706,7 @@ module.exports.registerArtifactProviders = registerArtifactProviders;
 module.exports.unregisterArtifactProvider = unregisterArtifactProvider;
 module.exports.listRegisteredArtifactProviders = listRegisteredArtifactProviders;
 module.exports.clearArtifactProviders = clearArtifactProviders;
+module.exports.recordNetworkRequest = recordNetworkRequest;
+module.exports.installNetworkCapture = installNetworkCapture;
+module.exports.uninstallNetworkCapture = uninstallNetworkCapture;
+module.exports.sanitizeNetworkRequest = sanitizeNetworkRequest;

package/ios/AnsightReactNative.swift

@@ -139,6 +139,7 @@ final class AnsightReactNative: RCTEventEmitter {
 
     private let lock = NSLock()
     private var hasListeners = false
+    private var hostConnectionStatusSubscription: HostConnectionStatusSubscription?
     private var activeCustomToolIds: Set<String> = []
     private var pendingToolCalls: [String: PendingToolCall] = [:]
     private var reactNativeMemorySampler: ReactNativeMemorySamplerBox?
@@ -150,10 +151,14 @@ final class AnsightReactNative: RCTEventEmitter {
     override init() {
         super.init()
         AnsightLogger.registerCallback(logCallback)
+        hostConnectionStatusSubscription = AnsightRuntime.shared.addHostConnectionStatusListener { [weak self] status, _ in
+            self?.emitHostConnectionStatusEvent(status)
+        }
     }
 
     deinit {
         AnsightLogger.removeCallback(logCallback)
+        hostConnectionStatusSubscription?.remove()
     }
 
     override static func requiresMainQueueSetup() -> Bool {
@@ -161,7 +166,7 @@ final class AnsightReactNative: RCTEventEmitter {
     }
 
     override func supportedEvents() -> [String]! {
-        ["AnsightToolCall", "AnsightLog"]
+        ["AnsightToolCall", "AnsightLog", "AnsightHostConnectionStatus"]
     }
 
     override func startObserving() {
@@ -292,6 +297,27 @@ final class AnsightReactNative: RCTEventEmitter {
         }
     }
 
+    @objc(recordNetworkRequest:resolver:rejecter:)
+    func recordNetworkRequest(
+        _ input: NSDictionary,
+        resolver resolve: @escaping RCTPromiseResolveBlock,
+        rejecter reject: RCTPromiseRejectBlock
+    ) {
+        guard JSONSerialization.isValidJSONObject(input),
+              let data = try? JSONSerialization.data(withJSONObject: input),
+              let request = try? JSONDecoder().decode(AnsightNetworkRequest.self, from: data),
+              request.schema == AnsightNetworkRequest.schemaName
+        else {
+            resolve(operationResultDictionary(
+                .failure("Network request must use the ansight.network-request.v1 schema.")
+            ))
+            return
+        }
+        Task {
+            resolve(operationResultDictionary(await AnsightRuntime.shared.recordNetworkRequest(request)))
+        }
+    }
+
     @objc(recordCrashCandidate:resolver:rejecter:)
     func recordCrashCandidate(
         _ input: NSDictionary,
@@ -859,6 +885,17 @@ final class AnsightReactNative: RCTEventEmitter {
         }
     }
 
+    private func emitHostConnectionStatusEvent(_ status: HostConnectionStatus) {
+        let shouldEmit = lock.withLock { hasListeners }
+        guard shouldEmit else { return }
+        DispatchQueue.main.async {
+            self.sendEvent(
+                withName: "AnsightHostConnectionStatus",
+                body: self.hostConnectionStatusDictionary(status)
+            )
+        }
+    }
+
     private func configureReactNativeMemoryProfiling(_ dictionary: NSDictionary?) throws {
         let options = ReactNativeMemoryProfilingOptions(dictionary: dictionary)
         currentReactNativeMemoryOptions = options

package/ios/AnsightReactNativeModule.m

@@ -33,6 +33,10 @@ RCT_EXTERN_METHOD(recordEvent:(NSDictionary *)input
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(recordNetworkRequest:(NSDictionary *)input
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
 RCT_EXTERN_METHOD(recordCrashCandidate:(NSDictionary *)input
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)