DEV Community

Cover image for ReactJS - Disable console.log() in production and staging
Rajesh Royal
Rajesh Royal

Posted on • Edited on

17 3

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;
    }
  };
})();
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (11)

Collapse
 
umerfarooq69 profile image
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

Collapse
 
rajeshroyal profile image
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. 🙂

Collapse
 
umerfarooq69 profile image
Umer farooq

Thank you boi 😊

Collapse
 
rajeshroyal profile image
Rajesh Royal

For redux issue you can reffer to this StackOverflow

Collapse
 
umerfarooq69 profile image
Umer farooq

thanks boi

Collapse
 
anjkr profile image
anj-kr

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

Thanks - Dan

Collapse
 
umerfarooq69 profile image
Umer farooq

Not yet bro

Collapse
 
__16e02de1 profile image
Александр Томсон

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

Collapse
 
rajeshroyal profile image
Rajesh Royal

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

Collapse
 
js21 profile image
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?

Collapse
 
rajeshroyal profile image
Rajesh Royal

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more