Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 30, 2022 08:01 am GMT

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 {debugOn} boolean   * @param {suppressAll} boolean   */  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.


Original Link: https://dev.to/rajeshroyal/reactjs-disable-consolelog-in-production-and-staging-3l38

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To