Custom Error Page with Thymeleaf

This article shows how to replace the default error page with custom Thymeleaf error page in Spring Boot.

By default, a Spring boot application will show the Default Whitelabel Error page, which is good in the beginning but eventually, we might want to show a more suitable Error page with more useful details.

This is an image of default Whitelabel Error Page:

Spring Boot provides default mapping for /error to which all exception or error responses are forwarded. That's why any error (like a 404 error) or Exception thrown from the Controller will map to the /error page and our custom error page will be rendered.

We will first define an HTML file with the name error.html. Here I have used bootstrap CSS to style the page and added some of the information like the time stamp, Date, Error message etc. in the HTML page.

src/main/resources/templates/error.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" th:href="@{~/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{~/css/style.default.css}" />
</head>
<body marginwidth="0" marginheight="0">
  <div class="container">
    <div class="row">
      <h1>Thymeleaf Error Page</h1>
    </div>
    <div class="row">It apperrs Either something went wrong or the page
      doesn't exist anymore.....</div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Date</span>
      </div>
      <div class="col-md-8">
        <span th:text="${timestamp}"></span>
      </div>
    </div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Path</span>
      </div>
      <div class="col-md-8">
        <span th:text="${path}"></span>
      </div>
    </div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Error</span>
      </div>
      <div class="col-md-8">
        <span th:text="${error}"></span>
      </div>
    </div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Status</span>
      </div>
      <div class="col-md-8">
        <span th:text="${status}"></span>
      </div>
    </div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Message</span>
      </div>
      <div class="col-md-8">
        <span th:text="${message}"></span>
      </div>
    </div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Exception</span>
      </div>
      <div class="col-md-8">
        <span th:text="${exception}"></span>
      </div>
    </div>
    <div class="row rowDesign">
      <div class="col-md-4 ml-auto">
        <span class="legend">Trace</span>
      </div>
      <div class="col-md-8">
        <span th:text="${trace}"></span>
      </div>
    </div>
  </div>
</body>
</html>

Apart from the error message, if we want to show the stack trace, then we need to set the following properties.

src/main/resources/application.properties:

server.error.include-stacktrace=always

Once these changes are done, let's start the Spring Boot App by executing following command.

mvn spring-boot:run

Now for any error pages our custom error page should be displayed. For instance, for a 404 error (for a page that does not exist), it should display something like this:

Github repo for this article can be found here.