네트워크 에러 처리

 

네트워크 에러 처리 

: 토이 프로젝트를 만들 때 명확한 기준 없이 에러 처리를 해왔다.

다른 사람들의 코드를 보면 공통으로 빼는 부분들이 있었는데 어떻게 하는지 궁금해서 구글링을 통해 해결방안을 찾아보았다.

- 일관성 유지
- 코드 정리 

에러 처리의 중요성
1) 무엇이 중요한가?
: 에러가 발생해도 사용자가 앱을 사용하는데 최대한 지장이 없어야 한다.

2) 사용자느 에러 발생 사실을 인지할 수 있어야 한다.


에러 처리 방법
1) 에러 전파를 최대한 막기
2) 중요도에 따라 에러 종류 정의하기 
3) 에러 메세지 매핑
: 백엔드와 협의해서 

 

 

Fetch API 예시 

: 상태 코드 200 ~ 299 이상의 응답 값은 모두 에러로 간주한다.

 

class HTTPError extends Error {}
// Promise
fetch('/api/posts' /* options */)
  .then(response => {
    if (response.ok) {
      // 요청이 성공(200~299) 하면
      return response.json()
    } else {
      // 아니면 일단 에러 던지고 보자
      throw new HTTPError(`Response: ${response.statusText}`)
    }
  })
  .then(json => doSomething(json))
  .catch(error => handleError(error))
// async/await
const fetchPosts = async () => {
  try {
    const response = await fetch('/api/posts')
    if (response.ok) {
      const posts = await response.json()
      doSomething(posts)
    } else {
      throw new HTTPError(`Response: ${response.statusText}`)
    }
  } catch (e) {
    handleError(e)
  }
}

 

 

typescript 사용시 공통된 에러 객체를 만들어 처리해준다. 

 

interface HTTPResponse<T> {
  isError: boolean
  errorData?: {
    message: string
    statusCode: number
  }
  data?: T
}
// API 서버에서 ok에 해당하는 응답이 아닐 경우
// 응답값에 에러에 대한 정보를 보내주기로 했다고 가정합니다.
const fetchPosts: () => Promise<HTTPResponse<{ posts: any[] }>> = async () => {
  try {
    const response = await fetch('/api/posts')
    if (response.ok) {
      const posts = await response.json()
      return {
        isError: false,
        data: posts,
      }
    } else {
      const errorData = await response.json()
      return {
        isError: true,
        errorData: {
          message: errorData.message,
          statusCode: response.status,
        },
      }
    }
  } catch (e) {
    return {
      isError: true,
      errorData: {
        message: e.message, // 아니면 'Unknown Error' 같은 문자열을 쓸 수도
        statusCode: e.statusCode, // statusCode가 없을 수도 있겠죠
      },
    }
  }
}
// 받아 쓰는 쪽에서는
async function showPosts() {
  const fetchPostsResult = await fetchPosts()
  if (fetchPostsResult.isError) {
    // Handle Error
    handleError(fetchPostResult.errorData)
  } else {
    // Show posts
  }
}

 

 

 

출처

 

https://tecoble.techcourse.co.kr/post/2021-08-13-react-error-handling/

react에서의 에러 처리

 

https://rinae.dev/posts/how-to-handle-errors-1

에러 처리를 어떻게 하면 좋을까? - 1