react-native-debug-toolkit 2.0.0 → 2.1.0

package/src/interceptors/networkInterceptor.ts

@@ -0,0 +1,646 @@
+import type { NetworkLogEntry } from '../types';
+import { urlRewriter } from '../utils/urlRewriterRegistry';
+
+type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
+
+// ─── Axios types ───────────────────────────────────────
+
+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;
+}
+
+export interface AxiosInstanceLike {
+  interceptors: {
+    request: AxiosInterceptorManager;
+    response: AxiosInterceptorManager;
+  };
+}
+
+interface AxiosRegistration {
+  refCount: number;
+  requestId?: number;
+  responseId?: number;
+}
+
+// ─── XMLHttpRequest types ─────────────────────────────
+
+type XhrOpen = (
+  this: XMLHttpRequestLike,
+  method: string,
+  url: string,
+  async?: boolean,
+  username?: string | null,
+  password?: string | null,
+) => void;
+
+type XhrSend = (this: XMLHttpRequestLike, body?: unknown) => void;
+type XhrSetRequestHeader = (
+  this: XMLHttpRequestLike,
+  name: string,
+  value: string,
+) => void;
+type XhrEventListener = (event?: unknown) => void;
+type XhrHandler = ((this: XMLHttpRequestLike, event?: unknown) => void) | null;
+
+interface XMLHttpRequestLike {
+  status?: number;
+  statusText?: string;
+  response?: unknown;
+  responseText?: string;
+  responseType?: string;
+  readyState?: number;
+  DONE?: number;
+  open: XhrOpen;
+  send: XhrSend;
+  setRequestHeader?: XhrSetRequestHeader;
+  getAllResponseHeaders?: () => string;
+  addEventListener?: (event: string, listener: XhrEventListener) => void;
+  removeEventListener?: (event: string, listener: XhrEventListener) => void;
+  onreadystatechange?: XhrHandler;
+  onloadend?: XhrHandler;
+}
+
+interface XMLHttpRequestConstructorLike {
+  new (): XMLHttpRequestLike;
+  prototype: XMLHttpRequestLike;
+}
+
+interface XMLHttpRequestRegistration {
+  constructor: XMLHttpRequestConstructorLike;
+  open: XhrOpen;
+  send: XhrSend;
+  setRequestHeader?: XhrSetRequestHeader;
+}
+
+interface XhrRequestState {
+  method: string;
+  url: string;
+  headers: Record<string, string>;
+  body?: unknown;
+  startTime: number;
+  timestamp: number;
+}
+
+// ─── 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 parseMaybeJson(raw: string): unknown {
+  if (!raw) {
+    return undefined;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+
+function parseRawHeaders(rawHeaders: string | undefined): Record<string, string> | undefined {
+  if (!rawHeaders) {
+    return undefined;
+  }
+  const headers: Record<string, string> = {};
+  rawHeaders.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) {
+      return;
+    }
+    headers[key] = value;
+  });
+  return Object.keys(headers).length > 0 ? headers : undefined;
+}
+
+function getXMLHttpRequestConstructor(): XMLHttpRequestConstructorLike | undefined {
+  const globalWithXhr = globalThis as unknown as { XMLHttpRequest?: unknown };
+  const candidate = globalWithXhr.XMLHttpRequest;
+  if (typeof candidate !== 'function') {
+    return undefined;
+  }
+
+  const prototype = (candidate as { prototype?: Partial<XMLHttpRequestLike> }).prototype;
+  if (
+    !prototype ||
+    typeof prototype.open !== 'function' ||
+    typeof prototype.send !== 'function'
+  ) {
+    return undefined;
+  }
+
+  return candidate as XMLHttpRequestConstructorLike;
+}
+
+function getXhrResponseHeaders(xhr: XMLHttpRequestLike): Record<string, string> | undefined {
+  if (typeof xhr.getAllResponseHeaders !== 'function') {
+    return undefined;
+  }
+  try {
+    return parseRawHeaders(xhr.getAllResponseHeaders());
+  } catch {
+    return undefined;
+  }
+}
+
+function getXhrResponseData(xhr: XMLHttpRequestLike): unknown {
+  const responseType = typeof xhr.responseType === 'string' ? xhr.responseType : '';
+  if (responseType === 'json') {
+    return xhr.response;
+  }
+  if (responseType && responseType !== 'text') {
+    return undefined;
+  }
+
+  try {
+    if (typeof xhr.responseText === 'string') {
+      return parseMaybeJson(xhr.responseText);
+    }
+  } catch {
+    return undefined;
+  }
+
+  return typeof xhr.response === 'string' ? parseMaybeJson(xhr.response) : xhr.response;
+}
+
+// ─── Interceptor manager (encapsulated mutable state) ──
+
+let originalFetch: typeof globalThis.fetch | null = null;
+let fetchRefCount = 0;
+const pendingAxiosRequests = new WeakMap<AxiosRequestConfigLike, { startTime: number; timestamp: number }>();
+const axiosRegistrations = new WeakMap<AxiosInstanceLike, AxiosRegistration>();
+let originalXMLHttpRequest: XMLHttpRequestRegistration | null = null;
+let xhrRefCount = 0;
+const pendingXhrRequests = new WeakMap<XMLHttpRequestLike, XhrRequestState>();
+
+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();
+  };
+}
+
+function emitXhrLog(
+  xhr: XMLHttpRequestLike,
+  emit: (entry: NetworkLogPayload) => void,
+  error?: string,
+): void {
+  const pending = pendingXhrRequests.get(xhr);
+  if (!pending) {
+    return;
+  }
+
+  const status = typeof xhr.status === 'number' ? xhr.status : 0;
+  const statusText = typeof xhr.statusText === 'string' ? xhr.statusText : undefined;
+
+  emit({
+    timestamp: pending.timestamp,
+    duration: Date.now() - pending.startTime,
+    request: {
+      url: pending.url,
+      method: pending.method,
+      headers: Object.keys(pending.headers).length > 0 ? pending.headers : undefined,
+      body: pending.body,
+    },
+    response: error
+      ? undefined
+      : {
+          status,
+          statusText,
+          headers: getXhrResponseHeaders(xhr),
+          data: getXhrResponseData(xhr),
+          success: status >= 200 && status < 300,
+        },
+    error,
+  });
+
+  pendingXhrRequests.delete(xhr);
+}
+
+function isXhrDone(xhr: XMLHttpRequestLike): boolean {
+  return typeof xhr.readyState === 'number' && xhr.readyState === (xhr.DONE ?? 4);
+}
+
+function attachXhrCompletion(
+  xhr: XMLHttpRequestLike,
+  emit: (entry: NetworkLogPayload) => void,
+): void {
+  let completed = false;
+  const finish = (error?: string) => {
+    if (completed) {
+      return;
+    }
+    completed = true;
+    if (typeof xhr.removeEventListener === 'function') {
+      xhr.removeEventListener('loadend', onLoadEnd);
+      xhr.removeEventListener('error', onError);
+      xhr.removeEventListener('abort', onAbort);
+      xhr.removeEventListener('timeout', onTimeout);
+    }
+    emitXhrLog(xhr, emit, error);
+  };
+  const onLoadEnd = () => finish();
+  const onError = () => finish('XMLHttpRequest error');
+  const onAbort = () => finish('XMLHttpRequest aborted');
+  const onTimeout = () => finish('XMLHttpRequest timeout');
+
+  if (typeof xhr.addEventListener === 'function') {
+    xhr.addEventListener('loadend', onLoadEnd);
+    xhr.addEventListener('error', onError);
+    xhr.addEventListener('abort', onAbort);
+    xhr.addEventListener('timeout', onTimeout);
+    return;
+  }
+
+  const originalOnReadyStateChange = xhr.onreadystatechange;
+  const originalOnLoadEnd = xhr.onloadend;
+  xhr.onreadystatechange = function interceptedReadyStateChange(event?: unknown) {
+    originalOnReadyStateChange?.call(this, event);
+    if (isXhrDone(this)) {
+      finish();
+    }
+  };
+  xhr.onloadend = function interceptedLoadEnd(event?: unknown) {
+    originalOnLoadEnd?.call(this, event);
+    finish();
+  };
+}
+
+function stopXMLHttpRequest(): void {
+  xhrRefCount = Math.max(0, xhrRefCount - 1);
+  if (xhrRefCount === 0 && originalXMLHttpRequest) {
+    const prototype = originalXMLHttpRequest.constructor.prototype;
+    prototype.open = originalXMLHttpRequest.open;
+    prototype.send = originalXMLHttpRequest.send;
+    if (originalXMLHttpRequest.setRequestHeader) {
+      prototype.setRequestHeader = originalXMLHttpRequest.setRequestHeader;
+    }
+    originalXMLHttpRequest = null;
+  }
+}
+
+export function startXMLHttpRequest(
+  emit: (entry: NetworkLogPayload) => void,
+): () => void {
+  xhrRefCount += 1;
+  if (originalXMLHttpRequest) {
+    return () => {
+      stopXMLHttpRequest();
+    };
+  }
+
+  const XMLHttpRequestConstructor = getXMLHttpRequestConstructor();
+  if (!XMLHttpRequestConstructor) {
+    return () => {
+      stopXMLHttpRequest();
+    };
+  }
+
+  const prototype = XMLHttpRequestConstructor.prototype;
+  const originalOpen = prototype.open;
+  const originalSend = prototype.send;
+  const originalSetRequestHeader = prototype.setRequestHeader;
+  originalXMLHttpRequest = {
+    constructor: XMLHttpRequestConstructor,
+    open: originalOpen,
+    send: originalSend,
+    setRequestHeader: originalSetRequestHeader,
+  };
+
+  prototype.open = function interceptedOpen(
+    method: string,
+    url: string,
+    async?: boolean,
+    username?: string | null,
+    password?: string | null,
+  ): void {
+    const rewrittenUrl = urlRewriter.get() ? rewriteUrl(url) : url;
+    const now = Date.now();
+    pendingXhrRequests.set(this, {
+      method: method.toUpperCase(),
+      url: rewrittenUrl,
+      headers: {},
+      startTime: now,
+      timestamp: now,
+    });
+
+    if (typeof password !== 'undefined') {
+      return originalOpen.call(this, method, rewrittenUrl, async, username, password);
+    }
+    if (typeof username !== 'undefined') {
+      return originalOpen.call(this, method, rewrittenUrl, async, username);
+    }
+    if (typeof async !== 'undefined') {
+      return originalOpen.call(this, method, rewrittenUrl, async);
+    }
+    return originalOpen.call(this, method, rewrittenUrl);
+  };
+
+  if (originalSetRequestHeader) {
+    prototype.setRequestHeader = function interceptedSetRequestHeader(
+      name: string,
+      value: string,
+    ): void {
+      const pending = pendingXhrRequests.get(this);
+      if (pending) {
+        pending.headers[name] = value;
+      }
+      return originalSetRequestHeader.call(this, name, value);
+    };
+  }
+
+  prototype.send = function interceptedSend(body?: unknown): void {
+    const pending = pendingXhrRequests.get(this);
+    if (pending) {
+      const now = Date.now();
+      pending.body = body;
+      pending.startTime = now;
+      pending.timestamp = now;
+      attachXhrCompletion(this, emit);
+    }
+
+    try {
+      return originalSend.call(this, body);
+    } catch (error) {
+      emitXhrLog(
+        this,
+        emit,
+        error instanceof Error ? error.message : String(error),
+      );
+      throw error;
+    }
+  };
+
+  return () => {
+    stopXMLHttpRequest();
+  };
+}
+
+function teardownAxios(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);
+}
+
+export function setupAxios(
+  axiosInstance: AxiosInstanceLike,
+  emit: (entry: NetworkLogPayload) => void,
+): () => void {
+  const existing = axiosRegistrations.get(axiosInstance);
+  if (existing) {
+    existing.refCount += 1;
+    return () => {
+      teardownAxios(axiosInstance);
+    };
+  }
+
+  const requestId = axiosInstance.interceptors.request.use(
+    (config: AxiosRequestConfigLike) => {
+      if (urlRewriter.get() && 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;
+          }
+        }
+      }
+      pendingAxiosRequests.set(config, { startTime: Date.now(), timestamp: Date.now() });
+      return config;
+    },
+    (error: unknown) => Promise.reject(error),
+  );
+
+  const responseId = axiosInstance.interceptors.response.use(
+    (response: AxiosResponseLike) => {
+      const pending = pendingAxiosRequests.get(response.config);
+      if (pending) {
+        emit({
+          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(response.config);
+      }
+      return response;
+    },
+    (error: AxiosErrorLike) => {
+      if (error.config) {
+        const pending = pendingAxiosRequests.get(error.config);
+        emit({
+          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(error.config);
+      }
+      return Promise.reject(error);
+    },
+  );
+
+  axiosRegistrations.set(axiosInstance, {
+    refCount: 1,
+    requestId: typeof requestId === 'number' ? requestId : undefined,
+    responseId: typeof responseId === 'number' ? responseId : undefined,
+  });
+
+  return () => {
+    teardownAxios(axiosInstance);
+  };
+}
+
+export function resetInterceptors(): void {
+  if (originalFetch) {
+    globalThis.fetch = originalFetch;
+    originalFetch = null;
+  }
+  fetchRefCount = 0;
+  xhrRefCount = 1;
+  stopXMLHttpRequest();
+}