javascript / expert
Snippet
Objektorientierte Error Boundary mit Vererbung und Stack-Extraktion
React Error Boundaries erfordern die OOP-Syntax von Klassenkomponenten, da keine Hook-Äquivalente für Catch-Lebenszyklus-Phasen existieren. Das Erben von React.Component ermöglicht zustandsbehaftetes Lebenszyklus-Management, während das Error-Stack-Array in kategorisierte Telemetrie-Objekte zerlegt wird.
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
32
33
34
import React, { Component } from 'react';export class BaseErrorBoundary extends Component {constructor(props) {super(props);this.state = { hasError: false, errorLog: [] };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {const formattedError = {message: error.message,stackFrames: error.stack ? error.stack.split('\n').slice(0, 3) : [],componentStack: errorInfo.componentStack};this.logTelemetry(formattedError);}logTelemetry(formattedError) {this.setState(prev => ({errorLog: prev.errorLog.concat(formattedError)}));}render() {if (this.state.hasError) {return this.props.fallback(this.state.errorLog);}return this.props.children;}}
react
Erklärung
1
export class BaseErrorBoundary extends Component {
Deklariert eine objektorientierte Klassenkomponente, die direkt von React.Component erbt.
2
stackFrames: error.stack ? error.stack.split('\n').slice(0, 3) : [],
Teilt den mehrzeiligen Callstack-String in ein Array und extrahiert die obersten Frames für präzises Diagnose-Logging.
3
errorLog: prev.errorLog.concat(formattedError)
Hängt die neue formatierte Fehler-Payload unveränderlich an den bestehenden errorLog-Array-Zustand an.