Merged
Conversation
- 데스크톱 padding 10px 20px -> 18px 0 으로 변경 및 height 제거 - mobile padding추가
- 90 -> 88 px로 변경
- doc 추가
- 36 -> 40px로 변경
- 500 -> 600으로 변경
This reverts commit cff2f09.
- overscroll-behavior-y만 방지
- 페이지 로드 및 라우팅 성능 모니터링을 위해 browserTracingIntegration 설정 추가
- 동기 런타임, 비동기에러, API에러, 이벤트 핸들러 에러, 타입 에러 테스트
- Sentry.ErrorBoundary로 최상위 컴포넌트 래핑하여 런타임 에러 포착 - GlobalErrorFallback 컴포넌트 연결 - 개발 환경 전용 에러 테스트 라우트(/error-test) 추가
- Sentry.ErrorBoundary와 Suspense를 결합한 GlobalBoundary 컴포넌트 생성 - App 최상위에 적용하여 전역 에러 핸들링 및 코드 스플리팅/Suspense 로딩 처리 일원화 - App.tsx 내의 불필요한 개별 Suspense 래퍼 제거 (GlobalBoundary로 위임)
- App.tsx: 각 페이지 라우트의 Suspense(fallback=null) 래퍼 제거
- 에러 발생 시 GlobalErrorFallback 대신 콘텐츠 영역에 에러 메시지와 재시도 버튼 표시 - 헤더/네비게이션을 유지하여 사용자가 쉽게 복구 가능
- 각 페이지에서 에러를 직접 처리하여 레이아웃 유지 및 복구 가능성 향상
…ntry-integration-MOA-646 [Feature] 전역 에러 처리 및 Sentry 연동
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Error Boundary System frontend/src/components/common/ErrorBoundary/GlobalBoundary.tsx, frontend/src/components/common/ErrorBoundary/GlobalErrorFallback.tsx, frontend/src/components/common/ErrorBoundary/GlobalErrorFallback.styles.ts, frontend/src/components/common/ErrorBoundary/index.ts |
새로운 전역 에러 경계 컴포넌트 추가: GlobalBoundary는 Sentry ErrorBoundary와 Suspense를 래핑하고, GlobalErrorFallback은 에러 UI를 렌더링하며 개발 모드에서 상세 오류 정보를 표시합니다. |
Error Testing Page frontend/src/pages/ErrorTestPage/ErrorTestPage.tsx, frontend/src/pages/ErrorTestPage/ErrorTestPage.styles.ts |
개발 환경용 에러 테스트 페이지 추가: 동기/비동기/React Query/타입/이벤트 핸들러 에러 시뮬레이션 및 가이드 정보 포함. |
App Routing Changes frontend/src/App.tsx |
Suspense 래퍼 제거 및 GlobalBoundary로 전체 앱을 감싸기; DEV 환경에서만 error-test 라우트 추가. |
MainPage Data Handling frontend/src/pages/MainPage/MainPage.tsx, frontend/src/pages/MainPage/MainPage.styles.ts |
useGetCardList 훅에서 refetch 함수 추가; 에러 발생 시 재시도 버튼이 있는 EmptyResult 상태로 렌더링; RetryButton 스타일 컴포넌트 추가. |
Styling & Layout Adjustments frontend/src/components/common/Header/Header.styles.ts, frontend/src/components/common/SearchField/SearchField.styles.ts, frontend/src/pages/MainPage/components/Banner/Banner.styles.ts, frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts, frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts |
여백(margin/padding) 및 폰트 크기 조정: 헤더 패딩 변경, SearchBox 높이 증가, 배너/카테고리 여백 감소, 줄 높이 추가. |
Global Configuration frontend/src/styles/Global.styles.ts, frontend/src/utils/initSDK.ts |
전역 overscroll-behavior-y 설정 추가; Sentry 브라우저 추적 통합 추가. |
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~45분
Possibly related PRs
- [Feature] 전역 에러 처리 및 Sentry 연동 #1196: 동일한 GlobalBoundary, GlobalErrorFallback, ErrorTestPage 컴포넌트와 Sentry/react-query 설정을 코드 레벨에서 다룸.
- [Fix] 메인 UI 수정 #1182: Header, SearchField, MainPage 등 동일한 스타일 파일들에서 겹치는 레이아웃/스타일 변경사항 포함.
- [refactor] useGetCardList 파라미터를 객체로 변경 #823: useGetCardList 훅 API 시그니처 변경(refetch 함수 반환 추가)과 관련.
Suggested labels
💻 FE, 📈 release
Suggested reviewers
- lepitaaar
- oesnuj
- suhyun113
🚥 Pre-merge checks | ✅ 1 | ❌ 3
❌ Failed checks (2 warnings, 1 inconclusive)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. | |
| Merge Conflict Detection | ❌ Merge conflicts detected (39 files): ⚔️ README.md (content)⚔️ backend/.gitignore (content)⚔️ backend/build.gradle (content)⚔️ backend/src/main/java/moadong/MoadongApplication.java (content)⚔️ backend/src/main/java/moadong/club/controller/ClubProfileController.java (content)⚔️ backend/src/main/java/moadong/club/entity/ClubApplicant.java (content)⚔️ backend/src/main/java/moadong/club/payload/dto/ClubSearchResult.java (content)⚔️ backend/src/main/java/moadong/club/repository/ClubRepository.java (content)⚔️ backend/src/main/java/moadong/club/repository/ClubSearchRepository.java (content)⚔️ backend/src/main/java/moadong/club/service/ClubProfileService.java (content)⚔️ backend/src/main/java/moadong/club/service/ClubSearchService.java (content)⚔️ backend/src/main/java/moadong/club/service/RecruitmentStateChecker.java (content)⚔️ backend/src/main/java/moadong/club/summary/ApplicantIdMessageConsumer.java (content)⚔️ backend/src/main/java/moadong/club/util/RecruitmentStateCalculator.java (content)⚔️ backend/src/main/java/moadong/gemma/dto/AIRequest.java (content)⚔️ backend/src/main/java/moadong/gemma/service/GemmaService.java (content)⚔️ backend/src/main/java/moadong/global/config/AsyncConfig.java (content)⚔️ backend/src/main/java/moadong/global/config/MongoConfig.java (content)⚔️ backend/src/main/java/moadong/global/config/SecurityConfig.java (content)⚔️ backend/src/main/java/moadong/user/controller/UserController.java (content)⚔️ backend/src/main/java/moadong/user/entity/User.java (content)⚔️ backend/src/main/java/moadong/user/payload/request/UserRegisterRequest.java (content)⚔️ backend/src/main/java/moadong/user/payload/response/LoginResponse.java (content)⚔️ backend/src/main/java/moadong/user/service/UserCommandService.java (content)⚔️ backend/src/test/java/moadong/club/service/ClubApplyAdminServiceTest.java (content)⚔️ backend/src/test/java/moadong/club/service/ClubProfileServiceTest.java (content)⚔️ backend/src/test/java/moadong/club/service/ClubSearchServiceTest.java (content)⚔️ frontend/public/.well-known/assetlinks.json (content)⚔️ frontend/src/App.tsx (content)⚔️ frontend/src/components/common/Header/Header.styles.ts (content)⚔️ frontend/src/components/common/SearchField/SearchField.styles.ts (content)⚔️ frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts (content)⚔️ frontend/src/pages/MainPage/MainPage.styles.ts (content)⚔️ frontend/src/pages/MainPage/MainPage.tsx (content)⚔️ frontend/src/pages/MainPage/components/Banner/Banner.styles.ts (content)⚔️ frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts (content)⚔️ frontend/src/styles/Global.styles.ts (content)⚔️ frontend/src/utils/initSDK.ts (content)⚔️ frontend/vercel.json (content)These conflicts must be resolved before merging into main. |
Resolve conflicts locally and push changes to this branch. | |
| Title check | ❓ Inconclusive | The title '[release] FE v1.1.23' is vague and generic, using a version number without describing the actual changes made in the pull request. | Consider using a more descriptive title that highlights the main changes, such as 'Add global error boundary and UI refinements for v1.1.23' or similar. |
✅ Passed checks (1 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
develop-fe
⚔️ Resolve merge conflicts (beta)
- Auto-commit resolved conflicts to branch
develop-fe - Create stacked PR with resolved conflicts
- Post resolved changes as copyable diffs in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/pages/MainPage/MainPage.styles.ts (1)
48-74:⚠️ Potential issue | 🟡 Minor
Tab버튼에cursor: pointer가 누락되어 있습니다.AI 요약에 따르면
cursor: pointer가 제거된 것으로 보입니다.<button>요소는 브라우저 기본값이cursor: default이므로, 클릭 가능한 탭 UI에서는cursor: pointer가 있는 편이 사용자 경험에 더 적합합니다. 의도적인 제거인지 확인 부탁드립니다.
🤖 Fix all issues with AI agents
In `@frontend/src/components/common/ErrorBoundary/index.ts`:
- Around line 1-2: The barrel currently uses "export * from
'./GlobalErrorFallback'" which does not re-export the default export from
GlobalErrorFallback.tsx, so add an explicit re-export of the default (e.g.,
export { default as GlobalErrorFallback } from './GlobalErrorFallback';)
alongside the existing export for GlobalBoundary so consumers can import
GlobalErrorFallback from this index; update the export line that references
GlobalErrorFallback and keep the export of GlobalBoundary unchanged.
In `@frontend/src/pages/ErrorTestPage/ErrorTestPage.tsx`:
- Around line 111-121: The section title and button styling are misleading
because throwTypeError is invoked from the onClick handler (so ErrorBoundary
will not catch it); update the UI to reflect that by changing the
Styled.SectionTitle text to indicate the error occurs on click and is not caught
by ErrorBoundary, and change the Styled.TestButton $variant from 'danger' to
'warning' (or other non-danger style) so the visual cue matches the actual
behavior; locate these in the same JSX block containing throwTypeError,
Styled.SectionTitle, and Styled.TestButton and make the text and $variant edits
accordingly.
🧹 Nitpick comments (4)
frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts (1)
41-54:TextContainer의line-height와 자식Text의line-height중복 확인 필요.
TextContainer에line-height: 160%(Line 48)가 추가되었지만, 자식 컴포넌트인Text(Line 60)에는 이미line-height: 1.5(=150%)가 설정되어 있습니다.Text자식에서는 오버라이드되므로 실질적 영향은TextContainer내Text외의 직접 텍스트 노드에만 적용됩니다. 의도된 동작인지 확인해 주세요. 만약Text컴포넌트의 줄 간격도 160%로 통일하려는 의도였다면Text의line-height도 함께 수정해야 합니다.Also applies to: 56-65
frontend/src/pages/MainPage/MainPage.styles.ts (1)
136-139:box-shadow에 하드코딩된 색상값이 테마와 불일치할 수 있습니다.
background는theme.colors.primary를 사용하면서box-shadow의rgba(255, 84, 20, 0.3)은 하드코딩되어 있습니다. 추후 테마 primary 색상이 변경되면 그림자 색상만 남게 됩니다. 테마 값 기반으로 통일하는 것을 권장합니다.♻️ 제안
&:hover { background: ${({ theme }) => theme.colors.primary[800]}; - box-shadow: 0 4px 12px rgba(255, 84, 20, 0.3); + box-shadow: 0 4px 12px ${({ theme }) => `${theme.colors.primary[900]}4D`}; }또는 별도의 테마 유틸리티를 사용해 alpha 값을 적용하는 방법도 가능합니다.
frontend/src/components/common/ErrorBoundary/GlobalErrorFallback.tsx (1)
3-6:error타입이Error가 아닌 경우에 대한 방어 처리를 고려해 주세요.
Sentry.ErrorBoundary의 fallback에서 전달되는error는 JavaScript에서throw되는 모든 값이 될 수 있습니다 (예:string,object등).GlobalBoundary.tsx에서errorData.error as Error로 캐스팅하고 있지만, 실제로Error인스턴스가 아닌 경우error.message나error.stack접근 시undefined가 됩니다. 현재 Line 49의error &&가드가 null 케이스는 방어하고 있으나, non-Error 객체에 대한 처리는 없습니다.🛡️ 제안: 타입 가드 추가
-interface ErrorFallbackProps { - error: Error; - resetError: () => void; -} +interface ErrorFallbackProps { + error: unknown; + resetError: () => void; +}그리고 컴포넌트 내부에서:
const GlobalErrorFallback = ({ error, resetError }: ErrorFallbackProps) => { const isDev = import.meta.env.DEV; + const errorMessage = error instanceof Error ? error.message : String(error); + const errorStack = error instanceof Error ? error.stack : undefined;frontend/src/App.tsx (1)
20-20:ErrorTestPage가 정적 import되어 프로덕션 번들에 포함됩니다.Line 20에서
ErrorTestPage를 정적으로 import하고 있지만, Line 74-76에서import.meta.env.DEV조건으로 라우트만 제한하고 있습니다.import.meta.env.DEV는 라우트 렌더링만 조건부로 만들 뿐, 모듈 자체는 프로덕션 번들에 포함됩니다.lazy를 사용하거나 dynamic import로 변경하면 프로덕션 번들 크기를 줄일 수 있습니다.♻️ 제안: lazy import로 변경
-import ErrorTestPage from './pages/ErrorTestPage/ErrorTestPage'; +const ErrorTestPage = lazy( + () => import('./pages/ErrorTestPage/ErrorTestPage') +);Also applies to: 74-76
Comment on lines
+1
to
+2
| export * from './GlobalErrorFallback'; | ||
| export { default as GlobalBoundary } from './GlobalBoundary'; |
Contributor
There was a problem hiding this comment.
export *는 default export를 재-export하지 않습니다.
GlobalErrorFallback.tsx는 export default만 사용하고 있어서, Line 1의 export * from './GlobalErrorFallback'는 실제로 아무것도 내보내지 않습니다. 현재 App.tsx에서 GlobalBoundary만 import하므로 동작에는 문제 없지만, 이 barrel에서 GlobalErrorFallback을 import하려는 경우 실패합니다.
♻️ 수정 제안
-export * from './GlobalErrorFallback';
+export { default as GlobalErrorFallback } from './GlobalErrorFallback';
export { default as GlobalBoundary } from './GlobalBoundary';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export * from './GlobalErrorFallback'; | |
| export { default as GlobalBoundary } from './GlobalBoundary'; | |
| export { default as GlobalErrorFallback } from './GlobalErrorFallback'; | |
| export { default as GlobalBoundary } from './GlobalBoundary'; |
🤖 Prompt for AI Agents
In `@frontend/src/components/common/ErrorBoundary/index.ts` around lines 1 - 2,
The barrel currently uses "export * from './GlobalErrorFallback'" which does not
re-export the default export from GlobalErrorFallback.tsx, so add an explicit
re-export of the default (e.g., export { default as GlobalErrorFallback } from
'./GlobalErrorFallback';) alongside the existing export for GlobalBoundary so
consumers can import GlobalErrorFallback from this index; update the export line
that references GlobalErrorFallback and keep the export of GlobalBoundary
unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
새로운 기능
버그 수정
스타일