Error-boundary

componentDidCatch

리액트 라이프 사이클 도중 에러가 발생한다면, 해당 앱은 갑작스럽게 종료됩니다. 리액트의 제작 당시, 잘못된 정보를 사용자에게 보내는 것보다는, 앱을 중단시키는 것이 훨씬 낫다고 판단했기 때문이죠. 하지만 서비스 운영 시 앱이 중단되는 경우는 개발자로써 긍정적인 상황으로 보기 어렵습니다.

따라서, 이를 우회적으로 해결하기 위한 에러 핸들링이 필요했는데요. componentDidCatch 를 활용하여 에러를 원하는대로 통제하는 것이 가능합니다.

class ErrorBoundary extends React.Component{
	state = {error : null};
	
	static getDerivedStateFromErro(error){
		return {error};
	}
	
	componentDidCatch(error, info){
		sendToMyServer(error, info);
	}

	render(){
		const {error} = this. state;
		if(error){
			return <div>{error.toString()}</div>
		}
		return this.props.children;
	}
}

function App(){
	return (
		<ErrorBoundary>
			//...컴포넌트
		</ErrorBoundary>
	)

함수형 컴포넌트에서의 error-boundary

다만 componenetDidCatch의 경우 클래스 컴포넌트에만 내장되어 있는 기능이므로, 일반적으로 함수형 컴포넌트에서는 사용할 수가 없는데요. 이를 위해 관련 라이브러리를 새로 설치 받아 사용하는 것이 가능하긴 합니다.

함수형 컴포넌트와 클래스 컴포넌트가 결합가능하다는 게 놀라웠습니다. (근데 좋은 대안은 아니라고 하더라구요)

error-boundary의 한계

우선 라이프 사이클 내에서 처리를 하는 것이므로, 라이프 사이클로 잡지 못하는 에러라면 처리를 하는 것이 불가능합니다. 비동기 작업으로 나타나는 오류가 대표적인 예입니다.
그 외에 서버사이드 렌더링과 관련된 오류나 error-boundary를 구현한 컴포넌트에서 생기는 에러 역시 잡아내지 못합니다.