JS - try/catch문 404 Error 핸들링하기

api에서 데이터를 받아오는 함수 와서 가공해주는 함수를 만들어야 했는데

널리 쓰이거나 document가 자세하게 나와있지 않은 api여서 최대한 에러에 대한 보수적인 코드를 짜야했었습니다.

당연한 얘기긴 하지만요ㅋㅋ

 

근데 이 포스팅을 하는 이유가 뭐냐?

저는 머리로는 생각을 했지만, 보수적인 코드를 짜지 못하고 에러가 발생했기에...

 

테스트는 두 번, 세 번, 네 번 합시다... 한번 하고 에러 없다고 넘어간 제 불찰입니다ㅠㅠ

 

이 아래는 초기~최종까지의 일대기 느낌의 내용이라, 시간 없으신 분은 제일 아래 이유만 보시면 될 거 같습니다!

---

초기 코드

// get api
async function getApi(type) {
    const { lat, lon } = await getGeoLocation();
    const key = 'abcdefg';
    const url = `https://aaa/bbbbbb/cccc/d/2.5/${type}?lat=${lat}&lon=${lon}&appid=${key}`;
    const response = await fetch(url).catch((err) => console.log(err));
    try {
        return await response.json();
    } catch (err) {
        console.log(err);
    }
}

완전 초기에 짰던 코드입니다.

저렇게 작성해놓고 api주소에 오타를 내서 잘못된 주소로 호출하도록 테스트를 해봤는데 에러는 찍히지만 설정해놓은 default값을 잘 리턴해 줬었습니다.

 

하지만 catch를 저렇게 쓰는 게 맞나? 싶어서

// get api
async function getApi(type) {
    const { lat, lon } = await getGeoLocation();
    const key = 'abcdefg';
    const url = `https://aaa/bbbbbb/cccc/d/2.5/${type}?lat=${lat}&lon=${lon}&appid=${key}`;
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (err) {
        console.log(err);
    }
}

fetch 자체를 try문 안에 넣어서 중복된 catch를 없애 줬습니다.

이때도 역시 에러를 던졌을 때 잘 나왔습니다 그래서 이후에 404를 발견하기 전까지는 이대로 유지했었습니다.

 

 

현재 최종 코드 

(최종 코드란 게 있을 리가.. 그냥 현재로서는~...이라는 뜻)

// get api
async function getApi(type) {
    const { lat, lon } = await getGeoLocation();
    const key = 'abcdefg';
    const url = `https://aaa/bbbbbb/cccc/d/2.5/${type}?lat=${lat}&lon=${lon}&appid=${key}`;
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Request faild');
        return await response.json();
    } catch (err) {
        console.log(err);
    }
}

404 에러가 발생 후 수정한 코드입니다.

(이게 최근 작업이 아니고 몇 달 전 작업이라 정확히 어떤 케이스에서 404가 나왔었는지 기억이 안 나네요..)

 

중간에

if (!response.ok) throw new Error('Request faild');

가 추가되었습니다.

 

 

404 에러가 왜 떴으며, 에러 처리를 해놨는데 왜 걸러내지 못했는가?

• typeError로만 거부되어 catch에 걸리지 않는다. (stackoverflow에서 찾았었음)

이에 대한 해결 방법으로는 직접 에러를 핸들링을 해야 한다고 합니다.

 

그래서 찾아본 결과 res.ok 필드를 확인하면 http 통신 결과를 핸들링할 수 있기에, 응답 필드에 에러가 발생하였을 경우 직접 에러를 핸들링할 수 있다고 합니다.

그리하여 위 코드 블록처럼 fetch후 retrun 해주기 전에 response.ok필드를 한번 체크해서 에러를 처리해 줬습니다.

 

그 결과 api key값을 이상하게 넣어도, url자체가 빈 문자열이 되어도, url에 파라미터들이 이상하게 들어가도... 등등 가능한 많은 경우의 테스트 케이스에서 제대로 에러 처리가 되었습니다.

 

몇 달 전 작업이지만, 지금 라이브 되어서 운영에서 돌아가는 상황인데 아직 이슈가 없으니 안심이네요!

---

이제 보니까 생각보다 별거 없는 내용이고 이슈였네요.. 더 영양가 있는 내용을 포스팅해보겠습니다..!

감사합니다 :)

unsplash