How to drop console statements in production

krsyoung

Hello,

I’m trying to find a way to remove all console.log statements from my production build.

On a previous version of quasar I had updated the webpack configuration for UglifyJsPlugin to drop console statements with drop_console: true.

What approach are folks talking with the latest version in terms of managing logging in production (i.e. dropping debug or just doing another way).

Thanks!

tlloyduk

Would like to know too

SB

.eslintrc.js

// allow console.log during development only
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,

Running quasar build will result in something like this

ERROR in ./src/components/user/UserTabRoles.vue
Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\xxx\code\quasar\infosys\src\components\user\UserTabRoles.vue
210:25 error Unexpected console statement no-console
236:25 error Unexpected console statement no-console

2 problems (2 errors, 0 warnings)

newbro

Also running into this issue. I read that someone configure terser (https://github.com/terser/terser#compress-options) to use the drop_console option, however I would prefer not to add additional library if this can be done as is.

jeffatpf

I’ve used the loglevel module with the corresponding Quasar boot file (loglevel.js):

// https://github.com/pimterry/loglevel
import loglevel from ‘loglevel’;

const isDevelopment = process.env.NODE_ENV === ‘dev’;
loglevel.setLevel(isDevelopment ? ‘debug’ : ‘error’, false);

window.console = loglevel;

Allan-EN-GB

Uglify (which comes baked in with Quasar) handles this: https://stackoverflow.com/questions/41040266/remove-console-logs-with-webpack-uglify

Mickey58

@Allan-EN-GB
Sorry, I have problems getting removal of console.logs in production working: Based on the answer to this StackOverflow post, I added to my quasar.conf the following:

build: {
  env: ctx.dev
  ? {
     // son dev we'll have
     // some settings for dev here...
     } 
   : {   
     // and on  build (production)
        uglifyOptions: {
          compress: { drop_console: true }
         },
      // some other prod settings go here...
      }

After doing a successful production build and deployment (on Heroku), I still see all console.logs statements from my Quasar app in the browser console.

What could be wrong with my approach?

Mickey58

Gentle reminder: Anyone who knows how to get rid of console.logs in production?

tof06

@Mickey58 I’m wondering… what is this env property in your build config ?
I would make it like this : (didn’t try)

build: {
  uglifyOptions: {
    compress: { drop_console: !ctx.dev }
  }
  // ... Other build options
}

Mickey58

Thanks, I tried your suggestion, but still get console log output.

My quasar.conf follows the official template from the Quasar docs on https://quasar.dev/quasar-cli/cli-documentation/handling-process-env#Adding-to-process.env

Afaik, process.env is the same as ctx.dev, which is true for a dev environment and false for a prod environment. So it should set drop_console to true in a prod environment.

Still not sure why it doesn’t work.

tof06

@Mickey58 said in How to drop console statements in production:

My quasar.conf follows the official template from the Quasar docs on https://quasar.dev/quasar-cli/cli-documentation/handling-process-env#Adding-to-process.env

This is for adding something in process.ENV object, not to change your build options.

@Mickey58 said in How to drop console statements in production:

Thanks, I tried your suggestion, but still get console log output.

That’s strange. I tried on my app, and console.log are removed on production build.
Can you share your whole build section of quasar.conf.js ?

Mickey58

@tof06 - thanks for that hint, it looks like I misunderstood that template. I added the uglifyOptions now in front of that env: in the build section, and with a fresh build on Heroku, the console.logs are gone, so that problem is solved.

Unfortunately I get another problem (CORS error on some of the requests from the Quasar frontend to the backend) with that build. I still have to diagnose whether it is a side effect of the drop_console or a separate problem.

skypart

It may work!
https://medium.com/@boyskypart/how-to-build-and-delete-all-console-in-quasar-framework-97ae324451b2

No More Posting New Topics!

How to drop console statements in production