96 lines
3.8 KiB
TypeScript
96 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
errorInfo: ErrorInfo | null;
|
|
}
|
|
|
|
class ErrorBoundary extends Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = { hasError: false, error: null, errorInfo: null };
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
return { hasError: true, error, errorInfo: null };
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
console.error("ErrorBoundary caught an error:", error, errorInfo);
|
|
this.setState({ errorInfo });
|
|
}
|
|
|
|
handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
handleClearStorage = () => {
|
|
try {
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
window.location.reload();
|
|
} catch (e) {
|
|
console.error("Failed to clear storage:", e);
|
|
window.location.reload();
|
|
}
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0a0b] text-white flex items-center justify-center p-4">
|
|
<div className="max-w-md w-full bg-[#18181B] border border-white/10 rounded-2xl p-6 text-center">
|
|
<div className="h-16 w-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
|
|
<svg className="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 className="text-xl font-bold mb-2">Something went wrong</h2>
|
|
|
|
<p className="text-muted-foreground text-sm mb-4">
|
|
An error occurred while rendering the application. This might be due to corrupted data or a temporary issue.
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={this.handleReload}
|
|
className="w-full py-3 px-4 bg-primary text-primary-foreground font-semibold rounded-xl hover:bg-primary/90 transition-all"
|
|
>
|
|
Reload Page
|
|
</button>
|
|
|
|
<button
|
|
onClick={this.handleClearStorage}
|
|
className="w-full py-3 px-4 bg-white/5 hover:bg-white/10 text-white font-medium rounded-xl transition-all border border-white/5"
|
|
>
|
|
Clear Cache & Reload
|
|
</button>
|
|
</div>
|
|
|
|
{process.env.NODE_ENV === 'development' && this.state.error && (
|
|
<details className="mt-4 text-left">
|
|
<summary className="text-xs text-muted-foreground cursor-pointer">Error Details</summary>
|
|
<pre className="mt-2 p-2 bg-black/50 rounded text-xs overflow-auto max-h-40 text-red-400">
|
|
{this.state.error.toString()}
|
|
{this.state.errorInfo?.componentStack}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary;
|