Wrap the theme section in an error boundary with a retry

[mikewheeleer]

Guard theme with an error boundary

Description

An unexpected render error in theme currently blanks the page. This issue wraps it in an error boundary with a retry.

Requirements and context

• Repository scope: Talenttrust/Talenttrust-Frontend only.
• Add an error boundary around the theme section that shows an accessible fallback with a retry.
• Log the error via the existing seam; do not swallow it silently.
• Cover the fallback and retry in tests.

Suggested execution

• Fork the repo and create a branch
• git checkout -b refactor/theme-11-error-boundary
• Implement changes
  • Write code in: the relevant module.
  • Write comprehensive tests in: cover the new behaviour and edge cases.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: child throws, retry re-renders, normal render unaffected.
• Include the full test output in the PR description.

Example commit message

refactor(theme): add error boundary with retry

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the TalentTrust community on Discord: https://discord.gg/WqnGpcPx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — a 5-star rating is much appreciated.

[Dhivine-stack]

@Dhivine-stack has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, I've read through the issue description carefully and fully understand the expected outcome. I'd love the opportunity to work on it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Dhivine-stack to this issue.

[Paranoa-dev]

@Paranoa-dev has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I'd like to take this on.

I have experience building resilient React applications with reusable error boundaries, comprehensive unit tests, and accessibility-focused UI patterns. From my understanding, this issue is about preventing the entire page from failing when the theme section encounters an unexpected render error by isolating failures behind an error boundary while preserving a smooth recovery experience.

I'll implement an error boundary around the theme section that renders an accessible fallback UI whenever a child component throws during rendering. The fallback will clearly communicate that something went wrong and provide a keyboard-accessible Retry action that resets the boundary and attempts to render the theme again. I'll integrate the boundary with the project's existing error logging seam so errors are reported consistently without being silently swallowed or duplicating existing logging behavior.

The implementation will be scoped to the relevant theme module, ensuring normal rendering remains completely unchanged when no errors occur. I'll also ensure the fallback follows accessibility best practices with appropriate semantics, focus management, and clear messaging so users can recover without refreshing the page.

To prevent regressions, I'll add comprehensive tests covering the key scenarios: successful rendering, a child component throwing and displaying the fallback, retry successfully re-rendering the theme after recovery, repeated failures, and verification that the existing logging seam is invoked correctly. I'll also confirm that unaffected components continue rendering normally outside the boundary.

Before submitting the PR, I'll run npm run lint, npm test, and npm run build, verify the impacted modules maintain the requested coverage, and include the complete test output in the PR description. I'll keep the implementation focused, well documented, and easy for reviewers to validate.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Paranoa-dev to this issue.

[TochukwuJustice]

@TochukwuJustice has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi I would like to contribute to this issue. I have solid experience with React, Next.js, TypeScript, and Tailwind CSS, and I enjoy building fast, responsive, and maintainable frontend applications. I pay close attention to UI quality, performance, and clean integrations, and I’m confident I can deliver a smooth and reliable solution for this task.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @TochukwuJustice to this issue.