Remove console logs from your release React Native builds

Every developer who had their app audited by a security expert knows about the issue of console.logs appearing in release builds of a React Native app. Unintentionally this data was printed out via console.log, console. error, console. warn… that might be useful while debugging the app can give valuable information to bad actors looking to gain access our application.

How do we view console.logs for apps built in release mode

First of all, let’s create a simple welcome/login screen. This will contain a welcome text and a login button. When the button is pressed a session is initialised and a JWT token is returned. Let’s say we made a mistake somewhere in the app while we were grinding the midnight oil trying to fix that last issue before our go-live deadline, and we forgot to remove a console.log that was printing out that JWT token.

How can we view the console logs while the app is in release mode even without Metro running? This is very simple.

In Android Studio in the bottom left corner, you can find a tool called Logcat. This enables you to view all the logs your connected device emits and it doesn’t only pertain to your application but to every app and service run on your device.

Logcat location in AndroidStudio

If we now run our app and press the “Login” button you can see in Logcat that the console.log prints out: Production JWT token => ‘, ‘eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IllvdSBzaG91bGQgbm90IHNlZSB0aGlzIiwiaWF0IjoxNTE2MjM5MDIyfQ.sDU0LN8C8KkCf95uJsfKylMbDeFTZCBAzPu3Kr5x7Vo’

Example of Logcat in Android studio printing out the console.log we forgot to remove.

How to remove console logs from the release build

How do we remove all console logs from release mode? Manually going through the whole app and deleting all of them is inefficient. Luckily there is a simple tool that does that for us. It’s called babel-plugin-transform-remove-console.

First start by adding it your project with:

yarn add babel-plugin-transform-remove-console --dev

Then navigate to babel.config.js (create one if you don’t have it already) and add transform-remove-console. I suggest also adding an environment tag to only remove logs from the production/release builds.

module.exports = {
  env: {
    production: {
      plugins: ['transform-remove-console'],
    },
  },
};

If we run the same test as before all console.logs, console.errors, console.warn… are automatically removed and do not appear in Logcat.