A talk I gave at Montreal React Native Meetup (August Edition) This talks is dedicated to Reactotron, a debugging desktop application that tightly integrate with React and Redux as well as providing nice debugging goodies like network inspection, async storage inspection, screenshot, overlay and more. The outline of the talk is: What is it? How does it work? What it can do for you? * Redux State Management * Reporting & Logging * Networking * Miscellaneous Slides include presenter notes.

1. SAMSAO

2. Reactotron
A Debugging Agent

3. What is Reactotron?
So, the first question you might ask, is what is Reactotron exactly?
Let’s check this right now

4. What is Reactotron?
A desktop application (built using Electron)
A debugging agent
Plugin based
* A cross-platform desktop application available for Window, Linux and Mac
* Built using GitHub’s Electron. A framework to build cross-platform desktop application using JavaScript, HTML and CSS.
* For those who don’t know, it embeds Chromium web rendering engine, Node and V8 JavaScript engine
* Slack and Atom are other example applications built using Electron framework.
* Purpose of the tool is to aid debugging React JS/React Native application.
* Like inspecting your application state, check network traffic, inspect logs, etc.

5. How it works?
Before seeing what it can do for you, since we are all curious, let’s check how it works exactly.

6. How it works?
Client/Server architecture
React JS client
React Native client
Reactotron object to interact with server
* Reactotron is based a client/server architecture, where the desktop application is the server and your React JS/React Native application the client.
* The desktop application starts socket.io server listening on port 9090 (by default).
* React JS application, on initialization, create a client and connect to server on localhost hostname on port 9090.
* React Native application, once startup, create a client and connect to server on localhost.
* If on real device, you will need to configure the client to connect back to your computer’s IP.
* The Reactotron object is being used to “talk” to the server. In their demo app, they are hooking the object into console.tron.
* From the object, you can display stuff, log data, send screenshot, display benchmark info, etc.

7. What can you do with it?
* Now that we know what it is and how it works, let’s check you what you can do with it.
* For the following slides, I will first do the talk about the features and will demo them right after.

8. Redux State Management
Inspect dispatched actions and repeat them
Edit (or create from scratch) an action and dispatch
Monitor Redux store state
Redux store snapshots and replay
Supports Redux Saga
* Use the reactotron-redux plugin to connect Reactotron to your Redux store.
* Once configured, all disptached actions are visible in the event timeline.
* You can inspect the action details.
* You can repeat an existing action that was dispatched before.
* You can edit a previous action and dispatch back.
* You can store a snapshot of the current store and replay it later.
* It supports Redux Saga out of the box.

9. Reporting & Logging
Hook into error handler to display uncaught exceptions
Open in editor
Allow to log exception (reportError)
Allow to log stuff (log, debug, warn, error)
Allow to display random stuff
* On web, it hooks on window.onerror while on React Native, it hooks into an internal message called NativeModules.ExceptionsManager.updateExceptionMessage.
Once hooked up, it report all errors.
* Exceptions are displayed with their stacktraces (using Packager Symbolicate feature to use the source-map and transform the transpiled stacktrace into your own
source stacktrace).
* Similar to console feature, it’s possible to forward logging message to Reactotron using well-known .log, .warn, .debug and .error methods.
* The client also has a generic display method that can be used to display random objects.
* Not limited to that, the display function is able to display screenshots! In react native, using react-native-view-shot, it’s possible to see the screenshot in the desktop
directly.

10. Networking
Integrate into ApiSauce
Inspect request/response headers
Inspect request/response body
* Reactotron as support for APISauce, a thin wrapper library around Axios.
* The plugin hooks into axios request pipeline and forward everything to Reactotron desktop application.
* For each request/response, it’s possible to inspect the request headers & body and the same thing for the response.

11. Miscellaneous
Overlay an image over a component
AsyncStorage tracking
* It’s possible to overlay an image over a component.
* This feature is cool for example when doing layout of a screen.
* However, it’s intrusive as you must us an higher-order component and wrap your own component with it, a bit like Redux connect does.
* Reactotron also has AsyncStorage support. You view async storage audit in the desktop application directly.

12. Conclusion
* It a nice tool already really useful.
* Still some rough edges in the user experience
* JSON errors when editing action does not display errors
* Some actions are not clear (press to delete)
* Missing features
* More integrations
* Inspect actual state
* View react tree + props + state

13. QUESTIONS?

14. THANK YOU!