Added "Page not found" text when the status code is 404#2592
Added "Page not found" text when the status code is 404#2592zonetecde wants to merge 1 commit intoproductionfrom
Conversation
WalkthroughThe pull request adds internationalization support for 404 error pages by introducing a new localized "not-found-title" string and modifying the Error component to accept a statusCode prop. The component now conditionally renders the localized title when the status code is 404. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ 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: 1
♻️ Duplicate comments (1)
src/pages/_error.tsx (1)
21-21: KeepErrorcomponent name despite Biome noShadowRestrictedNames warningBiome flags
const Error = ...for shadowing the globalError, but this naming is already an established convention in this codebase for error components (see prior learnings) and keeps the file semantics clear as the custom_errorpage.Given this, I’d keep the current name and, if needed, address the warning via linter configuration rather than renaming the component here.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
locales/en/error.json(1 hunks)src/pages/_error.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.*
📄 CodeRabbit inference engine (.cursor/rules/bug-handling-with-todo-comments.mdc)
If you encounter a bug in existing code, or the instructions lead to suboptimal or buggy code, add comments starting with "TODO:" outlining the problems.
**/*.*: Utilize Early Returns: Use early returns to avoid nested conditions and improve readability.
Conditional Classes: Prefer conditional classes over ternary operators for class attributes.
**/*.*: Use comments sparingly, and when you do, make them meaningful.
Don't comment on obvious things. Excessive or unclear comments can clutter the codebase and become outdated.
Use comments to convey the 'why' behind specific actions or explain unusual behavior and potential pitfalls.
Provide meaningful information about the function's behavior and explain unusual behavior and potential pitfalls.
**/*.*: Write short functions that only do one thing.
Follow the single responsibility principle (SRP), which means that a function should have one purpose and perform it effectively.
If a function becomes too long or complex, consider breaking it into smaller, more manageable functions.Order functions with those that are composing other functions appearing earlier in the file. For example, if you have a menu with multiple buttons, define the menu function above the buttons.
**/*.*: Always add helpful comments to the code explaining what you are doing.
Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.
**/*.*: Choose names for variables, functions, and classes that reflect their purpose and behavior.
A name should tell you why it exists, what it does, and how it is used. If a name requires a comment, then the name does not reveal its intent.
Use specific names that provide a clearer understanding of what the variables represent and how they are used.
Files:
locales/en/error.jsonsrc/pages/_error.tsx
locales/**
📄 CodeRabbit inference engine (CLAUDE.md)
Keep translation files under locales/[lang]/ using next-translate conventions
Files:
locales/en/error.json
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/next-js-conventions.mdc)
**/*.{js,jsx,ts,tsx}: Rely on Next.js Pages Router for state changes.
Minimize 'use client' usage: Prefer server components and Next.js SSR features.
Minimize 'use client' usage: Use 'use client' only for Web API access in small components.
Minimize 'use client' usage: Avoid using 'use client' for data fetching or state management.
**/*.{js,jsx,ts,tsx}: Optimize Web Vitals (LCP, CLS, FID)
Use dynamic loading for non-critical components using @src/components/dls/Spinner/Spinner.tsx
Files:
src/pages/_error.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.{tsx,jsx}: Use functional components over class components
Keep components small and focused
Extract reusable logic into custom hooks
Use composition over inheritance
Split large components into smaller, focused ones
Follow the Rules of Hooks
Use custom hooks for reusable logic
Use appropriate dependency arrays in useEffect
Implement cleanup in useEffect when needed
Avoid nested hooks
Use useState for local component state
Avoid prop drilling through proper state management
Implement proper memoization (useMemo, useCallback)
Use React.memo for expensive components
Avoid unnecessary re-renders
Implement proper lazy loading
Use proper key props in lists
Profile and optimize render performance
Show appropriate loading and error states
Handle async errors properly
Show user-friendly error messages
Implement proper fallback UI
Log errors appropriately
Handle edge cases gracefully
Use semantic HTML elements
Implement proper ARIA attributes
Ensure keyboard navigation
Handle focus management
Provide proper alt text for images
Use proper imports/exports
Document complex component logic
Files:
src/pages/_error.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Implement proper prop types with TypeScript
**/*.tsx: Prefix interfaces for React props with 'Props' (e.g., ButtonProps)
Implement proper error boundaries
Files:
src/pages/_error.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Use xstate for complex state logic
Files:
src/pages/_error.tsx
**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/*.{ts,tsx,d.ts}: Prefer interfaces over types for object definitions
Use type for unions, intersections, and mapped types
Avoid usingany, preferunknownfor unknown types
Leverage TypeScript's built-in utility types
Use generics for reusable type patterns
Use PascalCase for type names and interfaces
Use camelCase for variables and functions
Use UPPER_CASE for constants
Use descriptive names with auxiliary verbs (e.g., isLoading, hasError)
Use explicit return types for public functions
Use arrow functions for callbacks and methods
Implement proper error handling with custom error types
Use function overloads for complex type scenarios
Prefer async/await over Promises
Use readonly for immutable properties
Leverage discriminated unions for type safety
Use type guards for runtime type checking
Implement proper null checking
Avoid type assertions unless necessary
Create custom error types for domain-specific errors
Use Result types for operations that can fail
Use try-catch blocks with typed catch clauses
Handle Promise rejections properly
Files:
src/pages/_error.tsx
src/pages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Next.js Pages Router; place all route files under src/pages
Files:
src/pages/_error.tsx
{src,types}/**/*.ts?(x)
📄 CodeRabbit inference engine (CLAUDE.md)
Use TypeScript throughout the codebase with strict configuration
Files:
src/pages/_error.tsx
src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer React functional components for UI implementation
Files:
src/pages/_error.tsx
{src,types}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use path aliases @/ for src and @/dls/* for design system imports
Files:
src/pages/_error.tsx
🧠 Learnings (11)
📚 Learning: 2025-08-01T08:51:28.930Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-08-01T08:51:28.930Z
Learning: Applies to **/*.tsx : Implement proper error boundaries
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:51:28.930Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-08-01T08:51:28.930Z
Learning: Applies to **/*.{ts,tsx,d.ts} : Implement proper error handling with custom error types
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-10-20T15:04:10.434Z
Learnt from: afifvdin
Repo: quran/quran.com-frontend-next PR: 2540
File: src/components/Verse/VerseAndTranslation.tsx:8-11
Timestamp: 2025-10-20T15:04:10.434Z
Learning: In the quran.com-frontend-next codebase, the Error component imported from '@/components/Error' should not be renamed to avoid shadowing the global Error object, as this is the established convention consistently used across the codebase.
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Show user-friendly error messages
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Log errors appropriately
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{test,spec}.{tsx,jsx} : Test error scenarios
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Handle async errors properly
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:51:28.930Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-08-01T08:51:28.930Z
Learning: Applies to **/*.{ts,tsx,d.ts} : Create custom error types for domain-specific errors
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Show appropriate loading and error states
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-09-21T19:00:54.303Z
Learnt from: mohsinayoob
Repo: quran/quran.com-frontend-next PR: 2495
File: src/pages/logout.tsx:11-12
Timestamp: 2025-09-21T19:00:54.303Z
Learning: In src/pages/logout.tsx, the developer mohsinayoob prefers to let decodeURIComponent exceptions bubble up to the global catch block rather than handling them locally. This ensures centralized error handling where all logout errors redirect to a safe default path, maintaining consistent fallback behavior instead of having multiple error handling points.
Applied to files:
src/pages/_error.tsx
📚 Learning: 2025-08-01T08:50:54.518Z
Learnt from: CR
Repo: quran/quran.com-frontend-next PR: 0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-08-01T08:50:54.518Z
Learning: Applies to **/*.{tsx,jsx} : Implement proper fallback UI
Applied to files:
src/pages/_error.tsx
🪛 Biome (2.1.2)
src/pages/_error.tsx
[error] 21-21: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🔇 Additional comments (1)
src/pages/_error.tsx (1)
21-41: 404-aware title logic is correct; please verify behavior across status codesUsing
statusCode === 404to deriveisNotFoundand switching betweent('not-found-title')andt('title')keeps existing behavior for non‑404 errors while giving a clearer message on 404 pages.statusCodebeing optional is handled safely since non‑404/undefined will fall back to the generic title.TODO: Manually verify at least:
- A known 404 route (e.g.
/not-a-page) shows “Page not found”.- A 500 or generic error path still shows the original “Sorry, something went wrong” title.
| "go-back": "Go Back", | ||
| "if-persist": "If the issue persists, please", | ||
| "report-cta": "report a bug", | ||
| "not-found-title": "Page not found", |
There was a problem hiding this comment.
404-specific title key looks good; ensure coverage in other locales
The new "not-found-title" key is well named and matches its usage in src/pages/_error.tsx. However, only English was updated in this PR, so non‑English locales may show a missing key or fall back unexpectedly.
TODO: Mirror this key across other locales/[lang]/error.json files (even with temporary English copy) to avoid inconsistent UX for non‑English users.
🤖 Prompt for AI Agents
In locales/en/error.json around line 5, the new "not-found-title" key was added
only for English; update all other locale files under locales/*/error.json to
include the same "not-found-title" key (you can copy the English string as a
temporary value) so non‑English builds don’t miss the key; ensure each file
remains valid JSON (correct comma placement and no duplicate keys) and keep the
key name exactly "not-found-title" to match src/pages/_error.tsx usage.
There was a problem hiding this comment.
Pull request overview
This PR improves user experience by displaying a specific "Page not found" message for 404 errors instead of the generic "Sorry, something went wrong" message.
Key Changes:
- Added conditional rendering logic to display different error messages based on status code
- Introduced new translation key
not-found-titlefor 404 errors in English locale
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/pages/_error.tsx | Added statusCode prop usage and conditional logic to display "Page not found" for 404 errors |
| locales/en/error.json | Added new translation key not-found-title with value "Page not found" |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "go-back": "Go Back", | ||
| "if-persist": "If the issue persists, please", | ||
| "report-cta": "report a bug", | ||
| "not-found-title": "Page not found", |
There was a problem hiding this comment.
The translation key not-found-title is only added to the English locale. When users with other language preferences (e.g., Arabic, French, Spanish) encounter a 404 error, the translation will be missing, likely resulting in the key name being displayed or a fallback to the default language.
Consider adding the not-found-title translation to all supported language files in the locales/ directory (ar, bn, es, fa, fr, id, it, ms, nl, pt, ru, sq, sw, th, tr, ur, zh) to ensure a consistent user experience across all locales.
osamasayed
force-pushed
the
page-not-found
branch
from
9553c48 to
7a88b79
Compare
AhmedCodeGuy
force-pushed
the
production
branch
2 times, most recently
from
8a7e8dd to
faadd1c
Compare
1 participant
Summary
Changes the generic "Something went wrong" message to "Page not found" when the page status code is 404.
Note: only the English "Page not found" text has been added. No other languages.
Type of change
Test plan
Tested on
/not-a-page.Checklist
Screenshots or videos
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.