ApiError

Info

• BE API 통신 시, responseCode에 따라 분류되는 에러 케이스.
• 에러 케이스에 따라 화면에서 처리하기 쉽도록 enum화 하여 사용.
• 현재 API에서 발생한 에러를 화면까지 효율적으로 가져올 수 있는 방법이 마땅하지 않아 고민중.

Structure

• Error 발생 시, responseCode와 기존 Error 객체를 사용하여 ApiError 생성

ApiError.ts

import { ApiCode } from '@utils/error/constant/ApiCode'  
  
class ApiError extends Error {  
  public apiCode: ApiCode  
  public originalError?: Error  
  
  constructor(code: ApiCode, originalError?: Error) {  
    super(code)  
    this.name = `${this.constructor.name}.${code}`  
    this.apiCode = code  
    this.originalError = originalError  
  }  
  
  toString() {  
    return `code: ${this.apiCode}\noriginalError: ${this.originalError?.name}\n${this.originalError?.message}`  
  }  
}  
  
export default ApiError

Usage

• repository에서 API 통신을 통해 값을 가져올 경우, 실패 여부를 판단하여 ApiError를 throw

AuthRepository.login()

login: async (username: string, password: string) => {  
  const apiResponse: ApiResponse<Token> = new ApiResponse<Token>().parseData(  
    await api().post('login', {  
      username: username,  
      password: password  
    })  
  )  
  
  if (apiResponse.isFailure) throw new ApiError(apiResponse.code)  
  
  tokenRepository.setToken(apiResponse.body!)  
  
  return apiResponse.body!  
}

• 해당 function을 사용하는 ViewModel에서 try/catch를 통해 ApiError를 catch → 에러에 대한 대응
  • 이때, catch의 인자인 e의 타입을 유추할 수 없기 때문에 타입을 정하는 로직이 매우 길어짐.
  • 해당 function 자체도 try/catch를 통해 Error를 감지하기 때문에 로직 자체가 의미보다 길게 늘어진 형태가 된다.

useLoginViewModel.login()

const login = async () => {  
  if (!validate()) return  
  setLoading(true)  
  try {  
    const token: Token = await authRepository.login(username.value, password.value)  
  
    if (token.accessToken && token.refreshToken) {  
      setAuthorization({ isAuthorized: true, userInfo: await authRepository.getUserInfo() })  
      navigate('/', { replace: true })  
    }  
  } catch (e) {  
    handleLoginError(e)  
  } finally {  
    setLoading(false)  
  }  
}