Skip to content

feat(errors): implement React SectionErrorBoundary components with fallback UI, logging hook, and retry options - #786

Merged
nensii21 merged 1 commit into
nensii21:mainfrom
Babin123456:feat/error-boundary-577
Jul 30, 2026
Merged

feat(errors): implement React SectionErrorBoundary components with fallback UI, logging hook, and retry options#786
nensii21 merged 1 commit into
nensii21:mainfrom
Babin123456:feat/error-boundary-577

Conversation

@Babin123456

Copy link
Copy Markdown
Contributor

Description

This PR implements React Error Boundary components for critical application sections to prevent whole-page crashes when unhandled runtime errors occur.

Closes #577
ECSoc 2026 Contribution


Acceptance Criteria Checklist

  • Friendly Fallback UI: Designed an error fallback card featuring an alert icon, clear error title, explanatory message, and optional collapsible technical stack trace details.
  • Error Logging Hook: Created useErrorLogger custom hook and integrated error reporting via reportLovableError and console diagnostics.
  • Retry Option: Included a "Try again" button that resets the error boundary state and invokes onRetry callback to re-render the section.

Changes Made

  • frontend/src/components/errors/SectionErrorBoundary.tsx: Created class-based React Error Boundary component with state reset, reporting integration, and fallback UI.
  • frontend/src/hooks/useErrorLogger.ts: Created error logging hook.
  • frontend/src/components/errors/index.ts: Exported error boundaries and error pages.
  • frontend/src/components/layout/DashboardLayout.tsx: Wrapped main page view (<Outlet />) and Right Activity Panel (<RightPanel />) in <SectionErrorBoundary>.
  • frontend/src/components/__tests__/ErrorBoundary.test.tsx: Added Vitest unit test suite for Error Boundary rendering, error capturing, and retry behavior.

Testing Performed

  • Ran npm test — Error Boundary Vitest test suite passed.
  • Tested component error simulation to verify fallback UI and retry button state reset.
  • Ran npm run typecheck & npm run lint — passed with 0 errors.

@nensii21
nensii21 merged commit 58eadf5 into nensii21:main Jul 30, 2026
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create Error Boundary Components

2 participants