javascript / beginner
Snippet
Abfangen von Render-Fehlern mit Klassen-basierten Error Boundaries
Error Boundaries sind React-Klassenkomponenten, die JavaScript-Fehler überall in ihrem untergeordneten Komponentenbaum abfangen. Die Implementierung von getDerivedStateFromError aktualisiert den Zustand für ein Fallback-UI, während componentDidCatch Fehlerdetails protokolliert, ohne die gesamte App zum Absturz zu bringen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from 'react';class SafeErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {console.error('Captured UI failure:', error, errorInfo);}render() {if (this.state.hasError) {return <h2>Something went wrong while displaying this section.</h2>;}return this.props.children;}}
react
Erklärung
1
class SafeErrorBoundary extends React.Component {
Definiert eine objektorientierte React-Klassenkomponente, die Fehler-Lebenszyklusmethoden implementieren kann.
2
static getDerivedStateFromError(error) {
Statische Lebenszyklusmethode, die nach dem Auftreten eines Fehlers aufgerufen wird und den State für das Fallback-UI aktualisiert.
3
componentDidCatch(error, errorInfo) {
Lebenszyklusmethode zum Protokollieren von Ausnahmedetails oder zum Senden an einen Fehler-Tracking-Dienst.
4
if (this.state.hasError) {
Prüft, ob ein Fehler aufgetreten ist, um bedingt die Fehlermeldung anzuzeigen.
5
return this.props.children;
Rendert die umschlossenen Kindkomponenten regulär, wenn kein Fehler vorliegt.