React Native network debugger (Clean Architecture) - JS only
npm install @tudp/rn-debuggerA powerful React Native network debugging library with advanced features for monitoring API calls, generating cURL commands, and detailed request/response inspection.
- ๐ Real-time Network Monitoring: Automatically captures all fetch requests
- ๐ช Force Override: Overrides other network monitoring tools (like Reactotron) when needed
- ๐ Copy as cURL: Generate and copy cURL commands for any request
- ๐ฏ Detailed Inspection: View headers, body, response, timing, and status
- ๐งน Clear Requests: Easy management of captured requests
- ๐ฑ React Native UI: Beautiful, responsive UI for viewing network requests
- ๐๏ธ Clean Architecture: Well-structured, maintainable codebase
``bash`
npm install @tudp/rn-debuggeror
yarn add @tudp/rn-debugger
This library uses react-native-vector-icons for UI icons:
`bash`
npm install react-native-vector-iconsor
yarn add react-native-vector-icons
Follow the installation guide for react-native-vector-icons to set up the native dependencies.
To enable the "Copy as cURL" feature, install the clipboard library:
`bashInstall clipboard dependency for copy functionality
npm install @react-native-clipboard/clipboardor
yarn add @react-native-clipboard/clipboard
Quick Start
$3
`typescript
import { startNetworkLogging } from "@tudp/rn-debugger";// Basic usage - Uses XHRInterceptor when available, falls back to fetch patching
startNetworkLogging();
// Advanced configuration
startNetworkLogging({
force: true, // Override other network tools (e.g., Reactotron)
maxRequests: 1000, // Maximum number of requests to keep (default: 500)
ignoredHosts: ["localhost"], // Hosts to ignore
ignoredUrls: ["https://analytics.example.com"], // Specific URLs to ignore
ignoredPatterns: [
// Regex patterns to ignore
/^GET https:\/\/.*\.png$/, // Ignore image requests
/\/health$/, // Ignore health check endpoints
],
});
`$3
`typescript
import React from "react";
import { View } from "react-native";
import { NetworkDebugger, startNetworkLogging } from "@tudp/rn-debugger";const App = () => {
React.useEffect(() => {
// Start with advanced configuration
startNetworkLogging({
force: true,
maxRequests: 1000,
ignoredHosts: ["127.0.0.1"], // Ignore localhost
});
}, []);
const [showDebugger, setShowDebugger] = useState(false);
return (
{/ Your app content /}
{/ Button to show debugger /}
{__DEV__ && (
style={{
position: "absolute",
top: 50,
right: 20,
backgroundColor: "#007AFF",
padding: 10,
borderRadius: 5,
}}
onPress={() => setShowDebugger(true)}
>
Debug Network
)}
{/ Network debugger with close option /}
{showDebugger && (
visible={showDebugger}
onClose={() => setShowDebugger(false)}
/>
)}
);
};
`$3
`typescript
interface NetworkDebuggerProps {
visible?: boolean; // Control visibility (default: true)
onClose?: () => void; // Callback when user closes the debugger
}// Basic usage - always visible
;
// Controlled usage - with close option
const [showDebugger, setShowDebugger] = useState(false);
visible={showDebugger}
onClose={() => setShowDebugger(false)}
/>;
`$3
`typescript
import { showSuccessToast, showErrorToast, showToast } from "@tudp/rn-debugger";// Success toast
showSuccessToast("Request copied successfully!");
// Error toast
showErrorToast("Failed to copy request");
// Custom toast
showToast("Custom message", "SHORT"); // or "LONG"
`$3
``typescript
import {
startNetworkLogging,
stopNetworkLogging,
getRequests,
clearRequests,
addCallback,
removeCallback
} from '@tudp/rn-debugger';// Start monitoring with advanced options
startNetworkLogging({
force: true,
maxRequests: 1000,
ignoredPatterns: [/\/logs$/, /\/metrics$/]
});
// Real-time callback for request updates
const onRequestsUpdate = (requests) => {
console.log(
Total requests: ${requests.length});
};addCallback(onRequestsUpdate);
// Get all captured requests
const requests = getRequests();
// Clear all requests
clearRequests();
// Remove callback
removeCallback(onRequestsUpdate);
// Stop monitoring
stopNetworkLogging();
`## Troubleshooting$3
Use debug functions to check the status:
`typescript
import { getDebugInfo, testInterceptor } from "@tudp/rn-debugger";// Check interceptor status
const debugInfo = getDebugInfo();
console.log("Debug info:", debugInfo);
// Test if interceptor is working
testInterceptor().then((success) => {
console.log("Interceptor test:", success ? "PASSED" : "FAILED");
});
``Debug info will show:
-
isLogging: Whether interceptor is active
- hasOriginalFetch: Whether original fetch was saved
- hasFetch: Whether fetch exists in global scope
- fetchIsPatched: Whether fetch has been patched
- requestCount: Number of captured requests$3
1. No requests showing: Make sure to call
startNetworkLogging({ force: true })
2. Reactotron conflict: Use force: true option
3. Missing global fetch: Check if your React Native version supports fetchArchitecture & Performance
$3
The library uses an intelligent dual-strategy approach:
1. XHRInterceptor (Preferred): Uses React Native's built-in XHRInterceptor when available
- More stable and efficient
- Better compatibility with React Native ecosystem
- Automatic fallback support for different RN versions (0.78+)
2. Fetch Patching (Fallback): Direct fetch patching when XHRInterceptor unavailable
- Universal compatibility
- Works with any JavaScript environment
$3
- Debounced Updates: UI updates are debounced to prevent excessive re-renders
- Singleton Pattern: Single logger instance prevents memory leaks
- Smart Filtering: Multiple filtering strategies to reduce noise
- Memory Management: Automatic request limit enforcement
- Real-time Callbacks: Efficient callback system instead of polling
$3
`typescript
startNetworkLogging({
ignoredHosts: ["analytics.com", "metrics.service.com"],
ignoredUrls: ["https://api.service.com/health"],
ignoredPatterns: [
/^GET.*\.(png|jpg|gif)$/, // Ignore image requests
/\/websocket$/, // Ignore WebSocket connections
/\?utm_/, // Ignore tracking URLs
],
});
`$3
When you have other network monitoring tools (like Reactotron) running, use the
force option:`typescript
startNetworkLogging({ force: true });
`This will override any existing fetch patches and ensure that tudp-rn-debugger captures all network requests.
$3
`typescript
import { generateCurlCommand, getRequests } from "@tudp/rn-debugger";const requests = getRequests();
const curlCommand = generateCurlCommand(requests[0]);
console.log(curlCommand);
// Output:
// curl -X POST \
// -H "Content-Type: application/json" \
// -H "Authorization: Bearer token123" \
// -d "{"username":"test","password":"123"}" \
// "https://api.example.com/login"
`Development Setup
$3
`bash
yarn install
`$3
`bash
yarn build
`$3
`bash
yarn test
`$3
`bash
npm pack
`Using in a Demo App
1. Pack the module:
`bash
npm pack
`2. In your demo RN app:
`bash
yarn add ../path/to/tudp-rn-debugger-1.0.0.tgz
`3. In App.tsx:
`typescript
import { startNetworkLogging, NetworkDebugger } from "@tudp/rn-debugger"; const App = () => {
React.useEffect(() => {
startNetworkLogging({ force: true });
}, []);
return {__DEV__ && } ;
};
``Note: When linking locally, use Metro config to alias react/react-native to the demo app to avoid duplicate react instances.