[Feature] Add React error boundaries with fallback UI across all dashboard page routes

[Sendi0011]

Getting Started

1. Fork the repository: https://github.com/JointSave-org/Joint_Save
2. Clone your fork:

git clone https://github.com/<your-username>/Joint_Save.git
cd Joint_Save

3. Create a new branch:

git checkout -b feat/react-error-boundaries

---

Overview

The dashboard currently has zero React error boundaries. If any component throws during rendering (e.g., due to unexpected null data from an RPC call, a network error propagating as an undefined property access, or a JavaScript runtime error), the entire page crashes and the user sees a blank white screen or Next.js's generic error page. This is especially dangerous in a financial application where users may have unsaved state or pending transactions.

@tanstack/react-query is already imported in web3-provider.tsx but its ErrorBoundary integration is unused. The react-error-boundary package is not currently installed.

This issue adds React error boundaries with meaningful fallback UIs to all dashboard page routes, preventing total page crashes and giving users actionable recovery options.

Requirements

Error Boundary Component

• Install react-error-boundary (or implement a class-based ErrorBoundary if avoiding new dependencies is preferred)
• Create components/error-boundary.tsx with:
  • A reusable ErrorBoundary wrapper component
  • Fallback UI that shows: a friendly error message, the error details (expandable), and a "Try Again" button that calls resetErrorBoundary
  • A "Go to Dashboard" link as a secondary recovery option
  • Log the error to an external service or console for debugging (the existing Vercel Analytics integration could be extended, or use a simple POST to a new /api/errors endpoint)

Page-Level Wrapping

Wrap each dashboard page route in the error boundary:

• app/dashboard/page.tsx — the main dashboard
• app/dashboard/group/[id]/page.tsx — group detail page
• app/dashboard/notifications/page.tsx — notifications page
• app/explore/page.tsx — explore page
• app/dashboard/create/[type]/page.tsx — pool creation form

Granular Boundaries

Within the group detail page, add inner error boundaries around each major section so that a failure in one section (e.g., the yield dashboard) doesn't take down the entire page:

• Pool details/info section
• Group actions section
• Members list section
• Activity feed section
• Yield dashboard section
• Audit log section

Error Reporting

• Create a lightweight frontend/lib/error-reporting.ts utility that:
  • Captures error message, component stack, and user wallet address (if connected)
  • Sends to a new API route POST /api/errors that logs to the cron_job_logs table (reusing the existing table with job_name: 'client_error')
  • Rate-limited: max 5 error reports per minute per wallet to avoid flooding

Testing

• Write a component test that verifies the error boundary catches a thrown error and renders the fallback UI
• Test that "Try Again" correctly resets the boundary and re-renders the children
• Test that the error reporting utility sends the correct payload

Acceptance Criteria

• Each dashboard page route is wrapped in an error boundary
• The group detail page has granular inner boundaries for each major section
• When a component throws, the user sees a meaningful fallback UI instead of a blank screen
• "Try Again" button correctly resets the error boundary and retries rendering
• Errors are logged to the API endpoint with rate limiting
• Component tests verify error boundary behavior
• No existing functionality is affected by the error boundary wrapping

[mxrtins04]

Hi maintainer, can i be assigned this issue pleasee?

[directorfloo]

I will love to work on this issue please assign it to me

[Hafgans-oss]

Hi, I'd like to work on this issue. I've gone through the description and acceptance criteria and I'm confident I can deliver it. I'll make sure every acceptance criterion is met and submit a clean, tested PR. Please assign it to me.

[Promise278]

i have expereienced with system designs and archecture i would love to work on these please

[Marshaltechnology]

Hi, I'd like to work on this issue. I've gone through the description and acceptance criteria and I'm confident I can deliver it. I'll make sure every acceptance criterion is met and submit a clean, tested PR. Please assign it to me.

[mekeke111]

Hi maintainer I am a full stack developer I can handle this

[IamOluwatoyin]

I have experience building React and Next.js applications with TypeScript, focusing on resilient, reusable components and improving application reliability through robust error handling and testing.

For this issue, I would implement a reusable ErrorBoundary component with a user-friendly fallback UI, retry functionality, and error reporting. I would wrap the required dashboard routes with the boundary and introduce granular boundaries within the group detail page so that failures in one section do not affect the rest of the interface. I would also build a lightweight error-reporting utility with rate limiting, connect it to the API endpoint, and add component tests to verify error recovery, reporting, and reset behavior while ensuring existing functionality remains unaffected.

[JenyferMontano]

Hi! I would love to work on this issue. I'll create the reusable ErrorBoundary component, wrap all routes, and add section boundaries for the group page. I'll also build the rate-limited /api/errors endpoint and write component tests.