Unexpected warning for error boundaries without getDerivedStateFromError
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
(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 🙃
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Das Issue nennt die error-boundary-Dokumentation und eine Codesandbox-Reproduktion, aber keine Repository-Dateien oder Tests. Beginne damit, die dokumentierte Beziehung zwischen componentDidCatch, getDerivedStateFromError und der Warnung vor der Reproduktion zu überprüfen; abgeschlossen, wenn die Dokumentation ausdrücklich dem beobachteten Verhalten entspricht.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 28/100