Reactotron — Desktop Debugging App for React and React Native

Introduction

Reactotron is a desktop debugging tool maintained by Infinite Red that connects to your React or React Native application over a WebSocket. It gives you a live feed of state changes, network requests, and custom events without cluttering your browser DevTools or terminal.

What Reactotron Does

• Displays real-time Redux, MobX, and MobX-State-Tree state changes
• Logs API requests and responses with timing information
• Shows async storage operations for React Native
• Provides performance benchmarking and overlay tools
• Supports custom commands and log events from your application

Architecture Overview

Reactotron consists of two parts: a desktop app built with Electron and client libraries for React and React Native. The client library integrates with your app via plugins (Redux, networking, async storage) and sends events over a WebSocket connection to the desktop app. The desktop app renders a timeline of events with filtering, search, and state snapshots. Plugins are modular, so you only include what you need.

Self-Hosting & Configuration

• Download the desktop app for macOS, Linux, or Windows from GitHub releases
• Install the appropriate client package (reactotron-react-native or reactotron-react-js)
• Create a ReactotronConfig file to configure plugins and connection settings
• Initialize Reactotron before your app renders, typically in an index or config file
• Use environment checks to disable Reactotron in production builds

Key Features

• Live timeline of state changes, API calls, and custom events
• State snapshots let you view and restore previous application states
• Built-in benchmarking tools for measuring render and function performance
• Plugin architecture supporting Redux, Saga, MobX, and async storage
• Custom commands let you trigger actions in your app from the desktop

Comparison with Similar Tools

• React DevTools — Inspects component tree; Reactotron focuses on state and network events
• Flipper — Meta's mobile debugger (now archived); Reactotron remains actively maintained
• Redux DevTools — Browser extension for Redux only; Reactotron covers broader debugging
• React Native Debugger — Combines Chrome DevTools with React; heavier, less focused
• Sentry — Production error tracking; Reactotron is for development-time debugging

FAQ

Q: Does Reactotron work with Expo? A: Yes. Reactotron works with Expo projects. Install the React Native client and configure it in your app entry point.

Q: Can I use Reactotron without Redux? A: Yes. Reactotron works independently of Redux. You can use it for API monitoring, logging, and benchmarking without any state management library.

Q: Does Reactotron affect production performance? A: No, if configured correctly. Wrap Reactotron initialization in a development-only check so it is tree-shaken from production builds.

Q: Is Reactotron still maintained? A: Yes. Reactotron is actively maintained by Infinite Red with regular updates and community contributions.

Sources

• https://github.com/infinitered/reactotron
• https://docs.infinite.red/reactotron/