react-native-debug-toolkit 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A dev-only floating debug panel for React Native with network, console, Zustand, navigation, and event logs",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -34,11 +34,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zcj0808/react-native-debug-toolkit"
+    "url": "https://github.com/superzcj/react-native-debug-toolkit"
   },
-  "homepage": "https://github.com/zcj0808/react-native-debug-toolkit#readme",
+  "homepage": "https://github.com/superzcj/react-native-debug-toolkit#readme",
   "bugs": {
-    "url": "https://github.com/zcj0808/react-native-debug-toolkit/issues"
+    "url": "https://github.com/superzcj/react-native-debug-toolkit/issues"
   },
   "peerDependencies": {
     "@react-native-clipboard/clipboard": ">=1.0.0",

package/src/features/network/index.ts

@@ -1,15 +1,12 @@
 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,
+  startXMLHttpRequest,
   resetInterceptors,
 } from './networkInterceptor';
 
@@ -46,8 +43,6 @@ export interface NetworkFeatureConfig {
   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[]> => {
@@ -59,8 +54,7 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
   });
   let initialized = false;
   let unsubscribeLogs: (() => void) | null = null;
-  let stopFetchFn: (() => void) | null = null;
-  let stopAxiosFn: (() => void) | null = null;
+  let stopXhrFn: (() => void) | null = null;
 
   const handleLog = (entry: NetworkLogPayload) => {
     if (isUrlBlacklisted(entry.request.url, blacklist)) {
@@ -78,10 +72,7 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
         return;
       }
       unsubscribeLogs = networkChannel.subscribe(handleLog);
-      stopFetchFn = startFetch(emitNetworkLog);
-      if (config?.axiosInstance) {
-        stopAxiosFn = startAxios(config.axiosInstance, emitNetworkLog);
-      }
+      stopXhrFn = startXMLHttpRequest(emitNetworkLog);
       initialized = true;
     },
     getSnapshot: () => logStore.getData(),
@@ -95,10 +86,8 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
       urlRewriter.set(null);
       unsubscribeLogs?.();
       unsubscribeLogs = null;
-      stopFetchFn?.();
-      stopFetchFn = null;
-      stopAxiosFn?.();
-      stopAxiosFn = null;
+      stopXhrFn?.();
+      stopXhrFn = null;
       logStore.clear();
       initialized = false;
     },

package/src/features/network/networkInterceptor.ts

@@ -3,26 +3,8 @@ 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;
-    };
-  };
-}
+// Intercepts React Native's XMLHttpRequest transport layer.
+// RN fetch and axios (default adapter) both go through XHR — one hook captures everything.
 
 // ─── Shared helpers ────────────────────────────────────
 
@@ -38,47 +20,31 @@ function rewriteUrl(url: string): string {
   }
 }
 
-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;
+function parseRawHeaders(rawHeaders: string | null | undefined): Record<string, string> | undefined {
+  if (!rawHeaders) {
+    return undefined;
   }
-  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,
-  };
+  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;
 }
 
-async function parseResponseBody(response: Response): Promise<unknown> {
-  const raw = await response.clone().text();
-  if (!raw) {
-    return undefined;
-  }
+function parseBodyText(raw: string): unknown {
+  if (!raw) return undefined;
   try {
     return JSON.parse(raw);
   } catch {
@@ -86,226 +52,235 @@ async function parseResponseBody(response: Response): Promise<unknown> {
   }
 }
 
-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;
+function normalizeXhrResponseBody(xhr: XMLHttpRequestLike): unknown {
+  const text = safeRead(() => xhr.responseText);
+  if (typeof text === 'string' && text) {
+    return parseBodyText(text);
   }
-  // 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;
-    }
+
+  const response = safeRead(() => xhr.response);
+  if (response != null) {
+    return response;
   }
-  return Object.keys(result).length > 0 ? result : undefined;
+
+  return undefined;
 }
 
-function buildFullUrl(config: {
-  baseURL?: string;
-  url?: string;
-}): string {
-  const base = config.baseURL ?? '';
-  const url = config.url ?? '';
-  if (!base || url.startsWith('http')) {
-    return url;
+// ─── 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;
   }
-  return base.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
 }
 
-// ─── Fetch interceptor ─────────────────────────────────
+function getGlobalXMLHttpRequest(): XMLHttpRequestConstructorLike | undefined {
+  return (globalThis as { XMLHttpRequest?: XMLHttpRequestConstructorLike }).XMLHttpRequest;
+}
 
-let originalFetch: typeof globalThis.fetch | null = null;
-let fetchRefCount = 0;
+function getXhrResponseHeaders(xhr: XMLHttpRequestLike): Record<string, string> | undefined {
+  const rawHeaders = safeRead(() => xhr.getAllResponseHeaders?.());
+  const parsedHeaders = parseRawHeaders(rawHeaders);
+  if (parsedHeaders) {
+    return parsedHeaders;
+  }
 
-function stopFetch(): void {
-  fetchRefCount = Math.max(0, fetchRefCount - 1);
-  if (fetchRefCount === 0 && originalFetch) {
-    globalThis.fetch = originalFetch;
-    originalFetch = null;
+  const headers = xhr.responseHeaders;
+  if (!headers) {
+    return undefined;
   }
+  return Object.keys(headers).length > 0 ? headers : undefined;
 }
 
-export function startFetch(emit: (entry: NetworkLogPayload) => void): () => void {
-  fetchRefCount += 1;
-  if (originalFetch) {
-    return () => {
-      stopFetch();
-    };
+function stopXMLHttpRequest(): void {
+  xhrRefCount = Math.max(0, xhrRefCount - 1);
+  if (xhrRefCount > 0 || !originalXMLHttpRequest) {
+    return;
   }
 
-  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 CurrentXMLHttpRequest = getGlobalXMLHttpRequest();
+  if (CurrentXMLHttpRequest) {
+    if (originalXhrOpen) {
+      CurrentXMLHttpRequest.prototype.open = originalXhrOpen;
     }
-
-    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;
+    if (originalXhrSend) {
+      CurrentXMLHttpRequest.prototype.send = originalXhrSend;
     }
-  };
+    if (originalXhrSetRequestHeader) {
+      CurrentXMLHttpRequest.prototype.setRequestHeader = originalXhrSetRequestHeader;
+    }
+  }
 
-  return () => {
-    stopFetch();
-  };
+  originalXMLHttpRequest = null;
+  originalXhrOpen = null;
+  originalXhrSend = null;
+  originalXhrSetRequestHeader = null;
 }
 
-// ─── 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,
+export function startXMLHttpRequest(
   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;
-          }
-        }
-      }
+  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);
+  };
 
-      return config;
-    },
-  );
+  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);
+  };
 
-  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();
+  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: startTime,
-        duration: Date.now() - startTime,
+        timestamp: currentState.timestamp,
+        duration: Date.now() - currentState.timestamp,
         request: {
-          url: buildFullUrl(config),
-          method: (config?.method ?? 'GET').toUpperCase(),
-          headers: normalizeAxiosHeaders(config?.headers),
-          body: config?.data,
+          url: currentState.url,
+          method: currentState.method,
+          headers: Object.keys(currentState.headers).length > 0
+            ? currentState.headers
+            : undefined,
+          body: currentState.body,
         },
         response: {
-          status: response.status,
-          statusText: response.statusText,
-          headers: normalizeAxiosHeaders(response.headers),
-          data: response.data,
-          success: response.status >= 200 && response.status < 300,
+          status: that.status,
+          statusText: that.statusText,
+          headers,
+          data: normalizeXhrResponseBody(that),
+          success: that.status >= 200 && that.status < 300,
         },
+        error: currentState.error,
       });
+    };
 
-      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),
-        });
+    const markError = (message: string) => {
+      const currentState = pendingXhrRequests.get(that);
+      if (currentState) {
+        currentState.error = message;
       }
+    };
 
-      return Promise.reject(error);
-    },
-  );
+    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 () => {
-    axiosInstance.interceptors.request.eject(requestInterceptorId);
-    axiosInstance.interceptors.response.eject(responseInterceptorId);
+    stopXMLHttpRequest();
   };
 }
 
 // ─── Cleanup ───────────────────────────────────────────
 
 export function resetInterceptors(): void {
-  if (originalFetch) {
-    globalThis.fetch = originalFetch;
-    originalFetch = null;
+  if (originalXMLHttpRequest) {
+    xhrRefCount = 1;
+    stopXMLHttpRequest();
   }
-  fetchRefCount = 0;
+  xhrRefCount = 0;
 }

package/src/index.ts

@@ -8,7 +8,7 @@ export type { InitializeOptions, FeatureConfigs } from './core/initialize';
 
 // Feature factories
 export { createNetworkFeature } from './features/network';
-export type { NetworkFeatureConfig, AxiosInstanceLike } 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';