Skip to content

Navigation Menu

Sign in
Sign up

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

Open
Srinu346 wants to merge 14 commits into
keploy:main from
Srinu346:fix/404-page
Open

[docs]:404-error-page-for-docs-website. #744
Srinu346 wants to merge 14 commits into
keploy:main from
Srinu346:fix/404-page

Conversation

@Srinu346

@Srinu346 Srinu346 commented Jan 1, 2026

Copy link
Copy Markdown
Contributor

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)

Screenshot 2026年01月01日 202958 Screenshot 2026年01月01日 203004

Desktop View (Dark Mode)

Screenshot 2026年01月01日 202904 Screenshot 2026年01月01日 202910

Mobile View

image

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

kilo-code-bot[bot] reacted with confused emoji kilo-code-bot[bot] reacted with eyes emoji

@Achanandhi-M Achanandhi-M left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Image

Srinu346 force-pushed the fix/404-page branch 2 times, most recently from 742cc31 to 4b7bebb Compare January 6, 2026 13:19 
Signed-off-by: Akella Srinivas <alsrinivas.346@gmail.com>

Srinu346 commented Jan 6, 2026

Copy link
Copy Markdown
Contributor Author

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

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

Copy link
Copy Markdown
Contributor

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 commented Jan 9, 2026

Copy link
Copy Markdown
Contributor Author

@Achanandhi-M Achanandhi-M left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

 

Signed-off-by: Akella Srinivas <alsrinivas.346@gmail.com>

Srinu346 commented Jan 9, 2026

Copy link
Copy Markdown
Contributor Author

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

Copy link
Copy Markdown
Contributor Author

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

Copy link
Copy Markdown
Contributor Author

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

@Achanandhi-M Achanandhi-M left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link
Copy Markdown
Contributor Author
image

@Achanandhi-M Sir the issue is not resolved.

Copy link
Copy Markdown
Contributor Author

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

Screen.Recording.2026年01月27日.225242.mp4

@amaan-bhati amaan-bhati left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor Author

OK sir, I will add a demo video.

Copy link
Copy Markdown
Contributor Author

Here is the demo video sir, and yes window.location.replace(homeUrl) approach is being used.

Screen.Recording.2026年04月30日.143322.mp4

Please take a look @amaan-bhati sir.

@amaan-bhati amaan-bhati left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Srinu346 thanks for sharing the video, can you add one more video with more context? in this video the implementation seems to be breaking, it is taking 3-4 seconds to redirect, and while it is getting redirected, we are seeing a blank screen both while loading and also when it is redirected, the page seems to be empty. my personal suggestion is to see the working of the 404 pages from blog website, it might help you improve your implementation and ideation as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@amaan-bhati amaan-bhati amaan-bhati requested changes
+1 more reviewer
@Achanandhi-M Achanandhi-M Achanandhi-M requested changes
Reviewers whose approvals may not affect merge requirements

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[docs-website]: add a 404 page in the blog website

AltStyle によって変換されたページ (->オリジナル) /