React 컴포넌트 에러 메시지가 유저에게 노출되면 안 된다

개발할 때는 자세한 에러 메시지가 도움이 되지만, 사용자는 그걸 봐서 혼란스러워한다. 특히 모바일 화면에서는 긴 에러 메시지가 UI를 깨뜨린다.

먼저 모바일에서 확인하기

DevTools의 device emulation으로 모바일 뷰포트에서 에러 상황을 재현한다.

npm run build
# 브라우저에서 모바일 폭 (375px)으로 보기

에러 메시지가 화면을 벗어나는가? 텍스트가 깨지는가? 이런 것들을 직접 눈으로 확인해야 한다.

에러 메시지 종류 분류하기

에러는 여러 종류가 있고, 각각 다르게 처리해야 한다.

사용자에게 보여줄 수 있는 에러:

• "이메일을 다시 확인해주세요"
• "네트워크 연결이 끊겼습니다. 다시 시도해주세요"

개발자 로그에만 남겨야 할 에러:

• 스택 트레이스
• API 응답의 전체 body
• 데이터베이스 쿼리 문자

React에서 에러 처리 패턴

상태 관리나 컴포넌트 레벨에서 에러를 다루는 방식을 정하자.

const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async () => {
  setIsLoading(true);
  try {
    const result = await fetchData();
    // ...
  } catch (err) {
    // 개발자 로그
    console.error('Debug info:', err.stack);

    // 사용자에게 보여줄 메시지
    if (err.status === 400) {
      setError('입력 정보를 다시 확인해주세요');
    } else {
      setError('요청 처리에 실패했습니다. 잠시 후 다시 시도해주세요');
    }
  } finally {
    setIsLoading(false);
  }
};

에러 메시지 UI 최소화

에러 메시지 컴포넌트를 만들 때:

• 최대 2줄 정도로 제한한다
• 폰트 크기를 작게 유지한다
• 색상은 빨강이나 주황으로 구분한다
• 초 단위로 자동 사라지게 하거나, 닫기 버튼을 넣는다

이벤트 흐름 확인

버튼 클릭 → 요청 시작 → 에러 발생 → 메시지 표시 → 사라짐

이 각 단계를 DevTools 콘솔에서 추적할 수 있게 로그를 남겨두자.

상태 이름을 명확하게

isError, errorMessage, errorCode 같은 이름으로 정확히 구분해야 나중에 버그를 찾기 쉽다.

실제 배포 후 모니터링

에러 추적 서비스 (Sentry, LogRocket 등)를 연결하면, 사용자가 보는 에러를 실시간으로 수집할 수 있다. 이를 통해 자주 나오는 에러를 파악하고, 개선 우선순위를 정할 수 있다.