catch 절에서 에러 던지기

1. Promise.reject(error)
   • 비동기 함수 내에서 에러를 발생시킬 때, **Promise.reject(error)**를 사용하여 해당 Promise를 rejected 상태로 만듭니다.
   • 이렇게 하면 호출자가 해당 Promise를 사용할 때 .catch() 블록을 통해 에러를 처리할 수 있습니다.
2. throw error
   • 죄송합니다, 그것은 제가 잘못 이해하고 있는 부분입니다. 비동기 함수 내에서 에러를 처리할 때 **throw error**를 사용하여 직접 에러를 던지는 것은 비동기적으로 작동하지 않습니다. 올바른 접근 방식은 비동기 함수 내에서 **Promise.reject(error)**를 사용하여 에러를 처리하고, 호출자에게 에러를 알리는 것입니다.
   • 비동기 함수 내에서 **throw error**를 사용하면 해당 함수의 호출 스택 내에서는 예외를 발생시킵니다. 그러나 이것은 비동기적으로 호출한 코드에서는 캐치되지 않습니다. 즉, 비동기적으로 작업하는 함수에서 **throw error**를 사용하면 예외가 제대로 처리되지 않을 수 있습니다.
   • 따라서 비동기 함수 내에서는 주로 **Promise.reject(error)**를 사용하여 에러를 처리하고 호출자에게 알리는 것이 올바른 방법입니다. 이를 통해 비동기 코드에서 발생한 예외를 적절하게 처리할 수 있습니다.

에러 던지기2

new Promise((resolve, reject) => {
  resolve("OK");
}).then((result) => {
  throw new Error("에러 발생!"); // 프라미스가 거부됨
}).catch(alert); // Error: 에러 발생!

• .then 핸들러 안에서 throw를 사용해 에러를 던지면, 이 자체가 거부된 프라미스를 의미하게 됩니다. 따라서 제어 흐름이 가장 가까운 에러 핸들러로 넘어갑니다.

타입스크립트 에러처리

react-query와 axios 조합

• react-query의 onError 콜백은 쿼리의 서버 요청이 실패했을 때 실행됩니다. 따라서 axios의 interceptor가 먼저 실행되고, 그 후에 react-query의 onError 콜백이 실행됩니다.

1. axios interceptor error response:

   • 네트워크 오류, 서버 오류 등의 일반적인 에러를 처리합니다.
   • 클라이언트 단에서 발생하는 HTTP 요청과 응답을 중앙에서 관리하고 처리할 수 있습니다.
   • 예를 들어, 네트워크 오류가 발생하면 사용자에게 네트워크 연결 문제가 있음을 알리는 메시지를 표시할 수 있습니다.

   axios.interceptors.response.use(
     (response) => {
       // 요청이 성공했을 때 실행될 로직
       return response;
     },
     (error) => { 
       // 에러 처리
       if (error.response) {
         // 서버 응답이 있을 때 (HTTP 상태 코드가 2xx가 아닌 경우)
         console.error('Server responded with error:', error.response.status);
         // 에러 메시지를 사용자에게 표시
       } else if (error.request) {
         // 요청이 보내졌지만 응답이 없을 때 (네트워크 오류 등)
         console.error('Request failed:', error.request);
         // 사용자에게 네트워크 연결 문제 메시지 표시
       } else {
         // 요청을 보내기 전에 오류가 발생했을 때
         console.error('Error before sending request:', error.message);
         // 사용자에게 오류 메시지 표시
       }
       return Promise.reject(error);
     }
   );
   
   

2. react-query의 onError 콜백:

   • 쿼리 요청이 실패했을 때 react-query에서 호출됩니다.

   • 주로 데이터 캐싱, 재시도 로직, 에러 메시지 표시 등과 같은 작업을 수행합니다.

   • 예를 들어, 서버에서 인증 오류가 발생하면 사용자를 로그인 페이지로 리디렉션할 수 있습니다.

     import { useQueryClient } from 'react-query';
     
     const queryClient = useQueryClient();
     
     // onError 콜백 등록
     queryClient.onError(error => {
       // 에러 처리
       console.error('An error occurred during query:', error);
       // 사용자에게 에러 메시지 표시 등의 작업 수행
     });
     
     

3. 만약 인증관련 실패시 어디다가 에러를 작성해야할까??

   api.interceptors.response.use(
     (response) => {
       // 요청이 성공했을 때 실행될 로직
       return response;
     },
     async (error) => { 
       const originalRequest = error.config;
       if (error.response && error.response.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
         try {
           // refreshToken을 요청하여 새로운 토큰을 발급받는 로직
           const newToken = await refreshToken();
           // 새로운 토큰을 axios의 디폴트 헤더에 설정
           api.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
           // 이전 요청을 재시도
           return api(originalRequest);
         } catch (refreshError) {
           // refreshToken 요청이 실패하면 로그아웃 등의 추가적인 작업 수행
           console.error('Failed to refresh token:', refreshError);
           // 사용자에게 에러 메시지 표시 등의 작업 수행
           // 예: 로그아웃 처리
         }
       }
       return Promise.reject(error);
     }
   );
   
   

프론트엔드에서 에러 발생 case

• 유저의 상호작용으로 발생한 에러
• API 통신으로 발생하는 에러