react-native-debug-toolkit 2.0.0 → 2.1.0

package/src/features/NetworkFeature.ts

@@ -2,356 +2,18 @@ import { NetworkLogTab } from '../components/NetworkLogTab';
 import type { DebugFeature, NetworkLogEntry } from '../types';
 import { createEventChannel } from '../utils/createEventChannel';
 import { createObservableStore } from '../utils/createObservableStore';
+import { urlRewriter } from '../utils/urlRewriterRegistry';
+import {
+  startFetch,
+  startXMLHttpRequest,
+  setupAxios,
+  resetInterceptors,
+} from '../interceptors/networkInterceptor';
+import type { AxiosInstanceLike } from '../interceptors/networkInterceptor';
 
 type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
 
-interface AxiosInterceptorManager {
-  use: (onFulfilled: unknown, onRejected?: unknown) => number | void;
-  eject?: (id: number) => void;
-}
-
-interface AxiosRequestConfigLike {
-  baseURL?: string;
-  url?: string;
-  method?: string;
-  headers?: Record<string, string>;
-  data?: unknown;
-  params?: unknown;
-}
-
-interface AxiosResponseLike {
-  status: number;
-  statusText: string;
-  headers?: Record<string, string>;
-  data?: unknown;
-  config: AxiosRequestConfigLike;
-}
-
-interface AxiosErrorLike {
-  message: string;
-  config?: AxiosRequestConfigLike;
-}
-
-interface AxiosInstanceLike {
-  interceptors: {
-    request: AxiosInterceptorManager;
-    response: AxiosInterceptorManager;
-  };
-}
-
-interface AxiosRegistration {
-  refCount: number;
-  requestId?: number;
-  responseId?: number;
-}
-
-const DEFAULT_MAX_LOGS = 200;
-const networkChannel = createEventChannel<NetworkLogPayload>();
-const pendingAxiosRequests = new Map<string, { startTime: number; timestamp: number }>();
-const axiosRegistrations = new WeakMap<AxiosInstanceLike, AxiosRegistration>();
-
-let originalFetch: typeof globalThis.fetch | null = null;
-let fetchInterceptorRefCount = 0;
-let urlRewriter: ((url: string) => string) | null = null;
-
-export function setUrlRewriter(rewriter: ((url: string) => string) | null): void {
-  urlRewriter = rewriter;
-}
-
-function rewriteUrl(url: string): string {
-  if (!urlRewriter) return url;
-  try {
-    return urlRewriter(url);
-  } catch {
-    return url;
-  }
-}
-
-function emitNetworkLog(entry: NetworkLogPayload): void {
-  networkChannel.emit(entry);
-}
-
-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 stopFetchInterceptor(): void {
-  fetchInterceptorRefCount = Math.max(0, fetchInterceptorRefCount - 1);
-
-  if (fetchInterceptorRefCount === 0 && originalFetch) {
-    globalThis.fetch = originalFetch;
-    originalFetch = null;
-  }
-}
-
-function startFetchInterceptor(): () => void {
-  fetchInterceptorRefCount += 1;
-
-  if (originalFetch) {
-    return () => {
-      stopFetchInterceptor();
-    };
-  }
-
-  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) {
-      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);
-        emitNetworkLog({
-          timestamp: startTime,
-          duration,
-          request,
-          response: {
-            status: response.status,
-            statusText: response.statusText,
-            data,
-          },
-        });
-      } catch {
-        emitNetworkLog({
-          timestamp: startTime,
-          duration,
-          request,
-          response: {
-            status: response.status,
-            statusText: response.statusText,
-          },
-        });
-      }
-
-      return response;
-    } catch (error) {
-      emitNetworkLog({
-        timestamp: startTime,
-        duration: Date.now() - startTime,
-        request,
-        error: error instanceof Error ? error.message : String(error),
-      });
-      throw error;
-    }
-  };
-
-  return () => {
-    stopFetchInterceptor();
-  };
-}
-
-function teardownAxiosInterceptors(axiosInstance: AxiosInstanceLike): void {
-  const registration = axiosRegistrations.get(axiosInstance);
-
-  if (!registration) {
-    return;
-  }
-
-  registration.refCount -= 1;
-
-  if (registration.refCount > 0) {
-    return;
-  }
-
-  if (typeof registration.requestId === 'number') {
-    axiosInstance.interceptors.request.eject?.(registration.requestId);
-  }
-
-  if (typeof registration.responseId === 'number') {
-    axiosInstance.interceptors.response.eject?.(registration.responseId);
-  }
-
-  axiosRegistrations.delete(axiosInstance);
-}
-
-function setupAxiosInterceptorsInternal(
-  axiosInstance: AxiosInstanceLike,
-): () => void {
-  const existingRegistration = axiosRegistrations.get(axiosInstance);
-
-  if (existingRegistration) {
-    existingRegistration.refCount += 1;
-    return () => {
-      teardownAxiosInterceptors(axiosInstance);
-    };
-  }
-
-  const requestId = axiosInstance.interceptors.request.use(
-    (config: AxiosRequestConfigLike) => {
-      // Rewrite URL if rewriter is set
-      if (urlRewriter && config.url) {
-        const fullUrl = config.baseURL
-          ? `${config.baseURL}${config.url}`
-          : config.url;
-        const rewritten = rewriteUrl(fullUrl);
-        if (rewritten !== fullUrl) {
-          if (config.baseURL && rewritten.startsWith(config.baseURL)) {
-            config.url = rewritten.slice(config.baseURL.length);
-          } else {
-            config.baseURL = '';
-            config.url = rewritten;
-          }
-        }
-      }
-
-      if (!config.headers) {
-        config.headers = {};
-      }
-
-      if (!config.headers['X-Request-Id']) {
-        config.headers['X-Request-Id'] =
-          Date.now().toString() + Math.random().toString(36).substring(2, 10);
-      }
-
-      const trackId = config.headers['X-Request-Id'] as string;
-
-      pendingAxiosRequests.set(trackId, {
-        startTime: Date.now(),
-        timestamp: Date.now(),
-      });
-
-      return config;
-    },
-    (error: unknown) => Promise.reject(error),
-  );
-
-  const responseId = axiosInstance.interceptors.response.use(
-    (response: AxiosResponseLike) => {
-      const trackId = response.config?.headers?.['X-Request-Id'] as string;
-      const pending = pendingAxiosRequests.get(trackId);
-
-      if (pending) {
-        emitNetworkLog({
-          timestamp: pending.timestamp,
-          duration: Date.now() - pending.startTime,
-          request: {
-            url: `${response.config.baseURL || ''}${response.config.url}`,
-            method: (response.config.method || 'GET').toUpperCase(),
-            headers: response.config.headers,
-            body: response.config.data || response.config.params,
-          },
-          response: {
-            status: response.status,
-            statusText: response.statusText,
-            headers: response.headers,
-            data: response.data,
-            success:
-              response.data && typeof response.data === 'object'
-                ? (response.data as Record<string, unknown>).success !== false
-                : response.status >= 200 && response.status < 300,
-          },
-        });
-
-        pendingAxiosRequests.delete(trackId);
-      }
-
-      return response;
-    },
-    (error: AxiosErrorLike) => {
-      if (error.config) {
-        const trackId = error.config.headers?.['X-Request-Id'] as string;
-        const pending = pendingAxiosRequests.get(trackId);
-
-        emitNetworkLog({
-          timestamp: pending ? pending.timestamp : Date.now(),
-          duration: pending ? Date.now() - pending.startTime : undefined,
-          request: {
-            url: `${error.config.baseURL || ''}${error.config.url}`,
-            method: (error.config.method || 'GET').toUpperCase(),
-            headers: error.config.headers,
-            body: error.config.data || error.config.params,
-          },
-          error: error.message,
-        });
-
-        pendingAxiosRequests.delete(trackId);
-      }
-
-      return Promise.reject(error);
-    },
-  );
-
-  axiosRegistrations.set(axiosInstance, {
-    refCount: 1,
-    requestId: typeof requestId === 'number' ? requestId : undefined,
-    responseId: typeof responseId === 'number' ? responseId : undefined,
-  });
-
-  return () => {
-    teardownAxiosInterceptors(axiosInstance);
-  };
-}
+// ─── Utilities ────────────────────────────────────────
 
 function isUrlBlacklisted(
   url: string,
@@ -360,20 +22,25 @@ function isUrlBlacklisted(
   if (!url) {
     return false;
   }
-
   return blacklist.some((pattern) =>
     pattern instanceof RegExp ? pattern.test(url) : url.includes(pattern),
   );
 }
 
-export interface NetworkFeatureAPI extends DebugFeature<NetworkLogEntry> {
-  setupAxiosInterceptors: (axiosInstance: AxiosInstanceLike) => () => void;
-  addUrlToBlacklist: (pattern: string | RegExp) => void;
-  removeUrlFromBlacklist: (pattern: string | RegExp) => void;
-  clearBlacklist: () => void;
-  getBlacklist: () => Array<string | RegExp>;
+// ─── 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 type { AxiosInstanceLike };
+
 export interface NetworkFeatureConfig {
   /** Maximum number of network logs to keep (default: 200) */
   maxLogs?: number;
@@ -381,7 +48,9 @@ export interface NetworkFeatureConfig {
   blacklist?: Array<string | RegExp>;
 }
 
-export const createNetworkFeature = (config?: NetworkFeatureConfig): NetworkFeatureAPI => {
+export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeature<NetworkLogEntry> & {
+  setupAxiosInterceptors: (axiosInstance: AxiosInstanceLike) => () => void;
+} => {
   const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
   const blacklist: Array<string | RegExp> = config?.blacklist ? [...config.blacklist] : [];
   const logStore = createObservableStore<NetworkLogEntry>();
@@ -390,25 +59,14 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): NetworkFeat
   let nextId = 0;
   let initialized = false;
   let unsubscribeLogs: (() => void) | null = null;
-  let stopFetch: (() => void) | null = null;
+  let stopFetchFn: (() => void) | null = null;
+  let stopXMLHttpRequestFn: (() => void) | null = null;
 
   const handleLog = (entry: NetworkLogPayload) => {
     if (isUrlBlacklisted(entry.request.url, blacklist)) {
       return;
     }
-
-    logStore.push(
-      {
-        ...entry,
-        id: String(nextId++),
-      },
-      maxLogs,
-    );
-  };
-
-  const cleanupAxiosRegistrations = () => {
-    axiosCleanupMap.forEach((cleanup) => cleanup());
-    axiosCleanupMap.clear();
+    logStore.push({ ...entry, id: String(nextId++) }, maxLogs);
   };
 
   return {
@@ -419,9 +77,9 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): NetworkFeat
       if (initialized) {
         return;
       }
-
       unsubscribeLogs = networkChannel.subscribe(handleLog);
-      stopFetch = startFetchInterceptor();
+      stopFetchFn = startFetch(emitNetworkLog);
+      stopXMLHttpRequestFn = startXMLHttpRequest(emitNetworkLog);
       initialized = true;
     },
     getData: () => logStore.getData(),
@@ -432,57 +90,37 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): NetworkFeat
       if (!initialized) {
         return;
       }
-
-      setUrlRewriter(null);
+      urlRewriter.set(null);
       unsubscribeLogs?.();
       unsubscribeLogs = null;
-      stopFetch?.();
-      stopFetch = null;
-      cleanupAxiosRegistrations();
+      stopFetchFn?.();
+      stopFetchFn = null;
+      stopXMLHttpRequestFn?.();
+      stopXMLHttpRequestFn = null;
+      axiosCleanupMap.forEach((c) => c());
+      axiosCleanupMap.clear();
       logStore.clear();
       initialized = false;
     },
     subscribe: (listener) => logStore.subscribe(listener),
     setupAxiosInterceptors: (axiosInstance) => {
       const existingCleanup = axiosCleanupMap.get(axiosInstance);
-
       if (existingCleanup) {
         return existingCleanup;
       }
-
-      const cleanup = setupAxiosInterceptorsInternal(axiosInstance);
+      const cleanup = setupAxios(axiosInstance, emitNetworkLog);
       const trackedCleanup = () => {
         cleanup();
         axiosCleanupMap.delete(axiosInstance);
       };
-
       axiosCleanupMap.set(axiosInstance, trackedCleanup);
       return trackedCleanup;
     },
-    addUrlToBlacklist: (pattern) => {
-      const alreadyExists = blacklist.some((item) =>
-        item instanceof RegExp && pattern instanceof RegExp
-          ? item.toString() === pattern.toString()
-          : item === pattern,
-      );
-
-      if (!alreadyExists) {
-        blacklist.push(pattern);
-      }
-    },
-    removeUrlFromBlacklist: (pattern) => {
-      const nextBlacklist = blacklist.filter((item) =>
-        item instanceof RegExp && pattern instanceof RegExp
-          ? item.toString() !== pattern.toString()
-          : item !== pattern,
-      );
-
-      blacklist.length = 0;
-      blacklist.push(...nextBlacklist);
-    },
-    clearBlacklist: () => {
-      blacklist.length = 0;
-    },
-    getBlacklist: () => [...blacklist],
   };
 };
+
+/** Reset module-level state for testing */
+export function _resetNetworkForTesting(): void {
+  networkChannel = createEventChannel<NetworkLogPayload>();
+  resetInterceptors();
+}

package/src/features/TrackFeature.ts

@@ -1,25 +1,19 @@
 import { TrackLogTab } from '../components/TrackLogTab';
 import type { DebugFeature, TrackLogEntry } from '../types';
 import { createEventChannel } from '../utils/createEventChannel';
-import { createObservableStore } from '../utils/createObservableStore';
+import { createChannelFeature } from '../utils/createChannelFeature';
 
 export interface TrackEventData {
   eventName: string;
   [key: string]: unknown;
 }
 
-type TrackLogPayload = TrackEventData & {
-  timestamp: number;
-};
+type TrackLogPayload = TrackEventData & { timestamp: number };
 
-const DEFAULT_MAX_LOGS = 200;
-const trackChannel = createEventChannel<TrackLogPayload>();
+let trackChannel = createEventChannel<TrackLogPayload>();
 
 export const addTrackLog = (eventData: TrackEventData): void => {
-  trackChannel.emit({
-    timestamp: Date.now(),
-    ...eventData,
-  });
+  trackChannel.emit({ timestamp: Date.now(), ...eventData });
 };
 
 export interface TrackFeatureConfig {
@@ -27,43 +21,14 @@ export interface TrackFeatureConfig {
   maxLogs?: number;
 }
 
-export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<TrackLogEntry> => {
-  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<TrackLogEntry>();
-  let nextId = 0;
-  let unsubscribeLogs: (() => void) | null = null;
-  let initialized = false;
-
-  return {
-    name: 'track',
-    label: 'Track',
-    renderContent: TrackLogTab,
-    setup: () => {
-      if (initialized) {
-        return;
-      }
+export const createTrackFeature = (config?: TrackFeatureConfig): DebugFeature<TrackLogEntry> =>
+  createChannelFeature(
+    () => trackChannel,
+    (payload, id) => ({ ...payload, id }),
+    { name: 'track', label: 'Track', renderContent: TrackLogTab, maxLogs: config?.maxLogs },
+  );
 
-      unsubscribeLogs = trackChannel.subscribe((entry) => {
-        logStore.push(
-          {
-            ...entry,
-            id: String(nextId++),
-          },
-          maxLogs,
-        );
-      });
-      initialized = true;
-    },
-    getData: () => logStore.getData(),
-    clear: () => {
-      logStore.clear();
-    },
-    cleanup: () => {
-      unsubscribeLogs?.();
-      unsubscribeLogs = null;
-      logStore.clear();
-      initialized = false;
-    },
-    subscribe: (listener) => logStore.subscribe(listener),
-  };
-};
+/** Reset module-level state for testing */
+export function _resetTrackForTesting(): void {
+  trackChannel = createEventChannel<TrackLogPayload>();
+}

package/src/features/ZustandLogFeature.ts

@@ -1,12 +1,11 @@
 import { ZustandLogTab } from '../components/ZustandLogTab';
 import type { DebugFeature, ZustandLogEntry } from '../types';
 import { createEventChannel } from '../utils/createEventChannel';
-import { createObservableStore } from '../utils/createObservableStore';
+import { createChannelFeature } from '../utils/createChannelFeature';
 
 type ZustandLogPayload = Omit<ZustandLogEntry, 'id'>;
 
-const DEFAULT_MAX_LOGS = 200;
-const zustandChannel = createEventChannel<ZustandLogPayload>();
+let zustandChannel = createEventChannel<ZustandLogPayload>();
 
 export const addZustandLog = (
   action: string,
@@ -25,6 +24,8 @@ export const addZustandLog = (
   });
 };
 
+// ─── Zustand middleware (remains here — it's user-facing API) ──────────
+
 type ZustandSetState<T> = (
   partial: T | Partial<T> | ((state: T) => Partial<T> | T),
   replace?: boolean | undefined,
@@ -80,48 +81,21 @@ export const zustandLogMiddleware = <T>(config: ZustandConfig<T>) => (
     api,
   );
 
+// ─── Feature factory ──────────────────────────────────────────────────
+
 export interface ZustandFeatureConfig {
   /** Maximum number of zustand state changes to keep (default: 200) */
   maxLogs?: number;
 }
 
-export const createZustandLogFeature = (config?: ZustandFeatureConfig): DebugFeature<ZustandLogEntry> => {
-  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<ZustandLogEntry>();
-  let nextId = 0;
-  let unsubscribeLogs: (() => void) | null = null;
-  let initialized = false;
-
-  return {
-    name: 'zustand',
-    label: 'Zustand',
-    renderContent: ZustandLogTab,
-    setup: () => {
-      if (initialized) {
-        return;
-      }
+export const createZustandLogFeature = (config?: ZustandFeatureConfig): DebugFeature<ZustandLogEntry> =>
+  createChannelFeature(
+    () => zustandChannel,
+    (payload, id) => ({ ...payload, id }),
+    { name: 'zustand', label: 'Zustand', renderContent: ZustandLogTab, maxLogs: config?.maxLogs },
+  );
 
-      unsubscribeLogs = zustandChannel.subscribe((entry) => {
-        logStore.push(
-          {
-            ...entry,
-            id: String(nextId++),
-          },
-          maxLogs,
-        );
-      });
-      initialized = true;
-    },
-    getData: () => logStore.getData(),
-    clear: () => {
-      logStore.clear();
-    },
-    cleanup: () => {
-      unsubscribeLogs?.();
-      unsubscribeLogs = null;
-      logStore.clear();
-      initialized = false;
-    },
-    subscribe: (listener) => logStore.subscribe(listener),
-  };
-};
+/** Reset module-level state for testing */
+export function _resetZustandForTesting(): void {
+  zustandChannel = createEventChannel<ZustandLogPayload>();
+}

package/src/hooks/useNavigationLogger.ts

@@ -1,12 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { addNavigationLog } from '../features/NavigationLogFeature';
 import { safeStringify } from '../utils/safeStringify';
-
-interface NavigationContainerRef {
-  getCurrentRoute?: () => { name?: string } | undefined;
-  getRootState?: () => unknown;
-  addListener: (event: string, callback: () => void) => () => void;
-}
+import type { NavigationContainerRef } from '../types';
 
 function getActiveRouteName(state: unknown): string {
   let currentState = state as