react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/features/network/NetworkLogTab.tsx

@@ -0,0 +1,271 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  ScrollView,
+} from 'react-native';
+import { Colors, getMethodColor } from '../../ui/theme/colors';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { fmt } from '../../utils/copyToComputer';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import type { DebugFeatureRenderProps, NetworkLogEntry } from '../../types';
+
+const formatSize = (data: unknown): string => {
+  if (!data) return '';
+  try {
+    const len = (typeof data === 'string' ? data : JSON.stringify(data)).length;
+    if (len < 1024) return `(${len} B)`;
+    if (len < 1024 * 1024) return `(${(len / 1024).toFixed(1)} KB)`;
+    return `(${(len / (1024 * 1024)).toFixed(1)} MB)`;
+  } catch {
+    return '';
+  }
+};
+
+const buildCurl = (log: NetworkLogEntry): string => {
+  let c = `curl -X ${log.request.method} '${log.request.url}'`;
+  if (log.request.headers) {
+    Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${k}: ${v}'`));
+  }
+  if (log.request.body) {
+    c += ` \\\n  -d '${typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body)}'`;
+  }
+  return c;
+};
+
+export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry[]>> = React.memo(({
+  snapshot,
+}) => {
+  const [search, setSearch] = useState('');
+  const data = snapshot;
+
+  const filtered = search
+    ? data.filter(
+        (l) =>
+          l.request.url.toLowerCase().includes(search.toLowerCase()) ||
+          l.request.method.toLowerCase().includes(search.toLowerCase()),
+      )
+    : data;
+
+  const sorted = [...filtered].sort((a, b) => b.timestamp - a.timestamp);
+
+  return (
+    <LogListScreen
+      data={sorted}
+      reversed={false}
+      emptyText="No HTTP requests logged"
+      renderListHeader={() => (
+        <View style={s.searchContainer}>
+          <View style={s.searchBar}>
+            <Text style={s.searchIcon}>⌕</Text>
+            <TextInput
+              style={s.search}
+              placeholder="Search URLs..."
+              placeholderTextColor={Colors.textLight}
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        </View>
+      )}
+      renderRow={(item) => {
+        const ok = !item.error && (!item.response || item.response.status < 400);
+        const sc = ok ? Colors.success : Colors.error;
+        return (
+          <View style={s.cardRow}>
+            <View style={[s.statusIndicator, { backgroundColor: sc }]} />
+            <View style={s.cardBody}>
+              <View style={s.cardMeta}>
+                <Text style={[s.methodText, { color: getMethodColor(item.request.method) }]}>
+                  {item.request.method}
+                </Text>
+                <View style={[s.miniPill, { backgroundColor: sc }]}>
+                  <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
+                </View>
+                {item.duration != null && <Text style={s.durationText}>{item.duration}ms</Text>}
+              </View>
+              <Text style={[s.url, !ok && { color: Colors.error }]} numberOfLines={2}>
+                {item.request.url}
+              </Text>
+              <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+            </View>
+          </View>
+        );
+      }}
+      renderDetailHeader={(log) => {
+        const statusColor = log.error || (log.response && log.response.status >= 400) ? Colors.error : Colors.success;
+        return (
+          <View style={s.detailHeaderCenter}>
+            <View style={[s.methodBadge, { backgroundColor: getMethodColor(log.request.method) }]}>
+              <Text style={s.methodBadgeText}>{log.request.method}</Text>
+            </View>
+            <View style={[s.statusPill, { backgroundColor: statusColor }]}>
+              <Text style={s.statusPillText}>{log.response?.status ?? 'ERR'}</Text>
+            </View>
+            {log.duration != null && <Text style={s.durationText}>{log.duration}ms</Text>}
+          </View>
+        );
+      }}
+      renderDetailBody={(log) => {
+        const curlStr = buildCurl(log);
+        return (
+          <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+            <View style={s.urlCard}>
+              <Text style={s.urlText} selectable numberOfLines={3}>{log.request.url}</Text>
+              <CopyButton text={log.request.url} label="URL" />
+            </View>
+
+            <CollapsibleSection title="Request Body" initiallyExpanded>
+              {log.request.body != null ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.request.body)} label="Request Body" />
+                  <JsonView data={log.request.body} maxHeight={250} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No request body</Text>
+              )}
+            </CollapsibleSection>
+
+            <CollapsibleSection title="Request Headers">
+              {log.request.headers ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.request.headers)} label="Request Headers" />
+                  <JsonView data={log.request.headers} maxHeight={200} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No headers</Text>
+              )}
+            </CollapsibleSection>
+
+            <CollapsibleSection title={`Response ${formatSize(log.response?.data)}`} initiallyExpanded>
+              {log.error && (
+                <View style={s.errorBox}>
+                  <Text style={s.errorIcon}>⚠</Text>
+                  <Text style={s.errorText}>{log.error}</Text>
+                </View>
+              )}
+              {log.response?.data != null ? (
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.response.data)} label="Response Body" />
+                  <JsonView data={log.response.data} maxHeight={300} />
+                </View>
+              ) : (
+                <Text style={s.emptySection}>No response body</Text>
+              )}
+            </CollapsibleSection>
+
+            {log.response?.headers && (
+              <CollapsibleSection title="Response Headers">
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={fmt(log.response.headers)} label="Response Headers" />
+                  <JsonView data={log.response.headers} maxHeight={200} />
+                </View>
+              </CollapsibleSection>
+            )}
+
+            <CollapsibleSection title="cURL">
+              <View style={s.sectionWithCopy}>
+                <CopyButton text={curlStr} label="cURL" />
+                <View style={s.codeBlock}>
+                  <Text style={s.codeText} selectable>{curlStr}</Text>
+                </View>
+              </View>
+            </CollapsibleSection>
+          </ScrollView>
+        );
+      }}
+    />
+  );
+});
+
+const s = StyleSheet.create({
+  // Search
+  searchContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 6,
+    backgroundColor: Colors.background,
+  },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    height: 38,
+  },
+  searchIcon: { fontSize: 16, color: Colors.textLight, marginRight: 6 },
+  search: {
+    flex: 1,
+    fontSize: 14,
+    color: Colors.text,
+    padding: 0,
+  },
+
+  // Row
+  cardRow: { flexDirection: 'row', padding: 14 },
+  statusIndicator: { width: 3, borderRadius: 2, marginRight: 12 },
+  cardBody: { flex: 1 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', marginBottom: 6, gap: 6 },
+  methodText: { fontSize: 13, fontWeight: '700' },
+  miniPill: { paddingHorizontal: 7, paddingVertical: 2, borderRadius: 4 },
+  miniPillText: { color: '#FFF', fontSize: 10, fontWeight: '700' },
+  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
+  url: { fontSize: 13, color: Colors.textSecondary, marginBottom: 4, lineHeight: 18 },
+  time: { fontSize: 11, color: Colors.textLight },
+
+  // Detail header
+  detailHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1,
+  },
+  methodBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  methodBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  statusPill: { paddingHorizontal: 9, paddingVertical: 3, borderRadius: 6 },
+  statusPillText: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+
+  // Detail body
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+  urlCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+    gap: 8,
+  },
+  urlText: { flex: 1, fontSize: 13, color: Colors.textSecondary, lineHeight: 18 },
+  sectionWithCopy: { gap: 8 },
+  emptySection: { fontSize: 13, color: Colors.textLight, paddingVertical: 4 },
+  errorBox: {
+    backgroundColor: 'rgba(255,59,48,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,59,48,0.15)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  errorIcon: { fontSize: 14, color: Colors.error },
+  errorText: { flex: 1, fontSize: 13, color: Colors.error, lineHeight: 18 },
+  codeBlock: {
+    backgroundColor: '#1E1E2E',
+    borderRadius: 12,
+    padding: 12,
+  },
+  codeText: { fontFamily: 'Courier', fontSize: 12, color: '#CDD6F4', lineHeight: 18 },
+});

package/src/features/network/index.ts

@@ -0,0 +1,113 @@
+import { NetworkLogTab } from './NetworkLogTab';
+
+export type { AxiosInstanceLike } from './networkInterceptor';
+import type { DebugFeature, NetworkLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createPersistedObservableStore } from '../../utils/createPersistedObservableStore';
+import { KEYS } from '../../utils/debugPreferences';
+import { urlRewriter } from '../../utils/urlRewriterRegistry';
+import type { AxiosInstanceLike } from './networkInterceptor';
+import {
+  startFetch,
+  startAxios,
+  resetInterceptors,
+} from './networkInterceptor';
+
+type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
+
+// ─── Utilities ────────────────────────────────────────
+
+function isUrlBlacklisted(
+  url: string,
+  blacklist: Array<string | RegExp>,
+): boolean {
+  if (!url) {
+    return false;
+  }
+  return blacklist.some((pattern) =>
+    pattern instanceof RegExp ? pattern.test(url) : url.includes(pattern),
+  );
+}
+
+// ─── Channel (shared pub-sub backbone) ─────────────────
+
+let networkChannel = createEventChannel<NetworkLogPayload>();
+
+function emitNetworkLog(entry: NetworkLogPayload): void {
+  networkChannel.emit(entry);
+}
+
+// ─── Feature factory ──────────────────────────────────
+
+const DEFAULT_MAX_LOGS = 200;
+
+export interface NetworkFeatureConfig {
+  /** Maximum number of network logs to keep (default: 200) */
+  maxLogs?: number;
+  /** URLs to filter out from logging */
+  blacklist?: Array<string | RegExp>;
+  /** Axios instance to intercept. Pass your axios.create() instance to capture axios requests. */
+  axiosInstance?: AxiosInstanceLike;
+}
+
+export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeature<NetworkLogEntry[]> => {
+  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
+  const blacklist: Array<string | RegExp> = config?.blacklist ? [...config.blacklist] : [];
+  const logStore = createPersistedObservableStore<NetworkLogEntry>({
+    storageKey: KEYS.networkLogs,
+    maxPersist: 30,
+  });
+  let initialized = false;
+  let unsubscribeLogs: (() => void) | null = null;
+  let stopFetchFn: (() => void) | null = null;
+  let stopAxiosFn: (() => void) | null = null;
+
+  const handleLog = (entry: NetworkLogPayload) => {
+    if (isUrlBlacklisted(entry.request.url, blacklist)) {
+      return;
+    }
+    logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
+  };
+
+  return {
+    name: 'network',
+    label: 'Network',
+    renderContent: NetworkLogTab,
+    setup: () => {
+      if (initialized) {
+        return;
+      }
+      unsubscribeLogs = networkChannel.subscribe(handleLog);
+      stopFetchFn = startFetch(emitNetworkLog);
+      if (config?.axiosInstance) {
+        stopAxiosFn = startAxios(config.axiosInstance, emitNetworkLog);
+      }
+      initialized = true;
+    },
+    getSnapshot: () => logStore.getData(),
+    clear: () => {
+      logStore.clear();
+    },
+    cleanup: () => {
+      if (!initialized) {
+        return;
+      }
+      urlRewriter.set(null);
+      unsubscribeLogs?.();
+      unsubscribeLogs = null;
+      stopFetchFn?.();
+      stopFetchFn = null;
+      stopAxiosFn?.();
+      stopAxiosFn = null;
+      logStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener) => logStore.subscribe(listener),
+  };
+};
+
+/** Reset module-level state for testing */
+export function _resetNetworkForTesting(): void {
+  networkChannel = createEventChannel<NetworkLogPayload>();
+  resetInterceptors();
+}

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;
+}