• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

[인증 구현 - 컴포넌트] error 처리 관련 질문

23.05.03 23:51 작성 23.05.04 00:15 수정 조회수 225

0

2분 12초

인증 컴포넌트를 테스트해보는 과정에서 질문이 생겼습니다.

만약 백엔드 서버가 작동하지 하고 있다면,

이메일/패스워드 입력 후 로그인 버튼을 클릭하면

auth 스토어의 login 메소드에서 에러가 발생합니다.

그럼 이때 try/cath로 인해 "오류가 발생했습니다. 로그인을 다시 시도해 주세요."라는 alert 문구를 띄우게 됩니다.

 

만약에 AuthLogin 컴포넌트에서 정의한 try/catch으로

alert를 보여주고 싶다면 Auth 스토어의 login 메소드에서 try/catch를 하지 않으면 되는데, 이는 좋은 방법같지 않은거 같습니다.

 

아니면 on:click 이벤트 정의 메소드에서는 try/cathc를 안해는게 나을까요? 

 

error를 catch 하는 것을 한 곳에서 관리(?)하여 에러 발생시 내가 원하는 동작(화면)을 보여주고 싶다면 어떻게 코드를 작성하는게 좋을까요?

답변 1

답변을 작성해보세요.

1

최종 컴포넌트에서 오류를 제어하길 원하신다면

우선 login 메소드의 try catch를 제거하는 것이 아니고 catch에서 다음과 throw를 이용해

오류를 다시 한번 넘겨주면 될 것 같습니다 .

const login = async(email, password) => {
		try {
      const options = {
        path: '/auth/login',
        data: {
          email: email,
          pwd: password,
        }
      }

      const result = await postApi(options)
      set(result)
      isRefresh.set(true)
      router.goto('/')
    }
    catch(error) {
      // alert('오류가 발생했습니다. 로그인을 다시시도해 주세요.')
      throw error
    }	
}

그리고 최종적으로 처리하길 원하는 위치에서 이 넘겨진 오류를 받아

원하는 액션을 주시면 될 것 같습니다.

 

이때 오류에 따른 처리의 경우 전달받은 error객체에서 message나 code 등 을 분석해

그에 맞는 동작을 하게 하는 함수를 만들어 처리하는 것도 좋을 것 같습니다.

 

참고로 디버그를 통해서 보면 서버로 부터 전달받는 error의 경우 다음과 같은 형태의 객체가됩니다.

AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

JB_님의 프로필

JB_

질문자

2023.05.04

말씀해주신대로 depth가 있는 곳에서는 error 객체를 throw 해주고 최종적으로 전달받은 곳에서는 원하는 동작을 정의해주면 되겠네요!

늦은 시간임에도 불구하고 친절히 답변해주셔서 감사합니다 :)