[✈️ 최종프로젝트] 배포 환경에 따라 다르게 보이는 오류 메세지

✏️ 문제 상황

로그인 로직에서 사용자가 잘못된 이메일 또는 비밀번호를 입력할 경우 "잘못된 이메일 또는 비밀번호입니다." 라는 alert 메시지가 나타나도록 개발했다.

이 로직은 개발 모드에서는 정상적으로 동작했으나, 프로적션 모드에서는 사용자 정의 메시지가 아닌 서버 오류 메시지가 알림창에 그대로 노출되는 문제가 발생했다. 🤯

해당 오류가 발생하는 원인을 파악해 보고 해결한 방법을 정리해 보자!!

 

✏️  오류

프로덕션 모드에서 기대한 결과

개발모드에서는 의도한 대로 메시지가 표시되었다.

 

프로덕션 모드에서 실제 결과

하지만 프로적션 모드에서는 아래와 같이 서버 오류 메시지가 그대로 노출되었다. ㅜㅜ

 

✏️  원인 분석

이 문제는 Next.js 와 같은 프레임워크의 프로덕션 빌드 환경 특성 때문에 발생한 것이었다.

• 프로덕션 모드에서는 디버그 정보를 숨기고, 에러 메시지를 간소화하며, 클라이언트에 에러의 고유 식별자인 digest 값을 반환한다.
• 서버에서 throw new Error 를 사용해 에러를 발생시키면, 클라이언트는 에러의 구체적인 정보를 알 수 없고 digest 값만 표시된다.

Next.js 공식문서 에서도 예상된 에러 처리 방식에 대해 가이드를 제공하고 있고, 해당 방식에 따르면 throw new Error 를 사용하지 말고 클라이언트에 메시지를 직접 반환해야 한다고 한다.

 

기존 코드

아래는 문제가 있었던 기존 코드이다. 서버에서 throw new Error 를 통해 에러를 전달하던 방식이 문제의 핵심이다.

export const login = async (formData: { email: string; password: string }) => {
  const supabase = createClient();

  const { data, error: loginError } = await supabase.auth.signInWithPassword({
    email: formData.email,
    password: formData.password,
  });

  if (loginError?.code === 'invalid_credentials') throw new Error('유효하지 않는 사용자입니다.');
  if (loginError) throw new Error('오류가 발생했습니다. 다시 시도해주세요.');
  console.error(loginError);

  return { message: '로그인 완료되었습니다.', data: data };
};

• throw new Error 로 에러를 던지면, 프로덕션 모드에서는 에러 메시지가 digest 값으로 변환되어 클라이언트로 전달된다.
• 결과적으로, 사용자는 원하는 메시지를 볼 수 없게 된다.

 

✏️  해결 방법

공식 문서의 권장 방식에 다라, 에러 메시지를 서버에서 클라이언트로 직접 반환하도록 코드를 수정했다.

export const login = async (formData: { email: string; password: string }) => {
  const supabase = createClient();

  const { data, error: loginError } = await supabase.auth.signInWithPassword({
    email: formData.email,
    password: formData.password,
  });

  console.error(loginError);

  if (loginError?.code === 'invalid_credentials') return { error: { message: '잘못된 이메일 또는 비밀번호입니다.' } };
  if (loginError) throw new Error('오류가 발생했습니다. 다시 시도해주세요.');

  return { message: '로그인 완료되었습니다.' };
};

 

✏️  결과

• 개발 모드와 프로덕션 모드 모두에서 동일하게 동작한다.
• 클라이언트는 "잘못된 이메일 또는 비밀번호입니다." 메시지를 정상적으로 표시한다.
• 예상치 못한 에러는 기존 방식대로 처리되며, 프로덕션 환경에서도 디버그 정보가 안전하게 숨겨진다.

 

✏️ 결론

이 문제를 통해 프로덕션 환경에서의 에러 처리 방식의 중요성을 다시 한번 느낄 수 있었다. 특히 서버와 클라이언트 간의 에러 메시지 전달 방식을 명확하게 이해하고, 공식 문서의 권장 방식을 미리 확인해 봐야겠다고 다짐할 수 있었다.