How to prevent React from recreating component tree on error?

Question

I'm working on an app, which throws an error somewhere within a React component, so in the console there's this error:

React will try to recreate this component tree from scratch using the error boundary you provided

I don't really get why React is even doing this since it's obviously going to result in an infinite render loop (and it does), since the error will keep happening every time it re-render.

So I'm wondering, can this behaviour be disabled somewhere? I'm not sure what is causing it, if it's just React or some other plugin. Any help would be appreciated.

Answer 1

After a lot of digging I've managed to sort it out.

I've found the solution on react-hot-loader repo. As they say:

On Hot Module Update we will inject componentDidCatch and a special render
to every Class-based component you have, making Error Boundaries more local.

So, two possible solutions:

1. Change your class component to a functional component.
2. You can write your own error reporter (as it's specified here).

For me, both of this worked.