react-native-debug-toolkit 2.1.0 → 2.3.0

package/src/features/network/networkInterceptor.ts

@@ -0,0 +1,286 @@
+import type { NetworkLogEntry } from '../../types';
+import { urlRewriter } from '../../utils/urlRewriterRegistry';
+
+type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
+
+// Intercepts React Native's XMLHttpRequest transport layer.
+// RN fetch and axios (default adapter) both go through XHR — one hook captures everything.
+
+// ─── Shared helpers ────────────────────────────────────
+
+function rewriteUrl(url: string): string {
+  const rewriter = urlRewriter.get();
+  if (!rewriter) {
+    return url;
+  }
+  try {
+    return rewriter(url);
+  } catch {
+    return url;
+  }
+}
+
+function parseRawHeaders(rawHeaders: string | null | undefined): Record<string, string> | undefined {
+  if (!rawHeaders) {
+    return undefined;
+  }
+
+  const headers: Record<string, string> = {};
+  rawHeaders
+    .trim()
+    .split(/[\r\n]+/)
+    .forEach((line) => {
+      const separatorIndex = line.indexOf(':');
+      if (separatorIndex <= 0) {
+        return;
+      }
+      const key = line.slice(0, separatorIndex).trim();
+      const value = line.slice(separatorIndex + 1).trim();
+      if (key) {
+        headers[key] = value;
+      }
+    });
+  return Object.keys(headers).length > 0 ? headers : undefined;
+}
+
+function parseBodyText(raw: string): unknown {
+  if (!raw) return undefined;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+
+function normalizeXhrResponseBody(xhr: XMLHttpRequestLike): unknown {
+  const text = safeRead(() => xhr.responseText);
+  if (typeof text === 'string' && text) {
+    return parseBodyText(text);
+  }
+
+  const response = safeRead(() => xhr.response);
+  if (response != null) {
+    return response;
+  }
+
+  return undefined;
+}
+
+// ─── XMLHttpRequest interceptor ───────────────────────
+
+interface XMLHttpRequestLike {
+  readyState: number;
+  DONE?: number;
+  status: number;
+  statusText?: string;
+  responseHeaders?: Record<string, string> | null;
+  responseType?: string;
+  response?: unknown;
+  responseText?: string;
+  responseURL?: string;
+  open(method: string, url: string, ...args: unknown[]): void;
+  send(body?: unknown): void;
+  setRequestHeader(header: string, value: string): void;
+  getAllResponseHeaders?(): string | null;
+  addEventListener(type: string, listener: () => void): void;
+  removeEventListener(type: string, listener: () => void): void;
+}
+
+type XMLHttpRequestConstructorLike = new () => XMLHttpRequestLike;
+
+type XhrState = {
+  method: string;
+  url: string;
+  headers: Record<string, string>;
+  body?: unknown;
+  timestamp: number;
+  error?: string;
+  completed?: boolean;
+};
+
+let originalXMLHttpRequest: XMLHttpRequestConstructorLike | null = null;
+let originalXhrOpen: XMLHttpRequestLike['open'] | null = null;
+let originalXhrSend: XMLHttpRequestLike['send'] | null = null;
+let originalXhrSetRequestHeader: XMLHttpRequestLike['setRequestHeader'] | null = null;
+let xhrRefCount = 0;
+const pendingXhrRequests = new WeakMap<XMLHttpRequestLike, XhrState>();
+
+function safeRead<T>(read: () => T): T | undefined {
+  try {
+    return read();
+  } catch {
+    return undefined;
+  }
+}
+
+function getGlobalXMLHttpRequest(): XMLHttpRequestConstructorLike | undefined {
+  return (globalThis as { XMLHttpRequest?: XMLHttpRequestConstructorLike }).XMLHttpRequest;
+}
+
+function getXhrResponseHeaders(xhr: XMLHttpRequestLike): Record<string, string> | undefined {
+  const rawHeaders = safeRead(() => xhr.getAllResponseHeaders?.());
+  const parsedHeaders = parseRawHeaders(rawHeaders);
+  if (parsedHeaders) {
+    return parsedHeaders;
+  }
+
+  const headers = xhr.responseHeaders;
+  if (!headers) {
+    return undefined;
+  }
+  return Object.keys(headers).length > 0 ? headers : undefined;
+}
+
+function stopXMLHttpRequest(): void {
+  xhrRefCount = Math.max(0, xhrRefCount - 1);
+  if (xhrRefCount > 0 || !originalXMLHttpRequest) {
+    return;
+  }
+
+  const CurrentXMLHttpRequest = getGlobalXMLHttpRequest();
+  if (CurrentXMLHttpRequest) {
+    if (originalXhrOpen) {
+      CurrentXMLHttpRequest.prototype.open = originalXhrOpen;
+    }
+    if (originalXhrSend) {
+      CurrentXMLHttpRequest.prototype.send = originalXhrSend;
+    }
+    if (originalXhrSetRequestHeader) {
+      CurrentXMLHttpRequest.prototype.setRequestHeader = originalXhrSetRequestHeader;
+    }
+  }
+
+  originalXMLHttpRequest = null;
+  originalXhrOpen = null;
+  originalXhrSend = null;
+  originalXhrSetRequestHeader = null;
+}
+
+export function startXMLHttpRequest(
+  emit: (entry: NetworkLogPayload) => void,
+): () => void {
+  const CurrentXMLHttpRequest = getGlobalXMLHttpRequest();
+  if (!CurrentXMLHttpRequest) {
+    return () => {};
+  }
+
+  xhrRefCount += 1;
+  if (originalXMLHttpRequest) {
+    return () => {
+      stopXMLHttpRequest();
+    };
+  }
+
+  originalXMLHttpRequest = CurrentXMLHttpRequest;
+  originalXhrOpen = CurrentXMLHttpRequest.prototype.open;
+  originalXhrSend = CurrentXMLHttpRequest.prototype.send;
+  originalXhrSetRequestHeader = CurrentXMLHttpRequest.prototype.setRequestHeader;
+
+  CurrentXMLHttpRequest.prototype.open = function interceptedOpen(
+    this: XMLHttpRequestLike,
+    method: string,
+    url: string,
+    ...args: unknown[]
+  ) {
+    const rewrittenUrl = urlRewriter.get() ? rewriteUrl(url) : url;
+    pendingXhrRequests.set(this, {
+      method: (method || 'GET').toUpperCase(),
+      url: rewrittenUrl,
+      headers: {},
+      timestamp: Date.now(),
+    });
+    return originalXhrOpen!.call(this, method, rewrittenUrl, ...args);
+  };
+
+  CurrentXMLHttpRequest.prototype.setRequestHeader = function interceptedSetRequestHeader(
+    this: XMLHttpRequestLike,
+    header: string,
+    value: string,
+  ) {
+    const state = pendingXhrRequests.get(this);
+    if (state) {
+      state.headers[header] = value;
+    }
+    return originalXhrSetRequestHeader!.call(this, header, value);
+  };
+
+  CurrentXMLHttpRequest.prototype.send = function interceptedSend(
+    this: XMLHttpRequestLike,
+    body?: unknown,
+  ) {
+    const that = this;
+    const state = pendingXhrRequests.get(that) ?? {
+      method: 'GET',
+      url: '',
+      headers: {},
+      timestamp: Date.now(),
+    };
+    state.body = body;
+    state.timestamp = Date.now();
+    pendingXhrRequests.set(that, state);
+
+    const complete = () => {
+      const currentState = pendingXhrRequests.get(that);
+      if (!currentState || currentState.completed) {
+        return;
+      }
+      currentState.completed = true;
+
+      const headers = getXhrResponseHeaders(that);
+      emit({
+        timestamp: currentState.timestamp,
+        duration: Date.now() - currentState.timestamp,
+        request: {
+          url: currentState.url,
+          method: currentState.method,
+          headers: Object.keys(currentState.headers).length > 0
+            ? currentState.headers
+            : undefined,
+          body: currentState.body,
+        },
+        response: {
+          status: that.status,
+          statusText: that.statusText,
+          headers,
+          data: normalizeXhrResponseBody(that),
+          success: that.status >= 200 && that.status < 300,
+        },
+        error: currentState.error,
+      });
+    };
+
+    const markError = (message: string) => {
+      const currentState = pendingXhrRequests.get(that);
+      if (currentState) {
+        currentState.error = message;
+      }
+    };
+
+    that.addEventListener('error', () => {
+      markError('Network Error');
+    });
+    that.addEventListener('timeout', () => {
+      markError('Timeout');
+    });
+    that.addEventListener('abort', () => {
+      markError('Aborted');
+    });
+    that.addEventListener('loadend', complete);
+
+    return originalXhrSend!.call(that, body);
+  };
+
+  return () => {
+    stopXMLHttpRequest();
+  };
+}
+
+// ─── Cleanup ───────────────────────────────────────────
+
+export function resetInterceptors(): void {
+  if (originalXMLHttpRequest) {
+    xhrRefCount = 1;
+    stopXMLHttpRequest();
+  }
+  xhrRefCount = 0;
+}

package/src/{components → features/thirdPartyLibs}/ThirdPartyLibsTab.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Colors } from '../utils/colors';
-import type { DebugFeatureRenderProps, ThirdPartyLib, ThirdPartyLibAction } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import type { DebugFeatureRenderProps, ThirdPartyLib, ThirdPartyLibAction } from '../../types';
 
-export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>> = ({
-  data,
+export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib[]>> = ({
+  snapshot,
 }) => {
+  const data = snapshot;
   if (data.length === 0) {
     return (
       <View style={styles.container}>

package/src/features/{ThirdPartyLibsFeature.ts → thirdPartyLibs/index.ts}

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
-import { ThirdPartyLibsTab } from '../components/ThirdPartyLibsTab';
-import { NativeDebugLibs } from '../native/NativeDebugLibs';
-import type { DebugFeature, ThirdPartyLib } from '../types';
+import { ThirdPartyLibsTab } from './ThirdPartyLibsTab';
+import { NativeDebugLibs } from './nativeDebugLibs';
+import type { DebugFeature, ThirdPartyLib } from '../../types';
 
 const availableLibs: ThirdPartyLib[] = [
   {
@@ -32,11 +32,11 @@ function getPlatformLibs(): ThirdPartyLib[] {
   );
 }
 
-export const createThirdPartyLibsFeature = (): DebugFeature<ThirdPartyLib> => ({
+export const createThirdPartyLibsFeature = (): DebugFeature<ThirdPartyLib[]> => ({
   name: 'thirdPartyLibs',
   label: 'Debug Libraries',
   renderContent: ThirdPartyLibsTab,
   setup: () => {},
-  getData: () => getPlatformLibs(),
+  getSnapshot: () => getPlatformLibs(),
   cleanup: () => {},
 });

package/src/{components → features/track}/TrackLogTab.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView } from 'react-native';
-import { Colors } from '../utils/colors';
-import { safeStringify } from '../utils/safeStringify';
-import { CollapsibleSection } from './shared/CollapsibleSection';
-import { JsonView } from './shared/JsonView';
-import { CopyButton } from './shared/CopyButton';
-import { LogListScreen } from './shared/LogListScreen';
-import type { DebugFeatureRenderProps, TrackLogEntry } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import { safeStringify } from '../../utils/safeStringify';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import type { DebugFeatureRenderProps, TrackLogEntry } from '../../types';
 
-export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry>> = React.memo(({ data }) => (
+export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry[]>> = React.memo(({ snapshot }) => (
   <LogListScreen
-    data={data}
+    data={snapshot}
     emptyText="No track events"
     renderRow={(item) => (
       <View style={s.cardRow}>

package/src/features/{TrackFeature.ts → track/index.ts}

@@ -1,7 +1,8 @@
-import { TrackLogTab } from '../components/TrackLogTab';
-import type { DebugFeature, TrackLogEntry } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createChannelFeature } from '../utils/createChannelFeature';
+import { TrackLogTab } from './TrackLogTab';
+import type { DebugFeature, TrackLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createChannelFeature } from '../../utils/createChannelFeature';
+import { KEYS } from '../../utils/debugPreferences';
 
 export interface TrackEventData {
   eventName: string;
@@ -21,11 +22,17 @@ export interface TrackFeatureConfig {
   maxLogs?: number;
 }
 
-export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<TrackLogEntry> =>
+export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<TrackLogEntry[]> =>
   createChannelFeature(
     () => trackChannel,
     (payload, id) => ({ ...payload, id }),
-    { name: 'track', label: 'Track', renderContent: TrackLogTab, maxLogs: config?.maxLogs },
+    {
+      name: 'track',
+      label: 'Track',
+      renderContent: TrackLogTab,
+      maxLogs: config?.maxLogs,
+      persist: { storageKey: KEYS.trackLogs, maxPersist: 50 },
+    },
   );
 
 /** Reset module-level state for testing */

package/src/{components → features/zustand}/ZustandLogTab.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView } from 'react-native';
-import { Colors } from '../utils/colors';
-import { safeStringify } from '../utils/safeStringify';
-import { CollapsibleSection } from './shared/CollapsibleSection';
-import { JsonView } from './shared/JsonView';
-import { CopyButton } from './shared/CopyButton';
-import { LogListScreen } from './shared/LogListScreen';
-import type { DebugFeatureRenderProps, ZustandLogEntry } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import { safeStringify } from '../../utils/safeStringify';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import type { DebugFeatureRenderProps, ZustandLogEntry } from '../../types';
 
 const getActionColor = (action: string): string => {
   if (action.includes('add') || action.includes('create')) return '#34C759';
@@ -34,11 +34,11 @@ function findChanges(prev: unknown, next: unknown): string[] {
   return changed;
 }
 
-export const ZustandLogTab: React.FC<DebugFeatureRenderProps<ZustandLogEntry>> = React.memo(({
-  data,
+export const ZustandLogTab: React.FC<DebugFeatureRenderProps<ZustandLogEntry[]>> = React.memo(({
+  snapshot,
 }) => (
   <LogListScreen
-    data={data}
+    data={snapshot}
     emptyText="No Zustand state changes"
     renderRow={(item) => (
       <View style={s.cardRow}>

package/src/features/{ZustandLogFeature.ts → zustand/index.ts}

@@ -1,7 +1,7 @@
-import { ZustandLogTab } from '../components/ZustandLogTab';
-import type { DebugFeature, ZustandLogEntry } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createChannelFeature } from '../utils/createChannelFeature';
+import { ZustandLogTab } from './ZustandLogTab';
+import type { DebugFeature, ZustandLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createChannelFeature } from '../../utils/createChannelFeature';
 
 type ZustandLogPayload = Omit<ZustandLogEntry, 'id'>;
 
@@ -88,7 +88,7 @@ export interface ZustandFeatureConfig {
   maxLogs?: number;
 }
 
-export const createZustandLogFeature = (config?: ZustandFeatureConfig): DebugFeature<ZustandLogEntry> =>
+export const createZustandLogFeature = (config?: ZustandFeatureConfig): DebugFeature<ZustandLogEntry[]> =>
   createChannelFeature(
     () => zustandChannel,
     (payload, id) => ({ ...payload, id }),

package/src/index.ts

@@ -1,28 +1,28 @@
 // Core
 export { DebugToolkit } from './core/DebugToolkit';
 export { DebugToolkitProvider, useDebugToolkit } from './core/DebugToolkitProvider';
-export { DebugView } from './components/DebugView';
-export type { DebugViewProps } from './components/DebugView';
-export { initializeDebugToolkit } from './initialize';
-export type { InitializeOptions, FeatureConfigs } from './initialize';
+export { DebugView } from './ui/DebugView';
+export type { DebugViewProps } from './ui/DebugView';
+export { initializeDebugToolkit } from './core/initialize';
+export type { InitializeOptions, FeatureConfigs } from './core/initialize';
 
 // Feature factories
-export { createNetworkFeature } from './features/NetworkFeature';
-export type { NetworkFeatureConfig, AxiosInstanceLike } from './features/NetworkFeature';
-export { createConsoleLogFeature } from './features/ConsoleLogFeature';
-export type { ConsoleFeatureConfig } from './features/ConsoleLogFeature';
-export { createZustandLogFeature, zustandLogMiddleware, addZustandLog } from './features/ZustandLogFeature';
-export type { ZustandFeatureConfig } from './features/ZustandLogFeature';
-export { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature';
-export type { NavigationFeatureConfig } from './features/NavigationLogFeature';
-export { createTrackFeature, addTrackLog } from './features/TrackFeature';
-export type { TrackFeatureConfig, TrackEventData } from './features/TrackFeature';
-export { createEnvironmentFeature } from './features/EnvironmentFeature';
-export type { EnvironmentFeatureAPI } from './features/EnvironmentFeature';
-export { createClipboardFeature } from './features/ClipboardFeature';
+export { createNetworkFeature } from './features/network';
+export type { NetworkFeatureConfig } from './features/network';
+export { createConsoleLogFeature } from './features/console';
+export type { ConsoleFeatureConfig } from './features/console';
+export { createZustandLogFeature, zustandLogMiddleware, addZustandLog } from './features/zustand';
+export type { ZustandFeatureConfig } from './features/zustand';
+export { createNavigationLogFeature, addNavigationLog } from './features/navigation';
+export type { NavigationFeatureConfig } from './features/navigation';
+export { createTrackFeature, addTrackLog } from './features/track';
+export type { TrackFeatureConfig, TrackEventData } from './features/track';
+export { createEnvironmentFeature } from './features/environment';
+export type { EnvironmentFeatureAPI } from './features/environment';
+export { createClipboardFeature } from './features/clipboard';
 
 // Hooks
-export { useNavigationLogger } from './hooks/useNavigationLogger';
+export { useNavigationLogger } from './features/navigation/useNavigationLogger';
 
 // Utilities
 export { safeStringify } from './utils/safeStringify';
@@ -45,4 +45,4 @@ export type {
 } from './types';
 
 // Default export for convenience
-export { initializeDebugToolkit as default } from './initialize';
+export { initializeDebugToolkit as default } from './core/initialize';

package/src/types/environment.ts

@@ -0,0 +1,11 @@
+export interface EnvironmentConfig {
+  id: string;
+  label: string;
+  host: string;
+  color?: string;
+}
+
+export interface EnvironmentState {
+  environments: EnvironmentConfig[];
+  currentEnvironmentId: string | null;
+}

package/src/types/feature.ts

@@ -0,0 +1,32 @@
+import type { ComponentType } from 'react';
+
+export type DebugFeatureListener = () => void;
+
+export type BuiltInFeatureName =
+  | 'network'
+  | 'console'
+  | 'zustand'
+  | 'navigation'
+  | 'track'
+  | 'environment'
+  | 'clipboard';
+
+export interface DebugFeatureRenderProps<TSnapshot = unknown> {
+  snapshot: TSnapshot;
+  feature: DebugFeature<TSnapshot>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyDebugFeature = DebugFeature<any>;
+
+export interface DebugFeature<TSnapshot = unknown> {
+  name: string;
+  label: string;
+  setup: () => void;
+  getSnapshot: () => TSnapshot;
+  clear?: () => void;
+  cleanup: () => void;
+  subscribe?: (listener: DebugFeatureListener) => () => void;
+  renderContent?: ComponentType<DebugFeatureRenderProps<TSnapshot>>;
+  badge?: () => { label: string; color: string } | null;
+}