I’ve been building a Web application with Spring Boot and React and I have problems with default 404 Whitelabel page (from spring-boot).

Currently, setup in React is that I try to intercept HTTP response status codes on API calls, I have it handled for 401/403/>500, works perfectly.

Depending on status code React would render a specific component.

I’ve tried to do the same for 404 status code, but for some reason status code never reaches React, apparently Spring just renders Whitelabel page, not even reaching React (assumption).

There are a lot of answers on Google how to disable Whitelabel pages, the first one that comes up is — server.error.whitelabel.enabled: false —

So I’ve added it to my application.yml file (alongside with some other that “google” has suggested — spring.autoconfigure.exclude: org.springframework.boot.autoconfigure.web.servlet.error.ErrorMvcAutoConfiguration, spring.mvc.throw-exception-if-no-handler-found: true).

After I did that, I no longer receive Whitelabel page, but instead, I receive
some other 404 not found page.

Post image

page on wrong url after removing Whitelabel page

One solution that I’ve found on google is this (https://medium.com/@amithkumarg/custom-404-error-page-in-react-app-with-hashrouting-and-spring-boot-71ee2ca5550d)
it is very close to what I want to achieve, it’s just that we have a different approach on the front-end side.

His last line has got me thinking that 404 never reaches react and that is
Internally, this is how the paths will be resolved:
http://localhost:8080/badpath >>> 404.html >>> ClientRedirect >>> http://localhost:8080/#404 >>> NotFound Page

I have the same setup in development, back-end is running on 8080 port and front-end on 3000 port (not sure if that is important considering that in production they run on the same port)

But this 404.html page is what got me thinking that 404 never reaches react, I have no custom HTML in my spring project so there is no redirect, and I would like to keep it that way.

So finally my question is How can I intercept 404 status code so I can render notFoundComponent? Or I believe that there is a better solution (because there always is), so I would like to hear it.



Source link

Write A Comment