[개인과제/TroubleShooting] 에러를 던졌는데 사라졌습니다..?

1. 문제발생

• 서버와의 통신에 실패하면, 서버에서 내려준 메시지를 alert로 띄우고 싶음
• catch(error)로 error를 잡아서 return 해주면 alert(error)로 띄울 수 있겠지?
• 어디 한 번 일부러 에러를 내볼까 -> 의도적으로 path를 틀리게 함
• 잉 왜 내가 던진 에러가 아니라 다른 이상한 에러가 뜨지?

<api.js>

const DEFAULT_ERROR_MESSAGE = '에러가 발생했습니다.';
const DEFAULT_FETCH_ERROR_MESSAGE = '데이터를 불러오지 못했습니다.';

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: `Bearer ${API_KEY || PUBLIC_KEY}`
  }
}

// 현재 상영 중인 영화의 데이터를 불러옴.
export const getMoviesData = async () => {
  try{
     	const res =  await fetch(`${BASE_URL}/movi/now_playing?language=ko-KR&page=1`, options);
     	if(!res.ok) throw new Error(DEFAULT_FETCH_ERROR_MESSAGE);
     	const data = await res.json();
     	return data;
     } catch(error) {
      	return error|| DEFAULT_ERROR_MESSAGE;
     }
}

<index.js>
  
getMovieData(); // 서버에서 data를 불러온다.


 async function getMovieData() {
  loading.create();
  loading.start();
  try{
     const data = await getMoviesData();
     const { results } = data;
     movieData = parseData(results) || [];
     renderMoviCard(movieData);
     loading.end();
   } catch(error) {
     console.error(error);
     alert(error);
     loading.end();
   }
};


// 서버에서 받아온 데이터에서 필요한 요소만 골라 정제하는 함수
const parseData = (data) => {
  if (!data || data.length === 0) return;
  const parsedData = data.map((_data) => {
    const { id, title, vote_average, poster_path } = _data;
    return { id, title, rate : vote_average.toFixed(1), img :`${IMAGE_BASE_URL}${poster_path}` } 
  });
  return parsedData;
};

 

getMoivesData에서 fetch 이후에 !res.ok면 DEFAULT_FETCH_ERROR_MESSAGE를 에러로 던지고 catch에서 받겠지?

그럼 그걸 그대로 return 해주고 getMovieData의 catch에서 error로 받고, 그걸 alert로 짠~ 하고 띄우면 되는데..

왜 아무것도 안 뜨지??? 

---

2. 원인 추론

• 그래 404에러가 나는 건 나도 알지. 그 에러를 내가 냈으니까 !
• 어라..? 자세히 보니 에러가 찍힌 위치가 index.js의 console.error(error) 부분이 아니라 api.js네?
• 그렇다면 왜 index.js에서 콘솔 에러가 안 찍히지? catch 문을 안 타네?
• 내가 return한 error는 도대체 어디로 간 걸까..
• javascript catch 문 return.. 구글링해 보자
• 아하! return은 모든 블록을 거치고 정상 종료한다는 의미이구나!! throw는 예외가 발생하면 더이상 현재 함수를 실행하지 않고 catch 블록으로 제어 흐름이 넘어가는구나!!
• 그러면 내가 return한 error는 정상 종료되어서 값이 반환되었겠네
• 해당 값을 받는 부분이.. index.js에서 getMovieData()의 try문.. data..? data에 담겨있다고? 콘솔 출력 고고

찾았다 내 에러.

---

3. 해결 방안

• error를 return이 아닌 throw로 던져서 catch에서 받을 수 있도록 코드를 수정하자.

// 현재 상영 중인 영화의 데이터를 불러옴.
export const getMoviesData = async () => {
  try{
    const res =  await fetch(`${BASE_URL}/movi/now_playing?language=ko-KR&page=1`, options);
    if(!res.ok) throw new Error(DEFAULT_FETCH_ERROR_MESSAGE);
    const data = await res.json();
    return data;
  } catch(error) {
    throw error|| DEFAULT_ERROR_MESSAGE;
  }
}

 

---

4. 결과

 

이제야 제대로 작동한다.