[뉴스 타임즈] API 에러 발생시 UI 보여주기

유저가 입력한 검색 키워드에 대한 데이터가 없을 때, 화면에선 어떻게 보일까요?

아무것도 실행이 되지 않습니다. 물론 콘솔창을 보면 오류가 나오겠지만

user 들은 콘솔 창을 보지 않아요... ㅠㅠ

그래서 저희는 이 오류 상태를 user 에게 ui 로 보여줘야한답니당.

그럼 어떻게 보여줄까요?

먼저 저희가 만들어놓은 공통 api 불러오는 함수 있죠?

getNews() 라는 함수입니다.

거기에서 에러핸들링을 사용할 것입니당. (에러 핸들링 모르시는 분들은 응용+예제에 적어놨으니까 봐주셔요!)

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    }catch(error){
        console.log('잡힌 에러는' , error.message)
    }

    let response = await fetch(url)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
}

자 요렇게 해봅시당.

그리고 try 에 저희가 실행시켜야 하는 코드를 넣어줍시다.

왜냐면 저 코드가 실행되면서 생기는 에러를 잡아줘야하니깐용

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    let response = await fetch(url)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
    }catch(error){
        console.log('잡힌 에러는' , error.message)
    }
}

자 이렇게 하고

우리가 핸들링 해야하는 에러의 경우에는 무엇이 있을까요?

저희가 가져온 api 사이트 문서에는 발생 가능성이 있는 에러에 대해서도 써져있답니다

확인해볼까요?

 저기 에러를 클릭 하시면 이렇게 에러 정보들을 알려줘요!

여기서 우리가 핸들링 해야하는 에러 케이스를 알려주는 곳은

바로 요놈이여라~~~

하지만 이 코드들을 어디서 볼 수 있는 지 모르죠??

그래서 한번 코드에서 실험을 해보겠슴다.

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    let response = await fetch(url)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
    }catch(error){
        console.log('잡힌 에러는' , error.message)
    }
}

// 전체 랜덤 뉴스 불러오기
const getLatestNews = async() => {
    url = `https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc1`
    getNews();
}

자 여기서, 한번 getLatesNews 에서 url 에 있는 api-key 를 손대보겠습니다.

try 랑 catch 는 잠시 주석처리 뿅뿅

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    // try{

    let response = await fetch(url)
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.

    render();
    // }catch(error){
    //     console.log('잡힌 에러는' , error.message)
    // }
}

// 전체 랜덤 뉴스 불러오기
const getLatestNews = async() => {
    url = `https://newsapi.org/v2/top-headlines?country=us&pageSize=10&apiKey=254fba25c1ae4a5d9aa54ad3e2d72dc`
    getNews();
}

자 요렇게 만들고용

api-key 는 뒤에 숫자 하나를 빼주었어용

그리고 콘솔로그 확인하면, 에러 발생!

첫번 째 에러 코드를 보면 401 이라고 나와있네요? ㅎㅎ

이 주소를 이렇게 해서 새로운 탭에서 봐봅시당.

뭐 api key 가 엄청 나오는 걸 보니.. api key 문제 에러같네요 ㅋㅋ

incorrect 정확하지 않다고 하네요

자 이 에러가 난 상태에서 한번 response 와 data 도 콘솔로그로 찍어봅시다 어떻게 나올까?

에러에러~ 모든게 에러로 바뀌고, response 는 ok 가 fasle 로 바뀌었네요.

여기서 중요한건 response 에 status 에요.

status 가 401로 되어있죠? 그게 오류코드 인겁니다요

api 사이트에서 401 은 뭐라고 나와있을까요?

401 은 무엇이냐면 너의 api key 가 요청에서 벗어났거나 정확하지 않다? 뭐 이런 의미네요. 할튼

제가 api key 의 숫자를 하나 뺐으니.. 정확하지 않다. 딱 정확한 오류를 찾았군요

자 다시 콘솔로그를 보면,

이 데이터에 message 가 있죠?

그게 이 오류를 메세지로 알려준거라구용~!

자 이렇게 우리가 뭘 알아냈냐면.

1. response 의 status 를 보고 어떤 에러코드인지 알아낼 수 있다.

2. data 의 message 를 보고 어떤 에러 메세지인지 알아낼 수 있다.

입니당!!!

이제 에러를 어떻게 알아낼 수 있는지 알았죵?

에러 핸들링 하러 가봅시다.

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    let response = await fetch(url)
    let data = await response.json()
    if(response.status == 200){// api 상태가 200 일 경우
        news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.
        console.log(news)
        render();
    }else{// api 상태가 모든 에러일경우
        throw new Error(data.message)
    }

    }catch(error){
        console.log('잡힌 에러는' , error.message)
    }
}

자 요렇게 작성해주었습니당.

api 상태가 200 일경우는 뭐죠?!

오류가 발생하지 않고 정상작동되는거죠?

그럼 render() 던 data의 articles 를 받아올 수 있겠죠?

그래서 저 코드를 200 조건 문에 넣어준겁니당!!!

왜냐면 에러가 발생하면 이걸 실행하지 않을거니까!

다른걸 실행할꺼야야!!!

그럼 else 는 무슨 상황일까요? api 상태가 200이 아니면 에러가 다 발생한거잖아용

그래서 else 를 사용해줄겁니다.

거기에는 200이 아닐경우에는 에러를 강제로 발생시킬거야~! 근데 그 에러에는 data 에 담긴 에러 메세지가 담겼으면 좋겠어~

한거에용.

그러면 오류가 뜨면 catch 에서 잡아서 콘솔로그에 보여주겠죠?

한번 봅시다요.

오우.. 아주 잘 보여주고 있어요. 너의 api key 정확하지 않음 체크해 저 주소로 가서 만들어 무료 api key

아주 좋습니다.

이제 ui 에 이 메세지들을 보여줘야.. 유저님들이 보시고 아~~ 에러네~~ 하시겠죠?

저희는 이제 errorRender() 라는 함수를 만들어줍시다. ok??

거기다가는 무엇을 받아올거임?

error.message 를 매개변수로 받아올것임!

// error 생겼을 때 ui에 보여주는 함수
const errorRender = (message) => {
    let errorHTML = `<div>${message}</div>`
    document.getElementById('news_contents').innerHTML = errorHTML
}

render() 함수랑 똑같아요!

errorHTML 을 어떤 형식으로 할지 넣어주시공

저 errorHTML 을 뉴스 컨텐츠가 들어갈 자리에 넣어주시면 유저들이 딱 보이겠죠?!

어차피 뉴스 컨텐츠들은 생성이 안될테니까!

그리고 이 함수를 호출해야겠죠?

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    let response = await fetch(url)
    let data = await response.json()
    if(response.status == 200){// api 상태가 200 일 경우
        news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.
        console.log(news)
        render();
    }else{// api 상태가 모든 에러일경우
        throw new Error(data.message)
    }

    }catch(error){
        errorRender(error.message);
    }
}

에러를 딱 catch 하면 보여줘~!

하고 매개변수로 무엇을 주냐?

error message 를 줄거야~~

결과를 볼까용?

오.. ui에 보인다.. 무엇이? 에러가...

근데 이상한 단어로 검색을 하면, 에러 메세지가 나오지 않아효 ㅠㅠ...

이럴 때 어떻게 하냐!?

먼저 검색했을 때 data 에 뭐가 들어가있는지 봅시다.

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    let response = await fetch(url)
    let data = await response.json()
    if(response.status == 200){// api 상태가 200 일 경우
        news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.
        console.log(data)
        render();
    }else{// api 상태가 모든 에러일경우
        throw new Error(data.message)
    }

    }catch(error){
        errorRender(error.message);
    }
}

이렇게 console.log 로 data 를 찍고~

검색어를 아주 이상하게 쳐봅시당.

그럼 이렇게 나와요!

totalResults 를 봤을때 0 이죠?

결과가 없다는 것입니당.

자 이럴 때 우리는 무엇을 사용하면 좋을까요?

if 문을 사용해주시면 되겠죠?

// api 호출 함수
const getNews = async() => {
    // 에러 코드
    try{

    let response = await fetch(url)
    let data = await response.json()
    if(response.status == 200){// api 상태가 200 일 경우
        if(data.totalResults == 0){
            throw new Error('검색된 뉴스가 없습니다.')
        }
        news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.
        render();
    }else{// api 상태가 모든 에러일경우
        throw new Error(data.message)
    }

    }catch(error){
        errorRender(error.message);
    }
}

데이터의 토탈결과값이 0 일 때

에러를 강제로 발생시킬래~

무슨 에러메세지? 검색된 뉴스가 없다는 메세지!

이러고 검색어에 다시 말도 안되는 단어를 입력하면?

오오 검색된 뉴스가 없대!!

좋아쓰 이런식으로 에러핸들링 하면 된다규!! 제가 그랬죠?! 에러가 발생하는 즉시 밑에 있는 코드들은

작동을 하지 않는다구! 그래서 조건문을 제일 위에 써준거에용!

이 조건문이 막히기전에 실행되면 안되는 코드니까용!

자 정리해볼까용?

api에서 에러가 났는지 확인하는 방법

1. response.status 를 통해 알기

: 주로 디테일하게 어떤 종류의 에러인지 에러 코드를 보내준다 (401, 402 등등)

2. response.ok

: ok가 true 라면 정상 false 라면 비정상

하지만 자세한 에러코드는 status 로 확인

응답에 따라 throw 를 이용해 내가 보여주고 싶은 메세지와 함께 에러를 catch 문으로 던질 수 있당.

그 외에 내가 에러를 발생시키고 싶다면 throw 를 통해 강제로 에러를 발생시킬 수 있당.

에러 핸들링 끝!