reactjs / reactjs/react.dev

Unexpected warning for error boundaries without getDerivedStateFromError

Offen
#3,028 6 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

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

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.