react-native-prod-debugger 1.0.0

package/src/plugins/console/ConsoleInterceptor.ts

@@ -0,0 +1,110 @@
+import type { ConsoleEntry, ConsoleLevel } from '../../core/types';
+import { generateId, safeStringify } from '../../core/utils';
+
+type ConsoleListener = (entries: ConsoleEntry[]) => void;
+
+/**
+ * ConsoleInterceptor — Captures console.log/warn/error/info/debug calls.
+ *
+ * Wraps the global console methods and stores entries in a ring buffer.
+ * Original console behavior is preserved — messages still appear in the developer console.
+ */
+class ConsoleInterceptorClass {
+  private entries: ConsoleEntry[] = [];
+  private listeners: Set<ConsoleListener> = new Set();
+  private maxEntries: number = 1000;
+  private isActive: boolean = false;
+
+  private originals: Record<ConsoleLevel, (...args: unknown[]) => void> = {
+    log: console.log,
+    info: console.info,
+    warn: console.warn,
+    error: console.error,
+    debug: console.debug,
+  };
+
+  /** Start intercepting console calls. */
+  start(maxEntries: number = 1000): void {
+    if (this.isActive) return;
+    this.maxEntries = maxEntries;
+    this.isActive = true;
+
+    const levels: ConsoleLevel[] = ['log', 'info', 'warn', 'error', 'debug'];
+    for (const level of levels) {
+      this.originals[level] = console[level].bind(console);
+      console[level] = (...args: unknown[]) => {
+        // Preserve original behavior
+        this.originals[level](...args);
+        // Capture entry
+        this.addEntry(level, args);
+      };
+    }
+  }
+
+  /** Stop intercepting and restore original console. */
+  stop(): void {
+    if (!this.isActive) return;
+    this.isActive = false;
+
+    const levels: ConsoleLevel[] = ['log', 'info', 'warn', 'error', 'debug'];
+    for (const level of levels) {
+      console[level] = this.originals[level];
+    }
+  }
+
+  /** Subscribe to entry changes. Returns unsubscribe function. */
+  subscribe(listener: ConsoleListener): () => void {
+    this.listeners.add(listener);
+    listener(this.entries);
+    return () => this.listeners.delete(listener);
+  }
+
+  /** Get all entries. */
+  getAll(): ConsoleEntry[] {
+    return [...this.entries];
+  }
+
+  /** Clear all entries. */
+  clear(): void {
+    this.entries = [];
+    this.notify();
+  }
+
+  get active(): boolean {
+    return this.isActive;
+  }
+
+  private addEntry(level: ConsoleLevel, args: unknown[]): void {
+    const message = args
+      .map((arg) => {
+        if (typeof arg === 'string') return arg;
+        return safeStringify(arg);
+      })
+      .join(' ');
+
+    const entry: ConsoleEntry = {
+      id: generateId(),
+      level,
+      timestamp: Date.now(),
+      message,
+      args,
+    };
+
+    this.entries = [entry, ...this.entries].slice(0, this.maxEntries);
+    this.notify();
+  }
+
+  private notify(): void {
+    const snapshot = this.entries;
+    for (const listener of this.listeners) {
+      try {
+        listener(snapshot);
+      } catch {
+        // Silently handle errors
+      }
+    }
+  }
+}
+
+/** Singleton console interceptor instance. */
+export const ConsoleInterceptor = new ConsoleInterceptorClass();

package/src/plugins/console/ConsoleViewerPlugin.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  TextInput,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import type {
+  PluginComponentProps,
+  ConsoleEntry,
+  ConsoleLevel,
+  DebuggerPlugin,
+} from '../../core/types';
+import { ConsoleInterceptor } from './ConsoleInterceptor';
+import { formatTimestamp, getLevelColor, copyToClipboard } from '../../core/utils';
+
+const ConsoleViewerPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [entries, setEntries] = useState<ConsoleEntry[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [levelFilter, setLevelFilter] = useState<ConsoleLevel | null>(null);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = ConsoleInterceptor.subscribe(setEntries);
+    return unsubscribe;
+  }, []);
+
+  const filteredEntries = useMemo(() => {
+    let filtered = entries;
+    if (levelFilter) {
+      filtered = filtered.filter((e) => e.level === levelFilter);
+    }
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      filtered = filtered.filter((e) => e.message.toLowerCase().includes(q));
+    }
+    return filtered;
+  }, [entries, searchQuery, levelFilter]);
+
+  const levelCounts = useMemo(() => {
+    const counts = { log: 0, info: 0, warn: 0, error: 0, debug: 0 };
+    for (const entry of entries) {
+      counts[entry.level]++;
+    }
+    return counts;
+  }, [entries]);
+
+  const handleClear = useCallback(() => {
+    ConsoleInterceptor.clear();
+    setExpandedId(null);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {/* Level Filter Bar */}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={[styles.filterBar, { backgroundColor: theme.surface }]}
+        contentContainerStyle={styles.filterContent}
+      >
+        <TouchableOpacity
+          style={[
+            styles.filterChip,
+            {
+              backgroundColor: !levelFilter ? theme.accent : theme.surfaceAlt,
+              borderColor: theme.border,
+            },
+          ]}
+          onPress={() => setLevelFilter(null)}
+          activeOpacity={0.7}
+        >
+          <Text style={[styles.filterText, { color: !levelFilter ? '#FFF' : theme.textSecondary }]}>
+            All ({entries.length})
+          </Text>
+        </TouchableOpacity>
+        {(['error', 'warn', 'info', 'log', 'debug'] as ConsoleLevel[]).map((level) => (
+          <TouchableOpacity
+            key={level}
+            style={[
+              styles.filterChip,
+              {
+                backgroundColor: levelFilter === level ? getLevelColor(level) : theme.surfaceAlt,
+                borderColor: theme.border,
+              },
+            ]}
+            onPress={() => setLevelFilter(levelFilter === level ? null : level)}
+            activeOpacity={0.7}
+          >
+            <Text
+              style={[
+                styles.filterText,
+                { color: levelFilter === level ? '#FFF' : getLevelColor(level) },
+              ]}
+            >
+              {level} ({levelCounts[level]})
+            </Text>
+          </TouchableOpacity>
+        ))}
+        <TouchableOpacity
+          onPress={handleClear}
+          style={[
+            styles.filterChip,
+            { backgroundColor: theme.surfaceAlt, borderColor: theme.error },
+          ]}
+          activeOpacity={0.7}
+        >
+          <Text style={[styles.filterText, { color: theme.error }]}>Clear</Text>
+        </TouchableOpacity>
+      </ScrollView>
+
+      {/* Search */}
+      <View style={[styles.searchContainer, { backgroundColor: theme.surface }]}>
+        <TextInput
+          style={[
+            styles.searchInput,
+            { color: theme.text, backgroundColor: theme.surfaceAlt, borderColor: theme.border },
+          ]}
+          placeholder="Search logs..."
+          placeholderTextColor={theme.textMuted}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          autoCapitalize="none"
+        />
+      </View>
+
+      {/* Log List */}
+      <FlatList
+        data={filteredEntries}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <ConsoleRow
+            entry={item}
+            theme={theme}
+            isExpanded={expandedId === item.id}
+            onToggle={() => setExpandedId(expandedId === item.id ? null : item.id)}
+          />
+        )}
+        ListEmptyComponent={
+          <View style={styles.emptyContainer}>
+            <Text style={[styles.emptyText, { color: theme.textMuted }]}>No console output</Text>
+          </View>
+        }
+        initialNumToRender={30}
+        maxToRenderPerBatch={15}
+      />
+    </View>
+  );
+};
+
+interface ConsoleRowProps {
+  entry: ConsoleEntry;
+  theme: PluginComponentProps['theme'];
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+const ConsoleRow: React.FC<ConsoleRowProps> = React.memo(
+  ({ entry, theme, isExpanded, onToggle }) => {
+    const levelColor = getLevelColor(entry.level);
+    const levelBg = `${levelColor}15`;
+
+    return (
+      <TouchableOpacity
+        style={[styles.logRow, { backgroundColor: levelBg, borderBottomColor: theme.border }]}
+        onPress={onToggle}
+        onLongPress={() => copyToClipboard(entry.message)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.logHeader}>
+          <View style={[styles.levelBadge, { backgroundColor: levelColor }]}>
+            <Text style={styles.levelText}>{entry.level.toUpperCase()}</Text>
+          </View>
+          <Text style={[styles.logTimestamp, { color: theme.textMuted }]}>
+            {formatTimestamp(entry.timestamp)}
+          </Text>
+        </View>
+        <Text
+          style={[styles.logMessage, { color: theme.text }]}
+          numberOfLines={isExpanded ? undefined : 3}
+        >
+          {entry.message}
+        </Text>
+        {isExpanded && entry.message.length > 100 && (
+          <TouchableOpacity
+            onPress={() => copyToClipboard(entry.message)}
+            style={[styles.copyLogButton, { backgroundColor: theme.surfaceAlt }]}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.copyLogText, { color: theme.accent }]}>Copy</Text>
+          </TouchableOpacity>
+        )}
+      </TouchableOpacity>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  filterBar: { maxHeight: 44 },
+  filterContent: { paddingHorizontal: 12, paddingVertical: 8, gap: 6 },
+  filterChip: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, borderWidth: 1 },
+  filterText: { fontSize: 11, fontWeight: '600' },
+  searchContainer: { paddingHorizontal: 12, paddingBottom: 8 },
+  searchInput: { height: 36, borderRadius: 8, paddingHorizontal: 12, fontSize: 13, borderWidth: 1 },
+  logRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  logHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 4 },
+  levelBadge: { paddingHorizontal: 6, paddingVertical: 1, borderRadius: 4 },
+  levelText: { fontSize: 9, fontWeight: '800', color: '#FFF', letterSpacing: 0.5 },
+  logTimestamp: { fontSize: 10 },
+  logMessage: { fontSize: 12, fontFamily: 'monospace', lineHeight: 18 },
+  copyLogButton: {
+    marginTop: 8,
+    alignSelf: 'flex-start',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  copyLogText: { fontSize: 11, fontWeight: '600' },
+  emptyContainer: { alignItems: 'center', paddingVertical: 40 },
+  emptyText: { fontSize: 13 },
+});
+
+export function createConsoleViewerPlugin(): DebuggerPlugin {
+  return {
+    id: 'console-viewer',
+    name: 'Console',
+    icon: '📋',
+    component: ConsoleViewerPanel,
+    order: 20,
+    onInit: () => ConsoleInterceptor.start(),
+    onDestroy: () => ConsoleInterceptor.stop(),
+  };
+}

package/src/plugins/crashReporter/CrashReporterPlugin.tsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, FlatList, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import type { PluginComponentProps, CrashEntry, DebuggerPlugin } from '../../core/types';
+import { generateId, formatTimestamp, copyToClipboard, shareText } from '../../core/utils';
+
+// ─── Crash Store ────────────────────────────────────────────────────────────
+
+type CrashListener = (entries: CrashEntry[]) => void;
+
+class CrashStoreClass {
+  private entries: CrashEntry[] = [];
+  private listeners: Set<CrashListener> = new Set();
+  private isActive = false;
+  private maxEntries = 100;
+  private originalHandler: ((error: Error, isFatal?: boolean) => void) | null = null;
+
+  start(): void {
+    if (this.isActive) return;
+    this.isActive = true;
+
+    // Capture unhandled JS errors
+    const ErrorUtils = (
+      globalThis as unknown as {
+        ErrorUtils?: {
+          getGlobalHandler: () => (error: Error, isFatal?: boolean) => void;
+          setGlobalHandler: (handler: (error: Error, isFatal?: boolean) => void) => void;
+        };
+      }
+    ).ErrorUtils;
+    if (ErrorUtils) {
+      this.originalHandler = ErrorUtils.getGlobalHandler();
+      ErrorUtils.setGlobalHandler((error: Error, isFatal?: boolean) => {
+        this.addEntry({
+          id: generateId(),
+          timestamp: Date.now(),
+          message: error.message,
+          stack: error.stack,
+          isFatal: isFatal ?? false,
+        });
+        // Forward to original handler
+        if (this.originalHandler) {
+          this.originalHandler(error, isFatal);
+        }
+      });
+    }
+
+    // Capture unhandled promise rejections
+    const tracking = require('promise/setimmediate/rejection-tracking');
+    if (tracking) {
+      try {
+        tracking.enable({
+          allRejections: true,
+          onUnhandled: (_id: number, error: Error) => {
+            this.addEntry({
+              id: generateId(),
+              timestamp: Date.now(),
+              message: error?.message || 'Unhandled Promise Rejection',
+              stack: error?.stack,
+              isFatal: false,
+            });
+          },
+        });
+      } catch {
+        // Rejection tracking may not be available
+      }
+    }
+  }
+
+  stop(): void {
+    if (!this.isActive) return;
+    this.isActive = false;
+    const ErrorUtils = (
+      globalThis as unknown as {
+        ErrorUtils?: {
+          setGlobalHandler: (handler: (error: Error, isFatal?: boolean) => void) => void;
+        };
+      }
+    ).ErrorUtils;
+    if (ErrorUtils && this.originalHandler) {
+      ErrorUtils.setGlobalHandler(this.originalHandler);
+      this.originalHandler = null;
+    }
+  }
+
+  addEntry(entry: CrashEntry): void {
+    this.entries = [entry, ...this.entries].slice(0, this.maxEntries);
+    this.notify();
+  }
+
+  getAll(): CrashEntry[] {
+    return [...this.entries];
+  }
+  clear(): void {
+    this.entries = [];
+    this.notify();
+  }
+
+  subscribe(listener: CrashListener): () => void {
+    this.listeners.add(listener);
+    listener(this.entries);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify(): void {
+    const snapshot = this.entries;
+    for (const l of this.listeners) {
+      try {
+        l(snapshot);
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+}
+
+const crashStore = new CrashStoreClass();
+
+// ─── Crash Reporter Panel ───────────────────────────────────────────────────
+
+const CrashReporterPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [entries, setEntries] = useState<CrashEntry[]>([]);
+  const [selectedEntry, setSelectedEntry] = useState<CrashEntry | null>(null);
+
+  useEffect(() => {
+    const unsub = crashStore.subscribe(setEntries);
+    return unsub;
+  }, []);
+
+  const handleClear = useCallback(() => {
+    crashStore.clear();
+    setSelectedEntry(null);
+  }, []);
+
+  if (selectedEntry) {
+    return (
+      <View style={styles.container}>
+        <View
+          style={[
+            styles.header,
+            { backgroundColor: theme.surface, borderBottomColor: theme.border },
+          ]}
+        >
+          <TouchableOpacity onPress={() => setSelectedEntry(null)} activeOpacity={0.7}>
+            <Text style={[styles.backBtn, { color: theme.accent }]}>← Back</Text>
+          </TouchableOpacity>
+          <View style={styles.headerActions}>
+            <TouchableOpacity
+              onPress={() =>
+                copyToClipboard(`${selectedEntry.message}\n\n${selectedEntry.stack || ''}`)
+              }
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.actionText, { color: theme.accent }]}>Copy</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() =>
+                shareText(
+                  `${selectedEntry.message}\n\n${selectedEntry.stack || ''}`,
+                  'Crash Report',
+                )
+              }
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.actionText, { color: theme.accent }]}>Share</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <ScrollView style={styles.detailContent}>
+          <View
+            style={[
+              styles.crashBadge,
+              { backgroundColor: selectedEntry.isFatal ? theme.error : theme.warning },
+            ]}
+          >
+            <Text style={styles.crashBadgeText}>
+              {selectedEntry.isFatal ? 'FATAL' : 'NON-FATAL'}
+            </Text>
+          </View>
+          <Text style={[styles.crashTime, { color: theme.textMuted }]}>
+            {formatTimestamp(selectedEntry.timestamp)}
+          </Text>
+          <Text style={[styles.crashMessage, { color: theme.text }]}>{selectedEntry.message}</Text>
+          {selectedEntry.stack && (
+            <View style={[styles.stackBlock, { backgroundColor: theme.codeBackground }]}>
+              <Text style={[styles.stackText, { color: theme.codeText }]} selectable>
+                {selectedEntry.stack}
+              </Text>
+            </View>
+          )}
+          {selectedEntry.componentStack && (
+            <View
+              style={[styles.stackBlock, { backgroundColor: theme.codeBackground, marginTop: 12 }]}
+            >
+              <Text style={[styles.stackLabel, { color: theme.textSecondary }]}>
+                Component Stack
+              </Text>
+              <Text style={[styles.stackText, { color: theme.codeText }]} selectable>
+                {selectedEntry.componentStack}
+              </Text>
+            </View>
+          )}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={[styles.header, { backgroundColor: theme.surface, borderBottomColor: theme.border }]}
+      >
+        <Text style={[styles.headerTitle, { color: theme.text }]}>
+          {entries.length > 0 ? `${entries.length} crashes` : 'No crashes 🎉'}
+        </Text>
+        {entries.length > 0 && (
+          <TouchableOpacity onPress={handleClear} activeOpacity={0.7}>
+            <Text style={[styles.clearBtn, { color: theme.error }]}>Clear</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      <FlatList
+        data={entries}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            style={[
+              styles.crashRow,
+              {
+                borderBottomColor: theme.border,
+                backgroundColor: item.isFatal ? `${theme.error}10` : theme.surface,
+              },
+            ]}
+            onPress={() => setSelectedEntry(item)}
+            activeOpacity={0.7}
+          >
+            <View
+              style={[
+                styles.fatalDot,
+                { backgroundColor: item.isFatal ? theme.error : theme.warning },
+              ]}
+            />
+            <View style={styles.crashInfo}>
+              <Text style={[styles.crashMsg, { color: theme.text }]} numberOfLines={2}>
+                {item.message}
+              </Text>
+              <Text style={[styles.crashTimestamp, { color: theme.textMuted }]}>
+                {formatTimestamp(item.timestamp)}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        )}
+        ListEmptyComponent={
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyIcon}>✅</Text>
+            <Text style={[styles.emptyText, { color: theme.textMuted }]}>No crashes captured</Text>
+          </View>
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerTitle: { fontSize: 14, fontWeight: '700' },
+  clearBtn: { fontSize: 13, fontWeight: '700' },
+  backBtn: { fontSize: 14, fontWeight: '600' },
+  headerActions: { flexDirection: 'row', gap: 12 },
+  actionText: { fontSize: 12, fontWeight: '600' },
+  crashRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  fatalDot: { width: 8, height: 8, borderRadius: 4, marginRight: 10 },
+  crashInfo: { flex: 1 },
+  crashMsg: { fontSize: 13, fontWeight: '500' },
+  crashTimestamp: { fontSize: 10, marginTop: 2 },
+  emptyContainer: { alignItems: 'center', paddingVertical: 60 },
+  emptyIcon: { fontSize: 48, marginBottom: 12 },
+  emptyText: { fontSize: 13 },
+  detailContent: { flex: 1, padding: 12 },
+  crashBadge: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: 10,
+    paddingVertical: 3,
+    borderRadius: 6,
+    marginBottom: 8,
+  },
+  crashBadgeText: { fontSize: 10, fontWeight: '800', color: '#FFF', letterSpacing: 1 },
+  crashTime: { fontSize: 11, marginBottom: 8 },
+  crashMessage: { fontSize: 16, fontWeight: '700', marginBottom: 16 },
+  stackBlock: { padding: 12, borderRadius: 8 },
+  stackLabel: { fontSize: 11, fontWeight: '700', marginBottom: 4, textTransform: 'uppercase' },
+  stackText: { fontSize: 11, fontFamily: 'monospace', lineHeight: 18 },
+});
+
+export function createCrashReporterPlugin(): DebuggerPlugin {
+  return {
+    id: 'crash-reporter',
+    name: 'Crashes',
+    icon: '💥',
+    component: CrashReporterPanel,
+    order: 100,
+  };
+}