Add a global-error.tsx to recover from root-layout crashes
Description
The app ships a route-level src/app/error.tsx, but there is no src/app/global-error.tsx, so an exception thrown in the root layout itself — the Header, Footer, or ToastProvider wiring in src/app/layout.tsx — escapes the route boundary and produces an unstyled white error screen with no recovery. This issue adds the top-level boundary Next.js requires for that case.
Requirements and context
- Repository scope: Agentpay-Org/Agentpay-frontend only.
- Create
src/app/global-error.tsx (a client component that renders its own <html>/<body>, per the Next.js contract) with a recovery reset button and a role="alert" message.
- Do not leak stack traces in production; show
error.digest for support correlation only.
- Keep the styling minimal but on-brand and ensure it works without the (failed) layout chrome.
Suggested execution
- Fork the repo and create a branch
git checkout -b security/error-handling-global-boundary- Implement changes
- Write code in: create
src/app/global-error.tsx.
- Write comprehensive tests in: create
src/app/global-error.test.tsx — assert the message renders, reset is called on click, and no stack is rendered.
- Add documentation: note the global error boundary in
README.md.
- Validate it renders standalone (no dependency on Header/Footer).
- Test and commit
Test and commit
- Run
npm run lint, npm run typecheck, npm test, and npm run build.
- Cover edge cases: error with digest, error without message, and reset click.
- Include the
npm test output and a short note on the production-safe rendering.
Example commit message
feat(error-handling): add global-error boundary for root-layout failures
Guidelines
- Minimum 95 percent test coverage for the new file.
- Clear, reviewer-focused documentation.
- Timeframe: 96 hours.
Community & contribution rewards
- 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
- ⭐ 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 — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.
Add a global-error.tsx to recover from root-layout crashes
Description
The app ships a route-level
src/app/error.tsx, but there is nosrc/app/global-error.tsx, so an exception thrown in the root layout itself — the Header, Footer, orToastProviderwiring insrc/app/layout.tsx— escapes the route boundary and produces an unstyled white error screen with no recovery. This issue adds the top-level boundary Next.js requires for that case.Requirements and context
src/app/global-error.tsx(a client component that renders its own<html>/<body>, per the Next.js contract) with a recoveryresetbutton and arole="alert"message.error.digestfor support correlation only.Suggested execution
git checkout -b security/error-handling-global-boundarysrc/app/global-error.tsx.src/app/global-error.test.tsx— assert the message renders,resetis called on click, and no stack is rendered.README.md.Test and commit
npm run lint,npm run typecheck,npm test, andnpm run build.npm testoutput and a short note on the production-safe rendering.Example commit message
feat(error-handling): add global-error boundary for root-layout failuresGuidelines
Community & contribution rewards