DEV Community

Cover image for Remove console.log from Production Mode
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

Remove console.log from Production Mode

console.log is one the debugging weapon or logger we use as javascript developer. The console. log method is a way for developers to construct code that informs them about what the code is doing in a non-obtrusive way. But this tiny little snippets can do the following to our code base.
log

🎯 Impact our app performance and increase our computation power and time at production level.

🎯 Also creates a variable and consumes memory, however minute.

🎯 Expose some information which might put your app at risk.

Let's consider the code snippet below



const { email, password } = req.body;
const user = await User.findOne({ email });
console.log(user);
if (!user || user === null) {
  return errorResMsg(res, 400, "this email does not exist");
}
//...
//create token
const token = await jwt.sign(
  {
    id: user._id,
    email: user.email,
    fullName: user.fullName,
  },
  process.env.USER_SECRET,
  {
    expiresIn: "2d",
  }
);
console.log(token);


Enter fullscreen mode Exit fullscreen mode

In the code above, i logged the user and the token and this can be used by attackers to steal information from our app.

With that being said, let's look at two ways to remove console.log from our app

Vscode method

This method uses the search icon and regex to remove all logs



// Classes are templates for creating objects
// Method 1: Class function

class Person {
  constructor(name, age, occupation) {
    this.age = age;
    this.name = name;
    this.occupation = occupation;
  }

  todo() {
    console.log("kill");
  }
}

const createPerson = new Person("Abayomi", 78, "dev");
console.log(createPerson.todo());

// Method 2: Class Expression
const doSomething = class HouseChores {
  constructor(cut, clean, arrange) {
    this.cut = cut;
    this.clean = clean;
    this.arrange = arrange;
  }
};

const datInfo = {
  cut: (doSomething.cut = "grass"),
  clean: (doSomething.clean = "cars"),
  arrange: (doSomething.arrange = "house"),
};

console.log(datInfo);

// static types
class Music {
  constructor(viola, trombone) {
    this.viola = viola;
    this.trombone = trombone;
  }

  static musicConstant = "drums";
}

const result = new Music("Eb", "F#");
console.log(result);
console.log(Music.musicConstant); // static types are called without instantiating


Enter fullscreen mode Exit fullscreen mode
  • Click on the search Icon Image description

  • Type console.log Image description

  • Click the regex option Image description

  • Click replace all

Image description


  • Click the replace option

Image description


  • Result: Image description

Method 2:

While method one is cool, i consider it as been destructive way. what if you need the logs during development mode again 🙄

Here is the work around.

Create .env file in your root project with NODE_ENV=development

Install the dotenv package and configure it



const env = require("dotenv");
env.config();


Enter fullscreen mode Exit fullscreen mode

Now let's test our environment variable with our friend

console.log(process.env.NODE_ENV);

Image description

The last thing to write is a simple line of code



if (process.env.NODE_ENV === "development") {
  console.log = function () {};
}


Enter fullscreen mode Exit fullscreen mode

The code above says if our environment variable is in development mode, output an empty function that says nothing.

With the snippet active, If you run your code, you should get nothing from the terminal.

Image description

With the snippet commented out, it log results to our terminal
Image description


Discuss

What other methods can you use other than the aforementioned.

Top comments (9)

Collapse
 
talr98 profile image
Tal Rofe

Overriding Nodejs built in functions is very bad practice.
The phases a developer should take are

  1. Create a Logger service
  2. Allow "console.log" calls to present in the code
  3. Add ESLint rule to forbid this use of "console.log" in CI/CD process
Collapse
 
ibrahimsyah profile image
Ibrahimsyah Zairussalam • Edited

Method 2 is what I am looking for! despite of removing all console log before production and re-add them when something goes wrong, We just need a toggle that will check what environment the system is running on. Many Thanks!

Collapse
 
leodarpan profile image
DARPAN ANEJA

Very useful and informative!!!

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

@talr98 thanks for your expertise, i will definitely add the best practices as you suggest with @lukeshiru

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

@lukeshiru thanks for your contribution. I will check this out too

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

@leodarpan Thanks

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

Thanks Jon Randy for your contribution, ...However other security measures will be intact in case of a full blown app to mitigate attackers inserting anything

Collapse
 
codarbind profile image
ADEKOLA Abdwahab

NIce Abayomi.

I just finished building Hidis package that serves similar purpose, could you check it out, please: npmjs.com/package/hidis

dev.to/codarbind/how-to-automatica...

Collapse
 
sanzeeb3_18 profile image
Sanzeeb Aryal

This should be an accepted answer. :)