React 18 프로젝트에서 Sentry로 에러로깅을 하는데 이상하게 2번 로깅되는 문제가 있었다.
우리 서비스의 에러처리 프로세스는 다음과 같다
api 에러가 발생 → axios interceptor가 AxiosError 인스턴스 반환 → react-query에서 throwOnError 옵션으로 인해 가까운 에러바운더리로 에러 던짐 → Errorboundary에서 에러캐치해서 error fallback과 에러를 센트리에 로깅함
Errorboundary에서 에러를 캐치할 때 로깅하도록 설정이 되어있었는데, 콘솔로그엔 Errorboundary에 전달되기도 전에 에러가 로깅되는 것이였다. 그 후에 Errorboundary에서 로깅 로직이 실행되고 있었다.
결론적으로 원인은, React Errorboundary에서 에러를 캐치하면 무조건적으로 콘솔에러로 로깅을 하기 때문이였다. 이때 sentry에선 `CaptureConsole` 매커니즘으로 인해 콘솔에러도 에러로 캡쳐한다. 그래서 에러가 2번 로깅되는 것이였다.
내가 이해한대로 정리하자면,
- Errorboundary에서 에러가 잡히면 React는 콘솔에러를 발생시킴.
- sentry는 콘솔에러도 에러로 취급해 unhandled error로서 캡쳐함
- 그렇기 때문에 콘솔에러로 인해 최초로깅이 되고, Errboundary 내부에서 로깅로직으로 또 로깅이되는 것.
다행이도 센트리 공식문서에 의하면, 빌드환경에서는 중복로깅되는 문제가 발생하지 않는다고 한다ㅎ
Note
In development mode, React will rethrow errors caught within an error boundary to the global error handler. This will result in Sentry only reporting an error from the global error handler, but not from the error boundary itself. We recommend testing the error boundary with a production build of React.
https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/
참고로 리액트 19버전부터는 글로벌 에러처리 옵션을 설정할 수도록 바뀌었다!! 🤩
https://react.dev/blog/2024/04/25/react-19#error-handling
React 19 RC – React
The library for web and native user interfaces
react.dev
https://github.com/facebook/react/issues/15069
https://github.com/getsentry/sentry-javascript/issues/8689
React 18 프로젝트에서 Sentry로 에러로깅을 하는데 이상하게 2번 로깅되는 문제가 있었다.
우리 서비스의 에러처리 프로세스는 다음과 같다
api 에러가 발생 → axios interceptor가 AxiosError 인스턴스 반환 → react-query에서 throwOnError 옵션으로 인해 가까운 에러바운더리로 에러 던짐 → Errorboundary에서 에러캐치해서 error fallback과 에러를 센트리에 로깅함
Errorboundary에서 에러를 캐치할 때 로깅하도록 설정이 되어있었는데, 콘솔로그엔 Errorboundary에 전달되기도 전에 에러가 로깅되는 것이였다. 그 후에 Errorboundary에서 로깅 로직이 실행되고 있었다.
결론적으로 원인은, React Errorboundary에서 에러를 캐치하면 무조건적으로 콘솔에러로 로깅을 하기 때문이였다. 이때 sentry에선 CaptureConsole 매커니즘으로 인해 콘솔에러도 에러로 캡쳐한다. 그래서 에러가 2번 로깅되는 것이였다.
내가 이해한대로 정리하자면,
- Errorboundary에서 에러가 잡히면 React는 콘솔에러를 발생시킴.
- sentry는 콘솔에러도 에러로 취급해 unhandled error로서 캡쳐함
- 그렇기 때문에 콘솔에러로 인해 최초로깅이 되고, Errboundary 내부에서 로깅로직으로 또 로깅이되는 것.
다행이도 센트리 공식문서에 의하면, 빌드환경에서는 중복로깅되는 문제가 발생하지 않는다고 한다ㅎ
Note
In development mode, React will rethrow errors caught within an error boundary to the global error handler. This will result in Sentry only reporting an error from the global error handler, but not from the error boundary itself. We recommend testing the error boundary with a production build of React.
https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/
참고로 리액트 19버전부터는 글로벌 에러처리 옵션을 설정할 수도록 바뀌었다!! 🤩
https://react.dev/blog/2024/04/25/react-19#error-handling
React 19 RC – React
The library for web and native user interfaces
react.dev
https://github.com/facebook/react/issues/15069
https://github.com/getsentry/sentry-javascript/issues/8689
