[ErrorBoundary] ErrorBoundary하는데 자꾸 Uncaught runtime errors가 발생해요

리액트에서 api를 다루면서 2가지를 많이 사용한다.

 

1. suspense

2. errorBoundary

 

간단하게 promise에 대해 이야기를 하자면 

 

1. api 등을 사용하기 위해 fetch를 사용한다.

2. fetch의 결과는 프로미스로 전달된다.

3. 결과는 3가지 상태가 있는데, 

    1) 팬딩-진행중-

    2) 실패

    3) 성공이 있다. 이는 더 찾아보면 좋다.

4. 이 상태를 관리하기 위해 위 두 가지를 사용한다.

    1) 서스펜스 - 팬딩상태라면 스켈레톤을 그려준다.

    2) 에러 바운더리 - 에러바운더리로 감싼 컴포넌트 안에서 에러가 발생하면 이를 캐치해서 대체 컴포넌트를 그려준다.

        > 나는 api를 사용한 컴포넌트 밖에 놓고, api가 실패한 경우 그 자리에서 throw new Error를 던져서 사용했다. 

 

 

사용 예시

1. 정상화면

정상적으로 api가 불러진다면 상품이 그려지는 화면이다. 

 

2. 실패화면 -에러 바운더리 사용시-

이렇게 사용이 되어야 한다. 

근데 자꾸 

 

이 창이 먼저 발생하고, 이 창을 끄면

이 화면이 보인다. 에러 바운더리가 적용되지 않는 것은 아닌데 무엇일까??

나는 이게 에러가 잡히지 않는다고 생각을 했고 몇시간동안 계속 다양한 형식의 에러바운더리 코드를 사용하며.. 했다..

그리고 다른 크루에게 물어서 해결 아닌 해결을 했다.

 

이런 붉은 화면은 개발과정에서만 발생하며 배포를 한 이후에는 사용자에게 fallback 화면만 노출된다는 것이다.

결과적으로 껐을때 의도된 화면이 나온다면 붉은 창은 무시하면 된다.

 

아래는 관련 질문/답이다... 

나처럼 이상한 거에 시간 쏟지 않길..

 

 

 

https://stackoverflow.com/questions/65194048/how-to-use-react-error-boundary-properly-in-react

How to use react-error-boundary properly in react?