Unexpected warning for error boundaries without getDerivedStateFromError
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
(Note: I dismissed the idea described here by now, but I still felt like reporting my findings.)
Steps to reproduce
I create a reusable error boundary component, ErrorCatcher, in order to deduplicate across different error boundary components.
class ErrorCatcher extends React.Component {
componentDidCatch(error, info) {
this.props.onError(error);
}
render() {
return this.props.children;
}
}
I then create new error boundary on top of that. For example:
function ErrorBoundary({children}) {
const [error, setError] = useState(null)
if (error) {
return <ErrorMessage error={error} />
}
return (
<ErrorCatcher
onError={error => setError(error)}}
>
{children}
</ErrorCatcher>
)
}
For convenience, check out this Codesandbox for a live example.
Actual Behavior
Testing it out, I notice that React prints the following warning to the console:
Warning: ErrorCatcher: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
Expected Behavior
Checking the documentation, I find the following (emphasis mine):
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [...]
That leaves me a bit puzzled, since on the one hand the documentation is offering me to define either, and on the other I get a warning. I want the documentation to be explicit about eventual error and warning messages.
If you see some value in enabling users to create ErrorCatcher, without being bugged by the warning, I could see other solutions: get rid of the message, or make it optional.
Kindest regards 🙃
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names the error-boundary documentation and a Codesandbox reproduction, but no repository files or tests. Start by checking the documented relationship between componentDidCatch, getDerivedStateFromError, and the warning against the reproduction; done when the documentation explicitly matches the observed behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100