Skip to content

Add global error boundary with Sentry integration and fallback UI #369

Description

@Kingsman-99

Overview

Unhandled React render errors crash the entire app silently. Add a root-level error boundary with a user-friendly fallback UI and Sentry error reporting so crashes are captured and actionable.

Acceptance Criteria

  • Root ErrorBoundary component wraps the entire app in layout.tsx
  • Fallback UI: friendly message ("Something went wrong"), error ID, "Reload Page" button, "Go to Dashboard" link
  • Error ID shown to user matches the Sentry event ID for support correlation
  • Sentry SDK (@sentry/nextjs) configured with DSN from NEXT_PUBLIC_SENTRY_DSN env var
  • Error boundary catches errors and calls Sentry.captureException(error) before rendering fallback
  • Route-level error boundaries (error.tsx in each route segment) for scoped errors that don't crash the whole app
  • Sentry source maps uploaded on next build so stack traces resolve to original TypeScript
  • Sentry integration disabled in development (no DSN required locally)
  • User session, wallet address (hashed), and current route included in Sentry context

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions