#33 エラー処理 [共通エラー、HTTPエラー毎のエラー]

今回はエラー処理に関して学んでいきます。

前提条件

この記事はSpringの最低限の知識が必要になります。
また、なるべく分かりやすく書くつもりですが、この記事の目的は自分の勉強のアウトプットであるため所々説明は省略します。

構築環境

各バージョン
Spring Boot ver 2.7.5
mybatis-spring-boot-starter ver 2.2.2
Model Mapper ver 3.1.0
jquery ver 3.6.1
bootstrap ver 5.2.2
webjars-locator ver 0.46
thymeleaf-layout-dialect ver 3.0.0
依存関係

成果物

共通エラー画面

HTTPエラー毎のエラー画面

今回行うこと

今回は以下の流れに沿って進めていきます。

エラー画面の作成
　1. 共通エラー画面
　2. HTTPエラー毎のエラー画面

1. エラー画面の作成

アプリケーション内で予期せぬエラーが発生した場合、Springでは以下のような画面が表示されます。

上記の画像はSpringが用意しているWhiteLabelというエラーページです。しかし、このままではエラーが起きた際にユーザーが何の操作をすれば良いか分からなく立ってしまいます。
そのため　共通の画面に遷移できる共通のエラー画面を作成します。

1. 共通エラー画面

共通エラー画面を作成するためにはsrc/main/resources/templatesの直下にerror.htmlというHTMLファイルを作成します。

HTMLファイルの内容は以下になります。

error.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Error</title>
</head>
<body>
	<h1 th:text="${status} + ' ' + ${error}"></h1>
	<p th:text="${message}"></p>
	<p>ログイン画面に戻ってください</p>
	<form method="post" th:action="@{/logout}">
		<button class="btn btn-link" type="submit">ログイン画面に戻る</button>
	</form>
</body>
</html>

ここで上記のコードに含まれる各エラー内容を解説します。

コード	説明
${status}	HTTPのエラーコードが格納される
${error}	HTTPのエラー概要が表示される
${message}	エラーメッセージが表示される

下記の画像は実際に上記のコードを実装し、一意制約違反を起こした際のエラーページです。
画像下部にあるログイン画面に戻るボタンを押すとログイン前のページに戻ることができます。

${status}：500
${error} ：Internal Server Error
${message}：### Error updating database．．．values( ?, ?, ?, ?, ?, ?, ?, ? ) [23505-214]

2. HTTPエラー毎のエラー画面

Springのデフォルト機能を使えば、HTTPエラー毎のエラーが画面も用意することができます。
今回は存在しないURLにHTTPリクエストを送った際に発生する404エラーが起きた場合の画面を作成します。

HTTPエラー毎のエラー画面を作成するにはsrc/main/resources/templates/errorの直下にHTMLファイルを用意します。
ファイル名はHTTPエラーコードを同じにします。今回は404エラーに対応した画面を作成するため404.htmlというHTMLファイルを作成します。

HTMLファイルの内容は以下になります。

error.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>404Error</title>
</head>
<body>
	<h1 th:text="${status} + ' ' + ${error}"></h1>
	<p th:text="${message}"></p>
	<p>これは、404エラーの専用ページです</p>
	<form method="post" action="@{/logout}">
		<button class="btn btn-link" type="submit">ログイン画面に戻る</button>
	</form>
</body>
</html>

下記の画像が存在しないURL(http://localhost:8080/hoge) にアクセスした際に発生したエラーです。
コード内には<p th:text="${message}"></p>を記述しましたが、No message availableと出てきているのでいらなかったみたいです。

最後に

今回は共通エラー、HTTPエラー毎のエラー画面を作成しました。