forked from maik/IPFS-portal
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
/* ════════════════════════════ ErrorBoundary ════════════════════════════
|
||
|
|
* Vangt render crashes op en toont een fallback UI i.p.v. een lege pagina.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { Component, type ReactNode, type ErrorInfo } from 'react';
|
||
|
|
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
children: ReactNode;
|
||
|
|
fallback?: ReactNode;
|
||
|
|
/** Optional: label om te tonen welk onderdeel crashed */
|
||
|
|
label?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface State {
|
||
|
|
error: Error | null;
|
||
|
|
info: ErrorInfo | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default class ErrorBoundary extends Component<Props, State> {
|
||
|
|
state: State = { error: null, info: null };
|
||
|
|
|
||
|
|
static getDerivedStateFromError(error: Error) {
|
||
|
|
return { error };
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidCatch(error: Error, info: ErrorInfo) {
|
||
|
|
console.error(`[ErrorBoundary${this.props.label ? ` ${this.props.label}` : ''}]`, error, info);
|
||
|
|
this.setState({ info });
|
||
|
|
}
|
||
|
|
|
||
|
|
handleRetry = () => {
|
||
|
|
this.setState({ error: null, info: null });
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
if (this.state.error) {
|
||
|
|
if (this.props.fallback) return this.props.fallback;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="glass rounded-xl p-8 text-center max-w-lg mx-auto my-8">
|
||
|
|
<AlertCircle className="w-10 h-10 text-accent-rose mx-auto mb-4" />
|
||
|
|
<h3 className="text-surface-200 font-semibold mb-1">
|
||
|
|
{this.props.label ? `Fout in ${this.props.label}` : 'Er ging iets mis'}
|
||
|
|
</h3>
|
||
|
|
<p className="text-xs text-surface-500 mb-2 max-w-sm mx-auto">
|
||
|
|
{this.state.error.message || 'Onbekende fout'}
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
onClick={this.handleRetry}
|
||
|
|
className="inline-flex items-center gap-2 px-5 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-sm font-medium transition-colors"
|
||
|
|
>
|
||
|
|
<RefreshCw className="w-4 h-4" />
|
||
|
|
Probeer opnieuw
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.props.children;
|
||
|
|
}
|
||
|
|
}
|