// エラー隔離のない危険なコンポーネント
const UserProfile = () => {
  const [user, setUser] = useState<User | null>(null);
  
  return (
    <div>
      <h1>{user.name}</h1> {/* userがnullの場合、アプリ全体がクラッシュ */}
      <img src={user.avatar} alt="プロフィール" />
      <ThirdPartyWidget userId={user.id} /> {/* サードパーティのエラー時にクラッシュ */}
    </div>
  );
};

// App.tsx
const App = () => {
  return (
    <div>
      <Header />
      <UserProfile /> {/* ここでエラーが発生すると、画面全体が真っ白になる */}
      <Footer />
    </div>
  );
};

// 現代的な Error Boundary クラス (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) {
    // エラーロギング (Sentry, LogRocket など)
    console.error('Error Boundary caught an error:', error, errorInfo);
    this.props.onError?.(error);
    
    // 運用環境ではエラーレポートサービスに送信
    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>問題が発生しました</h2>
          <p>しばらくしてからもう一度お試しください。</p>
          <button onClick={() => this.setState({ hasError: false })}>再試行</button>
        </div>
      );
    }

    return this.props.children;
  }
}

// 使用法 - 戦略的配置
const App = () => {
  return (
    <div>
      <Header />
      <ErrorBoundary 
        fallback={<UserProfileError />}
        onError={(error) => analytics.track('user_profile_error', { error: error.message })}
      >
        <UserProfile />
      </ErrorBoundary>
      
      <ErrorBoundary fallback={<div>おすすめ商品を読み込めません</div>}>
        <RecommendationSection />
      </ErrorBoundary>
      
      <Footer /> {/* エラーが発生してもFooterは表示され続ける */}
    </div>
  );
};

// 現場でよく使われる react-error-boundary ライブラリ
import { ErrorBoundary, withErrorBoundary } from 'react-error-boundary';

// カスタム fallback コンポーネント
const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
  return (
    <div className="error-boundary-fallback" role="alert">
      <h2>エラーが発生しました</h2>
      <pre style={{ whiteSpace: 'normal' }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>再試行</button>
    </div>
  );
};

// HOC パターンでコンポーネントを包む
const SafeUserDashboard = withErrorBoundary(UserDashboard, { 
  FallbackComponent: ErrorFallback,
  onError: (error, errorInfo) => {
    // エラーリポーティング
    logErrorToService(error, errorInfo);
  },
});

// React Query と一緒に使用する現代的なパターン
const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => {
          // エラーリセット時にキャッシュを無効化
          queryClient.invalidateQueries();
        }}
        resetKeys={['user']} // 依存関係が変更されると自動リセット
      >
        <UserDashboard />
      </ErrorBoundary>
    </QueryClientProvider>
  );
};