React 18 프로젝트에서 Sentry로 에러로깅을 하는데 이상하게 2번 로깅되는 문제가 있었다. 우리 서비스의 에러처리 프로세스는 다음과 같다api 에러가 발생 → axios interceptor가 AxiosError 인스턴스 반환 → react-query에서 throwOnError 옵션으로 인해 가까운 에러바운더리로 에러 던짐 → Errorboundary에서 에러캐치해서 error fallback과 에러를 센트리에 로깅함 Errorboundary에서 에러를 캐치할 때 로깅하도록 설정이 되어있었는데, 콘솔로그엔 Errorboundary에 전달되기도 전에 에러가 로깅되는 것이였다. 그 후에 Errorboundary에서 로깅 로직이 실행되고 있었다. 결론적으로 원인은, React Errorboundary..
TurboRepo로 구성한 프로젝트에서 크로마틱(Chromatic)으로 스토리북을 배포하는 방법을 정리하고자 합니다. 준비물github repostorybook chromaticchromatic과 github 연동Chromatic에 로그인한 후, 배포할 레포지토리를 선택하세요. Chromatic을 통해 스토리북을 자동으로 배포하고 Visual Regression Test도 수행할 수 있습니다. chromatic 설치스토리북이 설치된 레포지토리로 이동해 Chromatic을 설치합니다.pnpm --filter {스토리북이 설치된 레포} add -D chromatic chromatic 배포설치된 레포지토리에서 Chromatic을 빌드하고 배포합니다. 아래 명령어에서 {project-token} 부분은 Ch..
TurboRepo로 Monorepo를 구성하면서 pre-commit 단계에서 타입 체크를 위해 husky와 lint-staged를 사용했습니다.프로젝트마다 독립적인 tsconfig.json 설정을 유지하려다 보니, lint-staged에서 루트에 없는 tsconfig를 참조하지 못해 에러가 발생했습니다. 이에 대한 문제 해결 과정과 추가로 겪은 문제 상황을 공유하고자 합니다. 초기 설정프로젝트 구성은 다음과 같습니다.├── apps│ └── client├── packages│ └── ui├── package.json기존 package.json 설정은 다음과 같았습니다.// ./package.json{ "lint-staged": { "*.{ts,tsx}": [ "eslint --ca..