React Native - Does console.log() hurt performance when going to production?

Question

I have a lot of console.log() in my app. Most of them are in catch blocks, so I can clearly see what went wrong when developing. Some are there to log the current time so I can check function execution times.

When deploying to production, those console.log() will run in the client's devices. Can I just leave them as they are? Will they hurt performance/memory or may cause some exception or unwanted behaviors?

Regarding console.logs in production: any idea if the output wriiten / saved anywhere? — Yossi, Jun 29 '19 at 11:36

score 42 · Answer 1 · edited Jun 20 '20 at 09:12

42

From React Native docs:

Console.log statements

When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as redux-logger, so make sure to remove them before bundling.

So yeah.. I would remove them :)

The ones in your catch statements may be ok to leave in as they only fire if there's an issue (would rather grab more info on that than worry about the performance hit)

There's more performance tips on the react native docs here

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 27 '16 at 14:54

David

7,395
5
29
45

4

would be nice to know how "big" is this bottleneck. I believe Sentry and other error tracing tools give console.* outputs to more easily diagnose issues – Gianfranco P. Jun 01 '18 at 11:53
I'm also using Sentry, so I poked around and I think their implementation does end up calling the default `console.log()` function after capturing. (source: https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/captureconsole.ts) So, if there is a performance penalty, I think it's still relevant with Sentry installed. – Alex W Jun 21 '21 at 19:12
1

That react native docs link is outdated. New link [is here](https://reactnative.dev/docs/performance#using-consolelog-statements). Importantly, that section in the docs mentions being able to use a babel plugin to automatically remove console log statements in production. – jaquinocode Mar 11 '22 at 20:12

score 8 · Answer 2 · answered Jun 30 '17 at 13:53

8

Is this good practice to disable all console.log statements in your entire app?

Any side effects?

At top of file: App.js include:

// To assign console.log to nothing   
if (!__DEV__) {
  console.log = () => {};
}

answered Jun 30 '17 at 13:53

Ed of the Mountain

5,219
4
46
54

10

Is this a question or an answer? – Petr Peller Mar 02 '19 at 00:27
1

I was using this configuration and still all my logs were sent to Sentry.. Not sure how this affected performance, as it did not log anything when __ DEV __ was set to false on my local machine. – Beolap Apr 26 '20 at 17:26

score 5 · Answer 3 · answered Aug 27 '16 at 14:43

5

Well.. yes. More code means a longer execution time. Not only will it take unnecessary CPU "power", console.log is also synchronous so it will make your application slower (even by a few nanoseconds).

However, if you want to use debugging, you should look really into Winston. It's asynchronous so it solves the aforementioned problem.

If you do not care much for milliseconds then I would leave it, although it doesn't take much to let the bundle creator strip code that's going to be production ready. You can just do something like the following:

if(__DEV__) {
    console.log('This will be stripped in production.');
}

answered Aug 27 '16 at 14:43

bitten

2,463
2
25
44

1

Regarding console.logs in production: any idea if the output wriiten / saved anywhere? – Yossi Jun 29 '19 at 11:36
They are only ran on the client. Unless you use a service like sentry, logrocket, crash.js or something similar. – bitten Jun 30 '19 at 11:13
I know that they are ran on the client... But, without any of the services, can it be saved locally and viewed? – Yossi Jun 30 '19 at 11:16
2

@Yossi You need one of the services to view them. – kakoma Apr 23 '20 at 04:48

score 5 · Answer 4 · answered Oct 30 '20 at 07:18

ReactNative documentation advices to remove them.

One of the approaches is to use the babel plugin which removes console.log statements. I find it helpful, but not necessarily proper, as there are some logs that I want to see while debugging an app, and still, be notified if the cases occur in production (f.e. as op mentioned catch blocks).

I have been doing 2 things usually:

Using dlog instead of console.log

export const dlog = (message: string, ...optionalParams: any[]) => {
  if (__DEV__) {
    // eslint-disable-next-line no-console
    console.log(message, ...optionalParams)
  } else {
    // Logging to Sentry or another bug-tracking system
    // withScope(scope => {
    //  scope.setExtra('params', optionalParams)
    //  captureMessage(message)
    // })
  }
}

Making sure eslint prohibit using any console.log statements

React Native - Does console.log() hurt performance when going to production?

4 Answers4