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
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
ErrorBoundarycomponent wraps the entire app inlayout.tsx@sentry/nextjs) configured with DSN fromNEXT_PUBLIC_SENTRY_DSNenv varSentry.captureException(error)before rendering fallbackerror.tsxin each route segment) for scoped errors that don't crash the whole appnext buildso stack traces resolve to original TypeScript