104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { RefreshCw } from 'lucide-react';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
fallback?: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error?: Error;
|
|
}
|
|
|
|
class ChunkErrorBoundary extends Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.state = { hasError: false };
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
// Check if it's a chunk loading error
|
|
if (error.name === 'ChunkLoadError' || error.message.includes('Loading chunk')) {
|
|
return { hasError: true, error };
|
|
}
|
|
return { hasError: false };
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
console.error('Chunk loading error:', error, errorInfo);
|
|
|
|
// If it's a chunk loading error, try to reload the page
|
|
if (error.name === 'ChunkLoadError' || error.message.includes('Loading chunk')) {
|
|
this.setState({ hasError: true, error });
|
|
}
|
|
}
|
|
|
|
handleRetry = () => {
|
|
// Clear the error state and reload the page
|
|
this.setState({ hasError: false, error: undefined });
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
if (this.props.fallback) {
|
|
return this.props.fallback;
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-white to-slate-50">
|
|
<div className="text-center p-8 max-w-md">
|
|
<div className="mb-6">
|
|
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<RefreshCw className="w-8 h-8 text-red-600" />
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
|
Chunk Loading Error
|
|
</h2>
|
|
<p className="text-gray-600 mb-6">
|
|
There was an issue loading a part of the application. This usually happens when the application has been updated.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Button
|
|
onClick={this.handleRetry}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
|
|
>
|
|
<RefreshCw className="w-4 h-4 mr-2" />
|
|
Reload Application
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={() => window.location.href = '/'}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
Go to Homepage
|
|
</Button>
|
|
</div>
|
|
|
|
{process.env.NODE_ENV === 'development' && this.state.error && (
|
|
<details className="mt-6 text-left">
|
|
<summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700">
|
|
Error Details (Development)
|
|
</summary>
|
|
<pre className="mt-2 p-3 bg-gray-100 rounded text-xs overflow-auto">
|
|
{this.state.error.message}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ChunkErrorBoundary;
|