[RFC] Refine logging strategy

[oliviertassinari]

Context

This is a follow-up on #15343. Looking at the components (under /packages/*), we can count the following usage frequency of the different logging methods:

• console.error x69
• console.warn x25

Historically, React used to use console.warn. It was changed in facebook/react#3440 to benefit from the stack trace of error. Something Chrome now supports for warn too:

Problem

It doesn't seem that there is any rule or convention around when to use error over warn. Do we have an improvement opportunity here? Could we use it as leverage to help developers that need to prioritize which problem they should focus on first?

Proposal

What do you think of:

• If we are unsure, better say it's an error over warn to be safe.
• console.error we use it for cases that are important. It can be a crash of the page, explaining what went wrong, or creating awareness about a significantly wrong user-experience. For instance:
  

  material-ui/packages/material-ui/src/FormControl/FormControl.js

  Lines 135 to 140 in 56a1141

  	console.error(
  	[
  	'Material-UI: There are multiple InputBase components inside a FormControl.',
  	'This is not supported. It might cause infinite rendering loops.',
  	'Only use one InputBase.',
  	].join('\n'),

• console.warn is used as soon as something is not right, leading to incorrect behavior but not critical. For instance, these should be warnings:
  

  material-ui/packages/material-ui/src/StepContent/StepContent.js

  Lines 44 to 46 in 56a1141

  	console.error(
  	'Material-UI: <StepContent /> is only designed for use with the vertical stepper.',
  	);

  
  

  material-ui/packages/material-ui-icons/src/Motorcycle.js

  Lines 4 to 8 in 56a1141

  	console.warn(
  	[
  	'Material-UI: Motorcycle icon has been replaced with TwoWheeler.',
  	"Please change your import to `import Motorcycle from '@material-ui/icons/TwoWheeler';`",
  	].join(' '),

  
  

  material-ui/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js

  Lines 81 to 86 in 56a1141

  	console.error(
  	[
  	'Material-UI: You have provided an invalid combination of props to the Breadcrumbs.',
  	`itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,
  	].join('\n'),
  	);

  
  

  material-ui/packages/material-ui/src/GridList/GridList.js

  Lines 46 to 50 in 56a1141

  	console.error(
  	[
  	"Material-UI: The GridList component doesn't accept a Fragment as a child.",
  	'Consider providing an array instead.',
  	].join('\n'),

[vicasas]

I really like this approach, I feel that it is something necessary to implement in all places where possible. Giving feedback to the developer as soon as possible on problems using the components is great.

Treat everything that bursts with error and treat what is not right using warn

[shelbyspeegle]

I really like this as well.

In particular, the one that is driving us insane is Material-UI: The contrast ratio of... errors. Maybe we are doing something wrong but seeing this three line error six times on load is something we have gotten used to over the last three or so years, making it harder to see errors that actually need our attention. Being able to filter console output to errors only is something we do frequently as we have a similar error/warn prioritization going on in our own code that follows the guidelines that you describe.

I know there has been an ongoing debate on whether or not there should be a configuration or setting to remove the error logging for contrast ratio. I feel like this error/warn prioritization would ease the pain a little bit if we could change that message to a console.warn instead of console.error.