[ Firebase ] FirebaseError 의 error.code 를 한글 매핑 및 예외 처리 하기

 

Firebase 로 로그인 및 회원가입 기능을 구현하면서

error 에 대한 처리를 하던 중, 사용자에게 에러가 보여질 때

 

Firebase: Error (auth/email-already-in-use)

 

이렇게 뜨니 나는 어떤 문제일지 알아볼 수 있지만

사용자들이기 보기엔 정말 좋지 않은 에러 문구라고 생각했기에

각각의 error.code 에 대해 한글로 정의해야겠다고 생각했다.

 

/ error-message.ts

export const errorMessages: Record<string, string> = {
	"auth/email-already-in-use": "이미 사용 중인 이메일입니다.",
  	"auth/invalid-email": "유효하지 않은 이메일 형식입니다.",
  	"auth/weak-password": "비밀번호가 너무 약합니다.",
  	"auth/missing-email": "이메일을 입력해주세요.",
    }

 

따로 errorMessages 라는 컴포넌트를 만들어 

각 코드에 따라 한글로 정의를 해주었고, 

 

catch (e) {
      if (e instanceof FirebaseError) {
        const errorMessage = errorMessages[e.code] || e.message;
        setError(errorMessage);
      }
    }

 

만약 정의되어있지 않은 error.code 가 존재할 수도 있으니,

OR 연산자를 통해 정의 되어있지 않는 에러 코드는

그대로 e.message(Firebase 오류 인스턴스의 기본 오류 메시지)로 보여주게 처리했다.

 

저렇게 한글 처리를 하면

이미 사용 중인 이메일입니다.

 

이렇게 한번에 알아보기 쉽게 나타난다.