# All files / src/components ErrorBoundary.tsx

100% Statements 62/62
100% Branches 10/10
85.71% Functions 6/7
100% Lines 62/62

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    90
    91
    92
    93
    94
    951x

    1x
    1x
    12x
    12x
    12x
    12x
    12x
    12x

    1x
    10x
    10x
    10x
    10x
    10x

    1x
    5x
    5x

    1x
    1x
    1x
    1x
    1x
    1x

    1x
    23x
    11x
    4x
    4x

    7x
    7x
    7x
    7x
    7x

    7x
    7x

    7x

    7x
    7x
    7x
    7x
    7x
    7x

    11x
    11x
    11x
    11x
    11x

    11x
    11x
    11x
    11x
    11x

    11x
    11x
    11x
    11x

    11x

    12x
    23x
    1x

    1x
     import React from 'react';

    interface ErrorBoundaryProps {
      children: React.ReactNode;
      fallback?: React.ReactNode;
    }

    interface ErrorBoundaryState {
      hasError: boolean;
      error: Error | null;
    }

    /**
     * Error Boundary Component
     *
     * Catches JavaScript errors anywhere in the child component tree,
     * logs the errors, and displays a fallback UI
     */
    export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
      constructor(props: ErrorBoundaryProps) {
        super(props);
        this.state = {
          hasError: false,
          error: null
        };
      }

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

      componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
        console.error('Error boundary caught error:', error, errorInfo);
      }

      handleReset = () => {
        this.setState({
          hasError: false,
          error: null
        });
      };

      render() {
        if (this.state.hasError) {
          if (this.props.fallback) {
            return this.props.fallback;
          }

          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 p-8 text-center">
                <div className="text-6xl mb-4">⚠️</div>
                <h1 className="text-2xl font-bold text-gray-900 mb-2">
                  Something went wrong
                </h1>
                <p className="text-gray-600 mb-6">
                  We're sorry, but something unexpected happened. Please try refreshing the page.
                </p>

                {this.state.error && (
                  <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6 text-left">
                    <p className="text-sm text-red-800 font-mono break-words">
                      {this.state.error.message}
                    </p>
                  </div>
                )}

                <div className="flex gap-3 justify-center">
                  <button
                    onClick={this.handleReset}
                    className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    Try Again
                  </button>
                  <button
                    onClick={() => window.location.href = '/'}
                    className="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
                  >
                    Go Home
                  </button>
                </div>
              </div>
            </div>
          );
        }

        return this.props.children;
      }
    }

    export default ErrorBoundary;