feat(general): add 404 error page #148
Conversation
…ure/POND-1-header
Co-authored-by: Magnus Borgmann <[email protected]>
# Conflicts: # .env.example # i18n/locales/de-DE/error.json # i18n/locales/en-GB/error.json
Co-authored-by: Magnus Borgmann <[email protected]>
…12-cms-pages # Conflicts: # .env.example # bun.lock # composables/usePondCmsUtils.ts # docs/.vitepress/config.ts # nuxt.config.ts # package.json # pages/[...all].vue # tailwind.config.js
…feature/POND-14-404-error # Conflicts: # bun.lock # package.json
…12-cms-pages # Conflicts: # bun.lock # package.json
…feature/POND-14-404-error # Conflicts: # bun.lock # package.json
…14-404-error # Conflicts: # docs/.vitepress/config.ts # error.vue # i18n/locales/de-DE/error.json # i18n/locales/en-GB/error.json # nuxt.config.ts
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update introduces a modular error handling system for a Vue application. It adds new error layout and not-found components with customizable slots, updates error display logic to use these components, and provides localized button labels. Documentation and navigation for error handling are also included in the project's docs. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant ErrorLayout
participant ErrorNotFound
User->>App: Navigates to a page
App->>App: Detects error (e.g., 404)
alt Error is 404
App->>ErrorNotFound: Render not found error
ErrorNotFound->>ErrorLayout: Use error layout with 404 slots
else Other error
App->>ErrorLayout: Render error layout with title/subtitle slots
end
ErrorLayout-->>User: Displays error page with localized content
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
I think it is more relevant for QA, but on the review app the 404 page doesn't work: https://pr-148-basecom-pond.fly.dev/asddasd I just get an empty page and an error in the console:
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
i18n/locales/en-GB/error.json (1)
7-9: Duplicate translation verificationRefer to the comment on
i18n/locales/de-DE/error.jsonto ensure thegeneralButtonkey is present and used consistently across all locales.
🧹 Nitpick comments (3)
docs/how-to/error-handling.md (1)
4-4: Naming inconsistency between documentation and component usage.The documentation refers to the component as
ErrorLayout, but in the usage example (line 22), it's referenced asLayoutError. This inconsistency could confuse developers implementing error pages.Either update the documentation to consistently use
LayoutErroror update the example to useErrorLayout, depending on the actual component name in the codebase.error.vue (1)
42-49: Consider adding a fallback for missing error information.The current implementation may display incomplete information if
error.messageorerror.statusCodeis undefined.Consider adding fallbacks for these values:
<template #title> - {{ error?.message }} + {{ error?.message || $t('error.generalErrorMessage') }} </template> <template #subTitle> - {{ error?.statusCode }} + {{ error?.statusCode || $t('error.unknownStatusCode') }} </template>Don't forget to add the corresponding translation keys.
components/error/ErrorLayoutInner.vue (1)
13-15: Consider adding aria-label for better accessibility.The button lacks an explicit accessible label which could improve screen reader experience.
<NuxtLinkLocale to="/"> - <UiButton variant="link">{{ $t('error.generalButton') }}</UiButton> + <UiButton variant="link" :aria-label="$t('error.generalButtonAriaLabel')">{{ $t('error.generalButton') }}</UiButton> </NuxtLinkLocale>Don't forget to add the corresponding translation key.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (9)
components/error/ErrorLayout.vue(1 hunks)components/error/ErrorLayoutInner.vue(1 hunks)components/error/ErrorNotFound.vue(1 hunks)components/error/ErrorNotFoundInner.vue(1 hunks)docs/.vitepress/config.ts(1 hunks)docs/how-to/error-handling.md(1 hunks)error.vue(2 hunks)i18n/locales/de-DE/error.json(1 hunks)i18n/locales/en-GB/error.json(1 hunks)
🔇 Additional comments (9)
i18n/locales/de-DE/error.json (1)
7-9:✅ Verification successful
Verify translation key consistency
The new
generalButtonkey under theerrorobject matches the default button label in your error layout components. Ensure that the component looks uperror.generalButtonand that this key is present in all locale files to avoid missing translations at runtime.
🏁 Script executed:
#!/bin/bash # Verify that all locale JSONs include the `generalButton` key rg '"generalButton"' -l i18n/localesLength of output: 98
🏁 Script executed:
#!/bin/bash echo "Locale directories:" ls -1 i18n/locales | sed -e 's/^/ - /' echo "" echo "generalButton presence in error.json:" for f in i18n/locales/*/error.json; do locale=$(basename "$(dirname "$f")") if command -v jq &> /dev/null; then has=$(jq 'has("generalButton")' "$f") else has=$(grep -q '"generalButton"' "$f" && echo true || echo false) fi echo " - $locale: $has" doneLength of output: 709
🏁 Script executed:
#!/bin/bash echo "Inspecting structure of error.json for each locale:" for f in i18n/locales/*/error.json; do locale=$(basename "$(dirname "$f")") echo "" echo "----- $locale -----" # Show the first 20 lines to understand nesting head -n 20 "$f" doneLength of output: 1562
Translation key consistency verified
Both locale files define
error.generalButton, so translations are in sync:
i18n/locales/de-DE/error.json– contains"generalButton": "Zurück zur Startseite"i18n/locales/en-GB/error.json– contains"generalButton": "Back to homepage"No missing keys detected.
docs/.vitepress/config.ts (1)
33-35:✅ Verification successful
Confirm documentation path
You've added a sidebar link for "Error Handling" pointing to
/how-to/error-handling. Make sure the target file exists and the path matches exactly.
🏁 Script executed:
#!/bin/bash # Check for the new docs file fd 'docs/how-to/error-handling.md'Length of output: 34
🏁 Script executed:
#!/bin/bash # Search for any markdown files related to "error handling" in the docs directory fd 'error[-_]handling' docs -e mdLength of output: 65
Confirmed documentation path
The file
docs/how-to/error-handling.mdexists, so the sidebar link/how-to/error-handlingis correct. No further changes needed.docs/how-to/error-handling.md (1)
22-35: Example code structure appears correct.The usage example correctly demonstrates how to customize the error layout component with named slots for title, subtitle, and button content.
components/error/ErrorNotFoundInner.vue (2)
1-10: Consistent implementation of error page using named slots.The implementation correctly uses the component referenced in the documentation with appropriate named slots (
titleandsubTitle) and localized content.
4-4:✅ Verification successful
Verify that the translation key exists.
Make sure the translation key
error.404.headingexists in all language files to avoid displaying raw translation keys to users.
🏁 Script executed:
#!/bin/bash # Check if the translation key exists in language files echo "Checking for required translation keys in language files..." fd --extension json --exec grep -l "404.heading" {} \; | sortLength of output: 193
🏁 Script executed:
#!/bin/bash echo "Verifying nested translation key error.404.heading across all JSON locale files..." for file in $(fd --extension json); do if jq -e '.error["404"].heading' "$file" >/dev/null 2>&1; then echo "$file" fi done | sortLength of output: 1460
🏁 Script executed:
#!/bin/bash echo "Verifying presence of error.404.heading in each locale's error.json" find i18n/locales -mindepth 1 -maxdepth 1 -type d | sort | while read dir; do locale=$(basename "$dir") file="$dir/error.json" if [ ! -f "$file" ]; then echo "$locale: error.json missing" else if jq -e '.error["404"].heading' "$file" >/dev/null 2>&1; then echo "$locale: ✅ present" else echo "$locale: ❌ missing 404.heading" fi fi doneLength of output: 709
✅
error.404.headingTranslation Key Verified
Theerror.404.headingkey is present in all locale files:
- i18n/locales/de-DE/error.json
- i18n/locales/en-GB/error.json
No further action required.
error.vue (1)
30-30: Good use of computed property for conditional rendering.Using a computed property for the 404 check improves readability and maintainability.
components/error/ErrorLayoutInner.vue (3)
1-21: Well-structured error layout with appropriate slots.The component provides a flexible structure with named slots that align with the documentation. The default implementations and fallbacks are appropriate.
6-6:✅ Verification successful
Verify that the translation key exists.
Make sure the translation key
error.generalHeadlineexists in all language files to avoid displaying raw translation keys to users.
🏁 Script executed:
#!/bin/bash # Check if the translation key exists in language files echo "Checking for required translation keys in language files..." fd --extension json --exec grep -l "generalHeadline" {} \; | sortLength of output: 261
Verified translation key presence
The
error.generalHeadlinekey is present in all locale files underi18n/locales:
- i18n/locales/de-DE/error.json
- i18n/locales/en-GB/error.json
No missing translations detected.
14-14:✅ Verification successful
Verify that the translation key exists.
Make sure the translation key
error.generalButtonexists in all language files to avoid displaying raw translation keys to users.
🏁 Script executed:
#!/bin/bash # Check if the translation key exists in language files echo "Checking for required translation keys in language files..." fd --extension json --exec grep -l "generalButton" {} \; | sortLength of output: 259
🏁 Script executed:
#!/bin/bash echo "Verifying presence of \"generalButton\" in all locale error.json files..." exit_code=0 for locale_dir in $(find i18n/locales -mindepth 1 -maxdepth 1 -type d); do locale=$(basename "$locale_dir") file="$locale_dir/error.json" if [[ ! -f "$file" ]]; then echo " ✗ error.json missing for locale: $locale" exit_code=1 else if grep -q '"generalButton"' "$file"; then echo " ✓ $locale: key found" else echo " ✗ $locale: missing key \"generalButton\"" exit_code=1 fi fi done exit $exit_codeLength of output: 844
✅ Translation key verified across all locales
The
error.generalButtonkey is present in:
- i18n/locales/de-DE/error.json
- i18n/locales/en-GB/error.json
No missing keys detected—no further action required.
|
@jkniest sorry, the 404 page should be working now. there was incorrect reference that i didnt catch when i was refactoring the filenames |
Summary by CodeRabbit