Feat: Add smart fallback navigation to 404 page#21
Feat: Add smart fallback navigation to 404 page#21metis-ai-agent[bot] wants to merge 1 commit intomainfrom
Conversation
…art "Go Back" navigation that checks browser history:\n- If history exists (> 1 entry): navigate back to previous page\n- If no history (direct access): fallback to home page (/)\n\nAdded secondary action:\n- "Go Home" button always navigates to landing page\n\nImprovements:\n- Separated handlers for better code clarity (handleGoBack, handleGoHome)\n- Updated "Home" button text to "Go Home" as specified\n- Stacked button layout on mobile for better UX (flex-col on small screens)\n- Maintained existing Metis design system styling and animations
metis-ai-agent
bot
changed the title
![metis-ai-agent[bot]](https://avatars.githubusercontent.com/in/2329653?s=60&v=4){kind=small}
|
|
||
| const handleGoBack = () => { | ||
| // Check if there's history to go back to (more than just current page) | ||
| if (window.history.length > 1) { | ||
| navigate(-1); | ||
| } else { | ||
| // No useful history, go to home | ||
| navigate('/'); |
There was a problem hiding this comment.
Navigate Handlers Lack useCallback Optimization
- Severity:
WARNING - Category:
PERFORMANCE
Issue
The handleGoBack and handleGoHome handlers are recreated on every render. While not causing issues here, using useCallback with proper dependencies is React best practice for event handlers, especially since other components in the codebase follow similar inline patterns without memoization.
Suggested Fix
Wrap handlers with useCallback: const handleGoBack = useCallback(() => { ... }, []); and const handleGoHome = useCallback(() => navigate('/'), [navigate]);. However, this is optional since the component is lightweight and these handlers are simple.
There was a problem hiding this comment.
Trailing Newline Missing in File
- Severity:
INFO - Category:
STYLE
Issue
The file is missing a trailing newline at the end of the file, which is a common code style convention for text files and is often enforced by linters and git configurations.
Suggested Fix
Add a trailing newline at the end of the file after the closing brace.
There was a problem hiding this comment.
Reviewed NotFoundPage.tsx changes which improve 404 UX with extracted handler functions and mobile-responsive layout improvements. The changes correctly implement smart navigation fallback using window.history.length and improve button layout with responsive flex-col/flex-row classes. Posted 2 minor issues: one about useCallback optimization (warning) and one about missing trailing newline (info). The implementation is functionally correct with no bugs or security issues.
Summary
Successfully implemented 404 page UX improvements with smart navigation fallback.
Changes Made
File Modified
frontend/src/pages/NotFoundPage.tsxImplementation Details
Smart "Go Back" Logic:
handleGoBack()function that checks browser historywindow.history.length > 1: navigates back usingnavigate(-1)navigate('/')Secondary "Go Home" Action:
handleGoHome()function/regardless of historyUI Improvements:
flex-col), side-by-side on desktop (sm:flex-row)Code Quality:
Acceptance Criteria Met
✅ Opening invalid route from inside app → "Go Back" returns to previous page
✅ Opening invalid route directly (no history) → "Go Back" navigates to
/✅ "Go Home" always navigates to
/✅ 404 page consistent with Metis design system
✅ Frontend typecheck passes for all touched files
✅ Mobile/desktop responsive layout implemented
The branch has been committed and pushed to origin, ready for PR creation.
Closes #20
Overview
Enhanced the 404 error page with smart navigation logic and responsive layout improvements. The changes provide better user experience by intelligently handling navigation based on browser history and optimizing button layout for mobile devices.
Key Changes
NotFoundPage Component
frontend/src/pages/NotFoundPage.tsx: Added smart "Go Back" functionality with history-aware fallback. If the user reached the 404 page from within the application, the button navigates back using browser history. If the 404 was accessed directly (no history), it redirects to the home page insteadfrontend/src/pages/NotFoundPage.tsx: Added dedicatedhandleGoHome()function for consistent navigation to the landing pagefrontend/src/pages/NotFoundPage.tsx: Updated button layout from always-side-by-side to responsive: stacked vertically on mobile (flex-col) and horizontally on desktop (sm:flex-row)frontend/src/pages/NotFoundPage.tsx: Changed button text from "Home" to "Go Home" and updated heading styling to title-case with uppercase CSS classImpact
Notes
All navigation logic is contained within event handlers and respects the existing Metis design system (brutal/retro styling, PixelBlast background, shadows, and animations).
Summary by cubic
Revamped the 404 page with smart navigation so “Go Back” safely falls back to home when there’s no history, and added a clear “Go Home” option. Aligns with issue #20’s UX requirements while keeping existing styling.
Written for commit 4a3a7bb. Summary will update on new commits.