Gulshan Aggarwal

Posted on Jun 24, 2022

Say Goodbye to console.log from Production environment

#webdev #programming #javascript #nextjs

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.

Latest comments (59)

littleTreeme • Jun 28 '22

hi，your article is so good！ Can I translate your artical and post to my wechat public account？

Gulshan Aggarwal • Jun 28 '22

Sure, but don't forget to give me credits

dikamilo • Jun 27 '22

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

Gulshan Aggarwal • Jun 27 '22

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 ♥

Andrew Baisden • Jun 26 '22

Linting rules seem like a great solution for this.

Jakob Attkinson • Jun 26 '22

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.

Gulshan Aggarwal • Jun 26 '22

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

Jakob Attkinson • Jun 26 '22

I don't think I'm following?

Gulshan Aggarwal • Jun 26 '22

what do you mean? 🤔

Abdur Rehman Khalid • Jun 25 '22

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.

Gulshan Aggarwal • Jun 25 '22

Thanks for the detailed explanation & lovey wishes! 🤗

Pixeliner • Jun 25 '22

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.

Gulshan Aggarwal • Jun 25 '22

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

nicoatridge • Jun 25 '22

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