rn-backstage 1.0.0 → 1.1.0

package/lib/typescript/types.d.ts

@@ -14,6 +14,28 @@ export interface LogEntry {
     data?: unknown;
     timestamp: number;
 }
+export declare enum NetworkState {
+    pending = "pending",
+    completed = "completed",
+    error = "error"
+}
+export interface NetworkEntry {
+    id: string;
+    method: string;
+    url: string;
+    startTime: number;
+    endTime?: number;
+    duration?: number;
+    status?: number;
+    statusText?: string;
+    requestHeaders?: Record<string, string>;
+    responseHeaders?: Record<string, string>;
+    requestBody?: string;
+    responseBody?: string;
+    responseSize?: number;
+    error?: string;
+    state: NetworkState;
+}
 export interface AppInfoItem {
     label: string;
     value: string;
@@ -85,6 +107,16 @@ export interface BackstageProps {
     initialY?: number;
     /** Text displayed on the floating pill. Defaults to appVersion or "DEV" */
     pillText?: string;
+    /** Whether to enable network request interception. Default: true */
+    enableNetworkInspector?: boolean;
+    /** Maximum number of network entries to retain in memory. Default: 500 */
+    maxNetworkEntries?: number;
+    /** Maximum body size (bytes) to capture per request/response. Default: 65536 (64KB) */
+    maxNetworkBodySize?: number;
+    /** URL substrings to exclude from network capture */
+    networkFilters?: string[];
+    /** Auto-filter console.logs from network callbacks (e.g., Axios interceptors) out of the Logs tab. Default: true */
+    autoFilterNetworkLogs?: boolean;
 }
 export interface BackstageStyleOverrides {
     pillStyle?: StyleProp<ViewStyle>;

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-backstage",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A zero-dependency developer/QA debug panel for React Native apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Backstage.tsx

@@ -7,11 +7,16 @@ import React, {
   useState,
 } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { DEFAULT_MAX_LOGS } from './constants'
+import { DEFAULT_MAX_LOGS, DEFAULT_MAX_NETWORK_ENTRIES } from './constants'
 import { installInterceptor, LogBuffer, uninstallInterceptor } from './log-interceptor'
+import {
+  installNetworkInterceptor,
+  NetworkBuffer,
+  uninstallNetworkInterceptor,
+} from './network-interceptor'
 import { FloatingPill } from './components/FloatingPill'
 import { BackstagePanel } from './components/BackstagePanel'
-import type { BackstageProps, BackstageRef, LogEntry } from './types'
+import type { BackstageProps, BackstageRef, LogEntry, NetworkEntry } from './types'
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
@@ -34,21 +39,29 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       initialX,
       initialY,
       pillText,
+      enableNetworkInspector = true,
+      maxNetworkEntries = DEFAULT_MAX_NETWORK_ENTRIES,
+      maxNetworkBodySize,
+      networkFilters,
+      autoFilterNetworkLogs = true,
     },
     ref,
   ) => {
     const [panelVisible, setPanelVisible] = useState(false)
     const [hasError, setHasError] = useState(false)
     const [logs, setLogs] = useState<LogEntry[]>([])
+    const [networkEntries, setNetworkEntries] = useState<NetworkEntry[]>([])
 
     const logBuffer = useRef(new LogBuffer(maxLogs))
+    const networkBuffer = useRef(new NetworkBuffer(maxNetworkEntries))
 
     // ── Panel controls ────────────────────────────────────────
 
     const openPanel = useCallback(() => {
       setPanelVisible(true)
-      // Sync logs when opening panel
+      // Sync logs and network entries when opening panel
       setLogs(logBuffer.current.getAll())
+      setNetworkEntries(networkBuffer.current.getAll())
     }, [])
 
     const closePanel = useCallback(() => {
@@ -61,12 +74,23 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       setHasError(false)
     }, [])
 
-    // ── Refresh logs ──────────────────────────────────────────
+    // ── Refresh logs ──────────────────────────────────────────────────
 
     const refreshLogs = useCallback(() => {
       setLogs(logBuffer.current.getAll())
     }, [])
 
+    // ── Network controls ──────────────────────────────────────────────
+
+    const refreshNetwork = useCallback(() => {
+      setNetworkEntries(networkBuffer.current.getAll())
+    }, [])
+
+    const clearNetwork = useCallback(() => {
+      networkBuffer.current.clear()
+      setNetworkEntries([])
+    }, [])
+
     // ── Install console interceptor ───────────────────────────
 
     useEffect(() => {
@@ -79,12 +103,38 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
         }
       }
 
-      installInterceptor(handleLogEntry, logFilters)
+      installInterceptor(handleLogEntry, logFilters, {
+        autoFilterNetworkLogs: enableNetworkInspector && autoFilterNetworkLogs,
+      })
 
       return () => {
         uninstallInterceptor()
       }
-    }, [logFilters])
+    }, [logFilters, enableNetworkInspector, autoFilterNetworkLogs])
+
+    // ── Install network interceptor ───────────────────────────────
+
+    useEffect(() => {
+      if (!enableNetworkInspector) return
+
+      const handleNetworkEntry = (entry: NetworkEntry) => {
+        networkBuffer.current.upsert(entry)
+
+        // Auto-refresh if panel is open
+        if (panelVisible) {
+          setNetworkEntries(networkBuffer.current.getAll())
+        }
+      }
+
+      installNetworkInterceptor(handleNetworkEntry, {
+        filters: networkFilters,
+        maxBodySize: maxNetworkBodySize,
+      })
+
+      return () => {
+        uninstallNetworkInterceptor()
+      }
+    }, [enableNetworkInspector, networkFilters, maxNetworkBodySize, panelVisible])
 
     // ── Expose ref methods ────────────────────────────────────
 
@@ -122,6 +172,10 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
           logs={logs}
           onRefreshLogs={refreshLogs}
           onCopyLogs={onCopyLogs}
+          networkEntries={networkEntries}
+          onRefreshNetwork={refreshNetwork}
+          onClearNetwork={clearNetwork}
+          onCopyNetwork={onCopyLogs}
           extraTabs={extraTabs}
           styles={propStyles}
         >

package/src/components/BackstagePanel.tsx

@@ -12,11 +12,13 @@ import { DarkTheme, MonospaceFont, TestIDs } from '../constants'
 import { TabBar } from './TabBar'
 import { InfoTab } from './InfoTab'
 import { LogsTab } from './LogsTab'
+import { NetworkTab } from './NetworkTab'
 import type {
   AppInfoItem,
   BackstageStyleOverrides,
   BackstageTab,
   LogEntry,
+  NetworkEntry,
   QuickAction,
 } from '../types'
 
@@ -39,6 +41,12 @@ interface BackstagePanelProps {
   onRefreshLogs: () => void
   onCopyLogs?: (logs: string) => void
 
+  // Network tab props
+  networkEntries: NetworkEntry[]
+  onRefreshNetwork: () => void
+  onClearNetwork: () => void
+  onCopyNetwork?: (text: string) => void
+
   // Extensibility
   extraTabs?: BackstageTab[]
 
@@ -51,6 +59,7 @@ interface BackstagePanelProps {
 
 const BUILT_IN_TABS = [
   { key: 'info', title: 'Info', icon: 'ℹ️' },
+  { key: 'network', title: 'Network', icon: '🌐' },
   { key: 'logs', title: 'Logs', icon: '📋' },
 ]
 
@@ -68,6 +77,10 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
   logs,
   onRefreshLogs,
   onCopyLogs,
+  networkEntries,
+  onRefreshNetwork,
+  onClearNetwork,
+  onCopyNetwork,
   extraTabs = [],
   styles: propStyles,
   children,
@@ -98,6 +111,15 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
             {children}
           </InfoTab>
         )
+      case 'network':
+        return (
+          <NetworkTab
+            entries={networkEntries}
+            onRefresh={onRefreshNetwork}
+            onClear={onClearNetwork}
+            onCopy={onCopyNetwork}
+          />
+        )
       case 'logs':
         return (
           <LogsTab