Ignore certain console errors / warnings in React?

Question

I have a huge number of console errors like this appearing in my app:

Warning: React does not recognize the textStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase textstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Ideally I would fix the errors but sadly that's not possible as I'm using Styled System with Styled Components: https://github.com/styled-system/styled-system/issues/1044

As a less than ideal workaround Id like to disable certain errors from the console for the development version of React. Can this be done?

Not sure if it matters but I'm using React Native Web.

Answer 1

You can override the console.warn method with your own function that filters out the warnings you want to ignore:

const consoleWarn = console.warn;
const SUPPRESSED_WARNINGS = ['arning text - I will n'];

console.warn = function filterWarnings(msg, ...args) {
    if (!SUPPRESSED_WARNINGS.some((entry) => msg.includes(entry))) {
        consoleWarn(msg, ...args);
    }
};

console.warn('I\'ll appear as a warning');
console.warn('warning text - I will not');

I'm not sure which console method react is using internally, so you may need to do the same for console.info, console.log and console.error.

You can also just use the production version of react, which suppresses all warnings by default, but of course you can't pick and choose, you loose all warnings in that case.