Custom Error Page with Thymeleaf
Errors happen, but when they do, your user deserves more information than a whitelabel error page.
Join the DZone community and get the full member experience.
Join For Free
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:runNow 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.
Opinions expressed by DZone contributors are their own.
Comments