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

Overview

Reactotron Logo

Join our Community Slack

Quick Installation Guide

What is Reactotron?

Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and React Native apps.

Watch Darin Wilson's talk at Chain React: Chain React 2018: Debugging and Beyond with Reactotron!

Use it 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
  • track your sagas
  • 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 product builds.

Desktop

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

Documentation

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.

Issues
  • React Native 0.44 Setting a timer for a long period of time warning

    React Native 0.44 Setting a timer for a long period of time warning

    Hi, Since I updated RN to 0.44 is appearing this alert, I thought it was for my code but I close Reactotron and it disappears magically.

    Why is this happening? My code? RN? Rectotron?

    Thanks!

    Reactotron version: 1.10.0

    captura de pantalla 2017-05-19 a las 6 45 49 p m

    image

    image

    Note: I visited the issue link https://github.com/facebook/react-native/issues/12981 but on there everybody mention Firebase and it isnt my case

    bug :beetle: 
    opened by rigobcastro 46
  • Production builds in React Native

    Production builds in React Native

    Seems to be a topic with a lot of questions around this, so I'd love to track this here.

    Problem

    What do we do with Reactotron and production builds in React Native?

    Currently we're recommending people install as a devDependency. If you then use import Reactotron from 'reactotron-react-native', with only the production dependencies, it breaks.

    This is complicated a bit due to how require statements work in React Native's packager. This environment is not webpack, cjs, or node. This is haste. So the normal tricks like using if statements and require are not available. Haste preprocesses your JS files with an AST looking for require calls and doesn't take into account dead code paths like if (0).

    So what do we do?

    Solution: Make it a dependency

    Move it to a dependency and never call connect().

    • 👍 You can test in production!
    • 💩 An extra 150KB of dependencies that aren't used. Blech.
    • 💩 If you ship with connect() on, Apple will not let you in the AppStore.

    Solution: Comment it out

    Use // to comment out Reactotron.

    • 💩 Manual step.
    • 💩 Doesn't play well with CI.
    • 💩 If you write scripts to strip this, well, you have to do work. Let's not cause work for people.

    Solution: Babel Transforms

    This seems like it should be the right way.

    • 👍 Use these things (this | this | this) or similar to transform out the code!
    • 💩 I've never done something like this before. Halp!

    Anyone else have comments or suggestions?

    help wanted :wave: discussion :speech_balloon: 
    opened by skellock 31
  • Expo.io setup

    Expo.io setup

    If anyone made Reactotron work with Expo/Exponent do you mind sharing here the full exponent setup?

    If is it really working it would be useful for further reference to have it included in the readme

    Thanks

    docs :books: 
    opened by ecerroni 30
  • Support Windows and Linux

    Support Windows and Linux

    Starting to get some folks asking for it.

    opened by skellock 28
  • Question about Reactotron and production builds.

    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.

    opened by avishayil 25
  • Reactotron turning white when I try to see details of connections

    Reactotron turning white when I try to see details of connections

    Captura de Tela 2019-04-25 às 10 11 44

    I'm using Mac mini 2014, 1,4 GHz Intel Core i5, 4 GB 1600 MHz DDR3 e reactotron-react-native: 3.2.2

    opened by AilsonFreire 23
  • null is not an object (evaluating 'reduxStore.getState')

    null is not an object (evaluating 'reduxStore.getState')

    2017-01-04 2 17 47

    I met this error. When I refresh several times, sometimes it runs.

    This is my files

    // reactoron-config.js
    import Reactotron, { trackGlobalErrors } from 'reactotron-react-native';
    import apisaucePlugin from 'reactotron-apisauce';  // <--- import
    import { reactotronRedux } from 'reactotron-redux';
    import sagaPlugin from 'reactotron-redux-saga';
    
    console.tron = Reactotron;
    
    Reactotron
      .configure() // we can use plugins here -- more on this later
      .use(trackGlobalErrors()) // <--- here we go!
      .use(apisaucePlugin())
      .use(reactotronRedux())
      .use(sagaPlugin())
      .connect(); // let's connect!
    
    export default Reactotron;
    
    // configureStore.js
    import { applyMiddleware, compose } from 'redux';
    import createSagaMiddleware from 'redux-saga';
    import thunk from 'redux-thunk';
    
    import Reactotron from '../../env/reactotron-config';
    
    import reducers from '../ducks';
    import rootSaga from '../saga';
    
    import googleAnalytics from './middleware/googleAnalytics';
    
    const isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent;
    const sagaMonitor = Reactotron.createSagaMonitor();
    
    function configureStore(onComplete) {
      const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
    
      const store = Reactotron.createStore(reducers, {}, compose(
        applyMiddleware(sagaMiddleware, thunk, googleAnalytics),
      ));
      sagaMiddleware.run(rootSaga);
    
      if (isDebuggingInChrome) {
        window.store = store;
      }
      setTimeout(() => {
        onComplete(store.getState());
      });
    
      return store;
    }
    
    
    // Setup.js
    class Setup extends Component {
      constructor() {
        super();
        GoogleAnalytics.setTrackerId('UA-86299762-1');
        this.state = {
          isLoading: true,
          store: configureStore((state) => {
            this.setState({ isLoading: false });
            if (state.user.nickname) {
              const { nickname, school } = state.user;
              GoogleAnalytics.setUser(nickname);
              setCrashlytics(nickname, school);
            }
          }),
        };
        // console.disableYellowBox = true;
      }
    
      render() {
        if (this.state.isLoading) {
          return <LoadingScreen />;
        }
        return (
          <Provider store={this.state.store}>
            <App />
          </Provider>
        );
      }
    }
    

    RN version: 0.38 reactotron-react-native: 1.6.0 reactotron-redux: 1.6.1

    help wanted :wave: bug :beetle: 
    opened by g6ling 23
  • An object with `writable: false` prop in a state breaks SagaMonitor

    An object with `writable: false` prop in a state breaks SagaMonitor

    We've recently added reactotron to our project and it's pretty cool. We've noticed though that it raises an unhandled exception on read-only object' props in sagas and actions attributes.

    In this line https://github.com/infinitered/reactotron/blob/f49760fef66a24bd8ab26dd06c570176f0619c0f/packages/reactotron-core-client/src/scrub.js#L46

    object[key] = getFunctionName(value);
    

    an error is raised Cannot assign to read only property 'replace' of object. key === 'replace'.

    I've noticed that it happens only when an object's key is read-only.

    Object.getOwnPropertyDescriptor(object, key)
    // result:
    {
      configurable: false,
      enumerable: true,
      value: '',
      writable: false
    }
    

    Why do we have a read-only value in an object is a good question and we definitely need to change that, but as a quicker solution we would love to have reactotron not break our app [:

    I can add a fork where we run

    object[key] = getFunctionName(value);
    

    only when

    Object.getOwnPropertyDescriptor(object, key).writable
    

    is true. Will that solve the issue?

    opened by cbrwizard 22
  • [V2] Reactotron-Redux Integration Problems

    [V2] Reactotron-Redux Integration Problems

    Doing a new installation using the V2 beta and having troubles getting the Redux integration working. Using:

    "reactotron-react-native": "2.0.0-beta.10",
    "reactotron-redux": "2.0.0-beta.10",
    "reactotron-redux-saga": "2.0.0-beta.10",
    
    [Entry point]
    import "../services/reactotron/reactotron-config"
    import Reactotron from "reactotron-react-native"
    
    const store = Reactotron.createStore(rootReducer)
    
    

    And my config is set up with the plugin.

    Getting the following error though: "message": "undefined is not a function (evaluating 'a(b.apply(undefined, arguments))')", and before that seeing a failure of: null is not an object (evaluating 'reduxStore.getState') -- presuming this is from the plugin.

    When I use just redux the implementation works just fine. Anyone have any ideas?

    bug :beetle: 
    opened by LewisBr 21
  • No longer maintained? In the past year, one commit was uploaded.

    No longer maintained? In the past year, one commit was uploaded.

    If you have a general question, please ask it in the #reactotron channel of the Infinite Red Community slack.

    When reporting a bug, please include steps to reproduce the issue.

    opened by dongdyang 0
  • Current ver wont install on basically new React Native app

    Current ver wont install on basically new React Native app

    I have an all but new create-react-native-app project

    when I try npm i --save-dev reactotron-react-native I get

    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR! 
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react-native
    npm ERR!   peer [email protected]">=0.62.0-rc.0 <0.64.0" from @react-native-community/[email protected]
    npm ERR!   node_modules/@react-native-community/cli
    npm ERR!     @react-native-community/[email protected]"^4.10.0" from [email protected]
    npm ERR!   peer [email protected]">=0.47.0" from [email protected]
    npm ERR!   node_modules/react-native-background-actions
    npm ERR!     [email protected]"^2.6.2" from the root project
    npm ERR!   6 more (react-native-get-location, react-native-reanimated, ...)
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]"^0.62.0" from [email protected]
    npm ERR! node_modules/reactotron-react-native/node_modules/react-native-flipper
    npm ERR!   optional [email protected]"^0.34.0" from [email protected]
    npm ERR!   node_modules/reactotron-react-native
    npm ERR!     dev [email protected]"*" from the root project
    

    but, Found: [email protected] is in the peer [email protected]">=0.62.0-rc.0 <0.64.0" and complient with [email protected]"^0.62.0" so not seeing what it is not happy about?

    opened by russmenum 4
  • Dependency Issue with Latest version

    Dependency Issue with Latest version

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ******* npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^15.2.1 || 16.0.0-alpha.6 || 16.0.0-alpha.12 || 16.0.0-beta.5 || ^16.0.0" from [email protected] npm ERR! node_modules/reactotron-react-native npm ERR! dev [email protected]"" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/*********/.npm/eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in: npm ERR! /Users/**********/.npm/_logs/2021-07-05T07_42_49_083Z-debug.log

    opened by divyanshusirsatSG 2
  • Use the correct yarn command for adding to devDependencies

    Use the correct yarn command for adding to devDependencies

    The docs just had the incorrect flag for adding to dev dependencies,

    opened by colbygarland 0
  • Not showing API calls

    Not showing API calls

    Only shows AsyncStorage logs and not showing API calls

    Screenshot 2021-06-01 at 1 50 39 PM Screenshot 2021-06-01 at 1 50 32 PM

    opened by akiladevinda 1
  • Update plugin-redux.md

    Update plugin-redux.md

    Included a brief detail as to how to configure reactotron if using the configureStore function instead of the createStore function

    opened by aCanalez 0
  • Toggle devtools doesn't work in reactotron

    Toggle devtools doesn't work in reactotron

    I use below configs, but when I click on View -> Toggle Developer tools in reactotron, devtools can not connect to emulator and don't show Network tab for instance.

    Mac OS Catalina 10.15.6, Reactotron Version 3.0.0-beta.9 React Native 0.61.5

    import Reactotron from 'reactotron-react-native';
    import AsyncStorage from '@react-native-community/async-storage';
    import { reactotronRedux } from 'reactotron-redux';
    
    Reactotron.setAsyncStorageHandler(AsyncStorage)
      .configure({
        name: 'React Native Demo',
      })
      .useReactNative({
        asyncStorage: true,
        editor: true,
        // there are more options to editor
        errors: { veto: () => false },
        // there are more options to the async storage.
        // networking: {}, // or turn it off with false
        overlay: false, // just turning off overlay
      })
      .use(reactotronRedux())
      .connect();
    
    
    opened by MahmonirB 1
  • Multiple connections for the same device/emulator

    Multiple connections for the same device/emulator

    I have been using Reactotron for some years and there is one issue that sometimes freaks me out which is multiple connections for the same device/emulator. Each reloads creates a new connection and we must access the new connection every time.

    Take a look at screenshot below:

    reactotron-multiple-connections-error

    opened by developerantoniosousa 3
  • chore(docs): fix broken link

    chore(docs): fix broken link

    opened by thebergamo 0
Releases(v3.0.0-beta.9)
Owner
Infinite Red, Inc.
Development Studio
Infinite Red, Inc.
React specific linting rules for ESLint

ESLint-plugin-React React specific linting rules for ESLint Installation Install ESLint either locally or globally. (Note that locally, per project, i

Yannick Croissant 7.3k Sep 22, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.2k Sep 15, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.2k Sep 20, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.1k Sep 13, 2021
Spokestack: give your React Native app a voice interface!

React Native plugin for adding voice using Spokestack. This includes speech recognition, wakeword, and natural language understanding, as well as synt

Spokestack 37 Aug 23, 2021
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.1k Sep 16, 2021
Lightweight unit test library for ReactJS

react-unit React Unit is a lightweight unit test library for ReactJS with very few (js-only) dependencies. By using react-unit you can run your ReactJ

Patricio Zavolinsky 194 Jul 21, 2021
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Dave Brotherstone 184 Aug 4, 2021
Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.

Universal Data Tool Try it out at udt.dev, download the desktop app or run on-premise. Docs • Website • Playground • Library Usage • On-Premise The Un

Universal Data Tool 1.5k Sep 17, 2021
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.1k Sep 24, 2021
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Product Hunt 794 Sep 3, 2021
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.4k Sep 16, 2021
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.1k Sep 23, 2021
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10k Sep 20, 2021
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Standard JS 26.1k Sep 17, 2021
JavaScript Testing utilities for React

Enzyme Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse,

enzyme - JavaScript Testing utilities for React 19.7k Sep 23, 2021
why-did-you-render monkey patches React to notify you about avoidable re-renders.

Why Did You Render why-did-you-render by Welldone Software monkey patches React to notify you about avoidable re-renders. (Works with React Native as

Welldone Software Solutions Ltd. 7.1k Sep 23, 2021
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 577 Sep 12, 2021
🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

Storybook 577 Sep 12, 2021