Vue | 리액트와 닮은 vue3 - 6. 에러 처리

Vue: 에러 처리 방식

전역 에러 핸들러

• Vue는 애플리케이션 인스턴스 레벨에서 전역 에러 핸들러를 제공한다.
• app.config.errorHandler를 통해 모든 하위 컴포넌트에서 발생하는 에러를 포착 가능하다.
• 외부 라이브러리(Sentry 등)도 이 부분을 후킹해 에러 로깅을 구현한다.
• 브라우저 전역 이벤트(window.onerror, window.onunhandledrejection)도 그대로 활용 가능하여, Vue 내부와 외부 에러를 모두 커버할 수 있다.

컴포넌트 단위 에러 처리

• Vue는 각 컴포넌트에서 errorCaptured 훅을 통해 하위 컴포넌트에서 발생한 에러를 잡을 수 있다.
• 이 훅은 부모 컴포넌트가 자식 컴포넌트의 에러를 포착해 처리하거나, 상위로 전파할지 결정할 수 있게 한다.
• 따라서 Vue는 전역 핸들러 + 컴포넌트 단위 훅 두 가지 레벨에서 에러를 관리할 수 있다.

---

React: 에러 처리 방식

Error Boundary

• React는 Vue처럼 전역 에러 핸들러를 제공하지 않는다.
• 대신 Error Boundary라는 컴포넌트 단위 에러 처리 방식을 사용한다.
• 클래스 컴포넌트에서만 지원되며, componentDidCatch와 getDerivedStateFromError 메서드 기반으로 동작한다.
• 특정 컴포넌트 트리에서 발생한 에러를 잡아 UI를 대체하거나 로깅할 수 있다.

App 전체를 감싸는 경우

• React에는 전역 핸들러가 없지만, App 루트를 Error Boundary로 감싸면 사실상 전역 핸들러처럼 동작한다.
• 이 경우 애플리케이션 전체에서 발생하는 렌더링 에러를 잡아 공통 UI로 대체하거나 로깅할 수 있다.
• 다만 Vue의 app.config.errorHandler처럼 프레임워크 차원에서 제공되는 전역 설정은 아니고, 개발자가 직접 Error Boundary를 루트에 배치해야 한다.

라이브러리 활용

• Sentry, LogRocket 같은 라이브러리들은 React에서 에러를 잡을 때 Error Boundary 기반으로 구현한다.
• @sentry/react는 자체적으로 ErrorBoundary 컴포넌트를 제공하며, 이를 앱 루트나 특정 영역에 감싸서 사용한다.
• 동시에 브라우저 전역 이벤트(window.onerror, unhandledrejection)도 후킹하여, React 내부와 외부 에러를 모두 수집한다.

---

Vue vs React 에러 처리 비교

관점	Vue	React
전역 에러 핸들러	app.config.errorHandler 제공	없음 (루트 Error Boundary로 유사 구현 가능)
컴포넌트 단위 처리	errorCaptured 훅	Error Boundary (클래스 컴포넌트 기반)
라이브러리 통합	전역 핸들러 + 컴포넌트 훅 후킹	Error Boundary + 전역 이벤트 후킹
실무 활용	Vue 핸들러 + 전역 이벤트 + 로깅 라이브러리	루트 Error Boundary + 전역 이벤트 + 로깅 라이브러리

---

한 줄 요약

👉 Vue는 전역 핸들러와 컴포넌트 훅을 모두 제공해 에러를 다층적으로 처리할 수 있고, React는 Error Boundary를 루트에 배치해 사실상 전역처럼 활용하며 라이브러리들이 이를 기반으로 구현한다.