[React] Error Boundary란?
Error Boundary
UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안 됩니다. React 사용자들이 겪는 이 문제를 해결하기 위해 React 16에서는 에러 경계(“error boundary”)라는 새로운 개념이 도입되었습니다.
컴포넌트 생성
Vite를 통해 생성하면 제공되는 App.tsx의 일부를 수정하였습니다.
결과
App에서 이미지를 보여주는 내용과 하단에 보이는 텍스트가 props를 받을수 있도록 컴포넌트를 생성했는데, 위 코드에서는 props를 전달해주고 있지 않습니다. 이렇게 되면 에러가 발생하겠죠?
ErrorBoundary 적용
ErrorBoundary를 적용하지않으면 에러를 캐치하지 못하고 앱이 중단상태가 되어 사용자 경험에도 별로 좋지 않습니다. 이런 상황을 고려하여 각 에러에 대한 처리를 해주는것이 좋겠죠? 위 사진은 React 공식문서에 나와있는 ErrorBoundary 입니다.
componentDidCatch는 React.Component에 구성되어있는 함수로 이 함수에서 에러를 캐치하여 문제가 있다는것을 전달합니다. 그리고 render부분에서는 Error 발생시 보여줄 UI를 표현하고있습니다.
적용
전체 컴포넌트를 ErrorBoundary의 자식 컴포넌트로 배치하여, 자식 컴포넌트에서 발생하는 에러를 캐치합니다.
처음 예시 그대로 컴포넌트의 props에는 값을 넣어주지 않아 에러가 발생할 것이고, 대체 UI가 표현됩니다.
Console에도 에러가 캐치 되었으며, 대체 UI도 표현되었네요.
장점
에러 격리
- 특정 컴포넌트에서 발생한 에러가 전체 애플리케이션으로 전파되는 것을 방지합니다.
- 에러가 발생한 컴포넌트만 영향을 받고 나머지 부분은 정상적으로 작동합니다.
향상된 사용자 경험
- 애플리케이션 전체가 중단되는 대신 대체 UI를 표시할 수 있습니다.
- 사용자에게 친숙한 에러 메시지를 보여줄 수 있어 혼란을 줄일 수 있습니다.
그럼 언제 사용해야할까 ?
Error Boundary 사용
- 컴포넌트 트리 전체의 에러 처리가 필요할 때
- 에러 발생 시 대체 UI를 보여주어야 할 때
- React 컴포넌트의 선언적 에러 처리가 필요할 때3
try-catch 사용
- 특정 함수나 메서드 내의 에러 처리가 필요할 때
- 동기적 코드의 에러를 처리할 때
- 이벤트 핸들러나 비동기 코드의 에러 처리가 필요할 때
Error Boundary가 캐치하지 못하는 에러
- 이벤트 핸들러
- 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
- 서버 사이드 렌더링(SSR)
- 자식에서가 아닌 에러 경계 자체에서 발생하는 에러
비동기적 코드에서 에러 발생시에는 왜 캐치하지 못할까?
이 내용을 이해하기 위해선 우선 브라우저의 구조를 알아야합니다
우선 브라우저도 하나의 프로그램을 실행시켜 이 프로그램이 하나의 프로세스가 됩니다.
이 프로세스에서 브라우저는 JavaScript Engine, 제공되는 API, Event Loop, CallStack등 다양한 것들을 처리하고 있습니다.
이것들은 각각의 실행 컨텍스트를 가지고있는데요, ErrorBoundary가 처리되는곳은 JavaScript엔진내에서 실행되기 때문에 Javascript 엔진내에서 실행되는 에러들만 캐치할 수있습니다.
fetch, setTimeOut등을 처리하는 곳은 API 쪽에서 처리되기 떄문에, ErrorBoundary가 처리할 수 있는 Context 밖에서 일어나기 때문에 캐치를 할 수 없습니다.
결론은 서로 다른 Context에 있기 때문에 ErrorBoundaryt가 캐치를 못한다고 결론이 날 수 있겠네요.
https://www.youtube.com/watch?v=v69zRgDCjjs&t=222s
이 영상을 보고 깊은 내용을 쉽게 이해할 수 있었습니다. 이 채널에 유용한 내용들이 많으니 한 번씩 보는 걸 추천드립니다!