Unexpected warning for error boundaries without getDerivedStateFromError
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
(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 🙃
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
La issue indica la documentazione di error-boundary e una riproduzione in Codesandbox, ma non indica file del repository né test. Inizia verificando la relazione documentata tra componentDidCatch, getDerivedStateFromError e l'avvertimento contro la riproduzione; il lavoro è completato quando la documentazione corrisponde esplicitamente al comportamento osservato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react
- Ambito
- documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 28/100