DEV Community

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

Posted on

Say Goodbye to console.log from Production environment

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 don't remember. Usually, we use it to check API responses and some other areas of the application.

Making console statements public is not a good idea at all, it may bring your app at a security risk. Checking every file, and deleting the statement is very time-consuming & boring too. As a developer, we all hate boring tasks so, in the article here we discuss how you can say goodbye to console.log in your Next.js app from the Production environment in just less than 1 minute.

sounds good

Sounds good! let's goooo...๐Ÿ˜Ž

๐Ÿ‘‰ Follow the steps mentioned below -

1. Install the babel-plugin-transform-remove-console package as a development dependency.

2. Create a .babelrc file at the root of your project, copy the below content & that's all.

{
    "presets": [
        "next/babel"
    ],
    "env": {
        "production": {
            "plugins": [
                "transform-remove-console"
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ This is just a short trick that I used to enhance my productivity, even you should use it next time.
I will keep sharing more tips & tricks related to web dev,stay tuned!.

Thanks for reading.

goodbye

Discussion (65)

Collapse
milmike profile image
MilMike • Edited on

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 Author

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 on

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 Author

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 Author

nice! approach I'm gonna try it next time ๐Ÿ‘Œ

Collapse
lukeshiru profile image
Luke Shiru

You could also just have a linting rule against console logging, and block merge to main or deploy if the linter fails.

Collapse
jlong4223 profile image
Jared Long • Edited on

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

Collapse
lukeshiru profile image
Luke Shiru

I prefer lefthook, but yup 100% agree! And you can use GitHub actions for CI (or whatever similar tool you use)

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

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

Collapse
andrewbaisden profile image
Andrew Baisden

Linting rules seem like a great solution for this.

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

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 Author

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 Author

Ok

Collapse
lukeshiru profile image
Luke Shiru

ESLint can be ran in your entire project from the CLI, so the moment is added is not that relevant โ˜บ๏ธ

Thread Thread
gulshanaggarwal profile image
Gulshan Aggarwal Author

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

Thread Thread
lukeshiru profile image
Luke Shiru

You can set it to auto-fix, but ideally it will only block your deployment and tell you to fix it. Linters like ESLint are key in nowadays projects.

Thread Thread
gulshanaggarwal profile image
Gulshan Aggarwal Author

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

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 on

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 Author

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
gulshanaggarwal profile image
Gulshan Aggarwal Author • Edited on

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 Author

๐Ÿ˜‚

Collapse
dannyengelman profile image
Danny Engelman • Edited on

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

Thread Thread
gulshanaggarwal profile image
Gulshan Aggarwal Author

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 Author

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
visualjeff profile image
Jeff

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

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

Performance may be a reason ๐Ÿ™„

Collapse
uzair004 profile image
Muhammad Uzair

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

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

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 Author

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 Author

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 Author

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 Author

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 Author

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
snowlyg profile image
snowlyg

nice

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

Thanks, buddy!

Collapse
hseritt profile image
Harlin Seritt

Wow. Is a package really needed for this???

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

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 Author

Thanks, Atul!

Collapse
bellatrix profile image
Sakshi Jain

helpful

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author

Thanks, Sakshi.

Collapse
gulshanaggarwal profile image
Gulshan Aggarwal Author • Edited on

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

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 Author

Sure, but don't forget to give me credits

Collapse
ayyash profile image
Ayyash

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