fix: add styled 404 page to docs website by DhruvGoyal404 · Pull Request #743 · keploy/docs

DhruvGoyal404 · 2026-01-01T14:18:14Z

Description

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:

Bunny illustration (from blog-website)
"Back to Home" button (navigates to /docs/)
"Go to Previous Page" button (uses browser history)
Responsive two-column layout (desktop: side-by-side, mobile: stacked)
Dark/Light mode support (uses Docusaurus theme variables)
Helpful links section (Installation Guide, Glossary, GitHub)
Accessibility features (ARIA labels, keyboard navigation)

Changes Made

Modified: src/theme/NotFound/Content/index.js (replaced auto-redirect with styled component)
Added: static/img/404-not-found.png (bunny illustration)
Added: 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

github-actions

Thank you and congratulations 🎉 for opening your very first pull request in keploy

Copilot

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.

Copilot · 2026-01-01T14:20:42Z

src/theme/NotFound/Content/index.js

+    // 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/');
    }


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.

Suggested change

// 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/');

Achanandhi-M

Hey @DhruvGoyal404 , the changes look really good, However, from our side, we don’t want to include any bunny image or custom design for the 404 page.

If a user types a 404 URL or visits a non-existent page, it should simply redirect to /docs (the docs homepage). Please update it accordingly. Also please fix the Copilot suggestions.

DhruvGoyal404 · 2026-01-07T04:34:14Z

Sure @Achanandhi-M sir, onto it, will update with the work asap!

DhruvGoyal404 · 2026-01-07T09:13:45Z

@Achanandhi-M Sir,

I've updated the PR as requested!

Changes made:

✅ Removed bunny illustration (404-not-found.png and error-404.png)
✅ Removed all custom styling and navigation buttons
✅ Implemented simple auto-redirect
✅ Fixed Copilot's suggestion about history.goBack() being unreliable
✅ Ran Prettier to fix all formatting issues

New implementation:
The 404 page now uses a simple useEffect hook to instantly redirect users to the docs homepage without displaying any UI. This is exactly as you requested - no custom design, just a clean redirect.

Please let me know if any other changes are needed!

Achanandhi-M · 2026-01-07T10:24:18Z

Hey @DhruvGoyal404, could you please fix the failing pipelines? Also, please add a short video showing your changes—it will make the review easier for me. Thanks!

DhruvGoyal404 · 2026-01-07T15:09:34Z

@Achanandhi-M Sir,

I've fixed all the failing pipelines!

Changes made:

✅ Resolved merge conflicts
✅ Fixed DCO by signing off all commits (now passing!)
✅ Ran prettier to fix all formatting issues
✅ Other checks are awaiting your approval to run

Demo video:

Untitled.design.1.mp4

The video shows the 404 page instantly redirecting to [/docs/] from any invalid URL.

All checks should pass once you approve the workflows. Ready for review!

Achanandhi-M

Hey @DhruvGoyal404, I noticed that many files were changed that don’t seem necessary for this commit. Could you please review and fix those issues? Thanks!

Fixes #3441 Updated NotFound component to automatically redirect users to /docs/ Signed-off-by: Dhruv Goyal <dhruv621999goyal@gmail.com>

DhruvGoyal404 · 2026-01-09T13:25:54Z

@Achanandhi-M Sir,
I've cleaned up the PR as requested!
Changes made:

Removed all unnecessary file changes (CSS, images, configs)
Now only 1 file is modified!
Clean commit history with proper DCO sign-off
All commits signed off

The working video was attached previously for your ease of review! The PR now contains only the 404 redirect functionality. Could you please re-review? Thanks!

amaan-bhati

Thank you for working through the reviewer feedback and cleaning up the PR to its current minimal state.

Consider working through a few things:

Issues to be Considered

1. Duplicate PR

There is another open PR that addresses the same issue and modifies the same file with a more correct implementation. It uses Docusaurus's useBaseUrl hook for a dynamic redirect path rather than a hardcoded /docs/ string. Based on this, the recommendation is to close this PR in favor of the other one.

2. Component rename risk

The exported function is renamed from NotFoundContent to NotFound. This may break Docusaurus's theme swizzle contract if it expects the original export name. Please verify this against the Docusaurus documentation before proceeding.

3. Redirect method

history.push adds the broken 404 URL to the browser history. window.location.replace is more appropriate for 404 redirects as it removes the broken URL cleanly from the history stack.

If the team decides to proceed with this PR, consider switching to useBaseUrl for the redirect path, reverting the component rename, and replacing history.push with window.location.replace.

Copilot AI review requested due to automatic review settings January 1, 2026 14:18

github-actions bot reviewed Jan 1, 2026

View reviewed changes

Copilot started reviewing on behalf of DhruvGoyal404 January 1, 2026 14:18 View session

Copilot AI reviewed Jan 1, 2026

View reviewed changes

DhruvGoyal404 mentioned this pull request Jan 1, 2026

[docs-website]: add a 404 page in the blog website keploy/keploy#3441

Closed

Achanandhi-M suggested changes Jan 6, 2026

View reviewed changes

DhruvGoyal404 force-pushed the fix/docs-404-page-issue-3441 branch from bb5bed3 to 83b7dbc Compare January 7, 2026 14:29

DhruvGoyal404 requested a review from Achanandhi-M January 7, 2026 14:35

Achanandhi-M suggested changes Jan 9, 2026

View reviewed changes

DhruvGoyal404 force-pushed the fix/docs-404-page-issue-3441 branch from 2d6c0ab to 874c3f9 Compare January 9, 2026 09:15

fix: redirect 404 page to /docs/

178851d

Fixes #3441 Updated NotFound component to automatically redirect users to /docs/ Signed-off-by: Dhruv Goyal <dhruv621999goyal@gmail.com>

DhruvGoyal404 force-pushed the fix/docs-404-page-issue-3441 branch from 874c3f9 to 178851d Compare January 9, 2026 09:33

DhruvGoyal404 requested a review from Achanandhi-M January 9, 2026 13:19

amaan-bhati reviewed Apr 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: add styled 404 page to docs website#743

fix: add styled 404 page to docs website#743
DhruvGoyal404 wants to merge 1 commit intokeploy:mainfrom
DhruvGoyal404:fix/docs-404-page-issue-3441

DhruvGoyal404 commented Jan 1, 2026

Uh oh!

github-actions bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 1, 2026

Uh oh!

Achanandhi-M left a comment •

edited

Loading

Uh oh!

DhruvGoyal404 commented Jan 7, 2026

Uh oh!

DhruvGoyal404 commented Jan 7, 2026

Uh oh!

Achanandhi-M commented Jan 7, 2026

Uh oh!

DhruvGoyal404 commented Jan 7, 2026

Uh oh!

Achanandhi-M left a comment

Uh oh!

DhruvGoyal404 commented Jan 9, 2026

Uh oh!

amaan-bhati left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

DhruvGoyal404 commented Jan 1, 2026

Description

Problem

Solution

Changes Made

Screenshots

Testing

Checklist

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 1, 2026

Choose a reason for hiding this comment

Uh oh!

Achanandhi-M left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DhruvGoyal404 commented Jan 7, 2026

Uh oh!

DhruvGoyal404 commented Jan 7, 2026

Uh oh!

Achanandhi-M commented Jan 7, 2026

Uh oh!

DhruvGoyal404 commented Jan 7, 2026

Uh oh!

Achanandhi-M left a comment

Choose a reason for hiding this comment

Uh oh!

DhruvGoyal404 commented Jan 9, 2026

Uh oh!

amaan-bhati left a comment

Choose a reason for hiding this comment

Issues to be Considered

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Achanandhi-M left a comment •

edited

Loading