netwatch

Terminal-based network inspector for React Native apps. Captures HTTP requests via Reactotron and displays them in a flicker-free split-pane TUI.

Features

• Split-pane TUI — request list (left) + detail view (right) with borders
• Flicker-free rendering — Ink incremental rendering + synchronized output (BSU/ESU)
• JSON syntax highlighting — colored keys, strings, numbers, booleans in response bodies
• Status badges — background-colored status codes with descriptions (200 OK, 404 Not Found, etc.)
• Headers toggle — press h to show/hide request/response headers
• Fuzzy filtering — press / to search by URL, method, or status
• Mouse support — click to focus panes, scroll wheel on focused pane, hover highlighting
• Follow-cursor scrolling — request list viewport follows selection
• Request/response toggle — press r to switch between request and response body
• Pause capture — press p to pause incoming requests
• Terminal resize — layout adjusts dynamically on window resize
• Config file — .netwatchrc for port, mode, ignored URLs, max requests

Quick Start

# Clone and install
git clone https://github.com/kmelkon/netwatch.git
cd netwatch
npm install --registry https://registry.npmjs.org/

# Run
npm start

Then configure your React Native app to connect Reactotron to port 9090.

Keyboard Shortcuts

| Key | Action | |-----|--------| | ↑↓ / j/k | Navigate request list | | u / d | Scroll detail pane | | r | Toggle request/response body | | h | Toggle headers display | | / | Focus filter input | | Esc | Exit filter | | c | Clear all requests | | p | Pause/resume capture | | q | Quit |

Mouse Support

• Click a pane to focus it (cyan border)
• Scroll wheel on the focused pane to scroll content
• Hover highlights pane border (yellow)

Requires a terminal with mouse support (iTerm2, kitty, WezTerm, Windows Terminal).

Configuration

Create a .netwatchrc file in your project root or ~/.netwatchrc:

{
  "port": 9090,
  "mode": "reactotron",
  "ignoredUrls": ["/symbolicate", "/logs"],
  "maxRequests": 500
}

| Option | Default | Description | |--------|---------|-------------| | port | 9090 | WebSocket server port | | mode | "reactotron" | Connection mode (reactotron or standalone) | | ignoredUrls | [] | URL patterns to ignore | | maxRequests | 500 | Max stored requests |

The NETWATCH_PORT environment variable overrides the config file port.

Tech Stack

• Ink — React for terminal UIs
• Zustand — state management
• Fuse.js — fuzzy search
• ws — WebSocket server
• chalk — terminal styling

Development

npm run dev        # Watch mode
npm test           # Run tests
npm run test:watch # Watch tests

Reactotron Setup

In your React Native app:

import Reactotron from "reactotron-react-native";

Reactotron.configure({
  host: "localhost",
  port: 9090,
})
  .useReactNative({ networking: true })
  .connect();

Tip: Reactotron doesn't auto-reconnect. Add onDisconnect to retry:

Reactotron.configure({
  host: "localhost",
  port: 9090,
  onDisconnect: () => setTimeout(() => Reactotron.connect(), 3000),
})