커스텀한 오류페이지를 통해 처리해 보자!
들어가며
톰캣의 기본 오류 페이지인 WhiteLabel 오류 페이지는 개발자에게는 유용하지만 사용자에게는 이해하기 어려운 페이지일 수 있습니다. 사용자가 이해하기 쉬운 오류 페이지를 제공하기 위해 사용자 정의 오류 페이지를 만들어서 해당 오류 상태가 발생했을 때 보이도록 구현해 보겠습니다.
사전 준비
만약 게시판 프로젝트를 하시려는 분은
로그및 로그인 인터셉터 까지 따라해 만들어주시기 바랍니다!
[SpringBoot] 무작정 (REST API)CRUD 게시판을 만들어기 로그 및 로그인 인터셉터 구현하기 [9]
요청로그 및 로그인 인터셉터 구현하기 들어가며 이전 포스팅까지는 애플리케이션을 실행하고 게시판을 사용할 때 아무런 로그가 나오지 않았습니다. 이제 각 기능을 실행할 때마다 요청과 응
back-stead.tistory.com
전체 코드는 깃에 올려두었습니다.
구현 예상 내용
개발자가 정의한 오류페이지로 처리하기
기본적인 톰캣의 오류페이지
사용자 정의 오류페이지
다음과 같이 오류페이지를 커스텀한 오류 페이지로 설정할 것입니다.
커스텀 오류페이지 구현
스프링을 사용한다면 오류 페이지를 손쉽게 설정하여 커스텀할 수 있습니다. 첫 번째로는 직접 컨트롤러와 설정파일을 통해서 오류페이지를 설정할 수 있고, 두 번째는 스프링이 제공하는 기능을 통해 오류페이지를 제공할 수 있습니다. 두 번째 방법을 사용해 오류페이지를 적용하는것이 쉽게 설정하고 관리할수있기때문에 두번째 방법으로 구현해 보겠습니다.
스프링 부트는 기본적으로 /error 경로를 기본적인 오류 페이지로 설정합니다
그렇기 때문에 개발자는 /error 하위에 커스텀한 오류 페이지를 작성만 하면 됩니다.
부트스트랩을 통해서 404, 4xx, 500 에러 페이지를 작성했습니다.
4xx.html
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Error Page</title>
<!-- 부트스트랩 CDN 추가 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- 커스텀 스타일 시트 추가 -->
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<div class="text-center">
<h2 class="display-4">4xx 발생</h2>
<p class="lead">죄송합니다, 현재 오류가 발생했습니다.</p>
</div>
</div>
<!-- 부트스트랩 자바스크립트 및 팝퍼 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>404.html
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Error Page</title>
<!-- 부트스트랩 CDN 추가 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- 커스텀 스타일 시트 추가 -->
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<div class="text-center">
<h2 class="display-4">오류 발생</h2>
<p class="lead">죄송합니다, 요청하신 페이지를 찾을 수 없습니다.</p>
</div>
</div>
<!-- 부트스트랩 자바스크립트 및 팝퍼 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>.
500.html
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>500 Error Page</title>
<!-- 부트스트랩 CDN 추가 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- 커스텀 스타일 시트 추가 -->
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<div class="text-center">
<h2 class="display-4">오류 발생</h2>
<p class="lead">죄송합니다, 서버에서 오류가 발생했습니다.</p>
</div>
</div>
<!-- 부트스트랩 자바스크립트 및 팝퍼 라이브러리 추가 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>이제 애플리케이션을 재 실행하고 url에 없는 주소를 작성해 입력하면 작성한 커스텀한 오류 페이지로 이동하는 것을 볼 수 있습니다.
실행
다음으로
이렇게 정말 간단하게 스프링부트를 통해서 에러페이지를 구현해 봤습니다. 다음에는 전역 예외처리를 통해서 공통적으로 발생할 수 있는 예외를 처리할 수 있도록 해보겠습니다. 감사합니다!
