React to not unmount the entire tree on uncaught errors

[melloc01]

Do you want to request a feature or report a bug?
Feature request

What is the current behavior?
Whole app unmounts on uncaught errors.

What is the expected behavior?
It'd be good to just unmount the affected tree.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React@16

Hi guys, I feel like the "new" error handling approach on React 16 is too harsh for our App. We have plenty of plugin "entrypoints" for external React components that we consider error prone. While having an ErrorBoundary for each is a solution, I'd prefer that only the affected component tree to be unmounted in case some of these components, or even internal components spits an error.

A way to achieve this with the new error handling system would be to:

0. This behavior could be a opt-in or out defined on a component up in the tree, something like a class variable supressErrors = true.
1. Flag the component that threw the error.
2. Re-render the whole tree.
3. Do not render flagged components.

The effect would be like a default ErrorBoundary wrapping every component down the tree where the boundary just spits null instead of crashing the whole app.

What do you think?

[gaearon]

It is sometimes suggested that a better solution would be to leave null in place of failing components. I think it might sound better intuitively but it's pretty bad in practice.

Things randomly popping off the screen on errors leads to a pretty jarring user experience. Imagine that if in JS, whenever a function threw an error, it would be treated as if it returned null instead. That might work sometimes, cause further errors in other cases, and lead to some very wrong behavior in yet other cases.

For example, imagine a shopping cart UI where some items in the checkout form just disappear. Now you might accidentally buy more things than you need. Or imagine a status update form with a privacy selector disappearing. Now you might accidentally post something with a public visibility while thinking you're only sharing with friends.

So overall, this is a pretty dangerous idea and we won't do this by default. If you feel very strongly that this is a good solution, you can always explicitly wrap every component in an error boundary (e.g. via a HOC). But we recommend against this, and instead suggest to design errors as intentional states at an appropriately coarse granularity level.

[gaearon]

See also past discussions in #11846 and #12865

[melloc01]

Cool @gaearon - thanks for the links. Feels bad for bringing the topic up again - I totally get the point and am 100% on the ErrorBoundary wagon, it really improved how we handle errors in React.
I've read the others discussions and they don't seem as generic.

While I see the benefit it brings, I think that there could be a opt-in that we could supress errors intentionally on a sub-tree, it could be something like DANGER_YOUR_APP_WILL_CHEAT_YOU to make sure developers understand it is dangerous.

Another alternative could be a component. Instead of returning null we could return a component that will show the error on the place it happened in this case, the UI would not hide the errors and also we'd have a fallback for every component without an ErrorBoundary.

// not sure how retry would work, clear flags and re-render?
const DefaultError = <div>Something went wrong rendering this component<button>Retry</button></div>

class MyExternalWidgerRenderer extends   PureComponent {
  ...
  // needs help naming things
  DefaultErrorBoundary: (error, info) => Node = DefaultError
  or
  SupressErrorComponent: (error, info) => Node = DefaultError

....

I can see the point that implementing something like this would encourage writing less error boundaries, but it doesn't sound crazy to me.

Anyways, I get the point and how React should encourage good practices - we're writing the boundaries 😁

[luisfrocha]

Sorry for commenting on such an old thread, but I ran into this issue recently. After researching and reading the reasons for implementing this way, I think it's not an intuitive way to handle it. Since the right way to handle it is by protecting with an ErrorBoundary component, perhaps it would be a better solution to integrate this mechanism into the React.Component itself? This way, if a component fails, only it and its children fail to load, displaying a default or custom message. That would be more intuitive than having the entire app disappear from the screen. Just a (super late) thought, though.

[gaearon]

Individual components are too granular. Imagine a button or a input disappearing and being replaced with a message. Also, an error message should be intentional — you don’t want to show a random thing to the user. Making individual components disappear is also a privacy risk. Imagine a privacy selector disappearing and someone accidentally posting as public what they intended to post as private. Or a price label disappearing.

Yea it’s not intuitive the first time you see it. Then you learn to add error boundaries — maybe start at the routing level. If you use a framework, more of them are starting to have a convention for error boundaries or encourage you to add them. And the ones you create will be intentionally designed and worded, which React can’t do for you.