DEV Community

Cover image for Say Goodbye to console.log from Production environment

Say Goodbye to console.log from Production environment

Gulshan Aggarwal on June 24, 2022

I have been working on a project with Next.js since last month and used the console.log statement in lots of components & files even though I d...
Collapse
 
milmike profile image
MilMike • Edited

I do this too but without a plugin, I simply set an empty function for console.log on prod env.

console.log = function(){}
Enter fullscreen mode Exit fullscreen mode

beside console sometimes people also use alert to test something. In some of our webapps we disabled alert the same way like above.. (someone once pushed alert("curse word") on friday in production, it popped up when user did something special. We got interesting mails on monday... ;)

Collapse
 
visualjeff profile image
Jeff

What about?

globalThis.console = { log: () => {} };

Collapse
 
hyerim profile image
Hyerim

Wow Im newbie and wanna know how I can use this.
type just like normal console.log()?

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

Welcome! keep learning & chill 😎

Collapse
 
reduardo7 profile image
Eduardo Cuomo

What will happen when I use console.info() for example?

Thread Thread
 
visualjeff profile image
Jeff • Edited

Calling info() will cause an exception.

So a better approach would be to do the following if you are only interested in silencing console.log:

globalThis.console.log = () => {};
Enter fullscreen mode Exit fullscreen mode

It's helpful you called this out.

Collapse
 
lionelrowe profile image
lionel-rowe

That's annoying as hell for anyone developing downstream code (browser extensions etc.) to be compatible with your site/web app. Much better to use lint rules or an approach like the one mentioned in this article.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Suggestions are always welcome, keep it up. 👍

Collapse
 
pengeszikra profile image
Peter Vivo

consol.log harming by the way when client assign her own function to grab information

window.console.log = grabLogEntries
Enter fullscreen mode Exit fullscreen mode

with overwrite our cleaning in client side.

Collapse
 
etiennejcharles profile image
Etienne-Joseph Charles

Just curiously, wouldn't that that prevent from errors beings logged if ever you're using something like Sentry or DataDog or NewRelic to log errors ?

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

nice! approach I'm gonna try it next time 👌

Collapse
 
greenchapel_john profile image
greenchapeljohn

That’s nice and simple on Next.js.
On Angular I created a service for logging and the log level is set based on what environment you log too. I then like to use the linter to stop any uses of console.log in the code ( except in the service ) a good git hook running the lint then stops people from committing a console log in the code.

One advantage I get with this is based on the error the service can decide if it wants to send the log via REST API to an external service for monitoring.

Collapse
 
frontendplace profile image
Ron Jonk • Edited

And then y can check a session variable to either show or hide the logs on production is also possible. It will be very difficult in your minified code to find that needed session variable to set the log.level. Show default the loglevel “error” and not “ debug” and with the session variable set y can show all “debug” level logs

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Oh! making something cool is very hard but you did it, hats off you man.

Collapse
 
mirkosedda profile image
Mirko Sedda

Hi! Why console.logs are a security risk?

Collapse
 
visualjeff profile image
Jeff

Maybe for performance reasons? Like it runs on the main thread in the browser...

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Performance may be a reason 🙄

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal • Edited

Hey, Mirko! thanks for asking the question. Sometimes you need to console your environment variable values to check why it's undefined or not working, this may cause your credentials at risk.

Collapse
 
mirkosedda profile image
Mirko Sedda

Interesting 😊 thats the only thing that always worked for me 😂

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

😂

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

Great, now we can label all SSR code as a 'security risk'

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

Hey, I didn't mean that

Thread Thread
 
dannyengelman profile image
Danny Engelman

But you said so.

console.log can log everything the user can access in the Inspector.

console.log can only print unwanted credentials when the back-end provided them, there for you imply everything coming from the back-end is a security risk.

Or saying console.log is a security risk is just stupid.

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

I strongly disagree. I didn't mean that at all. Here I just mentioned a situation ,how a user can put his/her credentials on risk.

Collapse
 
uzair004 profile image
Muhammad Uzair

That's nice trick, but It won't pass code review.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

why?

Collapse
 
uzair004 profile image
Muhammad Uzair

Well it depends, some seniors don't even let you have a line of comment in code.

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

How about an ESLint rule for no console and a pre-commit hook?

This way, you don't need any ninja-hacks. You do your testing and remove them before the commit.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Hey Jakob, you are right! but If I say when your are too close to ship?

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

I don't think I'm following?

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

what do you mean? 🤔

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

Some may be thinking that why we are not allowed to use the console.log in the production plus some other development enviornemnt as well, so the answer is that if you are fetching a lot of data from Back-End and printing that data in the Front-End in any framework then it is quite possible that, that data will again some time to get printed at the console so due to this reason we should avoid printing direct data to the console.

The other thing that has been mentioned in this article is the security risk, this also put the application on the risk as well.

This plugin looks good but it is there is a need to communicate the need and usage of this plugin to the other members of the team as well. However, I appreciate that you have bring this matter of writing console log on the production deployed application. This is a critical thing to which only a few developers pay attention, more power to you and looking forward to see some important articles from your side. Good Luck.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Thanks for the detailed explanation & lovey wishes! 🤗

Collapse
 
pixeliner profile image
Pixeliner

console.logs should just be used to bug check and afterwards removed. Don't leave it in the source code, especially not in big companies. You can maybe create a peek functionality in your utils, but that's that. Using build tools to remove code is just bad practice.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

True 💯 but what do you mean by build tools to remove code ?

Collapse
 
dikamilo profile image
dikamilo

I prefer to create a custom logger wrapper/class and use it in app. In react apps as custom context/provider with hook to get logger instance in components.

Why? Several advantages:

  • log to multiple services, not just console if necessary
  • different logger implementation for tests, you can mock logger methods and assert them in tests (if you have business flow logs, then this is useful)
  • different logger implementation for storybook: you can see logs as actions in storybook
  • production? Just use dummy logger that do nothing or log only to production services

"Checking every file, and deleting the statement is very time-consuming"
ESLint's rule to deny console logs + ignore them just in console logger implementation

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Actually, while searching for the solution I had no idea about logger services so I solved it using the package. Yeah! thanks for the detailed solution ♥

Collapse
 
nicoatridge profile image
nicoatridge

I just add this code:
let testMode = true; // console log suppressed if false
if (!testMode) {console.log = function() {};} // to suppress console log

Collapse
 
jlong4223 profile image
Jared Long • Edited

Could even use husky to setup custom git hooks for blocking a push or commit if linting fails

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Nice trick! but what if you setup the rule late for you console.log ?

Collapse
 
snowlyg profile image
snowlyg

nice

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Thanks, buddy!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Linting rules seem like a great solution for this.

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

I couldn't find something that's the reason I tried it but now lots of solutions are available in comments.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

That's amazing

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Thanks, Atul!

Collapse
 
bellatrix profile image
Sakshi

helpful

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Thanks, Sakshi.

Collapse
 
littletreeme profile image
littleTreeme

hi,your article is so good! Can I translate your artical and post to my wechat public account?

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Sure, but don't forget to give me credits

 
gulshanaggarwal profile image
Gulshan Aggarwal

Next time, I'm gonna surely try all these suggestions but this time I will continue it.

 
gulshanaggarwal profile image
Gulshan Aggarwal

It means ESLint will autofix console.log from all files?

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal

Nice trick! but what if you setup the rule late for you console.log ?

Collapse
 
jlong4223 profile image
Jared Long

Eslint-nibble is also an amazing tool for visualizing linting categories & errors in the project. It should also be able to auto remove all console.logs

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

thanks for the suggestion!

Thread Thread
 
uzair004 profile image
Muhammad Uzair

Nice one, but we usually have some console.log in catch blocks of code. Linter will fail because of those as well

Thread Thread
 
gulshanaggarwal profile image
Gulshan Aggarwal

Ok

Collapse
 
gulshanaggarwal profile image
Gulshan Aggarwal • Edited

Thanks, Clary! I will keep posting cool & knowledgeable content.

Collapse
 
ayyash profile image
Ayyash

you don't need a plugin, you can wrap it yourself: dev.to/ayyash/writing-a-wrapper-fo...