[Feat] 어드민 API 예외처리

[jhj2713]

🖥️ Preview

close #145

✏️ 한 일

• 로그인 토큰이 만료된 경우
• 추첨 안 했는데 추첨 이벤트 당첨자 목록에 들어간 경우

❗️ 발생한 이슈 (해결 방안)

기존에 로그인이 실패해도 token이 undefined로 들어가고 메인 페이지로 접속이 가능한 문제가 있었습니다. 원인은 fetch에 있었는데, fetch는 오류 응답을 자동으로 예외로 처리하지 않습니다. fetch API는 HTTP 오류 상태 코드(예: 400, 404, 500)를 네트워크 오류로 취급하지 않고, 성공적인 응답으로 간주해서 error를 throw하지 않습니다.

따라서 일반적으로 발생하는 오류를 try/catch하는 코드 뿐만 아니라 status code를 확인하는 코드가 필요했습니다.

status를 확인하기 위해서 respones.ok(200-299 사이의 status를 정상적인 응답으로 간주)를 사용했습니다.

export async function fetchWithTimeout(url: string, options: RequestInit = {}, timeout = 5000) {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    options.signal = controller.signal;

    const response = await fetch(url, options);
    clearTimeout(id);

    if (!response.ok) {
        throw new Error(response.statusText);
    }

    return response;
}

위와 같이 response.ok가 아닌 경우 error를 throw하게 해서 try/catch 문에 걸리도록 했습니다.

❓ 논의가 필요한 사항

[github-actions]

빌드를 성공했습니다! 🎉

[github-actions]

빌드를 성공했습니다! 🎉

[sooyeoniya]

좋아용 :) 저도 상태코드 예외처리 오류 어제 고쳤는데!! 완전 공감됩니다 ㅎㅎ