feat: added error boundaries and tests

[theFirstCodeManiac]

Closes #87

Pull Request

Summary

Implemented branded global error and not-found boundaries to provide a consistent user experience aligned with the application's dark slate and cyan design system. Added comprehensive tests, centralized copy, documentation, and accessibility improvements.

Changes Made

Error Boundaries

• Added app/error.js as a client component
• Integrated components/ErrorBanner.jsx
• Implemented reset functionality with a documented JSDoc reset handler
• Applied branded dark slate/cyan styling
• Reused localized copy from app/copy/en.js

Not Found Page

• Added app/not-found.js
• Included a prominent, focusable link back to the home page
• Matched existing application styling
• Moved all user-facing text into app/copy/en.js

Global Error Handling

• Added optional app/global-error.js to handle layout-level failures
• Ensured consistent branding across all error states

Localization

• Added new error and 404 copy keys to app/copy/en.js
• Removed inline text in favor of centralized copy management

Testing

• Added app/error.test.tsx
• Added app/not-found.test.tsx
• Covered:
  • Error boundary rendering
  • Reset handler behavior and re-render flow
  • Unknown route navigation
  • Home link rendering and accessibility
  • Localization rendering
  • Boundary fallback behavior

Documentation

• Updated README.md with documentation for:
  • Global error boundary
  • Not-found boundary
  • Reset behavior
  • Localization approach
  • Accessibility considerations

Accessibility

• Reused ErrorBanner with role="alert"
• Verified keyboard-accessible, focusable home link on the 404 page
• Maintained accessible interaction patterns throughout the error experience

Testing

• Ran npm run lint
• Ran npm test
• Ran npm run build
• Verified reset correctly re-renders the failed route
• Verified unknown routes render the branded 404 page
• Confirmed accessibility and responsive behavior
• Achieved at least 95% test coverage for impacted modules

Acceptance Criteria

• Create app/error.js
• Create app/not-found.js
• Add optional app/global-error.js
• Reuse localized copy from app/copy/en.js
• Add comprehensive tests
• Update README.md
• Document the reset handler with JSDoc
• Validate accessibility requirements
• Verify lint, tests, and production build
• Meet minimum coverage target for impacted modules

[drips-wave]

@theFirstCodeManiac Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits