refactor: 알림 에러 UI 추가 및 FCM 토큰 실패 Sentry 연동 - #332
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthrough알림 조회 훅이 오류 상태와 재시도 함수를 노출하고, 알림 화면이 초기 조회 오류·페이지 추가 조회 오류·빈 목록·정상 목록을 구분해 렌더링한다. FCM 토큰 등록 실패는 Changes알림 조회 오류 처리
FCM 토큰 오류 캡처
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant NotificationContent
participant useGetNotifications
participant NotificationErrorState
NotificationContent->>useGetNotifications: 조회 상태와 refetch 수신
NotificationContent->>NotificationErrorState: 재시도 콜백 전달
NotificationErrorState->>useGetNotifications: refetch 호출
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/src/app/notification/_components/NotificationErrorState.tsx (1)
8-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win컴포넌트 구조와 스타일링은 가이드라인을 준수합니다.
function선언 + default export,{ComponentName}Props네이밍, Tailwind 유틸리티 클래스, 시맨틱<h1>사용 모두 기존NotificationEmptyState패턴과 일치합니다.다만 이 오류 상태는 비동기 요청 실패 후 클라이언트에서 조건부로 렌더링되므로, 스크린리더 사용자에게 상태 변경을 알리기 위해 컨테이너에
role="alert"또는aria-live="polite"를 추가하는 것을 고려해보세요.♻️ 제안 개선
- <div className="flex flex-1 flex-col items-center justify-center gap-[15px] px-6"> + <div + role="alert" + className="flex flex-1 flex-col items-center justify-center gap-[15px] px-6" + >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/app/notification/_components/NotificationErrorState.tsx` around lines 8 - 25, Update the root container in NotificationErrorState to expose the asynchronous error-state change to assistive technologies by adding an appropriate role="alert" or aria-live="polite" attribute. Preserve the existing layout, content, and retry behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/app/notification/_hooks/useGetNotifications.ts`:
- Around line 16-17: Update the notification hook’s error handling to
distinguish initial-load failures from pagination failures: use the query’s
initial error state for NotificationErrorState, and handle isFetchNextPageError
separately while preserving the existing notifications and exposing a dedicated
retry for fetchNextPage. Do not use refetch() for pagination retries, since it
reloads the entire query.
---
Nitpick comments:
In `@apps/web/src/app/notification/_components/NotificationErrorState.tsx`:
- Around line 8-25: Update the root container in NotificationErrorState to
expose the asynchronous error-state change to assistive technologies by adding
an appropriate role="alert" or aria-live="polite" attribute. Preserve the
existing layout, content, and retry behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 8d39c3e2-ee53-4776-9aae-beadc0a3840b
📒 Files selected for processing (4)
apps/web/src/app/notification/_components/NotificationContent.tsxapps/web/src/app/notification/_components/NotificationErrorState.tsxapps/web/src/app/notification/_hooks/useGetNotifications.tsapps/web/src/hooks/useFcmTokenSync.ts
iOdiO89
pushed a commit
that referenced
this pull request
Jul 19, 2026
* refactor: 알림 목록 불러오기 실패 시 에러 상태 UI 추가 * refactor: FCM 토큰 등록 실패를 Sentry로 보고 * feat: 알림 페이지네이션 에러 처리 및 재시도 UX 개선
Merged
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
1 participant
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.
작업 요약
작업 세부 내용
status code 대응 전수조사의 알림/FCM 항목 후속 작업입니다.
알림 목록 로드 실패 시 에러 상태 UI 추가
문제:
useGetNotifications는 로드 실패 시 "새로운 알림이 없어요" 빈 상태로 오표시되어져있었습니다. 이를빈 상태와불러오기 실패로 구분하였습니다.변경
useGetNotifications— 반환값에isError,refetch추가NotificationErrorState신규 — 기존NotificationEmptyState와 동일한 레이아웃으로 "알림을 불러오지 못했어요" + 다시 시도 버튼(refetch) 제공NotificationContent— 내용 영역을renderContent()로 분리하고 에러 → 빈 상태 → 목록 순으로 early return 분기FCM 토큰 등록 실패를 Sentry로 보고
문제:
useFcmTokenSync의postFcmToken호출은 react-query 밖 직접 호출이라 전역 안전망이 잡지 못하는데,.catch(console.error)로만 처리되어 실서비스에서 토큰 등록이 실패해도 팀이 인지할 수 없었습니다 (푸시 미수신 유저 발생 시 추적 불가).변경:
.catch(console.error)2곳을 기존captureError유틸(tags: { source: 'fcm-token-sync' })로 교체. 백그라운드 동기화이므로 사용자 노출(토스트)은 하지 않고, 앱 재진입/토큰 갱신 시 자연 재시도에 맡김변경하지 않은 항목
usePostNotificationsRead) — 낙관적 업데이트가 없는 invalidate 방식이라 롤백할 정합성 문제가 없고, 실패 시 전역 fallback 토스트가 동작하므로 현상 유지연관 이슈
closes #304
Summary by CodeRabbit