React: An error in render() + boundary behaves unexpectedly on ReactDOM.hydrate()

Created on 24 Apr 2019  路  5Comments  路  Source: facebook/react

From the React.org docs:

Error boundaries preserve the declarative nature of React, [...] somewhere deep in the tree, it will still correctly propagate to the closest error boundary.

Do you want to request a feature or report a bug?
I am not sure if this is a bug or intended behavior, because it only happens with ReactDOM.hydrate when an error is thrown only within render.

What is the current behavior?
If an error is thrown in the render() method of any component, the error boundary at any given top-level renders its fallback exactly where that component is, instead of where the error boundary is defined.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/74kmwk3o1j

What is the expected behavior?
Just like it ReactDOM.hydrate behaves if the error happens in componentDidMount, the error boundary's fallback should be rendered where the error boundary element is actually declared.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
v16.8.6 on Chrome, haven't tested previous versions, but I think to remember this working correctly when we upgraded to v16 and added our top-level, page boundary.

Server Rendering Bug

Most helpful comment

Yeah, this looks like a bug. We'll have a look.

All 5 comments

Yeah, this looks like a bug. We'll have a look.

It gives,
Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.
and
Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.
I'm curious where the "User Error" data gone or passed,
why there are two returns from render() method.

@kambleaa007 is this the same issue? It feels different, because I didn't see that error in the repro. Please make a separate issue with a codesandbox repro if so.

@threepointone no its still the same issue,

Warning: Did not expect server HTML to contain the text node "
in div
I just want to make sure about the exceptional message "User Error",
the same message should be in render's return.

https://codesandbox.io/s/p37qrqr9kj?fontsize=14
https://codesandbox.io/embed/p37qrqr9kj

render() errors,
problems with hydrate()

Is there any update?

Was this page helpful?
0 / 5 - 0 ratings