综合开发

Custom Error Page with Thymeleaf

微信扫一扫,分享到朋友圈

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

A Beginner’s Guide to npm: The Node Package Manager

上一篇

WDRL — Edition 267: Econom(log)ical Limits of Work, Privacy Wilderness and UX for Tech Diets.

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

Custom Error Page with Thymeleaf

长按储存图像,分享给朋友