72 lines
2.0 KiB
React
72 lines
2.0 KiB
React
|
import React from 'react'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Fängt Render-Fehler ab — verhindert „weißen Bildschirm“ ohne Hinweis (z. B. nach Deploy/Chaches).
|
||
|
|
*/
|
||
|
|
export default class ErrorBoundary extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
this.state = { error: null }
|
||
|
|
}
|
||
|
|
|
||
|
|
static getDerivedStateFromError(error) {
|
||
|
|
return { error }
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidCatch(error, info) {
|
||
|
|
console.error('ErrorBoundary:', error, info?.componentStack)
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
if (this.state.error) {
|
||
|
|
const msg = this.state.error?.message || String(this.state.error)
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
minHeight: '100vh',
|
||
|
|
padding: '24px',
|
||
|
|
fontFamily: 'system-ui, sans-serif',
|
||
|
|
background: '#f8fafc',
|
||
|
|
color: '#0f172a',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<h1 style={{ fontSize: '1.25rem', marginBottom: '12px' }}>Ein Fehler ist aufgetreten</h1>
|
||
|
|
<p style={{ marginBottom: '16px', maxWidth: '40rem', lineHeight: 1.5 }}>
|
||
|
|
Die Oberfläche konnte nicht geladen werden. Details siehe unten oder in der
|
||
|
|
Browser-Konsole (F12). Nach einem Deploy einen <strong>harten Reload</strong> (Cache leeren)
|
||
|
|
versuchen.
|
||
|
|
</p>
|
||
|
|
<pre
|
||
|
|
style={{
|
||
|
|
padding: '12px',
|
||
|
|
background: '#fff',
|
||
|
|
border: '1px solid #e2e8f0',
|
||
|
|
borderRadius: 8,
|
||
|
|
overflow: 'auto',
|
||
|
|
fontSize: '0.85rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{msg}
|
||
|
|
</pre>
|
||
|
|
<p style={{ marginTop: '20px' }}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
style={{
|
||
|
|
padding: '10px 16px',
|
||
|
|
borderRadius: 8,
|
||
|
|
border: '1px solid #cbd5e1',
|
||
|
|
background: '#fff',
|
||
|
|
cursor: 'pointer',
|
||
|
|
}}
|
||
|
|
onClick={() => window.location.reload()}
|
||
|
|
>
|
||
|
|
Seite neu laden
|
||
|
|
</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return this.props.children
|
||
|
|
}
|
||
|
|
}
|