Add error boundary components for error handling

[MarcosBrendonDePaula]

Summary

Introduces comprehensive error handling to the application through two new error boundary components: a general-purpose ErrorBoundary and a specialized LiveErrorBoundary for real-time components. These boundaries catch React component errors and display user-friendly fallback UI while providing recovery mechanisms.

Key Changes

• ErrorBoundary component: A reusable error boundary that catches component errors with support for:

  • Custom fallback UI (ReactNode or function-based)
  • Error callback hooks for logging/monitoring
  • Reset functionality to recover from errors
  • Default fallback UI with error details in development mode

• LiveErrorBoundary component: A specialized error boundary for live/real-time components with:

  • Live-specific error messaging and styling
  • "Reconnect" button instead of generic "Try again"
  • Tailored for WebSocket-based components

• Application integration:

  • Wraps root app with ErrorBoundary in main.tsx for global error handling
  • Wraps all live demo components with LiveErrorBoundary for targeted error recovery

• Test coverage: Comprehensive unit tests covering:

  • Normal rendering without errors
  • Default and custom fallback UI
  • Error callback invocation
  • Reset/recovery functionality
  • Both ErrorBoundary and LiveErrorBoundary variants

• Build configuration: Updated Vitest config to include .test.tsx files

Implementation Details

• Uses React's class component API for error boundary implementation (required for getDerivedStateFromError and componentDidCatch)
• Provides flexible fallback patterns: static ReactNode, function-based with error/reset parameters, or default UI
• Development mode shows detailed error information; production shows user-friendly messages
• Styled with Tailwind CSS for consistent visual hierarchy (red for critical errors, amber for live component issues)

https://claude.ai/code/session_01HRT3EReuYwLui8J8RTJhwW