Custom 404 Error Page in React App with HashRouting and Spring Boot

  • Backward compatibility (supporting older browsers)
  • Separate server-side & client-side routing
  • Simple React setup for 404:
React-app Setup

VOILA! For local npm start, this is how the paths will resolve:
http://localhost:3000/# >>> Home Page
http://localhost:3000/#home >>> Home Page
http://localhost:3000/#404 >>> NotFound Page
http://localhost:3000/#xyz >>> NotFound Page

  • Spring boot server-side setup:
    When we deploy this with spring boot as static content, by copying the build scrips in src/main/resources/public folder and run the bootRun. All the root requests to the server will serve index.html and that in turn serves our react app.

http://localhost:8080 >>> Index.html >>> React Home Page (And our url path will look like this http://localhost:8080/#/)

  • Spring boot Whitelabel Error Page:
    And any unknown paths will land to the spring boot ugly Whitelabel error page.
Spring Boot Whitelabel Error Page
  • Spring boot Error 404 Handling:
    Out of multiple options available with spring boot docs, let's try the two most common ones:
  1. Forward to react 404 page path using ErrorController:
Spring Boot Error Controller
Tomcat RequestDispatcher

Our Solution

  1. Modify WebServer to not ignore client-side URL fragments.
    This will require somehow overriding server dispatcher behavior and allowing client URL fragments to be passed back to the client. Is it safe & possible? What if the client browser discards it then in server response? I don’t know. Sounds like a lot of complexity. Let’s rule this out.👎
  2. Modify 404.html to point to react-app instead somehow.✅
    This sounds doable with client redirect, so we will modify our 404.html this way.👍

<meta http-equiv=”refresh” content=”0; url=/#404" />

http://localhost:8080/badpath >>> 404.html >>> ClientRedirect >>> http://localhost:8080/#404 >>> NotFound Page

Humble Request To Readers🙏

Donation😇

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amith Kumar

Amith Kumar

Lead Full Stack & DevOps Engineer