loglevel icon indicating copy to clipboard operation
loglevel copied to clipboard

React Native support

Open vidhill opened this issue 5 years ago • 9 comments

I don't exactly see why it shouldn't but this module appears not to work with react native,

Well, log.warn() and log.error() work, but nothing below that level gets output, -even if I call loglevel.setDefaultLevel('trace'); or loglevel.setLevel('trace');

log.debug() and log.info() still equal noop

I don't know if it has something to do with the persisting, as react-native had no localstorage..

vidhill avatar Apr 24 '19 18:04 vidhill

Hmm, I'm not sure I'm afraid, I've never used React Native.

Do the corresponding console.info/trace/debug methods work?

Can you log the value of the methods that don't work? E.g. console.log(log.info). If the levels have been enabled correctly, they should be native functions (e.g. they'll print as ƒ log() { [native code] }), whereas if loglevel isn't trying to enable them at all they'll be empty functions: ƒ () {}.

Loglevel makes a lot of effort to work even in old browsers from before localStorage was available, so I'd be surprised if that was the issue, but without knowing much about React Native it's hard to tell.

pimterry avatar Apr 25 '19 16:04 pimterry

The methods that don't work log out as ƒ () {} -noop

vidhill avatar Apr 25 '19 19:04 vidhill

And that's after calling setLevel('trace')? In that case, that suggests that setLevel isn't working.

The code is pretty simple. I don't have a react native environment set up, but if you debug through this, what should happen is that it calls replaceLoggingMethods with the level you pass, and then internally that should call realMethod for every enabled level, and that should return the appropriate console method. Then the resulting methods are saved as log.X for each enabled level, and a no-op function is saved as log.X for each disabled level.

Looking through the code, I can't see where that could possibly go wrong for React Native, but who knows. If you step through it though, you should see somewhere there that no-op gets assigned incorrectly somehow, which would cause this.

Sorry I can't be more help. Once you've got a clear cause though, or a PR, let me know and I'd love to get this fixed.

pimterry avatar Apr 26 '19 09:04 pimterry

Sorry for the delayed reply, I ended up using loglevelnext for the project I am working on, and that behaves as expected,

If I get a chance I will investigate this and see if I can create a PR,

But I'm not sure how soon I will be able to get to it.

vidhill avatar May 01 '19 12:05 vidhill

@vidhill Regarding the functionality that does work in react native:

  • anything special that you needed to do in setup?
  • same question for how to use it
  • in production, where is the log written to?

rahamin1 avatar Jun 29 '19 19:06 rahamin1

Hi @rahamin1, I'm afraid I'm not sure! I've never used React Native myself. Loglevel acts as a simple JS wrapper around console.log (and other console.* methods). In theory it shouldn't require any special setup, you should be able to just use the basic examples from the README, and the logs in production will go wherever console logs normally go for React Native.

Sorry I can't be more specific. Do reply here if loglevel works for you in React Native though, and if you discover the answers to those questions (or hit specific issues), since I'm sure other people will come across this thread with the same questions too.

pimterry avatar Jun 29 '19 23:06 pimterry

@rahamin1 We are using loglevel successfully in a React Native project, I can answer your questions:

  • anything special that you needed to do in setup?

We need to re-init the logger(s) (we use multiple named loggers) after React Native starts because React Native adds hooks into console.warn and console.error for the "redbox" functionality.

We call this from our main App component constructor: logger.setLevel(logger.getLevel())

Running this earlier in index.js did not work.

  • same question for how to use it

Nothing special here: log.debug('message')

We use debug, info, warn, error methods but not trace.

  • in production, where is the log written to?

The logs show up in the Xcode console output or in the Chrome console when debugging (line numbers work). For our staging builds we replace methodFactory to use the TestFairy api. You can send logs anywhere you want by replacing methodFactory.

jfaris avatar Sep 26 '19 13:09 jfaris

@pimterry Open to a PR that adds some of these React Native notes to the readme?

When I saw this issue as open from 2019 I assumed that React Native was not supported, but it seems like there is a working option, just that it requires some magic to workaround React Native's non standard console behaviour. Would it therefore make sense to close this issue?

chmac avatar Apr 29 '21 10:04 chmac

Good point @chmac! Yes, a PR that documents the above would be happily received.

I think the effective summary is that you just need to call log.setLevel(log.getLevel()) after React native has initialized its console logging hooks, although I'm not totally clear at exactly what point that happens myself (if you know React Native better, any input on that would be useful). Happy to close this once that's documented.

pimterry avatar Apr 29 '21 12:04 pimterry