Next.js MCP Server Template

// Error Boundary component for robust error handling import React from 'react'; import { ErrorBoundaryProps, ErrorBoundaryState } from '@/types/components'; class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { constructor(props: ErrorBoundaryProps) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error('Error Boundary caught an error:', error, errorInfo); this.setState({ error, errorInfo }); } render() { if (this.state.hasError) { if (this.props.fallback) { const FallbackComponent = this.props.fallback; return ( <FallbackComponent error={this.state.error} retry={() => this.setState({ hasError: false, error: undefined, errorInfo: undefined })} /> ); } return ( <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4"> <div className="max-w-md w-full bg-white rounded-lg shadow-lg border p-6"> <div className="text-center"> <div className="text-red-500 text-6xl mb-4">⚠️</div> <h2 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong</h2> <p className="text-gray-600 mb-6"> An unexpected error occurred. Please try refreshing the page. </p> <div className="space-y-3"> <button onClick={() => this.setState({ hasError: false, error: undefined, errorInfo: undefined })} className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" > Try Again </button> <button onClick={() => window.location.reload()} className="w-full px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors" > Refresh Page </button> </div> {process.env.NODE_ENV === 'development' && this.state.error && ( <details className="mt-6 text-left"> <summary className="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900"> Error Details (Development) </summary> <pre className="mt-2 text-xs bg-gray-100 p-3 rounded overflow-x-auto"> {this.state.error.toString()} {this.state.errorInfo?.componentStack} </pre> </details> )} </div> </div> </div> ); } return this.props.children; } } export default ErrorBoundary;