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

#react #javascript #beginners #tutorial

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

Top comments (11)

Umer farooq • Jan 30 '22

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 • Jan 31 '22

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 • Jan 31 '22

Thank you boi 😊

Rajesh Royal • Jan 31 '22

For redux issue you can reffer to this StackOverflow

Umer farooq • Feb 1 '22

thanks boi

anj-kr • Jan 31 '22

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

Thanks - Dan

Umer farooq • Jan 31 '22

Not yet bro

Александр Томсон • Dec 29 '22

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