Skip to content

feat: add NotificationBell error-boundary fallback UI with retry action (Closes #833) - #851

Open
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/notificationbell-error-boundary-833
Open

feat: add NotificationBell error-boundary fallback UI with retry action (Closes #833)#851
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/notificationbell-error-boundary-833

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds a compact, attractive error-boundary fallback UI for the NotificationBell component, as specified in issue #833.

Changes

  • NotificationBell.tsx: Added NotificationBellErrorFallback component — a compact error-state bell icon with a subtle AlertCircle indicator that shows when the NotificationBell crashes. Clicking it calls resetErrorBoundary to recover.
  • NotificationBell.tsx: Added NotificationBellWithErrorBoundary wrapper component that wraps the NotificationBell in the project's ErrorBoundary with the custom fallback.
  • NotificationBell.tsx: The default export is now NotificationBellWithErrorBoundary so existing consumers get error protection automatically.
  • NotificationBell.error-boundary.test.tsx: 14 focused tests covering the fallback component rendering, accessibility, retry behavior, and the wrapper's integration with the ErrorBoundary.

Design

  • Compact bell icon matching the original NotificationBell size (44×44px hit area)
  • Red-tinted (text-destructive) error state with AlertCircle indicator
  • Tooltip explaining "Notifications unavailable — click to retry"
  • Full WCAG 2.1 AA accessibility: semantic button, aria-label, focus-visible rings
  • Design-token colors (light + dark mode safe)
  • No hardcoded hex values

Testing

  • 14 new tests all pass
  • All 16 existing NotificationBell tests still pass
  • All 5 ErrorRecoveryScreen tests still pass

@vercel

vercel Bot commented Aug 6, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant