👻 Promise 에러 무시하기: 조용한 실패와 혼란스러운 UI

왜 이 패턴이 문제인가?

프론트엔드 애플리케이션에서 백엔드 API 호출, 파일 읽기, 애니메이션 지연 등 비동기 작업은 필수적입니다. 자바스크립트는 이러한 비동기 작업의 결과를 Promise 객체를 통해 다룹니다. Promise는 성공(resolve) 또는 실패(reject) 상태를 나타내는데, 개발자가 reject 상태를 적절히 처리(catch)하지 않으면 문제가 발생합니다.

1. 조용한 실패 (Silent Failure)

Promise가 reject되었음에도 불구하고 .catch() 메서드가 연결되어 있지 않으면, 해당 에러는 Unhandled Promise Rejection으로 간주됩니다. 대부분의 모던 브라우저나 Node.js 환경에서는 이러한 에러를 콘솔에 경고로 출력하지만, 애플리케이션의 실행 흐름은 멈추지 않고 계속됩니다. 개발자 도구를 열어보지 않으면 이러한 오류가 발생했는지 알기 어렵습니다.

2. 예측 불가능한 UI 및 상태

비동기 작업이 실패했는데 에러 처리가 없다면, 애플리케이션의 상태(state)는 의도한 대로 업데이트되지 않습니다. 예를 들어, 사용자 정보를 불러오는 API 호출이 실패했지만 에러를 잡지 않으면, isLoading 상태가 false로 바뀌더라도 user 데이터는 여전히 null이거나 이전 값 그대로 남아있을 수 있습니다. 이로 인해 사용자에게 빈 화면, 오래된 데이터, 또는 깨진 UI가 표시될 수 있으며, 이는 심각한 사용자 경험 저하로 이어집니다.

3. 디버깅의 어려움

에러가 발생해도 명확한 메시지나 처리 로직이 없으면, 문제의 원인을 파악하기 매우 어렵습니다. 어느 부분에서, 왜 에러가 발생했는지 추적하기 위해 더 많은 시간과 노력이 필요하게 됩니다.

4. 자원 누수 및 오작동 가능성

일부 비동기 작업은 성공 시 특정 자원을 해제하거나 다음 단계를 진행해야 합니다. 에러 처리 없이 실패하는 경우, 이러한 자원 해제 로직이 실행되지 않아 자원 누수가 발생하거나, 예상치 못한 상황에서 애플리케이션이 오작동할 수 있습니다.

어떻게 수정해야 하는가?

비동기 작업의 에러를 효과적으로 처리하는 가장 기본적인 방법은 Promise.prototype.catch() 메서드를 사용하거나 async/await 구문 내에서 try...catch 블록을 사용하는 것입니다. 어떤 방법을 사용하든, 에러 발생 시 사용자에게 피드백을 제공하고, 애플리케이션의 상태를 안정적으로 관리하는 것이 중요합니다.

1. Promise.prototype.catch() 사용하기

모든 Promise 체인의 마지막에 .catch() 메서드를 붙여 에러를 처리합니다. 이는 Promise 기반 API (Fetch API 등)를 직접 사용할 때 유용합니다.

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 성공적으로 데이터 처리
  })
  .catch(error => {
    // 에러 발생 시 처리
    console.error('데이터를 가져오는 중 오류 발생:', error);
    // 사용자에게 오류 메시지 표시 등
  });

2. async/await와 try...catch 사용하기

가독성 높은 비동기 코드를 위해 async/await를 사용하는 경우, 동기 코드처럼 try...catch 블록을 사용하여 에러를 처리할 수 있습니다. 이는 더 직관적이고 체계적인 에러 관리를 가능하게 합니다.

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      // HTTP 에러 상태(4xx, 5xx)도 에러로 간주하여 throw
      throw new Error(`HTTP 에러! 상태: ${response.status}`);
    }
    const data = await response.json();
    // 성공적으로 데이터 처리
  } catch (error) {
    // 에러 발생 시 처리
    console.error('데이터를 가져오는 중 오류 발생:', error);
    // 사용자에게 오류 메시지 표시 등
  }
}

3. 에러 상태 및 UI 피드백 관리

에러가 발생하면 단순히 콘솔에 기록하는 것을 넘어, 사용자에게 시각적인 피드백을 제공해야 합니다. React 컴포넌트에서는 useState 훅을 사용하여 에러 상태를 관리하고, 이 상태에 따라 UI를 다르게 렌더링할 수 있습니다. 예를 들어, 에러 메시지를 표시하거나 재시도 버튼을 제공하는 등의 UX 개선을 고려해야 합니다.

// 예시: React 컴포넌트에서 에러 상태 관리
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      setError(null); // 새로운 요청 시작 전 에러 초기화
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error('데이터 로드 실패!');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
        console.error('데이터 로딩 중 에러:', err);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, []);

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div style={{ color: 'red' }}>에러 발생: {error.message}</div>;
  return <div>데이터: {JSON.stringify(data)}</div>;
}

4. 전역 에러 핸들링 (선택 사항)

애플리케이션 전반에 걸쳐 처리되지 않은 Promise 에러를 포착하기 위해 window.addEventListener('unhandledrejection', ...)를 사용할 수도 있습니다. 이는 최종 방어선 역할을 하지만, 개별 비동기 작업에는 여전히 개별적인 .catch()나 try...catch 블록을 적용하는 것이 좋습니다.