PathEditor/src/components/layout/ErrorBoundary.tsx

import { Component, type ReactNode } from 'react';

interface Props { children: ReactNode; }
interface State { hasError: boolean; error: string; }

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: '' };

  static getDerivedStateFromError(e: Error): State {
    console.error('[ErrorBoundary]', e);
    return { hasError: true, error: e.message };
  }

  componentDidCatch(_e: Error, info: React.ErrorInfo) {
    console.error('[ErrorBoundary] componentStack:', info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="flex items-center justify-center h-screen" style={{ backgroundColor: 'var(--app-bg)', color: 'var(--app-fg)' }}>
          <div className="text-center space-y-4">
            <h2 className="text-xl font-bold">应用出错</h2>
            <p className="text-sm opacity-70">{this.state.error}</p>
            <button
              className="px-4 py-2 rounded border"
              onClick={() => this.setState({ hasError: false })}
              style={{ borderColor: 'var(--app-border)' }}
            >
              重试
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}