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! 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"
            ]
        }
    }
}

🏁 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.

Comments

[snowlyg]

nice

[Gulshan Aggarwal]

Thanks, buddy!

[Sakshi]

helpful

[Gulshan Aggarwal]

Thanks, Sakshi.

[Gulshan Aggarwal]

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

[Mirko Sedda]

Hi! Why console.logs are a security risk?

[Gulshan Aggarwal]

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.

[Danny Engelman]

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

[Gulshan Aggarwal]

Hey, I didn't mean that

[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.

[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.

[Mirko Sedda]

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

[Gulshan Aggarwal]

😂

[Jeff]

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

[Gulshan Aggarwal]

Performance may be a reason 🙄

[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.

[Gulshan Aggarwal]

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

[Ron Jonk]

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

[🚩 Atul Prajapati 🇮🇳]

That's amazing

[Gulshan Aggarwal]

Thanks, Atul!

[MilMike]

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

console.log = function(){}

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... ;)

[Gulshan Aggarwal]

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

[Jeff]

What about?

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

[Hyerim]

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

[Gulshan Aggarwal]

Welcome! keep learning & chill 😎

[Eduardo Cuomo]

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

[Jeff]

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 = () => {};

It's helpful you called this out.

[Peter Vivo]

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

window.console.log = grabLogEntries

with overwrite our cleaning in client side.

[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.

[Gulshan Aggarwal]

Suggestions are always welcome, keep it up. 👍

[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 ?

[Muhammad Uzair]

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

[Gulshan Aggarwal]

why?

[Muhammad Uzair]

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

[Jared Long]

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

[Gulshan Aggarwal]

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

[Gulshan Aggarwal]

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

[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

[Gulshan Aggarwal]

thanks for the suggestion!

[Muhammad Uzair]

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

[Gulshan Aggarwal]

Ok

[Gulshan Aggarwal]

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

[Gulshan Aggarwal]

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

[Gulshan Aggarwal]

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

[Ayyash]

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

[nicoatridge]

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