Announcing Reactotron 3.0!

Reactotron 3.0 is here! The latest evolution of our popular open-source desktop app used for inspecting and debugging React Native applications.

Our team has been hard at work, rewriting a large part of Reactotron’s core internals to bring you better performance, and a better debugging experience for your React and React Native apps!

What is Reactotron?

Reactotron is a MacOS, Windows and Linux tool for debugging React and React Native that provides a range of useful features to make debugging faster and easier, including:

• Improved Logging: Logs from your app appear directly in Reactoron, superpowered by filters, search, custom messages, network request logging, and even Redux actions.
• Real-time State Inspection: Reactotron provides a clear view of your app’s state in real-time, including Redux and MobX stores.
• Network Inspection: Debug API interactions as they happen by inspecting network requests and responses,
• Custom Commands: Define custom commands in your react native app, that allow you to trigger actions with the Reactotron UI. Use custom commands to sign-in or sign-out, add/remove items in lists to test animations, navigate between screens or anything else you can think of! If you can do it in your app, you can create a custom command for it!
• Robust Plugin System: You can create your own custom plugins to extend Reactotron’s functionality.

Reactotron has been around since 2016 and our team at Infinite Red has been using it on client projects since then..

So what’s new in Reactotron 3.0?

Logs are now tracked by default

In Reactotron 3, logs are automatically captured and sent to the timeline.

No more Reactotron.log() or console.tron.log() — now every log message will be captured and sent to the Reactotron timeline, where you can use Reactotron’s powerful searching and sorting tools to quickly find the logs you need.

Just use your good old friend console.log, and get better formatting than your terminal!

Better Android device debugging

One of our most commonly reported issues was difficulty connecting to Reactotron with Android devices or emulators.

https://github.com/infinitered/reactotron/issues?q=is%3Aissue+android+is%3Aclosed

In Reactotron 3.0, our redesigned Help page provides a list of all available Android devices, and you can send commands like “Reverse Tunnel”, “Reload App” or “Shake” directly from the Reactotron UI! We’ve also included some helpful instructions for debugging, in case you get stuck.

The Help page on Reactotron

We’ve also made connecting to Reactotron 3.0 easier than ever! — Reactotron will now automatically connect to your device’s IP. That means you no longer need to run adb reverse tcp:9090 tcp:9090 in order to connect on Android, and you don’t need to specify the host in your app’s config!

Remove “localhost” from the host key in your Reactotron configuration

Faster app launch time

Reactotron is built on Electron, which can sometimes be difficult to optimize. We’ve delved into the tools and identified a few ways to optimize startup time and memory usage of the app.

New shortcut: ⌘+K!

⌘+K now clears the timeline — we’ve brought this all-too-familiar keyboard shortcut to Reactotron so that you no longer have to hunt for the “clear” button in the interface! Pressing ⌘+K will clear the timeline screen of all entries, just like in your favorite terminal application!

Packages are now future proof

Starting in React Native 0.72, Metro is now adding support package exports. There is now a dedicated “react-native” key in package exports which allows package authors to ship their source code directly to users and let Metro handle bundling their packages.

Example package.json snippet of the new package exports key

We have updated all of Reactotron’s packages to support this new feature.

Now when users run into errors with Reactotron, Metro will pretty print errors with the correct line numbers instead of reporting minified source code.

Comparison of Reactotron source code error with and without minification.

The fam all lives in one place now

Previously, the diverse set of plugins and dependencies for Reactotron were spread out through 11 different git repositories. Reactotron 3.0 merges all the various bits of Reactotron into a single monorepo using nx. This makes it easier to work on and provides a central repository for everything Reactotron!

Much stronger types 💪

Reactotron has a new package: reactotron-core-contracts. This allows for much better type safety internally across packages but also externally for consumers.

Plugins have a powerful new structure which offers better type safety with the Plugin type for your plugins using the satisfies TypeScript keyword.

Example of a plugin from the Reactotron repository.

Also your Reactotron instance will now automatically infer feature methods your plugins add.

Example of inferred type from a Reactotron config.

Example of inferred features from a Reactotron config.

What’s up docs?

Finally, we’ve updated the documentation to be more accurate, up to date. We’ve also added new contributing documentation to make it easier for you to contribute to the Reactotron ecosystem!

Give Reactotron 3.0 a try

1. Download the new Reactotron app

Look for the latest version of reactotron-app on our GitHub releases page.

2. Update your core dependencies

yarn upgrade reactotron-core-client@latest reactotron-react-native@latest

or

npm upgrade reactotron-core-client@latest reactotron-react-native@latest

3. Update plugins

Depending on which Reactotron plugins you’re using, you may need to update other packages to their latest versions. To do this, find any other reactotron-* dependencies (like reactotron-mst) in your package.json file and run yarn upgrade reactotron-package-name@latest for each of them.

For example for an Ignite app, you’d need to run

yarn upgrade reactotron-core-client@latest reactotron-react-native@latest reactotron-react-js@latest reactotron-mst@latest

or

npm upgrade reactotron-core-client@latest reactotron-react-native@latest reactotron-react-js@latest reactotron-mst@latest

4. Update your Reactotron config

See Ignite for a good example of a mature Reactotron configuration

Come chat with us about it

We’ve got a dedicated channel for Reactotron in our Infinite Red community Slack! Get support, post a custom command you use on your app, or just chat about it.

If something isn’t working the way it’s supposed to please, file an issue on GitHub!

Acknowledgements

• Josh Yoes: Helped facilitate monorepo migration. Updated CI pipeline. Fixed trackGlobalError plugin. Added the new trackGlobalLogs core plugin. Added community snippet to allow for Expo Android devices to automatically connect.
• Mark Rickert: Updated Electron and tuned it to have faster start up times. Completed several dependency upgrades. Authored a helpful contributing guide. Added the new Android debugging feature.
• Frank Calise: Contributed bug fixes for display and request timeline components.
• Carlin Issacson: Architected the monorepo migration. Added the CMD+K shortcut to clear the timeline.
• Silas Matson: Assisted in the monorepo migration. Helped with dependency upgrades.
• Simran Kaur: Authored the initial draft of the Reactotron beta documentation.
• Trevor Coleman: Gave great feedback on this announcement article.
• Ryan Linton: Came in clutch with debugging Electron notarization issues.
• Nick Morgan: QA testing and helping play detective on final Electron beta builds.
• Rich Evans: Former maintainer of Reactotron, started the Reactotron 3 work originally and consulted on continuing work.
• Steve Kellock: Creator of Reactotron.
• Others at Infinite Red and the Reactotron community: Testing, bug reporting, and pairing.

Don’t forget to star the Reactotron repository if you already haven’t. And give this article a clap to celebrate the team’s work!