Question about Reactotron and production builds.

[avishayil]

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.

[skellock]

There's nothing stopping you from running in production builds at all. Just be sure to install with --save instead of --save-dev.

I don't recommend it for shipping to the App Store or a running web site, however, if you're looking to debug some problems with a production build on a local device, it's totally a legit approach.

[avishayil]

How can I make sure code-wise that Reactotron is running on DEV only? do I have an option to do that without maintaining two repos?
On the previous Reactotron repo, we had an option:

Reactotron.connect({enabled: __DEV__})

Is it possible to do it here?

[skellock]

What I do is wrap the entire block in if (__DEV__).

[skellock]

Another option is just wrapping the connect() call in if (__DEV__).

[avishayil]

Like this?

import Reactotron from 'reactotron-react-native';
import apisaucePlugin from 'reactotron-apisauce';

Reactotron
  .configure() // we can use plugins here -- more on this later
  .use(apisaucePlugin()) // <-- here we go!!!

if (__DEV__) {
  Reactotron
  .connect() // let's connect!
}

Then, do I need to wrap every api.addMonitor(Reactotron.apisauce); call with if (__DEV__) ?

[skellock]

Yep, give that a go.

You shouldn't have to wrap all your call sites with this guard though, because all communication from your app back to reactotron flows through this 1 line of code:

https://github.com/reactotron/reactotron/blob/master/packages/reactotron-core-client/src/index.js#L123

If you never connect, you'll never send anything. So you can leave your monitors and logging calls in place if you really want to.

[avishayil]

By the way - theoretically - why don't you recommend doing it with app-store build? Doesn't it gives you the ability to debug devices without running special build on them?

[skellock]

1. It uses websockets. Which will keep draining the battery.
2. It's a privacy violation. If you stored some social tokens in state, we could grab them.
3. A security violation as it opens up a backchannel to control the app. Haha.

Reactotron is a debugging tool. At least, that's how I recommend you use it! =)

[avishayil]

Thanks for the clarifications!

[lukesneeringer]

I am still pretty confused about this question. If you are installing Reactotron with --save-dev, then the import statements should all fail on production, yes?

[skellock]

@lukesneeringer Correct.

[skellock]

@lukesneeringer Which is good point... one would need to switch on the import and likely upgrade them to require statements. Gets ugly fast. =)

[lukesneeringer]

So, what is the correct approach (using React.js)? The documentation just uses --save-dev and then an import statement, which is clearly not what I want. (I will send a PR to update the docs once I figure out the correct solution.)

Also, ES6 does not allow import statements at anything other than the top level of the file. No import within an if block.

[lukesneeringer]

@lukesneeringer Which is good point... one would need to switch on the import and likely upgrade them to require statements. Gets ugly fast. =)

And wrap every use of the thing, or else write your own dummy object to absorb it.

Surely I am just missing something, right?

EDIT: The more I read, the more I am pretty sure I am not missing something, and this is just broken now because the {enabled: __DEV__} functionality was removed. Should I open a separate issue?

[skellock]

My advice... don't do it. Stick with ---save-dev and debug from debug mode.

But, only you know what's best for your project!

If you want to do it anyway, use --save, switch to require from import, wrap some if (__DEV__) in a few places and you're go to go.

There is a use-case for what you're asking for sure. I just wouldn't trust myself to do it. :)

[lukesneeringer]

My advice... don't do it. Stick with --save-dev and debug from debug mode.

Huh?

I just read over the docs again. I see nothing about a debug mode. The words are never used in the base readme file or the React.js quick start. Everything talks about importing reactotron in a file imported by your base app.js (or equivalent) file.

All I want to do is try out reactotron in a way that does not involve making my code break when it is not there. I see no documented way to do that. :-(

[skellock]

I'll put together some better docs to clear things up. 👍

[lukesneeringer]

To be clear (since I think I was not), I do not want to run Reactotron in production. At all. I want to run it in development only, in React.js, and for the life of me I cannot figure out how to do that.

The instuctions in React.js quick start will completely break the application in production, as it will try to import a module that is not present.

I have never used this tool before; I stumbled upon it today when a co-worker linked it to me. I just wanted to try it out, read the quick start, thought to myself, "This will break my application," and found this issue and asked. :-)

I think I ended up sidetracking the discussion toward whether or not using Reactotron in actual production is wise (it clearly is not), but that is not what I am trying to do.

P. S. This tool does look really nifty, by the way.

[skellock]

You're absolutely right Luke! Totally missed that.

I used to be fine (previously to 1.0) with --save, but didn't quite sit right with me. I'll switch up the docs.

Appreciate the honest & direct feedback!

[skellock]

Follow up in #181. Please reopen if this doesn't meet your expectations.

Thanks again.

[leoskyrocker]

@skellock Could you clarify what you meant by "we could grab them"?

It's a privacy violation. If you stored some social tokens in state, we could grab them.

As far as my investigation goes, it seems like the code connects to our own reactotron server installed on our dev machine.
It sounds scary when you said "we" could grab them. I'm new to this tool, and I just wanted to make sure my data/logs is only sent to my configured host and nowhere else (even in dev). Is it not the case for Reactotron?

[skellock]

By we I mean, app devs in general.

Reactotron only talks from your sim to the app running on your desktop.

No funny stuff. Scouts honour.

I just am saying you don’t ever want to ship your app with it enabled.

[leoskyrocker]

Thanks @skellock. Awesome stuff! Started to like this tool already

[jsancho]

I'd like to reopen this ticket, since the issue I'm having is an extension of it.

I've followed your suggestions in the tips & tricks as well as in the sample repo

Trouble is that I have redux configured with the thunk middleware and I've not worked out a way that I can conditionally apply the Reactotron.createEnhancer() only when using a dev build.

I reckon is absolutely doable with some clever function handoff, but I'm afraid that my JS skills don't go as far as that.

Do you have any suggestions?

[Ugzuzg]

@jsancho, here's how we are doing it:

export default () =>
  configureStore({
    reducer,
    middleware: [...getDefaultMiddleware({ serializableCheck: false })],
    enhancers: [__DEV__ && require('./ReactotronConfig').default.createEnhancer()].filter(Boolean),
  });