[Feature/#310] 플랫폼·광고·연동 페이지 ErrorBoundary 적용

[YermIm]

🚨 관련 이슈

close #310

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• Overview에 적용된 ErrorBoundary 패턴을 담당 페이지에 동일하게 적용
• 플랫폼 대시보드(전체/단일), 광고 목록·상세·캠페인 그룹, 플랫폼 연동 페이지의 주요 콘텐츠 영역을 섹션별 ErrorBoundary로 감쌈
• API 에러·로딩·empty UI는 기존 분기 유지, 렌더 crash 시에만 fallback + 다시 시도 표시

리뷰 반영

• AreaErrorFallback 추가 — 표·드롭다운·카드 등 차트가 아닌 영역용 (이 영역을 불러오지 못했어요)
• 광고 목록·상세·캠페인 그룹·플랫폼 연동 페이지에서 ChartErrorFallback → AreaErrorFallback으로 교체

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

• 버그 수정
  • 대시보드 차트와 주요 지표 영역에서 오류 발생 시 전체 화면 대신 안내용 대체 화면을 표시합니다.
  • 광고 목록, 캠페인 상세, 캠페인 그룹 및 플랫폼 연동 카드의 렌더링 오류를 안정적으로 처리합니다.
  • 데이터가 새로 로드되면 오류 상태가 자동으로 초기화되어 콘텐츠를 다시 확인할 수 있습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

플랫폼 대시보드와 광고·연동 페이지의 주요 차트, 지표, 테이블 렌더링에 ErrorBoundary를 추가했습니다. 각 영역은 전용 fallback을 표시하고 관련 데이터 변경 시 오류 상태를 초기화합니다.

Changes

플랫폼 대시보드

Layer / File(s)	Summary
전체 플랫폼 대시보드 차트 보호 src/components/dashboard/platform/AllPlatformView.tsx	ROAS, 광고 소재 현황, 성과 효율, 실시간 클릭수, 플랫폼 상세 영역에 ChartErrorFallback과 데이터별 resetKeys를 적용했습니다.
단일 플랫폼 지표·차트 보호 src/components/dashboard/platform/SinglePlatformView.tsx	KPI에는 MetricErrorFallback을, 트래픽·예산·광고 현황·AI 요약 영역에는 ChartErrorFallback을 적용하고 관련 데이터 변경 시 경계를 재설정합니다.

광고 및 캠페인 화면

Layer / File(s)	Summary
광고 목록 렌더링 보호 src/pages/ads/list/AdsListPage.tsx, src/pages/ads/list/CampaignDetail.tsx	CampaignTable과 AdListTable을 ErrorBoundary로 감싸고 campaigns, adsList 변경 시 오류 상태를 초기화합니다.
플랫폼별 캠페인 연결 보호 src/pages/ads/new/CampaignGroup.tsx	Google, NAVER, Meta 캠페인 연결 영역에 fallback을 추가하고 각 캠페인 데이터 변경을 resetKeys로 사용합니다.

플랫폼 연동 화면

Layer / File(s)	Summary
플랫폼 연결 목록 보호 src/pages/integration/PlatformIntegrationsPage.tsx	플랫폼 연결 카드 목록을 ErrorBoundary로 감싸고 platformConnections 변경 시 경계를 재설정합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• WhereYouAd/WhereYouAd-Frontend#280: ErrorBoundary와 차트·지표 fallback을 대시보드 영역에 도입한 변경과 직접 연결됩니다.
• WhereYouAd/WhereYouAd-Frontend#307: 실시간 트래픽 차트의 데이터 처리 및 오류 렌더링 경로와 관련됩니다.
• WhereYouAd/WhereYouAd-Frontend#83: CampaignDetail의 AdListTable 렌더링 경로와 직접 연결됩니다.

Suggested labels: 🔨 Refactor

Suggested reviewers: jjjsun, seojegyeong

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	플랫폼 대시보드와 광고 페이지에 ErrorBoundary를 적용해 렌더 오류 시 해당 영역만 fallback 처리하는 요구를 충족합니다.
Out of Scope Changes check	✅ Passed	변경은 모두 ErrorBoundary 적용 범위에 속하며, 별도의 무관한 기능 추가나 리팩터링은 보이지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	제목이 ErrorBoundary 적용이라는 핵심 변경을 간결하게 잘 요약하고 있습니다.
Description check	✅ Passed	관련 이슈, 변경사항, 작업 내용, 미완성 작업, 논의 사항이 모두 포함되어 템플릿을 대부분 충족합니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/#310

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

📚 Storybook 배포 완료

항목	링크
📖 Storybook	https://69a147b60a56365d9e2185ef-lviwkzoejw.chromatic.com/
🔍 Chromatic	https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=499

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@src/components/dashboard/platform/AllPlatformView.tsx`:
- Around line 170-173: Update the AllPlatformTrafficChart error flow around
useClickStream so an SSE failure can recover after MAX_RETRIES instead of
remaining in ErrorBoundary fallback; provide a manual retry action that aborts
or resets the failed stream and reconnects it, or add equivalent persistent
reconnection logic, while preserving the existing fallback display.

In `@src/pages/ads/list/AdsListPage.tsx`:
- Around line 222-234: Replace the chart-specific ChartErrorFallback with a
table- or generic-area fallback for CampaignTable in
src/pages/ads/list/AdsListPage.tsx lines 222-234, use an AdListTable- or
generic-area fallback for the ErrorBoundary around AdListTable in
src/pages/ads/list/CampaignDetail.tsx lines 330-342, and use a
campaign-linking-selection or generic-area fallback for the boundary in
src/pages/ads/new/CampaignGroup.tsx lines 98-145. Keep each existing
ErrorBoundary scope and reset behavior unchanged.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 47389ceb-1c71-4d4e-b138-a64edf204f9a

📥 Commits

Reviewing files that changed from the base of the PR and between 559df0d and 1063cab.

📒 Files selected for processing (6)

• src/components/dashboard/platform/AllPlatformView.tsx
• src/components/dashboard/platform/SinglePlatformView.tsx
• src/pages/ads/list/AdsListPage.tsx
• src/pages/ads/list/CampaignDetail.tsx
• src/pages/ads/new/CampaignGroup.tsx
• src/pages/integration/PlatformIntegrationsPage.tsx

[jjjsun]

P4: 확인했습니다!