yaak-mountain-loop/src-web/components/ErrorBoundary.tsx

import type { ErrorInfo, ReactNode } from 'react';
import { Component, useEffect } from 'react';
import { showDialog } from '../lib/dialog';
import { Banner } from './core/Banner';
import { Button } from './core/Button';
import { InlineCode } from './core/InlineCode';
import RouteError from './RouteError';

interface ErrorBoundaryProps {
  name: string;
  children: ReactNode;
}

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

export class ErrorBoundary extends 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, info: ErrorInfo) {
    console.warn('Error caught by ErrorBoundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <Banner color="danger" className="flex items-center gap-2 overflow-auto">
          <div>
            Error rendering <InlineCode>{this.props.name}</InlineCode> component
          </div>
          <Button
            className="inline-flex"
            variant="border"
            color="danger"
            size="2xs"
            onClick={() => {
              showDialog({
                id: 'error-boundary',
                render: () => <RouteError error={this.state.error} />,
              });
            }}
          >
            Show
          </Button>
        </Banner>
      );
    }

    return this.props.children;
  }
}

export function ErrorBoundaryTestThrow() {
  useEffect(() => {
    throw new Error('test error');
  });

  return <div>Hello</div>;
}