File size: 2,833 Bytes
900a32d 986fe1a 900a32d 07db7cc 986fe1a 900a32d 986fe1a 900a32d 986fe1a 900a32d 986fe1a 07db7cc 986fe1a 900a32d 986fe1a 900a32d 986fe1a 07db7cc 986fe1a 900a32d 986fe1a 900a32d 986fe1a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import { Component, type ReactNode } from "react";
interface Props {
children: ReactNode;
fallback?: ReactNode;
/** Show error details even in production (defaults to false) */
showDetails?: boolean;
}
interface State {
hasError: boolean;
error: Error | null;
}
/**
* Error Boundary component to catch React rendering errors.
*
* Prevents the entire app from crashing when a component throws.
* Displays a user-friendly error message instead of a white screen.
*
* Usage:
* <ErrorBoundary>
* <ComponentThatMightThrow />
* </ErrorBoundary>
*/
export class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
// Only log full error details in development (security: don't leak stack traces in prod)
if (import.meta.env.DEV) {
console.error("ErrorBoundary caught error:", error, errorInfo);
} else {
// Minimal production logging - no stack traces or internal details
console.error("ErrorBoundary caught an error");
}
}
handleRetry = (): void => {
this.setState({ hasError: false, error: null });
};
render(): ReactNode {
if (this.state.hasError) {
if (this.props.fallback) {
return this.props.fallback;
}
return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
<div className="bg-gray-800 rounded-lg p-6 max-w-md w-full text-center space-y-4">
<div className="text-red-400 text-4xl">Something went wrong</div>
<p className="text-gray-300">
An unexpected error occurred while rendering the application.
</p>
{/* Only show error details in development or if explicitly enabled (security) */}
{this.state.error &&
(import.meta.env.DEV || this.props.showDetails) && (
<details className="text-left">
<summary className="text-gray-400 cursor-pointer hover:text-gray-300">
Error details
</summary>
<pre className="mt-2 p-2 bg-gray-900 rounded text-xs text-red-300 overflow-auto max-h-32">
{this.state.error.message}
</pre>
</details>
)}
<button
onClick={this.handleRetry}
className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
>
Try Again
</button>
</div>
</div>
);
}
return this.props.children;
}
}
|