72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import React, { Component, ReactNode } from 'react';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
onError?: (error: Error) => void;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
}
|
|
|
|
export class AsyncErrorBoundary extends Component<Props, State> {
|
|
state: State = {
|
|
hasError: false,
|
|
error: null
|
|
};
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
return {
|
|
hasError: true,
|
|
error
|
|
};
|
|
}
|
|
|
|
componentDidCatch(error: Error) {
|
|
console.error('AsyncErrorBoundary caught an error:', error);
|
|
this.props.onError?.(error);
|
|
}
|
|
|
|
retry = () => {
|
|
this.setState({ hasError: false, error: null });
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-lg">
|
|
<div className="flex items-center">
|
|
<svg
|
|
className="w-5 h-5 text-red-400 mr-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<h3 className="text-sm font-medium text-red-800">
|
|
Failed to load data
|
|
</h3>
|
|
</div>
|
|
<p className="mt-2 text-sm text-red-700">
|
|
{this.state.error?.message || 'An unexpected error occurred'}
|
|
</p>
|
|
<button
|
|
onClick={this.retry}
|
|
className="mt-3 text-sm text-red-600 hover:text-red-500 underline"
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
} |