5

I am using Webpack and React. After several weeks of development in React and multiple third party libraries implemented, I got many warnings errors displayed in my inspector's console but they don't affect my application while running.

These errors are client side errors only.

However I don't want these errors to be displayed to other users if the website get public.

So how to prevent any inspector's console to display warning errors? I just checked on Facebook and saw Facebook just disabled the inspector and displayed a customized message.

I simply want to prevent warning messages to be printed in the console log automatically using JavaScript.

I've already tried the console.clear() but it seems it works only for Firefox. I need something more global.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
John
  • 179
  • 1
  • 4
  • 13

2 Answers2

20

You can overwrite the console methods to make them no-op. Just make sure that you run this code before any other code.

console.log = console.warn = console.error = () => {};

// Look ma, no error!
console.error('Something bad happened.');

However, it's better to fix these errors instead of hiding them. Even if everything seems to be working fine, there might be some bugs that will be visible only in some specific conditions.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
  • 2
    That is a really bad idea, it stops you to use any of those methods. – bman Dec 12 '16 at 23:31
  • 1
    @bman Yes, but that's what OP asked for. – Michał Perłakowski Dec 12 '16 at 23:31
  • 3
    Not really! What he really needs is to silent the warnings. See my answer for the proper way to silent them. – bman Dec 12 '16 at 23:32
  • @Gothdo thanks for the tips. However as said above i need the warnings to be hidden from anyone and be accessible only for devs. – John Dec 13 '16 at 07:22
  • You can save the console function like `const w = console.warn;` to restore it later. I found that very helpful for silencing a noisy 3rd party script. – wortwart May 20 '20 at 09:24
  • That's a quick temporary solution. I used that in my App.js to hide all the 3rd party warnings so I can at last debug what I needed to. – Shautieh Sep 29 '21 at 05:14
3

First of all, you should probably resolve those warning instead of hiding them. But if you want to hide all warnings in the production, you need to use the production version of React or set the environment to production in your webpack configuration".

This is possible by using DefinePlugin plugin. Essentially what this plugin does is to replace all instances of process.env.NODE_ENV to production which will stop React from printing errors into the console. 

   plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"',
      }),
      new webpack.optimize.UglifyJsPlugin({ compress: {warnings: false} }),
      new webpack.optimize.DedupePlugin(),
   ],

Here we also are using UglifyJsPlugin to get rid of all the codes inside our libraries. An example of dead code inside React library:

if (process.env.NODE_ENV == 'development') {
  console.warning('...')
}

Since we set process.env.NODE_ENV to production that code will never executed and can be entirely eliminated from our build.

bman
  • 5,016
  • 4
  • 36
  • 69