forked from maik/IPFS-portal
maikrolf
c9432a16ba
- SIWE auth flow: challenge/login/logout/me API routes + JWT middleware
- Fixed [...path] catch-all: Kubo proxy with matchRoute() + mapToKuboAPI()
- Fixed session_id → nonce field mismatch in AuthProvider
- Fixed dashboard pins crash: Kubo returns {Keys: {...}}, not array
- Added middleware route guard (307 redirect to /login)
- Added login, register, profile, usage, upload pages
- Added dashboard components (StorageGauge, FreeTierProgress)
- Added SWR hooks + AuthGuard + Providers + Toast/ErrorBoundary
- Added payment integration (smart contract ABI, tiers, tokens)
- Fixed IPNS key listing: Name/Id → name/id mapping
- Added PWA support (manifest, service worker, icons)
- Added tests for helpers, limits, search-index, wallet
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;
|
|
}
|
|
}
|