Removing console.log from React Native app

Question

Should you remove the console.log() calls before deploying a React Native app to the stores? Are there some performance or other issues that exist if the console.log() calls are kept in the code?

Is there a way to remove the logs with some task runner (in a similar fashion to web-related task runners like Grunt or Gulp)? We still want them during our development/debugging/testing phase but not on production.

Answer 1

Well, you can always do something like:

if (!__DEV__) {
  console.log = () => {};
}

So every console.log would be invalidated as soon as __DEV__ is not true.

Answer 2

Babel transpiler can remove console statements for you with the following plugin:

npm i babel-plugin-transform-remove-console --save-dev

Edit .babelrc:

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

And console statements are stripped out of your code.

source: https://hashnode.com/post/remove-consolelog-statements-in-production-in-react-react-native-apps-cj2rx8yj7003s2253er5a9ovw

Answer 3

believe best practice is to wrap your debug code in statements such as...

    if(__DEV__){
        console.log();
    }

This way, it only runs when you're running within the packager or emulator. More info here... https://facebook.github.io/react-native/docs/performance#using-consolelog-statements

This would also work...

__DEV__ && console.log('logged only in __DEV__');

Answer 4

I know this question has already been answered, but just wanted to add my own two-bits. Returning null instead of {} is marginally faster since we don't need to create and allocate an empty object in memory.

if (!__DEV__)
{
   console.log = () => null
}

This is obviously extremely minimal but you can see the results below

// return empty object
console.log = () => {}
console.time()
for (var i=0; i<1000000; i++) console.log()
console.timeEnd()

// returning null
console.log = () => null
console.time()
for (var i=0; i<1000000; i++) console.log()
console.timeEnd()

Although it is more pronounced when tested elsewhere:

Honestly, in the real world this probably will have no significant benefit just thought I would share.

Answer 5

I tried it using babel-plugin-transform-remove-console but the above solutions didn't work for me .

If someone's also trying to do it using babel-plugin-transform-remove-console can use this one.

npm i babel-plugin-transform-remove-console --save-dev

Edit babel.config.js

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,
  };
};

Answer 6

I have found the following to be a good option as there is no need to log even if __DEV__ === true, if you are not also remote debugging.

In fact I have found certain versions of RN/JavaScriptCore/etc to come to a near halt when logging (even just strings) which is not the case with Chrome's V8 engine.

// only true if remote debugging
const debuggingIsEnabled = (typeof atob !== 'undefined');

if (!debuggingIsEnabled) {
    console.log = () => {};
}

Check if in remote JS debugging is enabled

Answer 7

Using Sentry for tracking exceptions automatically disables console.log in production, but also uses it for tracking logs from device. So you can see latest logs in sentry exception details (breadcrumbs).