feat(web): add error and not-found UI; align CONTRIBUTING with develop#127
feat(web): add error and not-found UI; align CONTRIBUTING with develop#127mooncitydev wants to merge 1 commit intoPACTO-LAT:developfrom
Conversation
- Add App Router error.tsx with reset and home navigation - Add not-found.tsx for consistent 404 experience - Document upstream URL, rebase target develop, and testing note
|
@mooncitydev is attempting to deploy a commit to the aguilar1x's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughUpdated contributor workflow documentation to reflect a new repository owner and development branch, plus added two new Next.js error-handling page components for displaying error states and 404 not-found pages with user-friendly messaging and navigation controls. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
CONTRIBUTING.md (1)
307-307: Includebiome:formatin the final pre-PR checks for consistency.Line 307 references checks from “Making Changes” but currently lists only
type-check,biome:check, andbuild. Consider addingbiome:formathere too so this section matches the repo’s commit hygiene guidance.Based on learnings: Run
npm run biome:formatbefore committing.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@CONTRIBUTING.md` at line 307, Update the "Making Changes" pre-PR checklist to include the formatting step by adding `biome:format` alongside `type-check`, `biome:check`, and `build` (the referenced checks at line 307); ensure the README/CONTRIBUTING text instructs contributors to run `npm run biome:format` before committing and mention it in the PR checklist so docs and the repo's commit hygiene guidance remain consistent.apps/web/app/error.tsx (2)
33-33: Use a namedhandle*event handler instead of an inline callback.This keeps JSX cleaner and aligns with the repository handler naming rule.
♻️ Suggested refactor
+ const handleRetry = (): void => { + reset(); + }; + return ( @@ - <Button type="button" onClick={() => reset()}> + <Button type="button" onClick={handleRetry}> Try again </Button>As per coding guidelines,
**/*.{jsx,tsx}: Event handlers should start with 'handle' prefix (e.g., handleClick, handleSubmit).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/app/error.tsx` at line 33, Replace the inline callback on the Button with a named handler: create a function named handleReset (or similar starting with "handle") near the component body that calls reset(), then change onClick to reference handleReset (i.e., onClick={handleReset}); ensure the handler is defined in the same component scope so it can access the existing reset symbol and keeps JSX cleaner and compliant with the handler naming rule.
8-14: Prefer an interface + typed const arrow component for consistency.Switching from a function declaration with inline props to a typed const arrow aligns with the TS/TSX conventions used in this repo.
♻️ Suggested refactor
-export default function ErrorPage({ - error, - reset, -}: { - error: Error & { digest?: string }; - reset: () => void; -}) { +interface ErrorPageProps { + error: Error & { digest?: string }; + reset: () => void; +} + +const ErrorPage = ({ error, reset }: ErrorPageProps): JSX.Element => { @@ -} +}; + +export default ErrorPage;As per coding guidelines,
**/*.{ts,tsx}: Prefer const arrow functions with explicit type annotations over function declarations.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/app/error.tsx` around lines 8 - 14, Replace the function declaration ErrorPage with a typed const arrow component: define an interface (e.g., ErrorPageProps) that describes error: Error & { digest?: string } and reset: () => void, then export default a const ErrorPage with an explicit React/TSX type (e.g., React.FC<ErrorPageProps> or (props: ErrorPageProps) => JSX.Element) and destructure { error, reset } in the parameter list; keep the component body unchanged and ensure the default export remains on the const.apps/web/app/not-found.tsx (1)
5-5: Use a typed const arrow component for TSX consistency.The current component works, but a typed const arrow better matches repo conventions.
♻️ Suggested refactor
-export default function NotFoundPage() { +const NotFoundPage = (): JSX.Element => { return ( @@ -} +}; + +export default NotFoundPage;As per coding guidelines,
**/*.{ts,tsx}: Prefer const arrow functions with explicit type annotations over function declarations.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/app/not-found.tsx` at line 5, The NotFoundPage export is a plain function declaration; convert it to a typed const arrow component to match repo TSX conventions: replace the function declaration for NotFoundPage with a const arrow assigned to an explicit React component type (e.g., const NotFoundPage: React.FC = () => { ... }) and keep it as the default export so the component shape and typing are explicit.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/app/error.tsx`:
- Around line 29-31: Replace direct rendering of error.message in the error UI
with a generic user-facing string and move the detailed error text to
logs/monitoring: in apps/web/app/error.tsx stop rendering {error.message || ...}
and instead render a fixed friendly message like "Something went wrong. Please
try again."; concurrently call your logging function (e.g., console.error(error)
or a central logger/monitoring function) to capture error.message and stack for
debugging, and if you want to display details only in development wrap the
original message render behind a NODE_ENV === 'development' check (use the error
variable and the JSX paragraph that currently renders error.message).
In `@CONTRIBUTING.md`:
- Around line 96-99: Update the branch-creation instructions so the new feature
branch is explicitly based on develop: before the existing git checkout -b
feature/your-feature-name step, add an explicit git checkout develop and a git
pull upstream develop (or equivalent sync) to ensure your local develop is
up-to-date; then run git checkout -b feature/your-feature-name as shown.
---
Nitpick comments:
In `@apps/web/app/error.tsx`:
- Line 33: Replace the inline callback on the Button with a named handler:
create a function named handleReset (or similar starting with "handle") near the
component body that calls reset(), then change onClick to reference handleReset
(i.e., onClick={handleReset}); ensure the handler is defined in the same
component scope so it can access the existing reset symbol and keeps JSX cleaner
and compliant with the handler naming rule.
- Around line 8-14: Replace the function declaration ErrorPage with a typed
const arrow component: define an interface (e.g., ErrorPageProps) that describes
error: Error & { digest?: string } and reset: () => void, then export default a
const ErrorPage with an explicit React/TSX type (e.g., React.FC<ErrorPageProps>
or (props: ErrorPageProps) => JSX.Element) and destructure { error, reset } in
the parameter list; keep the component body unchanged and ensure the default
export remains on the const.
In `@apps/web/app/not-found.tsx`:
- Line 5: The NotFoundPage export is a plain function declaration; convert it to
a typed const arrow component to match repo TSX conventions: replace the
function declaration for NotFoundPage with a const arrow assigned to an explicit
React component type (e.g., const NotFoundPage: React.FC = () => { ... }) and
keep it as the default export so the component shape and typing are explicit.
In `@CONTRIBUTING.md`:
- Line 307: Update the "Making Changes" pre-PR checklist to include the
formatting step by adding `biome:format` alongside `type-check`, `biome:check`,
and `build` (the referenced checks at line 307); ensure the README/CONTRIBUTING
text instructs contributors to run `npm run biome:format` before committing and
mention it in the PR checklist so docs and the repo's commit hygiene guidance
remain consistent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b8964fbc-c4e0-466f-9692-03fd12d95114
📒 Files selected for processing (3)
CONTRIBUTING.mdapps/web/app/error.tsxapps/web/app/not-found.tsx
| <p className="mb-6 text-sm text-muted-foreground"> | ||
| {error.message || 'An unexpected error occurred. Please try again.'} | ||
| </p> |
There was a problem hiding this comment.
Avoid rendering raw error.message directly in production UI.
Displaying the raw error text can leak internal implementation details. Prefer a generic user message and keep detailed error info in logs/monitoring.
🔧 Suggested hardening
+ const userMessage = 'An unexpected error occurred. Please try again.';
+
return (
@@
<p className="mb-6 text-sm text-muted-foreground">
- {error.message || 'An unexpected error occurred. Please try again.'}
+ {userMessage}
</p>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/app/error.tsx` around lines 29 - 31, Replace direct rendering of
error.message in the error UI with a generic user-facing string and move the
detailed error text to logs/monitoring: in apps/web/app/error.tsx stop rendering
{error.message || ...} and instead render a fixed friendly message like
"Something went wrong. Please try again."; concurrently call your logging
function (e.g., console.error(error) or a central logger/monitoring function) to
capture error.message and stack for debugging, and if you want to display
details only in development wrap the original message render behind a NODE_ENV
=== 'development' check (use the error variable and the JSX paragraph that
currently renders error.message).
| 1. **Create a new branch** from `develop` (the default integration branch): | ||
| ```bash | ||
| git checkout -b feature/your-feature-name | ||
| ``` |
There was a problem hiding this comment.
Make branch creation explicitly start from develop.
Line 96 says “from develop”, but the command in Lines 97–99 creates a branch from the current HEAD. Add an explicit checkout/sync step for develop to avoid accidental wrong-base branches.
Suggested doc fix
-1. **Create a new branch** from `develop` (the default integration branch):
+1. **Create a new branch** from `develop` (the default integration branch):
```bash
+ git checkout develop
+ git pull upstream develop
git checkout -b feature/your-feature-name
```🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@CONTRIBUTING.md` around lines 96 - 99, Update the branch-creation
instructions so the new feature branch is explicitly based on develop: before
the existing git checkout -b feature/your-feature-name step, add an explicit git
checkout develop and a git pull upstream develop (or equivalent sync) to ensure
your local develop is up-to-date; then run git checkout -b
feature/your-feature-name as shown.
1 participant
Add App Router error.tsx with reset and home navigation
Add not-found.tsx for consistent 404 experience
Document upstream URL, rebase target develop, and testing note
Summary by CodeRabbit