// 에러 격리 없는 위험한 컴포넌트
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 클래스 (타입스크립트)
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>
  );
};