infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack

Introduction

Reactotron is a powerful debugger for React and React Native applications. It provides an easy-to-use interface for developers to monitor their application's state, network requests, and performance metrics and can be used for any size of project, from small personal apps to large-scale enterprise applications. The OG debugger at Infinite Red that we use on a day-to-day basis to build client apps. Additionally, Reactotron is completely open source and free to use, making it an invaluable tool for developers at all levels of experience.

We recommend that you watch Darin Wilson's talk at Chain React: Chain React 2018: Debugging and Beyond with Reactotron!

Reactotron Superpowers

Use Reactotron to:

• view your application state
• show API requests & responses
• perform quick performance benchmarks
• subscribe to parts of your application state
• display messages similar to console.log
• track global errors with source-mapped stack traces including saga stack traces!
• dispatch actions like a government-run mind control experiment
• hot swap your app's state using Redux or mobx-state-tree
• show image overlay in React Native
• track your Async Storage in React Native

You plug it into your app as a dev dependency so it adds nothing to your production builds.

Desktop

Reactotron on the left, demo React Native app on the right.

Installation

On the Releases page, you can find the latest version of:

• macOS (x64 & arm64)
• Linux (32-bit & 64-bit)
• Windows (32-bit & 64-bit)

How to setup Reactotron in our app

• React Native
• React

How to use Reactotron's features/plugins

• Track Global Errors
• Track Global Logs
• Networking
• Async Storage
• React Native MMKV
• Benchmark
• apisauce
• Overlay
• MST
• Redux
• Open in Editor
• Storybook (only for React Native)
  reactotron-react-native ships with Storybook. This enables you to switch to Storybook from the Reactotron app.
• Custom Commands

Tips and Tricks

Some tips that will elevate your Reactotron experience.

Bug Reports

When reporting problems with Reactotron, use the provided example app located in app/example-app to replicate the issue. This approach enables us to isolate and expedite the resolution of the problem.

Want to contribute? Here are some helpful reading materials

• Contributing
• Architecture
• Monorepo
• Release

Troubleshooting

• React Native iOS
• React Native Android

Credits

Reactotron is developed by Infinite Red, @rmevans9, and 70+ amazing contributors! Special thanks to @skellock for originally creating Reactotron while at Infinite Red.

Premium Support

Reactotron, as an open source project, is free to use and always will be. Infinite Red offers premium React and React Native mobile app design/development services. Email us at [email protected] to get in touch for more details.

reactotron's Issues

MobX

They have devtools already, but it doesn't support react native... https://github.com/mobxjs/mobx-react-devtools

Unable to resolve module fbjs/lib/performanceNow

Got an error while using Reactotron: Unable to resolve module fbjs/lib/performanceNow.

The issue is that fbjs is not a dependency of this project, of course.

When running npm3+ it is assumed that it will exist because of react or even react-native has it as a dependency. Unfortunately, when I got the error I was not running npm3, but npm 2.14.12, which keeps all modules' sub-modules within their respective sub-directory.

Please, add a note that this is a project that only compiles when installed, using npm3+, or add fbjs as a direct dependency to this project.

Show client-identifying info on connection

It'd be cool if reactotron showed info about the clients upon connecting.

Right now it says "connected", but could we log an object instead:

{
  version: '0.4.0',
  userAgent: '******',
  reactEnv: 'react-native|react-dom|react-native-web|react-native-desktop',
  platform: 'web|ios|android',
  ip: '127.0.0.1'
}

I realize some of this information is just not available without native plugins. But I'd be happy with the first two to start.

Make an option to use at global level

I know it is slightly ghetto, but, if we gave people the option to install reactotron into globals, then when you wanted to do some quick logging through your app, you could not have to import Reactotron from 'reactotron'.

This will be opt-in.

Add ApiLog support for superagent

Hi there,

First of all thanks for this great tool! I was wondering if there would be any interest in adding support for superagent, I would love to implement this. I guess I would only have to change the APILog command. Is there any interest from your side in adding such a feature?

reactotron-redux - Github link

https://www.npmjs.com/package/reactotron-redux

Clicking the github link on the right side results in a 404, probably since you moved packages out?

Would love to see the source of reactotron-redux not sure where it is anymore. Filing issue here out of shear stupidity.

Deep merge `window.navigator.userAgent`

Currently, the client is completely blowing away the window.navigator if there is no userAgent, however this interferes with React Native tools such as geolocation that are bound to window.navigator. Instead we should do a deep merge.

Subscribing to an object

It would be nice if we were able to subscribe to an object, currently when you subscribe to an object you only see [object Object].

Attempting to build client

verified on my machine and another person's (@fvonhoven) - babelHelper.typeof

Steps

1. cd reactotron
2. npm i
3. cd client
4. npm i
5. react-native run-ios

Alt support

Hi,
Is there any chance for alt flux support?
https://github.com/goatslacker/alt

Create store using alt:

export default alt.createStore(TodoStore, 'TodoStore');

How to run on startup [question]

I'm trying to follow the suggestion from the readme to start the Reactotron server from the script section of package.json, but can't really get it to work. I'm running it for a react-native project.
Reactotron runs fine when I type
$ node_modules/.bin/reactotron
in the command line.

I've tried
"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start && node_modules/.bin/reactotron" },
and other variations with no success.
Does anyone have an example on how to implement this?

Dispatch doesn't reach enhancers (sagas, loggers)

I'm a noob with react native, so excuse me if I'm missing something obvious.

I created a new ignite app. I modified App/Sagas/index.js with the following content:

function * test() {
  while (true) {
    yield take('DEV');
    console.log('dev');
  }
}

// start the daemons
export default function * root () {
  yield fork(watchStartup)
  yield fork(watchLoginAttempt)
  yield fork(getCityWeather(api).watcher)

  yield fork(test);
}

(I added the test function).

I modified the Startup saga like this:

export function * watchStartup () {
  yield take(Types.STARTUP);
  yield put({type: 'DEV'}); // <--- added by me
  const temp = yield select((state) => state.weather.temperature)
  // only fetch new temps when we don't have one yet
  if (!R.is(Number, temp)) {
    yield put(Actions.requestTemperature('San Francisco'))
  }
}

When I launch the app, I see the DEV saga logged in console, and "dev" being written in the chrome console. I can also see the DEV action logged in reactotron.

Then I try to trigger this action from the reactotron interface ({type: 'DEV'}).

Nothing happens. My saga isn't activated, nothing is logged in the console nor reactotron.

I think the problem is between the way your createSubscriptionListener and redux's applyMiddleware handle the store. Here are the relevant code snippets, in the order of execution.

reactotron/dist/client.js

    return function (reducer, initialState, enhancer) {
      // create this store
      var store = createStore(reducer, initialState, enhancer);

      // (snip)

      // attach the subscription to the store
      client.addReduxStore(store);  // <-- store version 1 sent to the addReduxStore

      // return the store but with our new dispatcher
      return R.merge(store, { dispatch: dispatch }); // <-- store version 2 returned
    };

//.....

client.addReduxStore = function (store) {
  store.subscribe(client.createSubscriptionListener(store)); // <-- store version 1 cached in this closure
  //...

redux/lib/applyMiddleware.js

      var store = createStore(reducer, initialState, enhancer); // <-- store version 2 appears here
      var _dispatch = store.dispatch;
      var chain = [];

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch(action) {
          return _dispatch(action);
        }
      };
      chain = middlewares.map(function (middleware) {
        return middleware(middlewareAPI);
      });
      _dispatch = _compose2["default"].apply(undefined, chain)(store.dispatch);  // <-- all the middleware / enhancers added here

      return _extends({}, store, { // <-- store version 3 returned to the rest of the app
        dispatch: _dispatch
      });

As you can see, reactotron's listener ends up with a bizzaro alternate universe version of the store, without any of the enhancers applied (including sagas, logging, etc.).

Register actionCreators for use on the server

An interesting idea is being able to register names of Action Creators on the app and allowing the server to interface with them.

Something like the client sending the available actionCreators on connect, which is just an array of keys sent to the server.

When the server wants to use an action creator, it can send an action along the lines of..

{
  type: 'actionCreator',
  name: 'addTodo',
  arguments: [{ name: "New todo" }]
}

Which the client can then execute and dispatch. :)

Reminds me of JSON RPC. 😛

Wrong version number in the about window

The 1.1.0 release of OS X application shows wrong version number in the about window.

https://github.com/reactotron/reactotron/releases/download/v1.1.0/Reactotron.app.zip
MD5 (Reactotron.app.zip) = e067f431657dd2fca700cfce9d818a11

Debug messages when we cannot connect

I heard here (infinitered/ignite#261) that some setups have an issue connecting from the client to the server.

We should add some kind of debugging tips (even if it's just console.log) that help understand exactly where the problem lies.

How to connect to Reactotron from Android Phone?

I tried:

Reactotron.configure() // we can use plugins here -- more on this later
  .connect({
  enabled: true,
  host: '192.168.1.200',  // server ip
  port: 9090
})

PS: Reactotron works on iPhone and Android emulator

Dynamic UI

What about "render" the UI after reactotron is connected?

Doing that we can see which of the features are connected and just render the boxes that matter for that session.

Split client and API

Why don't you split the client ( binary ) to another repo like reactotron-cli so you can install it globally and therefore in the devDependencies of your project you just add the javascript api reactotron to connect to the client?

Question about Reactotron and production builds.

Does the logging working only on dev?
I mean, logging code wouldn't run on production and will crash the app, right?
Asking to make sure.

License?

package.json says MIT, but there's no LICENSE file. Any chance of adding one? I'd really like to try this out at work but can't unless the license is crystal clear.

ImmutableJS Support

This is AMAZING. 😁

Perhaps we have an Reactotron.addImmutableReduxStore(store) alternative of https://github.com/skellock/reactotron/blob/master/client/reactotron/client.js#L84 and I think that should be it? I didn't look entirely too deep yet.

I'll see if I can cobble something together if this is something you want to support. Or I can run a forked version if including ImmutableJS is too much. :)

Support for inspecting redux actions

I believe that inspecting the dispatched actions is a must. Is there a plan to support it or is it out-of-scope for this project?

Add `-` to Legend

Unable to run on iPhone 5 simulator

Disable yellowbox warning

Is there any config option to disable the warnings?

Android support

Does reactotron supports debugging on Android?

`c` to Clear?

- is great but sometimes I'm OCD and want to clear everything between tasks or tests.

Update our cask to 1.1

Hey @jsynowiec, you asked #163 in here to notify on update.

If you just want to show me this one time how it's done, I could probably handle it going forward? <3

Binary is: https://github.com/reactotron/reactotron/releases/download/v1.1.0/Reactotron.app.zip

Add button to clear event timeline

Reactotron connection over Wi-Fi

Does Reactotron support connecting over Wi-Fi?

I've set the Debug server host in Dev Settings to the local IP of my Mac 10.61.180.184:8081.

I also tried to force Reactotron to manually connect to the local IP:

Reactotron
  .configure() // we can use plugins here
  .use(trackGlobalErrors())
  .connect({host: '10.61.180.184'});

However, when I open the CLI or the app I don't receive a Connection event after I reload the app.

Storybook components are being intercepted

Looks like I can't access (at least not directly) my components that are built with react-storybook.

Would be great to be able to identify that the user is using storybook, and be able to use Reactotron in that context.

Slow Down and 100% CPU Usage

One thing I've noticed is that Reactotron gets slow over time. Eventually it pins the CPU at 100%.

I think this is websockets related (or how I handle them).

It seems to show up sooner the more I reload & hot reload my React Native apps.

:(

Support for fetch

Logging fetch requests

React Native: Store enhancer is not a function

Code..

Make a way to script the version number on the client.js

As of 0.5.0, there's a VERSION const inside the client.js.

Find a good way to script this to tie to the appropriate number. We currently use xyz to deploy, so hopefully it has a sane way to deal with this.

Big output is slow output.

So, I've experienced this, but not quite traced it through yet.

Reactotron gets really slow and pegs the CPU sometimes. I'm not sure if its related to the code colourizing, web sockets, or something tragic I've done.

How to make Genymotion react native connect Reactotron?

I used Google Nexus 5 - 4.4.0 emulator Genymotion.

Running this:

import Reactotron from 'reactotron'
Reactotron.connect()

Won't connect.
Is there any criteria I missed?

socket.io seems to be a pre-built...

Very anxious to try this out, looks incredible.

However, when adding the initial config, just like the ReactDOM example:

I get this running webpack:

WARNING in ./~/socket.io-client/socket.io.js
Critical dependencies:
1:475-482 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/socket.io-client/socket.io.js 1:475-482

I have tried installing socket.io and socket.io-client directly.

Any ideas?

Thanks in advance.

nonthing found in the app

i got view like this pic on macosx 10.11.6 and app version 1.0.0

how can i use it?

Make Subscriptions Failsafe?

Subscribing incorrectly can crash the app.

Can't import reactotron package

I can't seem to import the reactotron package.

in my .js file, I try to import Reactotron from 'reactotron' but I get a module parse error something like:

ERROR in ./~/reactotron/index.js Module parse failed: /path/to/file.js Line 2: Unexpected token You may need an appropriate loader to handle this file type. | | import Client from './client/reactotron/client' | | export default Client @ ./App/Web/Store/Store.js 16:16-37

I seem to have the correct webpack config my jsxLoader look like:
jsxLoader.push('babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=babel-plugin-transform-es2015-modules-commonjs');

which is hooked up to the test:
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: jsxLoader }

which I have the same presets/plugins that are used in the repo, but for some reason it doesn't seem to compile properly.

thanks @skellock for making an awesome contribution, this is gonna go a long way!

Issues with Reactotron application

I'm having trouble working the application. While I can connect with my application with Reactotron in terminal, on the App nothing happens. Is there any extra configuration needed?

Allow drilling down through the state tree by clicking to open modal windows?

Requiring unknown module "socket.io-client/socket.io"

Hi Steve,

First, thanks for releasing such a wonderful tool. I decided to give it a go in the project we are building. I upgrade to version RN 23 first without issues, then I added to App.js which is used by both platform indexes:

import Reactotron from 'reactotron'

Reactotron.connect()
Reactotron.connect({enabled: __DEV__})

This goes before configuring the redux store. However I'm getting this red screen:

The moment I remove those 3 previous lines everything works again.

Thanks, cheers
Miguel

Support For React Native Android

Right now, socket.io isn't working too well on Android.

There's a whole series of errors around globals not being setup in the right way. For example, it expects navigator to be in the global scope AND in the window scope. Strange.

It also expects String, Object, and Date properties on window.

So after all that gets fixed, it still doesn't work 100% with websockets.

We can fall back to Long Polling, but that relies on arraybuffer support in XMLHttpRequest. React Native doesn't support that yet.

facebook/react-native#6870 will be arriving in 0.25. So i'll revisit then.

Support for re-frame (ClojureScript)

This seems quite excellent. And fortunately it would conceptually work very well with the popular ClojureScript frontend framework re-frame that is very similar to Redux but implemented in ClojureScript.

Would it be possible to open this up for other uni-directional data implementations than Redux? Maybe provide some kind of API?

Register Reactotron in homebrew cask tap - make it installable using brew cask install

Register a new Cask for Reactotron in Homebrew Cask. This will allow to install Reactotron OS X application using brew cask install reactotron command.

Action timestamps are reporting 0ms now.

Noticing timestamps on the actions (the middleware) aren't working any longer.

Probably something simple. This coincided with the rebase and hand resolving. Classic @skellock.

It doesn't work with SSR

Hi,
Thanks for the wonderful too. It seems it doesn't work with SSR or am I doing something worng ?

I am getting following error.

node_modules/reactotron/dist/client.js:16:6

why not using react-blessed?

and BTW, don't you think the name "Reactron" is more powerful!

https://en.wikipedia.org/wiki/Reactron