react-native-debug-toolkit 0.6.4 → 2.0.0

package/src/features/NavigationLogFeature.ts

@@ -0,0 +1,74 @@
+import { NavigationLogTab } from '../components/NavigationLogTab';
+import type { DebugFeature, NavigationLogEntry } from '../types';
+import { createEventChannel } from '../utils/createEventChannel';
+import { createObservableStore } from '../utils/createObservableStore';
+
+type NavigationLogPayload = Omit<NavigationLogEntry, 'id'>;
+
+const DEFAULT_MAX_LOGS = 200;
+const navigationChannel = createEventChannel<NavigationLogPayload>();
+
+export const addNavigationLog = (
+  action: string,
+  from: string,
+  to: string,
+  startTime?: number,
+  duration?: number,
+  debugLog?: string,
+): void => {
+  navigationChannel.emit({
+    timestamp: Date.now(),
+    action,
+    from,
+    to,
+    startTime,
+    duration,
+    debugLog,
+  });
+};
+
+export interface NavigationFeatureConfig {
+  /** Maximum number of navigation logs to keep (default: 200) */
+  maxLogs?: number;
+}
+
+export const createNavigationLogFeature = (config?: NavigationFeatureConfig): DebugFeature<NavigationLogEntry> => {
+  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
+  const logStore = createObservableStore<NavigationLogEntry>();
+  let nextId = 0;
+  let unsubscribeLogs: (() => void) | null = null;
+  let initialized = false;
+
+  return {
+    name: 'navigation',
+    label: 'Navigation',
+    renderContent: NavigationLogTab,
+    setup: () => {
+      if (initialized) {
+        return;
+      }
+
+      unsubscribeLogs = navigationChannel.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),
+  };
+};

package/src/features/NetworkFeature.ts

@@ -0,0 +1,488 @@
+import { NetworkLogTab } from '../components/NetworkLogTab';
+import type { DebugFeature, NetworkLogEntry } from '../types';
+import { createEventChannel } from '../utils/createEventChannel';
+import { createObservableStore } from '../utils/createObservableStore';
+
+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);
+  };
+}
+
+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),
+  );
+}
+
+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>;
+}
+
+export interface NetworkFeatureConfig {
+  /** Maximum number of network logs to keep (default: 200) */
+  maxLogs?: number;
+  /** URLs to filter out from logging */
+  blacklist?: Array<string | RegExp>;
+}
+
+export const createNetworkFeature = (config?: NetworkFeatureConfig): NetworkFeatureAPI => {
+  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
+  const blacklist: Array<string | RegExp> = config?.blacklist ? [...config.blacklist] : [];
+  const logStore = createObservableStore<NetworkLogEntry>();
+  const axiosCleanupMap = new Map<AxiosInstanceLike, () => void>();
+
+  let nextId = 0;
+  let initialized = false;
+  let unsubscribeLogs: (() => void) | null = null;
+  let stopFetch: (() => 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();
+  };
+
+  return {
+    name: 'network',
+    label: 'Network',
+    renderContent: NetworkLogTab,
+    setup: () => {
+      if (initialized) {
+        return;
+      }
+
+      unsubscribeLogs = networkChannel.subscribe(handleLog);
+      stopFetch = startFetchInterceptor();
+      initialized = true;
+    },
+    getData: () => logStore.getData(),
+    clear: () => {
+      logStore.clear();
+    },
+    cleanup: () => {
+      if (!initialized) {
+        return;
+      }
+
+      setUrlRewriter(null);
+      unsubscribeLogs?.();
+      unsubscribeLogs = null;
+      stopFetch?.();
+      stopFetch = null;
+      cleanupAxiosRegistrations();
+      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 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],
+  };
+};

package/src/features/ThirdPartyLibsFeature.ts

@@ -0,0 +1,42 @@
+import { Platform } from 'react-native';
+import { ThirdPartyLibsTab } from '../components/ThirdPartyLibsTab';
+import { NativeDebugLibs } from '../native/NativeDebugLibs';
+import type { DebugFeature, ThirdPartyLib } from '../types';
+
+const availableLibs: ThirdPartyLib[] = [
+  {
+    id: 'flex',
+    name: 'FLEX',
+    description: 'In-app debugging and exploration tool for iOS',
+    platform: 'ios',
+    actions: [
+      { id: 'showExplorer', label: 'Show Explorer', onPress: NativeDebugLibs.showExplorer },
+      { id: 'hideExplorer', label: 'Hide Explorer', onPress: NativeDebugLibs.hideExplorer },
+    ],
+  },
+  {
+    id: 'doraemonkit',
+    name: 'DoraemonKit',
+    description: 'A full-featured iOS & Android development assistant',
+    platform: 'both',
+    actions: [
+      { id: 'showDoraemonKit', label: 'Show DoraemonKit', onPress: NativeDebugLibs.showDoraemonKit },
+      { id: 'hideDoraemonKit', label: 'Hide DoraemonKit', onPress: NativeDebugLibs.hideDoraemonKit },
+    ],
+  },
+];
+
+function getPlatformLibs(): ThirdPartyLib[] {
+  return availableLibs.filter(
+    (lib) => lib.platform === 'both' || lib.platform === Platform.OS,
+  );
+}
+
+export const createThirdPartyLibsFeature = (): DebugFeature<ThirdPartyLib> => ({
+  name: 'thirdPartyLibs',
+  label: 'Debug Libraries',
+  renderContent: ThirdPartyLibsTab,
+  setup: () => {},
+  getData: () => getPlatformLibs(),
+  cleanup: () => {},
+});

package/src/features/TrackFeature.ts

@@ -0,0 +1,69 @@
+import { TrackLogTab } from '../components/TrackLogTab';
+import type { DebugFeature, TrackLogEntry } from '../types';
+import { createEventChannel } from '../utils/createEventChannel';
+import { createObservableStore } from '../utils/createObservableStore';
+
+export interface TrackEventData {
+  eventName: string;
+  [key: string]: unknown;
+}
+
+type TrackLogPayload = TrackEventData & {
+  timestamp: number;
+};
+
+const DEFAULT_MAX_LOGS = 200;
+const trackChannel = createEventChannel<TrackLogPayload>();
+
+export const addTrackLog = (eventData: TrackEventData): void => {
+  trackChannel.emit({
+    timestamp: Date.now(),
+    ...eventData,
+  });
+};
+
+export interface TrackFeatureConfig {
+  /** Maximum number of track events to keep (default: 200) */
+  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;
+      }
+
+      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),
+  };
+};