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.

@SarunUK Im getting the errors in React Native Web, React Native is fine. So that solution doesn't work for me. — Evanss
– Evanss, Commented Oct 2, 2020 at 8:35

cglacet · Accepted Answer · 2022-11-02 16:37:43Z

32

+250

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.

edited Nov 2, 2022 at 16:37

cglacet

11.3k4 gold badges58 silver badges71 bronze badges

answered Oct 4, 2020 at 16:16

D-Money

2,49517 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Robot Over a year ago

In TypeScript, this throws the error "Argument of type 'IArguments' is not assignable to parameter of type '[message?: any, ...optionalParams: any[]]'.ts(2345) Use the rest parameters instead of 'arguments'."

john k Sep 17 at 14:53

do you have to do this in every file?

Collectives™ on Stack Overflow

Ignore certain console errors / warnings in React?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related