[Issue Report] Axios Blob 응답과 에러 파싱 문제: 엑셀 다운로드 API 이슈

 

axios response type을 Blob으로 지정한 경우 에러 메시지 파싱이 필요합니다.

관련해 겪은 이슈의 내용을 정리해 보았습니다.

 

---

 

 

서론

최근 엑셀 다운로드 API를 수정할 일이 있었습니다.

 

조회 시작 날짜와 종료 날짜를 받아 데이터를 뽑고 엑셀 파일로 응답하는 일반적인 API였는데요.

날짜 데이터를 주지 않으면 전체데이터에 대한 엑셀 파일이 만들어지게 됩니다.

이때 데이터량이 많은 경우 메모리 과부하로 서버가 다운되어 버리는 일이 발생했습니다.

 

그래서 기존 함수에 날짜 데이터를 검증하는 아주 간단한 예외처리 추가 했습니다.

 

 if (조회기간에 대한 데이터가 없다면) {
      throw new BadRequestException('기간을 선택해주세요.');
    }

 

 

'간단한 예외처리니깐 별 일 없겠지?' '자, 테스트를 해보쟈...'

 

근데 웬걸 500 Internal Server Error 에러메시지 창이 절 반겨주었습니다.

 

 

: API 응답은 400인데 화면에서는 에러메시지가 500으로 떨어집니다... 🥹

프론트 분 : 음... 에러 메시지 형식이 다르네요. 객체가 Blob 타입으로 오고 있어요. 🤔

 

 

 

문제 상황

1. API exception 응답은 400으로 정상

2. 에러 메시지 파싱에 실패 → 알 수 없는 에러로 분류

3. 알 수 없는 에러인 경우 500으로 나가게 됨 

4. 에러가 Blob 타입이라 파싱 실패 ???

 

처음에는 굉장히 의아했습니다. 응답이 Blob타입으로 나가게 지정한 적도 없고, 기존 로직에 단순히 예외처리를 추가한 것뿐이었으니까요.

그럼 왜 에러가 Blob 타입으로 떨어졌을까요?

 

 

이는 프론트에서 엑셀 다운로드를 어떻게 구현하는지 알아야 이해가 가능합니다. 💡

 

보통 파일 다운로드는 axios의 responseType으로 Blob 타입을 사용해

서버에서 받은 바이너리 데이터를 파일로 변환하여 다운로드하는 방식으로 구현합니다.

 

그러나 responseType을 Blob으로 설정한 경우 모든 응답을 Blob 형태로 받게 됩니다.

이는 파일 다운로드를 위한 데이터뿐만 아니라, 예외 발생 시 에러 메시지 또한 Blob 타입으로 반환된다는 뜻이죠.

 

따라서 서버에서 400 에러 응답을 보내더라도 프론트에서는 Blob 타입으로 받아 JSON 파싱에 실패했고

이를 알 수 없는 에러로 처리하게 된 것입니다.

 

 

 

 

해결 방법 

이 경우 서버에서 Blob 응답이 아닐 때에는 에러 메시지를 제대로 처리하도록 프론트 쪽에서 로직을 수정해 주어야 합니다. 

 

JSON.parse(await error.response.data.text()); // Blob 데이터를 텍스트로 변환합니다.

 

위 코드는 Blob 데이터를 먼저 텍스트로 변환한 후, 이를 JSON 형식으로 파싱 하는 방식입니다.

이를 통해 서버가 전달한 에러 메시지를 올바르게 파싱 하여 처리할 수 있습니다.

 

 

 

 

결론 

이 문제는 서버와 프론트엔드 간의 응답 처리 방식 차이에서 비롯된 이슈였습니다. 

이러한 문제를 해결하려면 서버와 프론트엔드 모두에서 협력적인 처리가 필요하다는 것을 잘 느끼게 되었네요.

 

프론트엔드 분과 소통했던 것도, 조금이나마 예외처리 로직이 견고해진 것도 좋은 경험이 되었습니다.

 

 

   

감사합니다.

---

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.