javascript / intermediate
Snippet
Deklarative UI-Wiederherstellung über Klassen-Error-Boundaries
React Error Boundaries nutzen JavaScript-Klassenvererbung und Lebenszyklusmethoden, um unbehandelte Fehler in untergeordneten Komponentenbäumen während des Renderings, der Lebenszyklen und der Konstruktoren abzufangen. Durch die Definition von `static getDerivedStateFromError` wird der Zustand synchron aktualisiert, um eine Fallback-Benutzeroberfläche anzuzeigen, anstatt die gesamte Anwendung 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
21
22
23
24
25
26
27
28
29
30
31
import React, { Component } from 'react';class SafeBoundary extends Component {state = { hasError: false, error: null };static getDerivedStateFromError(error) {return { hasError: true, error };}componentDidCatch(error, errorInfo) {console.error('Uncaught runtime error:', error, errorInfo.componentStack);}resetError = () => {this.setState({ hasError: false, error: null });};render() {if (this.state.hasError) {return (<div role="alert"><p>Something went wrong: {this.state.error?.message}</p><button onClick={this.resetError}>Retry Action</button></div>);}return this.props.children;}}export default SafeBoundary;
react
Erklärung
1
class SafeBoundary extends Component {
Erweitert React.Component, um eine klassenbasierte Grenze mit Zugriff auf Lebenszyklusmethoden zu etablieren.
2
static getDerivedStateFromError(error) {
Statische Lebenszyklusmethode, die ausgelöste Fehler abfängt und den aktualisierten Zustand für die Fallback-UI zurückgibt.
3
componentDidCatch(error, errorInfo) {
Lebenszyklus-Hook, der den Fehler und den Komponenten-Stack-Trace für Logging-Zwecke empfängt.