// Dangerous component without error isolation
const UserProfile = () => {
  const [user, setUser] = useState<User | null>(null);
  
  return (
    <div>
      <h1>{user.name}</h1> {/* If user is null, the entire app crashes */}
      <img src={user.avatar} alt="Profile" />
      <ThirdPartyWidget userId={user.id} /> {/* Crashes on third-party error */}
    </div>
  );
};

// App.tsx
const App = () => {
  return (
    <div>
      <Header />
      <UserProfile /> {/* If an error occurs here, the entire screen becomes a white page */}
      <Footer />
    </div>
  );
};

// Modern Error Boundary Class (TypeScript)
interface ErrorBoundaryState {
  hasError: boolean;
  error?: Error;
}

class ErrorBoundary extends Component<
  PropsWithChildren<{ fallback?: ReactNode; onError?: (error: Error) => void }>,
  ErrorBoundaryState
> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Error logging (Sentry, LogRocket, etc.)
    console.error('Error Boundary caught an error:', error, errorInfo);
    this.props.onError?.(error);
    
    // In production, send to an error reporting service
    if (process.env.NODE_ENV === 'production') {
      // Sentry.captureException(error, { contexts: { errorInfo } });
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || (
        <div className="error-fallback">
          <h2>An issue has occurred</h2>
          <p>Please try again shortly.</p>
          <button onClick={() => this.setState({ hasError: false })}>Try again</button>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage - Strategic placement
const App = () => {
  return (
    <div>
      <Header />
      <ErrorBoundary 
        fallback={<UserProfileError />}
        onError={(error) => analytics.track('user_profile_error', { error: error.message })}
      >
        <UserProfile />
      </ErrorBoundary>
      
      <ErrorBoundary fallback={<div>Unable to load recommended products</div>}>
        <RecommendationSection />
      </ErrorBoundary>
      
      <Footer /> {/* Footer remains visible even if an error occurs */}
    </div>
  );
};

// react-error-boundary library commonly used in practice
import { ErrorBoundary, withErrorBoundary } from 'react-error-boundary';

// Custom fallback component
const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
  return (
    <div className="error-boundary-fallback" role="alert">
      <h2>An error occurred</h2>
      <pre style={{ whiteSpace: 'normal' }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
};

// Wrap component with HOC pattern
const SafeUserDashboard = withErrorBoundary(UserDashboard, {
  FallbackComponent: ErrorFallback,
  onError: (error, errorInfo) => {
    // Error reporting
    logErrorToService(error, errorInfo);
  },
});

// Modern pattern used with React Query
const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => {
          // Invalidate cache on error reset
          queryClient.invalidateQueries();
        }}
        resetKeys={['user']} // Auto-reset if dependencies change
      >
        <UserDashboard />
      </ErrorBoundary>
    </QueryClientProvider>
  );
};