react-native-debug-toolkit 2.1.0 → 2.2.0

package/src/features/network/networkInterceptor.ts

@@ -0,0 +1,311 @@
+import type { NetworkLogEntry } from '../../types';
+import { urlRewriter } from '../../utils/urlRewriterRegistry';
+
+type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
+
+// Intercepts fetch requests and optionally axios via interceptors.
+// Axios response data is captured directly through interceptor callbacks,
+// avoiding the unreliable XHR response interception in React Native.
+
+// ─── Minimal axios interface (no hard dependency) ──────
+
+export interface AxiosInstanceLike {
+  interceptors: {
+    request: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      use(onFulfilled?: (config: any) => any, onRejected?: (error: any) => any): number;
+      eject(id: number): void;
+    };
+    response: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      use(onFulfilled?: (response: any) => any, onRejected?: (error: any) => any): number;
+      eject(id: number): void;
+    };
+  };
+}
+
+// ─── Shared helpers ────────────────────────────────────
+
+function rewriteUrl(url: string): string {
+  const rewriter = urlRewriter.get();
+  if (!rewriter) {
+    return url;
+  }
+  try {
+    return rewriter(url);
+  } catch {
+    return url;
+  }
+}
+
+function headersToObject(
+  headers: Record<string, string> | Headers | undefined,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  if (!headers) {
+    return result;
+  }
+  if (typeof (headers as Headers).forEach === 'function') {
+    (headers as Headers).forEach((value: string, key: string) => {
+      result[key] = value;
+    });
+    return result;
+  }
+  Object.keys(headers).forEach((key) => {
+    result[key] = (headers as Record<string, string>)[key]!;
+  });
+  return result;
+}
+
+function getRequestSnapshot(
+  input: unknown,
+  init?: RequestInit,
+): NetworkLogEntry['request'] {
+  const request = input instanceof Request ? input : null;
+  return {
+    url: typeof input === 'string' ? input : request?.url ?? String(input),
+    method: (init?.method || request?.method || 'GET').toUpperCase(),
+    headers: init?.headers
+      ? headersToObject(init.headers as Record<string, string> | Headers)
+      : request?.headers
+        ? headersToObject(request.headers)
+        : undefined,
+    body: init?.body,
+  };
+}
+
+async function parseResponseBody(response: Response): Promise<unknown> {
+  const raw = await response.clone().text();
+  if (!raw) {
+    return undefined;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+
+function normalizeAxiosHeaders(
+  headers: unknown,
+): Record<string, string> | undefined {
+  if (!headers || typeof headers !== 'object') {
+    return undefined;
+  }
+  // AxiosHeaders instance
+  if (typeof (headers as Record<string, unknown>).forEach === 'function') {
+    const result: Record<string, string> = {};
+    (headers as { forEach(fn: (value: string, key: string) => void): void }).forEach(
+      (value, key) => {
+        result[key] = value;
+      },
+    );
+    return Object.keys(result).length > 0 ? result : undefined;
+  }
+  // Plain object
+  const result: Record<string, string> = {};
+  const obj = headers as Record<string, unknown>;
+  for (const key of Object.keys(obj)) {
+    const val = obj[key];
+    if (typeof val === 'string') {
+      result[key] = val;
+    }
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+function buildFullUrl(config: {
+  baseURL?: string;
+  url?: string;
+}): string {
+  const base = config.baseURL ?? '';
+  const url = config.url ?? '';
+  if (!base || url.startsWith('http')) {
+    return url;
+  }
+  return base.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
+}
+
+// ─── Fetch interceptor ─────────────────────────────────
+
+let originalFetch: typeof globalThis.fetch | null = null;
+let fetchRefCount = 0;
+
+function stopFetch(): void {
+  fetchRefCount = Math.max(0, fetchRefCount - 1);
+  if (fetchRefCount === 0 && originalFetch) {
+    globalThis.fetch = originalFetch;
+    originalFetch = null;
+  }
+}
+
+export function startFetch(emit: (entry: NetworkLogPayload) => void): () => void {
+  fetchRefCount += 1;
+  if (originalFetch) {
+    return () => {
+      stopFetch();
+    };
+  }
+
+  originalFetch = globalThis.fetch;
+
+  globalThis.fetch = async function interceptedFetch(
+    input: Parameters<typeof fetch>[0],
+    init?: Parameters<typeof fetch>[1],
+  ) {
+    const startTime = Date.now();
+
+    let rewrittenInput: typeof input = input;
+    if (urlRewriter.get()) {
+      if (typeof input === 'string') {
+        rewrittenInput = rewriteUrl(input);
+      } else if (input instanceof Request) {
+        rewrittenInput = new Request(rewriteUrl(input.url), input as RequestInit);
+      }
+    }
+
+    const request = getRequestSnapshot(rewrittenInput, init);
+
+    try {
+      const response = await originalFetch!.call(globalThis, rewrittenInput, init);
+      const duration = Date.now() - startTime;
+
+      try {
+        const data = await parseResponseBody(response);
+        emit({
+          timestamp: startTime,
+          duration,
+          request,
+          response: { status: response.status, statusText: response.statusText, data },
+        });
+      } catch {
+        emit({
+          timestamp: startTime,
+          duration,
+          request,
+          response: { status: response.status, statusText: response.statusText },
+        });
+      }
+
+      return response;
+    } catch (error) {
+      emit({
+        timestamp: startTime,
+        duration: Date.now() - startTime,
+        request,
+        error: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
+    }
+  };
+
+  return () => {
+    stopFetch();
+  };
+}
+
+// ─── Axios interceptor ─────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pendingAxiosRequests = new WeakMap<any, { startTime: number; timestamp: number }>();
+
+export function startAxios(
+  axiosInstance: AxiosInstanceLike,
+  emit: (entry: NetworkLogPayload) => void,
+): () => void {
+  const requestInterceptorId = axiosInstance.interceptors.request.use(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (config: any) => {
+      const now = Date.now();
+      pendingAxiosRequests.set(config, { startTime: now, timestamp: now });
+
+      if (urlRewriter.get() && config.url) {
+        const fullUrl = buildFullUrl(config);
+        const rewritten = rewriteUrl(fullUrl);
+        if (rewritten !== fullUrl) {
+          config.url = rewritten;
+          if (config.baseURL) {
+            config.baseURL = undefined;
+          }
+        }
+      }
+
+      return config;
+    },
+  );
+
+  const responseInterceptorId = axiosInstance.interceptors.response.use(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (response: any) => {
+      const config = response.config;
+      const pending = config ? pendingAxiosRequests.get(config) : undefined;
+      const startTime = pending?.timestamp ?? Date.now();
+
+      emit({
+        timestamp: startTime,
+        duration: Date.now() - startTime,
+        request: {
+          url: buildFullUrl(config),
+          method: (config?.method ?? 'GET').toUpperCase(),
+          headers: normalizeAxiosHeaders(config?.headers),
+          body: config?.data,
+        },
+        response: {
+          status: response.status,
+          statusText: response.statusText,
+          headers: normalizeAxiosHeaders(response.headers),
+          data: response.data,
+          success: response.status >= 200 && response.status < 300,
+        },
+      });
+
+      return response;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (error: any) => {
+      const config = error.config;
+      const pending = config ? pendingAxiosRequests.get(config) : undefined;
+      const startTime = pending?.timestamp ?? Date.now();
+
+      if (config) {
+        emit({
+          timestamp: startTime,
+          duration: Date.now() - startTime,
+          request: {
+            url: buildFullUrl(config),
+            method: (config.method ?? 'GET').toUpperCase(),
+            headers: normalizeAxiosHeaders(config.headers),
+            body: config.data,
+          },
+          response: error.response
+            ? {
+                status: error.response.status,
+                statusText: error.response.statusText,
+                headers: normalizeAxiosHeaders(error.response.headers),
+                data: error.response.data,
+                success: false,
+              }
+            : undefined,
+          error: error.message ?? String(error),
+        });
+      }
+
+      return Promise.reject(error);
+    },
+  );
+
+  return () => {
+    axiosInstance.interceptors.request.eject(requestInterceptorId);
+    axiosInstance.interceptors.response.eject(responseInterceptorId);
+  };
+}
+
+// ─── Cleanup ───────────────────────────────────────────
+
+export function resetInterceptors(): void {
+  if (originalFetch) {
+    globalThis.fetch = originalFetch;
+    originalFetch = null;
+  }
+  fetchRefCount = 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, AxiosInstanceLike } 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;
+}