Implement global error and not-found boundaries
Description
The app has route-level loading.js files under app/invest/loading.js and app/invoices/loading.js but no error.js or not-found.js, so an unexpected render error or unknown URL falls back to Next.js defaults that clash with the dark slate/cyan theme. This issue adds branded error and 404 boundaries that reuse ErrorBanner.
Requirements and context
- Repository scope: Liquifact/Liquifact-frontend only.
- Create
app/error.js (client component) using components/ErrorBanner.jsx with a reset action and the dark theme background.
- Create
app/not-found.js with a link back home and consistent styling.
- Optionally add
app/global-error.js for layout-level failures.
- Reuse
copy/en.js strings; add any new copy keys there rather than inlining text.
Suggested execution
- Fork the repo and create a branch
git checkout -b feature/routing-09-error-notfound-boundaries
- Implement changes
- Test and commit
Test and commit
- Run
npm run lint, npm test, and npm run build.
- Cover edge cases: reset re-render and unknown route navigation.
- Include the full
npm test output.
Example commit message
feat: add global error boundary and branded not-found page
Guidelines
- Minimum 95 percent test coverage for impacted modules.
- Clear, reviewer-focused documentation.
- Timeframe: 96 hours.
Community & contribution rewards
- 💬 Join the Liquifact community on Discord for questions, reviews, and faster merges: https://discord.gg/JrGPH4V3
- ⭐ 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.
Implement global error and not-found boundaries
Description
The app has route-level
loading.jsfiles underapp/invest/loading.jsandapp/invoices/loading.jsbut noerror.jsornot-found.js, so an unexpected render error or unknown URL falls back to Next.js defaults that clash with the dark slate/cyan theme. This issue adds branded error and 404 boundaries that reuseErrorBanner.Requirements and context
app/error.js(client component) usingcomponents/ErrorBanner.jsxwith a reset action and the dark theme background.app/not-found.jswith a link back home and consistent styling.app/global-error.jsfor layout-level failures.copy/en.jsstrings; add any new copy keys there rather than inlining text.Suggested execution
git checkout -b feature/routing-09-error-notfound-boundariesapp/error.js,app/not-found.js; updateapp/copy/en.js.app/error.test.tsxandapp/not-found.test.tsx.README.md.role="alert"(already in ErrorBanner) and 404 has a focusable home link.Test and commit
npm run lint,npm test, andnpm run build.npm testoutput.Example commit message
feat: add global error boundary and branded not-found pageGuidelines
Community & contribution rewards