CODEWITHSUNDEEP
performanceautomationreact-nativeconsole.log
RRikesh
RRikesh

Reputation: 14381

Removing console.log from React Native app

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.

Upvotes: 37

Views: 38858

Answers (8)

Shadman Fatin
Shadman Fatin

Reputation: 170

This works:

Go to index.html file and at the end add this 1 liner:

<script>console.log=function(){};</script>

Or, go to index.js file and at the end add this 1 liner:

console.log=function(){};

Done

Upvotes: -1

Chris Geirman
Chris Geirman

Reputation: 9684

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__');

Upvotes: 19

sakshya73
sakshya73

Reputation: 7162

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

Upvotes: 8

Asleepace
Asleepace

Reputation: 3745

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:

empty console function

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

Upvotes: 18

James Trickey
James Trickey

Reputation: 1447

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

Upvotes: 3

gentlee
gentlee

Reputation: 3717

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).

Upvotes: 1

Adam B
Adam B

Reputation: 1153

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

Upvotes: 71

Lucas Bento
Lucas Bento

Reputation: 1222

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.

Upvotes: 80

Related Questions