Update PageNotFoundView.vue #814
Conversation
🐞 Bug: Improper Handling of prevRoute in PageNotFound.vue
🔍 Issue Summary:
In the PageNotFound.vue component, the sendHome() method is designed to redirect users to the previously visited page using the prevRoute object captured in the beforeRouteEnter() lifecycle hook. However, if the user navigates directly to the 404 page via URL, prevRoute may be null or may not contain a valid path property.
This causes sendHome() to attempt accessing this.prevRoute.path, leading to a runtime JavaScript error:
Cannot read property 'path' of undefined
This results in broken navigation and a poor user experience when users try to click the "Go Back" button on the 404 screen.
🧠 Root Cause:
The logic assumes that prevRoute is always defined and contains a path property. This assumption fails when:
The user lands on the 404 page directly (via external URL/bookmark/manual typing).
The from route captured in beforeRouteEnter is undefined (as it would be in such cases).
✅ Fix Description:
The logic in sendHome() was updated to safely handle all edge cases:
js
Copy
Edit
const prevPath = this.prevRoute?.path;
if (typeof prevPath === 'string' && prevPath.trim() !== '') {
this.$router.push(prevPath).catch(() => {});
} else {
this.$router.push('/').catch(() => {});
}
this.prevRoute?.path safely accesses the path property using optional chaining.
A fallback to the homepage ('/') is implemented if prevRoute.path is missing, null, or an empty string.
This ensures that the navigation is always functional and resilient against direct access scenarios.
🌐 User Impact (Before Fix):
Clicking the "Go Back" button may cause the app to crash or throw an error if there’s no valid previous route.
Users might feel stuck or confused on the 404 page without a way to return to the main application.
🛠️ User Impact (After Fix):
Users who land directly on the 404 page will now be gracefully redirected to the home page upon clicking "Go Back."
Seamless, error-free navigation experience regardless of how the 404 page was reached.
✅ Test Cases Covered:
User navigates from another route → 404 → Clicks "Go Back" → Redirects to previous route.
User directly lands on 404 via browser URL → Clicks "Go Back" → Redirects to homepage.
No console errors or exceptions during any of the flows.
|
|
Nice improvement! @Sarthak-Developer-Coder This fix addresses a real usability pain point by making the "Go Back" behavior on the 404 page resilient and intuitive. Handling both internal and external navigation scenarios ensures a much smoother user experience, especially for first-time visitors or users arriving from broken links. Gracefully falling back to the homepage is a solid default behavior. Great attention to edge cases and user flow! 👏 |
|
Thanks a lot, @kashi-verma! 🙌 I really appreciate your thoughtful feedback. It means a lot coming from you! I wanted to make sure the 404 experience feels seamless, especially for new users who might land there unexpectedly. Glad you noticed the effort around edge cases and fallback logic — I’ll keep pushing for intuitive and user-friendly flows. Always open to suggestions for further improvements too! 😊 |
|
@marcgc21 Thanks for merging! I’ve also submitted my proposal for GSoC 2025—looking forward to the opportunity to collaborate. Let me know if there’s anything I can do to contribute further in the meantime! |
Update PageNotFoundView.vue
🔧 Fix: Improved Navigation Handling on the "Page Not Found" Page
🐞 Problem Overview
When a user lands directly on the "Page Not Found" screen (for example, by typing an invalid URL or clicking a broken link), the app tries to send them back to their last visited page. However, in these situations, the app doesn’t actually know where they came from because they arrived from outside the site. This causes the system to fail when trying to go "back"—sometimes even resulting in the app crashing or showing nothing when the user clicks the "Go Back" button.
This is frustrating for users, especially since the 404 page is supposed to help guide them back—not trap them.
🔍 Root Cause
The 404 page depends on a value called prevRoute, which stores where the user came from. This value is captured when users navigate inside the site. But if someone enters the 404 page directly (from outside the app), that value is missing or incomplete. The code was trying to use this missing information without checking if it existed, which led to errors.
✅ What Was Done
To solve this, we added a simple but important improvement:
The app now checks if the previous route information is actually available.
If it is, the "Go Back" button works as expected.
If it isn’t (such as when a user lands directly on the 404 page), the app now redirects them to the homepage instead—gracefully and without errors.
This change makes the "Go Back" button work in all scenarios and ensures the app won’t crash or behave unexpectedly.
🧪 What We Tested
We verified that:
Users who visit a broken link from inside the app are correctly sent back to where they came from.
Users who land on the 404 page directly (like from an external link) are taken to the homepage.
No crashes or errors occur in any case.
Everything works properly on modern browsers like Chrome and Firefox on Windows.
📦 Where This Applies
This update affects the component that handles the 404 or "Page Not Found" screen.
🏁 Outcome
The app now handles navigation on the 404 page in a smarter and more user-friendly way. It prevents crashes and ensures that all users—whether coming from inside or outside the app—are smoothly guided back to a working part of the site.