Randomly 프로젝트 - ErrorBoundary 적용

 

Randomly 프로젝트 - ErrorBoundary 적용

 

 

프로젝트에서 예기치 못한 에러가 발생할 때 사용자에게 빈화면을 노출시키는 것이 계속 신경쓰였다.

 

이런 불편함을 최소화하고자하는 방법을 찾던 도중 ErrorBoundary라는 것을 알게 되었다.

 

 

 

 

 

ErrorBoundary 란?

 

ErrorBoundary를 사용하면, 리액트를 사용하면서 발생되는 컴포넌트의 에러를 핸들링할 수 있게된다.

 

다음을 보자.

 

 

 

위 화면처럼 컴포넌트에서 어떠한 오류가 발생하면 렌더링이 중단되고 빈화면을 노출시킨다.

 

이 상황에서 빈화면 대신 사용자가 정의한 화면을 보여지게 유도할 수 있다.

 

 

방법

 

ErrorBoundary는 원래 클래스형 컴포넌트에서만 사용가능하다.

 

하지만, 나는 함수 컴포넌트를 사용하고 있기때문에 다른 방법이 필요하다.

 

어렵지 않다.

 

npm install react-error-boundary

 

를 통해 함수 컴포넌트에서 사용할 ErrorBoundary를 설치하자.

 

 

 

이후 사용자에게 보여지게할 화면을 구성한다.

 

따로 파일을 만들어도 되고 컴포넌트 내에 선언해도되고 자유다.

 

 

 

나 같은 경우 에러페이지를 따로 만들어 주었다.

 

 

 

이후 에러를 핸들링할 컴포넌트를 ErrorBoundary로 감싸준다.

 

FallbackComponent 값에는 에러페이지를 넣어주면 된다.

 

.

.

.

 

 

이렇게 감싸주면,

 

 

 

이제 에러가 발생할 시에 더이상 빈화면이 아닌 내가 정의한 화면을 노출시킨다 !!!

 

 

 

 

해결!!!

 

다른 컴포넌트에도 적용해야겠다.

 

 

 

주의!

 

위 방법의 에러바운더리를 모든 곳에 적용시킬 수 있는 것은 아니다.

 

다음과 같은 경우에는 적용이 안된다.

 

 

• 이벤트 핸들러
• 비동기 코드
• 서버 사이드 렌더링
• 하위 컴포넌트가 아닌 ErrorBoundary 자체에서 발생한 오류

 

 

위 경우들에선 ErrorBoundary가 오류를 포착하지 못한다.

 

이유는 Error Boundary는 렌더링 중에 발생하는 오류들을 처리하는 것이기 때문에 위 경우들 처럼 렌더링 도중에 발생하는 오류가 아닌 경우들은 포착하지 못한다.

 

 

이럴 경우에는 다른 방법으로 오류를 캐치해야한다.

 

바로 try-catch 문과 ErrorBoundary에서 제공하는 useErrorHandler() 기능을 사용하면된다.

 

 

위 방법들은 프로젝트내에서 사용하게 되면 추후에 또 작성 방법을 업로드해보겠다!!