react-native-prod-debugger 1.0.0

package/src/plugins/network/NetworkInterceptor.ts

@@ -0,0 +1,344 @@
+import type { NetworkRequest } from '../../core/types';
+import { generateId, extractGraphQLInfo } from '../../core/utils';
+
+type NetworkListener = (requests: NetworkRequest[]) => void;
+
+/**
+ * NetworkInterceptor — Intercepts XMLHttpRequest and fetch to capture network traffic.
+ *
+ * Uses monkey-patching to wrap the global XHR and fetch implementations.
+ * Stores request/response data in an in-memory ring buffer.
+ * Thread-safe listener management for UI updates.
+ */
+class NetworkInterceptorClass {
+  private requests: NetworkRequest[] = [];
+  private listeners: Set<NetworkListener> = new Set();
+  private maxRequests: number = 500;
+  private isActive: boolean = false;
+
+  // Stored originals for restoring
+  private originalXHROpen: typeof XMLHttpRequest.prototype.open | null = null;
+  private originalXHRSend: typeof XMLHttpRequest.prototype.send | null = null;
+  private originalXHRSetHeader: typeof XMLHttpRequest.prototype.setRequestHeader | null = null;
+  private originalFetch: typeof globalThis.fetch | null = null;
+
+  /** Start intercepting network requests. */
+  start(maxRequests: number = 500, forceEnable: boolean = false): void {
+    if (this.isActive && !forceEnable) return;
+    this.maxRequests = maxRequests;
+    this.isActive = true;
+    this.interceptXHR();
+    this.interceptFetch();
+  }
+
+  /** Stop intercepting and restore original implementations. */
+  stop(): void {
+    this.isActive = false;
+    this.restoreXHR();
+    this.restoreFetch();
+  }
+
+  /** Subscribe to request changes. Returns unsubscribe function. */
+  subscribe(listener: NetworkListener): () => void {
+    this.listeners.add(listener);
+    // Immediately notify with current data
+    listener(this.requests);
+    return () => this.listeners.delete(listener);
+  }
+
+  /** Get all captured requests. */
+  getAll(): NetworkRequest[] {
+    return [...this.requests];
+  }
+
+  /** Clear all captured requests. */
+  clear(): void {
+    this.requests = [];
+    this.notify();
+  }
+
+  /** Check if the interceptor is active. */
+  get active(): boolean {
+    return this.isActive;
+  }
+
+  // ─── XHR Interception ──────────────────────────────────────────────────
+
+  private interceptXHR(): void {
+    const self = this;
+    const OriginalXHR = XMLHttpRequest;
+
+    // Store originals
+    this.originalXHROpen = OriginalXHR.prototype.open;
+    this.originalXHRSend = OriginalXHR.prototype.send;
+    this.originalXHRSetHeader = OriginalXHR.prototype.setRequestHeader;
+
+    // Monkey-patch open
+    OriginalXHR.prototype.open = function (method: string, url: string | URL, ...rest: unknown[]) {
+      const xhr = this as XMLHttpRequest & {
+        _debugId: string;
+        _method: string;
+        _url: string;
+        _requestHeaders: Record<string, string>;
+      };
+
+      xhr._debugId = generateId();
+      xhr._method = method;
+      xhr._url = typeof url === 'string' ? url : url.toString();
+      xhr._requestHeaders = {};
+
+      return self.originalXHROpen!.apply(this, [method, url, ...rest] as Parameters<
+        typeof XMLHttpRequest.prototype.open
+      >);
+    };
+
+    // Monkey-patch setRequestHeader
+    OriginalXHR.prototype.setRequestHeader = function (name: string, value: string) {
+      const xhr = this as XMLHttpRequest & {
+        _requestHeaders: Record<string, string>;
+      };
+      if (xhr._requestHeaders) {
+        xhr._requestHeaders[name] = value;
+      }
+      return self.originalXHRSetHeader!.apply(this, [name, value]);
+    };
+
+    // Monkey-patch send
+    OriginalXHR.prototype.send = function (body?: string | Blob | ArrayBuffer | FormData | null) {
+      const xhr = this as XMLHttpRequest & {
+        _debugId: string;
+        _method: string;
+        _url: string;
+        _requestHeaders: Record<string, string>;
+      };
+
+      const startTime = Date.now();
+      const requestBody = typeof body === 'string' ? body : body ? String(body) : undefined;
+
+      // Extract GraphQL info
+      const gqlInfo = extractGraphQLInfo(requestBody);
+
+      const request: NetworkRequest = {
+        id: xhr._debugId,
+        method: xhr._method,
+        url: xhr._url,
+        startTime,
+        requestHeaders: { ...xhr._requestHeaders },
+        requestBody,
+        requestSize: requestBody ? new Blob([requestBody]).size : 0,
+        gqlOperation: gqlInfo?.operation,
+        gqlType: gqlInfo?.type,
+      };
+
+      self.addRequest(request);
+
+      // Listen for completion
+      const originalOnReadyStateChange = xhr.onreadystatechange;
+      xhr.onreadystatechange = function (...args: unknown[]) {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          const endTime = Date.now();
+          let responseBody: string | undefined;
+          try {
+            responseBody = xhr.responseText;
+          } catch {
+            responseBody = '[Unable to read response]';
+          }
+
+          // Parse response headers
+          const rawHeaders = xhr.getAllResponseHeaders();
+          const responseHeaders: Record<string, string> = {};
+          if (rawHeaders) {
+            rawHeaders.split('\r\n').forEach((line) => {
+              const idx = line.indexOf(':');
+              if (idx > 0) {
+                responseHeaders[line.substring(0, idx).trim()] = line.substring(idx + 1).trim();
+              }
+            });
+          }
+
+          self.updateRequest(xhr._debugId, {
+            endTime,
+            duration: endTime - startTime,
+            status: xhr.status,
+            responseHeaders,
+            responseBody,
+            responseContentType: responseHeaders['content-type'] || responseHeaders['Content-Type'],
+            responseSize: responseBody ? new Blob([responseBody]).size : 0,
+            isError: xhr.status >= 400 || xhr.status === 0,
+            errorMessage: xhr.status === 0 ? 'Network Error' : undefined,
+          });
+        }
+
+        if (typeof originalOnReadyStateChange === 'function') {
+          originalOnReadyStateChange.apply(xhr, args as [Event]);
+        }
+      };
+
+      // Error handler
+      const originalOnError = xhr.onerror;
+      xhr.onerror = function (...args: unknown[]) {
+        self.updateRequest(xhr._debugId, {
+          endTime: Date.now(),
+          duration: Date.now() - startTime,
+          isError: true,
+          errorMessage: 'Network Error',
+        });
+        if (typeof originalOnError === 'function') {
+          originalOnError.apply(xhr, args as [ProgressEvent<EventTarget>]);
+        }
+      };
+
+      return self.originalXHRSend!.apply(this, [body]);
+    };
+  }
+
+  private restoreXHR(): void {
+    if (this.originalXHROpen) {
+      XMLHttpRequest.prototype.open = this.originalXHROpen;
+      this.originalXHROpen = null;
+    }
+    if (this.originalXHRSend) {
+      XMLHttpRequest.prototype.send = this.originalXHRSend;
+      this.originalXHRSend = null;
+    }
+    if (this.originalXHRSetHeader) {
+      XMLHttpRequest.prototype.setRequestHeader = this.originalXHRSetHeader;
+      this.originalXHRSetHeader = null;
+    }
+  }
+
+  // ─── Fetch Interception ────────────────────────────────────────────────
+
+  private interceptFetch(): void {
+    const self = this;
+    if (typeof globalThis.fetch !== 'function') return;
+
+    this.originalFetch = globalThis.fetch;
+
+    globalThis.fetch = async function (
+      input: RequestInfo | URL,
+      init?: RequestInit,
+    ): Promise<Response> {
+      const id = generateId();
+      const startTime = Date.now();
+
+      // Extract request info
+      const url =
+        typeof input === 'string'
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : (input as Request).url;
+
+      const method = init?.method || (input instanceof Request ? input.method : 'GET');
+
+      const requestHeaders: Record<string, string> = {};
+      if (init?.headers) {
+        if (init.headers instanceof Headers) {
+          init.headers.forEach((value: string, key: string) => {
+            requestHeaders[key] = value;
+          });
+        } else if (Array.isArray(init.headers)) {
+          init.headers.forEach(([key, value]) => {
+            requestHeaders[key] = value;
+          });
+        } else {
+          Object.assign(requestHeaders, init.headers);
+        }
+      }
+
+      const requestBody =
+        typeof init?.body === 'string' ? init.body : init?.body ? String(init.body) : undefined;
+
+      const gqlInfo = extractGraphQLInfo(requestBody);
+
+      const request: NetworkRequest = {
+        id,
+        method: method.toUpperCase(),
+        url,
+        startTime,
+        requestHeaders,
+        requestBody,
+        requestSize: requestBody ? new Blob([requestBody]).size : 0,
+        gqlOperation: gqlInfo?.operation,
+        gqlType: gqlInfo?.type,
+      };
+
+      self.addRequest(request);
+
+      try {
+        const response = await self.originalFetch!.call(globalThis, input as RequestInfo, init);
+        const endTime = Date.now();
+
+        // Clone response so the caller can still read it
+        const clone = response.clone();
+        let responseBody: string | undefined;
+        try {
+          responseBody = await clone.text();
+        } catch {
+          responseBody = '[Unable to read response body]';
+        }
+
+        const responseHeaders: Record<string, string> = {};
+        response.headers.forEach((value: string, key: string) => {
+          responseHeaders[key] = value;
+        });
+
+        self.updateRequest(id, {
+          endTime,
+          duration: endTime - startTime,
+          status: response.status,
+          responseHeaders,
+          responseBody,
+          responseContentType: responseHeaders['content-type'],
+          responseSize: responseBody ? new Blob([responseBody]).size : 0,
+          isError: response.status >= 400,
+        });
+
+        return response;
+      } catch (error) {
+        const endTime = Date.now();
+        self.updateRequest(id, {
+          endTime,
+          duration: endTime - startTime,
+          isError: true,
+          errorMessage: error instanceof Error ? error.message : 'Network Error',
+        });
+        throw error;
+      }
+    };
+  }
+
+  private restoreFetch(): void {
+    if (this.originalFetch) {
+      globalThis.fetch = this.originalFetch;
+      this.originalFetch = null;
+    }
+  }
+
+  // ─── Internal ──────────────────────────────────────────────────────────
+
+  private addRequest(request: NetworkRequest): void {
+    this.requests = [request, ...this.requests].slice(0, this.maxRequests);
+    this.notify();
+  }
+
+  private updateRequest(id: string, update: Partial<NetworkRequest>): void {
+    this.requests = this.requests.map((r) => (r.id === id ? { ...r, ...update } : r));
+    this.notify();
+  }
+
+  private notify(): void {
+    const snapshot = this.requests;
+    for (const listener of this.listeners) {
+      try {
+        listener(snapshot);
+      } catch {
+        // Silently handle listener errors
+      }
+    }
+  }
+}
+
+/** Singleton network interceptor instance. */
+export const NetworkInterceptor = new NetworkInterceptorClass();

package/src/plugins/performance/PerformanceMonitorPlugin.tsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { PluginComponentProps, DebuggerPlugin } from '../../core/types';
+
+// React Native may or may not expose the Performance API depending on engine
+const _global = globalThis as Record<string, unknown>;
+const perf: { now: () => number } =
+  typeof _global.performance !== 'undefined'
+    ? (_global.performance as { now: () => number })
+    : { now: () => Date.now() };
+
+const PerformanceMonitorPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [fps, setFps] = useState(0);
+  const [avgFps, setAvgFps] = useState(0);
+  const [minFps, setMinFps] = useState(60);
+  const [maxFps, setMaxFps] = useState(0);
+  const [frameCount, setFrameCount] = useState(0);
+  const [jsDuration, setJsDuration] = useState(0);
+  const [memoryUsage, setMemoryUsage] = useState<number | null>(null);
+  const [uptime, setUptime] = useState(0);
+
+  const frameRef = useRef(0);
+  const lastTimeRef = useRef(perf.now());
+  const fpsHistoryRef = useRef<number[]>([]);
+  const rafRef = useRef<number>(0);
+  const startTimeRef = useRef(Date.now());
+  const totalFramesRef = useRef(0);
+
+  useEffect(() => {
+    let active = true;
+
+    const measureFrame = () => {
+      if (!active) return;
+
+      const now = perf.now();
+      const delta = now - lastTimeRef.current;
+
+      frameRef.current++;
+      totalFramesRef.current++;
+
+      if (delta >= 1000) {
+        const currentFps = Math.round((frameRef.current / delta) * 1000);
+        frameRef.current = 0;
+        lastTimeRef.current = now;
+
+        fpsHistoryRef.current.push(currentFps);
+        if (fpsHistoryRef.current.length > 60) fpsHistoryRef.current.shift();
+
+        const avg = Math.round(
+          fpsHistoryRef.current.reduce((a, b) => a + b, 0) / fpsHistoryRef.current.length,
+        );
+
+        setFps(currentFps);
+        setAvgFps(avg);
+        setMinFps((prev) => Math.min(prev, currentFps));
+        setMaxFps((prev) => Math.max(prev, currentFps));
+        setFrameCount(totalFramesRef.current);
+        setUptime(Math.floor((Date.now() - startTimeRef.current) / 1000));
+
+        // JS thread timing estimate
+        const jsStart = perf.now();
+        setTimeout(() => {
+          const jsEnd = perf.now();
+          const delay = jsEnd - jsStart;
+          setJsDuration(Math.round(delay));
+        }, 0);
+
+        // Memory (where available)
+        try {
+          const perfMemory = (
+            _global.performance as { memory?: { usedJSHeapSize?: number } } | undefined
+          )?.memory;
+          if (perfMemory?.usedJSHeapSize) {
+            setMemoryUsage(perfMemory.usedJSHeapSize);
+          }
+        } catch {
+          // Not available in all environments
+        }
+      }
+
+      rafRef.current = requestAnimationFrame(measureFrame);
+    };
+
+    rafRef.current = requestAnimationFrame(measureFrame);
+    return () => {
+      active = false;
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const fpsColor = fps >= 50 ? theme.success : fps >= 30 ? theme.warning : theme.error;
+  const jsDurationColor =
+    jsDuration <= 16 ? theme.success : jsDuration <= 32 ? theme.warning : theme.error;
+
+  return (
+    <View style={styles.container}>
+      {/* FPS Hero */}
+      <View style={[styles.heroSection, { backgroundColor: theme.surface }]}>
+        <Text style={[styles.heroValue, { color: fpsColor }]}>{fps}</Text>
+        <Text style={[styles.heroLabel, { color: theme.textSecondary }]}>FPS</Text>
+      </View>
+
+      {/* Metrics Grid */}
+      <View style={styles.metricsGrid}>
+        <MetricCard label="Avg FPS" value={String(avgFps)} color={theme.info} theme={theme} />
+        <MetricCard label="Min FPS" value={String(minFps)} color={theme.error} theme={theme} />
+        <MetricCard label="Max FPS" value={String(maxFps)} color={theme.success} theme={theme} />
+        <MetricCard
+          label="JS Thread"
+          value={`${jsDuration}ms`}
+          color={jsDurationColor}
+          theme={theme}
+        />
+        <MetricCard
+          label="Memory"
+          value={memoryUsage ? `${(memoryUsage / 1024 / 1024).toFixed(1)}MB` : 'N/A'}
+          color={theme.accent}
+          theme={theme}
+        />
+        <MetricCard
+          label="Frames"
+          value={String(frameCount)}
+          color={theme.textSecondary}
+          theme={theme}
+        />
+      </View>
+
+      {/* FPS Bar Chart */}
+      <View style={[styles.chartSection, { backgroundColor: theme.surface }]}>
+        <Text style={[styles.chartTitle, { color: theme.text }]}>FPS History (last 60s)</Text>
+        <View style={styles.chartContainer}>
+          {fpsHistoryRef.current.slice(-30).map((val, i) => {
+            const height = Math.max(4, (val / 60) * 80);
+            const barColor = val >= 50 ? theme.success : val >= 30 ? theme.warning : theme.error;
+            return (
+              <View key={i} style={[styles.chartBar, { height, backgroundColor: barColor }]} />
+            );
+          })}
+        </View>
+      </View>
+
+      {/* Info */}
+      <View style={[styles.infoSection, { backgroundColor: theme.surface }]}>
+        <Text style={[styles.infoText, { color: theme.textMuted }]}>
+          Uptime: {Math.floor(uptime / 60)}m {uptime % 60}s
+        </Text>
+        <Text style={[styles.infoText, { color: theme.textMuted }]}>
+          Target: 60 FPS (16.67ms per frame)
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+interface MetricCardProps {
+  label: string;
+  value: string;
+  color: string;
+  theme: PluginComponentProps['theme'];
+}
+
+const MetricCard: React.FC<MetricCardProps> = ({ label, value, color, theme }) => (
+  <View style={[styles.metricCard, { backgroundColor: theme.surfaceAlt }]}>
+    <Text style={[styles.metricValue, { color }]}>{value}</Text>
+    <Text style={[styles.metricLabel, { color: theme.textMuted }]}>{label}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  heroSection: { alignItems: 'center', paddingVertical: 24 },
+  heroValue: { fontSize: 64, fontWeight: '900', letterSpacing: -2 },
+  heroLabel: { fontSize: 14, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 2 },
+  metricsGrid: { flexDirection: 'row', flexWrap: 'wrap', padding: 8 },
+  metricCard: { width: '30%', margin: '1.5%', padding: 12, borderRadius: 12, alignItems: 'center' },
+  metricValue: { fontSize: 18, fontWeight: '800' },
+  metricLabel: { fontSize: 10, fontWeight: '600', marginTop: 4, textTransform: 'uppercase' },
+  chartSection: { margin: 12, padding: 12, borderRadius: 12 },
+  chartTitle: { fontSize: 12, fontWeight: '700', marginBottom: 8 },
+  chartContainer: { flexDirection: 'row', alignItems: 'flex-end', height: 80, gap: 2 },
+  chartBar: { flex: 1, borderRadius: 2, minWidth: 3 },
+  infoSection: { margin: 12, padding: 12, borderRadius: 12 },
+  infoText: { fontSize: 11, lineHeight: 18 },
+});
+
+export function createPerformanceMonitorPlugin(): DebuggerPlugin {
+  return {
+    id: 'performance-monitor',
+    name: 'Perf',
+    icon: '⚡',
+    component: PerformanceMonitorPanel,
+    order: 70,
+  };
+}