Ignorar certos erros / avisos do console no React?

Question

Tenho um grande número de erros de console como este aparecendo em meu aplicativo:

Aviso: o React não reconhece o textStyleprop em um elemento DOM. Se você deseja intencionalmente que ele apareça no DOM como um atributo personalizado, soletre-o em letras minúsculas textstyle. Se você o transmitiu acidentalmente de um componente pai, remova-o do elemento DOM.

O ideal seria corrigir os erros, mas infelizmente isso não é possível, pois estou usando Styled System com Styled Components: https://github.com/styled-system/styled-system/issues/1044

Como uma solução alternativa menos do que ideal, gostaria de desabilitar certos erros do console para a versão de desenvolvimento do React. Isso pode ser feito?

Não tenho certeza se isso importa, mas estou usando o React Native Web.

Answer 1

Você pode substituir o método console.warn por sua própria função que filtra os avisos que deseja ignorar:

const backup = console.warn;

console.warn = function filterWarnings(msg) {
  const supressedWarnings = ['warning text', 'other warning text'];

  if (!supressedWarnings.some(entry => msg.includes(entry))) {
    backup.apply(console, arguments);
  }
};

console.warn('I\'ll appear as a warning');

console.warn('warning text - I will not');

Não tenho certeza de qual método de console reage está usando internamente, então você pode precisar fazer o mesmo para console.info, console.loge console.error.

Você também pode apenas usar a versão de produção do react, que suprime todos os avisos por padrão, mas é claro que você não pode selecionar e escolher, você perde todos os avisos nesse caso.