[docs]:404-error-page-for-docs-website.

[Srinu346]

What has changed?

This PR adds a custom, user-friendly 404 error page to the Keploy documentation site. The new 404 page replaces the previous redirect-only behavior with a comprehensive, visually appealing error page that helps users navigate back to relevant content.

Key Features:

• Custom 404 Page Design: Beautiful, responsive layout with the Keploy rabbit mascot image
• Auto-redirect Functionality: 12-second countdown timer that automatically redirects users to the homepage
• Helpful Navigation: Quick access button to return to the homepage
• Popular Pages Section: Grid of 4 popular documentation pages (Installation, Introduction, API Test Generator, Glossary) to help users find what they're looking for
• Responsive Design: Fully responsive layout that works seamlessly on mobile, tablet, and desktop devices
• Theme-aware Styling: Uses Docusaurus theme variables for consistent styling across light and dark modes

Technical Changes:

• Updated src/theme/NotFound/Content/index.js to include:
  • React hooks for countdown timer state management
  • Responsive flexbox layout for image and content
  • Integration with Docusaurus useBaseUrl for proper asset paths
  • Tailwind CSS classes for modern styling
  • Gradient text effects for the "404" heading
  • Hover effects and transitions for better UX

This PR Resolves #3441

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as expected).
• Documentation update (if none of the other choices apply).

How Has This Been Tested?

Build and Serve Testing:

1. Ran npm run build - Build completed successfully with no errors
2. Ran npm run serve - Development server started without issues
3. Tested 404 page by navigating to non-existent URLs:
   • /docs/nonexistent-page
   • /docs/invalid/route
   • /random-path

Functionality Testing:

• Countdown timer decrements correctly from 12 to 0
• Auto-redirect to homepage works after countdown completes
• "Go to Homepage" button navigates correctly
• All popular page links work and navigate to correct pages
• Image loads correctly from /img/404-error.png
• Responsive layout works on mobile, tablet, and desktop viewports
• Dark mode and light mode themes both display correctly

Screenshots:

Desktop View (Light Mode)

Desktop View (Dark Mode)

Mobile View

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works (if applicable).
• New and existing unit tests pass locally with my changes.
• Any dependent changes have been merged and published.

Additional Notes:

• The 404 error image (404-error.png) should be placed in static/img/ directory
• The countdown timer can be adjusted by changing the initial useState(12) value
• The popular pages list can be easily customized by modifying the array in the component
• All styling uses Tailwind CSS classes and Docusaurus theme variables for consistency

[Achanandhi-M]

Hey @Srinu346, the changes look really good, and I’ve tested them locally as well. 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.

[Srinu346]

This is the view after changes @Achanandhi-M sir,

• Reduced the timer to 4s
• Removed the bunny image

[Achanandhi-M]

Hey @Srinu346, please check the previous comment. As mentioned, we don’t want to show any bunny or anything on redirection—if the page is a 404, it should redirect to the home page immediately. Please have a look at the previous comment for details.

[Srinu346]

• Current View
  https://github.com/user-attachments/assets/6cdc9abf-adde-4eba-aef5-a6bbc6ce5bf7

• Build Results

[Achanandhi-M]

Hey @Srinu346, we don’t want to show a 404 or any other message while redirecting. It should simply redirect to the home page immediately.

[Srinu346]

@Achanandhi-M sir, now i have removed that message also, it simply redirects it to home page.

[Srinu346]

@Achanandhi-M sir, are there any more changes required here ?

[Srinu346]

@Achanandhi-M sir can you please review this pr.

[Achanandhi-M]

Hey @Srinu346, we’ve updated the landing page. Could you please review the new version? Also, please add a short video demonstrating your changes. Thanks!

[Srinu346]

@Achanandhi-M Sir the issue is not resolved.

[Srinu346]

Sir the white strip is caused by an already existing issue.

Screen.Recording.2026-01-27.225242.mp4

[amaan-bhati]

Thank you for iterating on this and removing the earlier custom design elements per reviewer feedback. The useBaseUrl approach is the correct, Docusaurus-idiomatic way to handle this redirect.

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 using a hardcoded path. Only one of these can be merged. The useBaseUrl approach here is technically superior as it remains correct even if the site's base URL changes in the future. The maintainer should close the other PR in favor of this one.

2. Missing demo video

The reviewer requested a short demo video showing that navigating to a non-existent URL redirects cleanly to the docs homepage. Please provide this before requesting re-review.

3. Redirect method

Please confirm the final implementation uses window.location.replace(homeUrl) rather than history.push - replace is preferred for 404 redirects as it does not add the broken URL to the user's browser history.