javascript / intermediate
Snippet
Behandeln von Komponenten-Render-Fehlern mit klassenbasierten Error Boundaries
React erfordert Klassenkomponenten für Error Boundaries, da Hooks Render-Fehler im Lebenszyklus nicht abfangen können. `getDerivedStateFromError` aktualisiert den State synchron zur Anzeige einer Fallback-UI, während `componentDidCatch` Seiteneffekte wie Error-Logging abwickelt.
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
import React, { Component } from 'react';class SafeBoundary extends Component {constructor(props) {super(props);this.state = { hasError: false, error: null };}static getDerivedStateFromError(error) {return { hasError: true, error };}componentDidCatch(error, errorInfo) {console.error('Captured runtime error:', error, errorInfo);}render() {if (this.state.hasError) {return (<div role="alert" className="error-card"><h3>Something went wrong.</h3><p>{this.state.error?.message}</p></div>);}return this.props.children;}}export default SafeBoundary;
react
Erklärung
1
static getDerivedStateFromError(error) {
Statische Lebenszyklusmethode, die ausgelöst wird, sobald eine Kindkomponente beim Rendern einen Fehler wirft.
2
return { hasError: true, error };
Gibt ein neues State-Objekt zurück, um beim nächsten Render-Durchlauf die Fallback-Oberfläche anzuzeigen.
3
componentDidCatch(error, errorInfo) {
Lebenszyklus-Hook für Seiteneffekte wie das Protokollieren des Fehlers und Stacktraces an Überwachungsdienste.