Skip to content

Feature/enhanced network debugger#2

Merged
cmcWebCode40 merged 19 commits intomainfrom
feature/enhanced-network-debugger
Apr 23, 2026
Merged

Feature/enhanced network debugger#2
cmcWebCode40 merged 19 commits intomainfrom
feature/enhanced-network-debugger

Conversation

@cmcWebCode40
Copy link
Copy Markdown
Owner

@cmcWebCode40 cmcWebCode40 commented Apr 23, 2026


Summary

This PR introduces a major enhancement to the React Native API Debugger with new features for better debugging experience, improved UI/UX, and a
modular architecture.

New Features

  • Dark/Light Theme Support - Toggle between themes with the 🌙/☀️ button
  • Advanced Filtering - Filter logs by status code (2xx, 3xx, 4xx, 5xx, Errors) and search across URL, method, and body
  • Export Capabilities - Export logs in HAR (browser DevTools), Postman Collection, or JSON formats
  • Request Replay - Replay captured requests with optional modifications and response comparison
  • Sensitive Data Redaction - Automatically detect and redact sensitive headers, body fields, and URL parameters
  • Individual Log Deletion - Delete specific log entries via the ✕ button (no gesture handler required)
  • Slow Request Detection - Visual indicator (🐢) for requests exceeding the configurable threshold
  • Configurable Interceptor - Runtime configuration for maxLogs, ignored URLs/domains/methods, and slow request threshold
  • Interactive JSON Viewer - Collapsible tree view with syntax highlighting for request/response bodies

Architecture Improvements

  • New modular structure with components/, constants/, and utils/ directories
  • Centralized theme colors and configuration constants
  • Reusable utility functions for filtering, formatting, cURL generation, and exports
  • Full TypeScript support with exported interfaces

Bug Fixes

  • Fixed dark theme toggle not working when controlled externally
  • Fixed share sheet being blocked by the fullscreen modal

New Configuration Options

  maxLogs: 50,                                                                                                                                    
  ignoredUrls: ['/health', '/ping'],                                                                                                              
  ignoredDomains: ['analytics.example.com'],                                                                                                      
  ignoredMethods: ['OPTIONS'],                                                                                                                    
  slowRequestThreshold: 2000,                                                                                                                     
});                                                                                                                                               

cmcWebCode40 and others added 19 commits April 23, 2026 14:25
Add centralized constants for theming (light/dark mode color palettes,
method colors, status code colors) and default configuration options
including maxLogs, ignored URLs/domains, redaction settings, and slow
request threshold.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add filter utilities supporting status code filtering (2xx-5xx), method
filtering, search across URL/body/headers, and log statistics. Include
cURL command generation and data formatting helpers.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Support exporting network logs to HAR format (for browser DevTools),
Postman collections (for API testing), and raw JSON. Includes proper
header/query string parsing and content type detection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Enable replaying captured network requests with optional header/body
modifications. Includes timeout support, safety warnings for destructive
methods (POST, PUT, DELETE), and response comparison to detect changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add configurable redaction for sensitive headers (Authorization, API keys,
cookies), body fields (passwords, tokens, credit cards, SSN), and URL
query parameters. Includes detection of sensitive data with warnings.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add reusable Badge component for status indicators and FilterChip
component for filter tags with theme support.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ighting

Add interactive JSON viewer supporting expand/collapse, syntax highlighting
for keys/strings/numbers/booleans, configurable initial expansion depth,
and light/dark theme support.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add modal UI for selecting export format (HAR, Postman Collection, JSON)
with themed styling, loading states, and native share sheet integration.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ring

Add runtime configuration support for maxLogs, ignored URLs/domains/methods,
and slow request threshold. Requests exceeding the threshold are flagged
with isSlow property for visual indication in the UI.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ties

Update NetworkLoggerOverlay with light/dark theme toggle, status filter
chips (2xx/3xx/4xx/5xx/Errors), log statistics, export modal integration,
and production mode warning. Improve NetworkLogItem with themed styles
and slow request indicators. Add theme support to FloatingButton and
NonFloatingButton components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Export constants, utils, and components modules for public API access.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add demonstration of configuration options (maxLogs, ignoredUrls,
ignoredDomains, slowRequestThreshold). Include test buttons for 500
errors, slow requests, and ignored URLs. Add display settings toggle
and updated usage instructions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive development guide documenting project architecture,
component design system, configuration interfaces, and development
workflow. Update package.json with any necessary changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fix dark theme toggle not working due to incorrect theme state logic -
the toggle now properly uses internalTheme state instead of the prop.

Add delete button (✕ icon) to each network log item header, allowing
users to remove individual requests without additional dependencies
like gesture handlers.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The share sheet was being blocked by the fullscreen modal. Now the modal
closes first with a small delay to allow the share sheet to appear
properly on top.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…rage

Reorganized README with:
- Reduced emoji usage for cleaner look
- Quick Setup section with progressive examples
- Advanced Usage section covering configuration, exports, replay, redaction
- Complete API reference tables
- Production safety guidance
- Troubleshooting section

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@cmcWebCode40 cmcWebCode40 merged commit 0521451 into main Apr 23, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant