diff --git a/companion-app/src/ErrorGrenze.tsx b/companion-app/src/ErrorGrenze.tsx new file mode 100644 index 0000000..cca2f64 --- /dev/null +++ b/companion-app/src/ErrorGrenze.tsx @@ -0,0 +1,51 @@ +/** + * Auffangnetz für Abstürze irgendwo im Baum. + * + * Ohne diese Grenze unmountet React die gesamte App bei jedem unbehandelten + * Fehler beim Rendern - #wurzel bleibt leer, und übrig bleibt nur der + * Seitenhintergrund (im Nacht-Theme praktisch schwarz). Genau das wurde als + * "schwarze Seite nach Update prüfen" gemeldet: kein hängender Ladezustand, + * sondern ein stiller Absturz, dessen eigentliche Fehlermeldung nirgends + * ankam. Ein "zurück und wieder rein" half nur, weil das erneute Öffnen den + * Baum komplett neu aufbaut und der auslösende Zustand dabei verschwindet. + * + * Diese Grenze behebt nicht die eigentliche Ursache - sie sorgt nur dafür, + * dass ein Absturz ab jetzt sichtbar ist (Fehlertext, Neu-laden-Knopf) statt + * unsichtbar zu bleiben, und dass der Fehlertext in der Konsole landet, um + * die eigentliche Ursache beim nächsten Mal fassen zu können. + */ + +import { Component, type ReactNode } from "react" + +import { ActionButton } from "@audi-dash/ui" + +export class ErrorGrenze extends Component< + { children: ReactNode }, + { fehler: Error | null } +> { + state: { fehler: Error | null } = { fehler: null } + + static getDerivedStateFromError(fehler: Error) { + return { fehler } + } + + componentDidCatch(fehler: Error, info: { componentStack?: string | null }) { + console.error("ErrorGrenze: unbehandelter Fehler beim Rendern", fehler, info.componentStack) + } + + render() { + if (!this.state.fehler) return this.props.children + return ( +
+ Die Seite konnte nicht dargestellt werden. Ein Neuladen behebt das in der Regel. +
++ {this.state.fehler.message} +
+