fix: add styled 404 page to docs website #743
Conversation
- Replaced auto-redirect with styled 404 page - Added bunny illustration from blog-website - Implemented 'Back to Home' and 'Go to Previous Page' buttons - Two-column responsive layout (desktop: side-by-side, mobile: stacked) - Full dark/light mode support - Accessibility features and helpful links Fixes keploy/keploy#3441 Signed-off-by: Dhruv Goyal <[email protected]>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR replaces the auto-redirect behavior on 404 pages with a fully styled, user-friendly error page that provides clear navigation options and helpful resources for users who land on non-existent pages.
Key Changes:
- Replaced automatic redirect with a styled 404 page featuring informative messaging
- Implemented responsive two-column layout with illustration and navigation buttons
- Added dark/light mode support using Docusaurus theme variables
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Check if there's previous page in history | ||
| if (window.history.length > 1) { | ||
| history.goBack(); | ||
| } else { | ||
| // If no history, go to home | ||
| history.push('/docs/'); | ||
| } |
There was a problem hiding this comment.
The condition window.history.length > 1 is not a reliable way to check if there's a previous page in the browsing history. The window.history.length property includes forward history entries and always includes the current page, so it will typically be >= 1 even when there's no previous page to go back to.
This means users who navigate directly to a 404 page (e.g., by typing a URL or following an external link) will still see the "Go to Previous Page" button, but clicking it will navigate them to /docs/ anyway since goBack() won't work as expected.
Consider either removing the conditional check and always using history.push('/docs/') as a fallback, or implementing a more robust solution such as tracking navigation state or simply always redirecting to the home page when the button is clicked.
| // Check if there's previous page in history | |
| if (window.history.length > 1) { | |
| history.goBack(); | |
| } else { | |
| // If no history, go to home | |
| history.push('/docs/'); | |
| } | |
| // Always go to docs homepage to avoid unreliable history checks | |
| history.push('/docs/'); |
1 participant
Description
Fixes keploy/keploy#3441
This PR adds a styled 404 page to the Keploy docs website, replacing the current auto-redirect behavior.
Problem
Currently, when users navigate to non-existent pages (e.g.,
/docs/xyz), they are automatically redirected to /docs/ without any feedback, causing confusion.Solution
Implemented a fully styled 404 page with:
Changes Made
static/img/404-not-found.png(bunny illustration)static/img/error-404.png(alternative 404 image)Screenshots
Desktop View:
Mobile View:
Dark Mode:
Testing
✅ Tested on invalid routes (
/docs/this-does-not-exist)✅ "Back to Home" button works
✅ "Go to Previous Page" button works
✅ Responsive layout verified (mobile + desktop)
✅ Dark/Light mode toggle verified
✅ No console errors
Checklist