ReactJS - Disable console.log() in production and staging

Husky hooks are a really good way to prevent someone from pushing accidental console logs to a production ready build or staging environment, but still if you decided to remove the usages of console.logs() from your build add this global function to your JS codebase.

remove-consoles.js

export const GlobalDebug = (function () {
  var savedConsole = console;
  /**
  * @param {boolean} debugOn
  * @param {boolean} suppressAll
  */
  return function (debugOn, suppressAll) {
    var suppress = suppressAll || false;
    if (debugOn === false) {
      // supress the default console functionality
      console = {};
      console.log = function () {};
      // supress all type of consoles
      if (suppress) {
        console.info = function () {};
        console.warn = function () {};
        console.error = function () {};
      } else {
        console.info = savedConsole.info;
        console.warn = savedConsole.warn;
        console.error = savedConsole.error;
      }
    } else {
      console = savedConsole;
    }
  };
})();

Use this function at the root of your project or in any file you want to.

App.js

import React, { Suspense, useEffect } from "react";
import { GlobalDebug } from "utils/remove-console";

function App() {
  /**
   * @REMOVE_CONSOLES
   * // remove the working of console logs
   * // remove any accidental use of console logs
   */
  useEffect(() => {
    (process.env.NODE_ENV === "production" ||
     process.env.REACT_APP_ENV === "STAGING") &&
      GlobalDebug(false);
  }, []);

  console.log("I am just another dummy console log, 
   suppose to be suppressed 🙂");

  return (
    <Suspense fallback={<h3>Loading...</h3>}>
      <YourComponentsHere />
    </Suspense>
  );
}

export default App;

⚠ Will update this blog with - how to set multiple enviornments in ReactJS [development, staging, production][through .env files]

Hope you enjoyed reading, make that heart read color in top left corner if you liked this post. 🍻

Comments

[Umer farooq]

I want to know how we can hide redux from the console on production and please tell me how we secure or local storage on production or dev

[Rajesh Royal]

To secure the localStorage you can encrypt the data with any encryption lib. CryptoJS is a good one.
Also to secure your encryption key store it in .env file if you can, and access it from node process.

For Redux I do not know, but If I try that or come to know about It I will update the comment. 🙂

[Umer farooq]

Thank you boi 😊

[Rajesh Royal]

For redux issue you can reffer to this StackOverflow

[Umer farooq]

thanks boi

[anj-kr]

Hello, did you able to find the answer for localstorage or redux ?

Thanks - Dan

[Umer farooq]

Not yet bro

[Александр Томсон]

That console.log("I am just another dummy console log,
suppose to be suppressed 🙂") will be showed in console, because at first will be executed all code of component, and only then code that in useEffect

[Rajesh Royal]

Thanks @lukeshiru for the correction. I have updated the blog. BTW I see you on YT nice work 🤘

[Rjsx21]

Nice work bro..

I have one question.. what if I have to enable console logging on IT,UAT environments and disable only for Production?

Can you put some light on this?

[Rajesh Royal]

use environment variables to check if it's prod environment if it is then disable, otherwise keep it as it is.