import React, { Component, ErrorInfo, ReactNode } from 'react'; import { AlertCircle, ArrowLeft, Home, RefreshCw } from 'lucide-react'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { logger } from '@/lib/logger'; interface EntityErrorBoundaryProps { children: ReactNode; entityType: 'park' | 'ride' | 'manufacturer' | 'designer' | 'operator' | 'owner'; entitySlug?: string; fallback?: ReactNode; } interface EntityErrorBoundaryState { hasError: boolean; error: Error | null; errorInfo: ErrorInfo | null; } /** * Entity Error Boundary Component (P0 #5) * * Specialized error boundary for entity detail pages. * Prevents entity rendering errors from crashing the app. * * Usage: * ```tsx * * * * ``` */ export class EntityErrorBoundary extends Component { constructor(props: EntityErrorBoundaryProps) { super(props); this.state = { hasError: false, error: null, errorInfo: null, }; } static getDerivedStateFromError(error: Error): Partial { return { hasError: true, error, }; } componentDidCatch(error: Error, errorInfo: ErrorInfo) { logger.error('Entity page error caught by boundary', { entityType: this.props.entityType, entitySlug: this.props.entitySlug, error: error.message, stack: error.stack, componentStack: errorInfo.componentStack, }); this.setState({ errorInfo }); } handleRetry = () => { this.setState({ hasError: false, error: null, errorInfo: null, }); }; handleBackToList = () => { const listPages: Record = { park: '/parks', ride: '/rides', manufacturer: '/manufacturers', designer: '/designers', operator: '/operators', owner: '/owners', }; window.location.href = listPages[this.props.entityType] || '/'; }; handleGoHome = () => { window.location.href = '/'; }; getEntityLabel() { const labels: Record = { park: 'Park', ride: 'Ride', manufacturer: 'Manufacturer', designer: 'Designer', operator: 'Operator', owner: 'Property Owner', }; return labels[this.props.entityType] || 'Entity'; } render() { if (this.state.hasError) { if (this.props.fallback) { return this.props.fallback; } const entityLabel = this.getEntityLabel(); return (
Failed to Load {entityLabel} {this.props.entitySlug ? `Unable to display ${entityLabel.toLowerCase()}: ${this.props.entitySlug}` : `Unable to display this ${entityLabel.toLowerCase()}`} Error Details

{this.state.error?.message || `An unexpected error occurred while loading this ${entityLabel.toLowerCase()}`}

This might be due to:

  • The {entityLabel.toLowerCase()} no longer exists
  • Temporary data loading issues
  • Network connectivity problems
{import.meta.env.DEV && this.state.errorInfo && (
Show Debug Info (Development Only)
                    {this.state.errorInfo.componentStack}
                  
)}
); } return this.props.children; } }