Provide a way to disable React-Native console.log

[Andarius]

Introduction

When running in release mode, React-native will display info logs (as also mentioned in this issue: https://github.com/facebook/react-native/issues/18584 and in this PR: https://github.com/facebook/react-native/pull/30579 )

Details

For instance, using react-native-navigation, the following logs are displayed (because of Libraries/ReactNative/AppRegistry.js:186):

Running "main.Session" with {"initialProps":{"componentId":"Component1"},"rootTag":1301}

Causing them to appear in report logs like Bugsnag:

Discussion points

Since it seems accepted that the default behavior is that React Native is logging data via console.log and the recommended way to deal with it is to install a third-party package, I would like to propose the idea of setting a flag to be able to disable it.

Something like AppRegistry.disableLogs seems like a reasonable approach.

[kelset]

Sounds like, based on the conversation here https://github.com/facebook/react-native/pull/30579, that the best way forward is for you to directly open the PR introducing the behaviour you are proposing :)

[Andarius]

Isn't better to discuss what is the best approach beforehand ? So that the PR has chances to be accepted / not closed without discussion ? (and that I don't spend time changing code that nobody wants to be changed haha)

[matt-oakes]

This shouldn't be something that's inside React Native at all. If you want to change the behaviour of console.log in your app, then you always have the option of overriding the global as shown in this StackOverflow answer.

[Andarius]

I'm not speaking about changing the console.log behavior. Just a "proper" way to disable it where I don't need it. Let's say I want to do a console.log somewhere else that is meaningful to my app ?

My first concern is that this log appears out of nowhere, I had to grep my code base to find that it was RN that was doing the console.log.

[a-c-sreedhar-reddy]

A babel plugin can be used I guess. As mentioned here http://reactnative.dev/docs/performance#using-consolelog-statements

On Tue, 15 Dec 2020 at 15:11, Julien Brayere [email protected] wrote:

I'm not speaking about changing the console.log behavior. Just a "proper" way to disable it where I don't need it. Let's say I want to do a console.log somewhere else that is meaningful to my app ?

My first concern is that this log appears out of nowhere, I had to grep my code base to find that it was RN that was doing the console.log.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/react-native-community/discussions-and-proposals/issues/308#issuecomment-745172206, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WBO6PIUPSYX6QPTC35RLSU4VNHANCNFSM4U367NHA .

[Andarius]

@a-c-sreedhar-reddy then how can I do it I want other logs to be displayed but not the RN ones ?

[skaldo]

Hi @Andarius, if logs visible in Bugsnag is the only issue you are experiencing, what about simply disabling the log breadcrumb type as described here?

If you want only to suppress all logs that do not come from your code, then I'm afraid, that you will need to write custom babel plugin that removes all console.x calls from node_modules only.

[Andarius]

That's why I'm asking for a solution to remove specifically the logs from react-native if we want to. Again, what if I need the logs from other libs but not the RN ones ?

[phuongwd]

@Andarius Did you try this solution https://github.com/babel/minify/issues/934 ?

it's working 💯 I noticed, the log message Bugsnag loaded can not remove.

module.exports = api => {
  const babelEnv = api.env();
  ...
  const plugins = [];
  if (babelEnv !== 'development') {
    plugins.push('transform-remove-console');
  }
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins,
  };
};

[Andarius]

@phuongwd this will disable all console.log as mentioned above

[phuongwd]

@Andarius and this will disable the RN console.log This log will not appear on Bugsnag

[Andarius]

@phuongwd this will remove all console.log or only the one from the react-native library ?

[phuongwd]

@Andarius this will remove all console.log and the log like this

[phuongwd]

@Andarius btw I have implemented the remove console.log as RN document, it was working.

But I saw console.log in redux-persist migrate method did not remove in production recently. See image, that's reason I updated as mentioned https://github.com/react-native-community/discussions-and-proposals/issues/308#issuecomment-872153032

[Andarius]

@phuongwd so again, what if I want to remove only the console.log from react-native? To be clear, from a code architecture point of view, I find it wrong that react-native has console.log that can't be disabled.

[phuongwd]

@Andarius sorry why do you want to do that?

[Andarius]

@phuongwd I don't know, maybe displaying my own data in bugsnag let's say for the sake of the argument.

[phuongwd]

@Andarius Let install a third-party package 🎉

Please see video, BEFORE and AFTER - all log are removed when I did as https://github.com/react-native-community/discussions-and-proposals/issues/308#issuecomment-872153032

https://user-images.githubusercontent.com/2460806/124147151-a448bc80-dab8-11eb-9be0-71f778eb8ffa.mov

[Andarius]

Why add a third-party lib for this when I can just check my console.log ?

[phuongwd]

IMHO, that's no problem when add a third-party lib, and babel is owner.

[dnedrow]

Why add a third-party lib for this when I can just check my console.log ?

I agree with @Andarius . The logging behavior is atypical of most software development platforms. It's baffling that there is no way within React Native to disable console logging, short of introducing babel into one's workflow.

[gwmccull]

You could bind console.log to a global variable that you control and then set the original to a null function. That would disable it for all libraries but still allow you to use it for your own uses