[Spring Boot] JPA 프로젝트 - 에러페이지 작업

Spring Boot/STUDY

[Spring Boot] JPA 프로젝트 - 에러페이지 작업

코맹 2024. 6. 27. 12:12

위와 같이 웹사이트를 사용할 때 404, 500 등 에러페이지가 발생할 때, 그대로 띄우면 사용자 측면에서 좋지 않다.

그렇기에 오늘은 에러페이지 예외처리를 해볼 예정이다.

application.properties 에러페이지 관련 설정 추가

## Whitelabel Error Page 제거, 커스텀화
server.error.whitelabel.enabled=false
server.error.path=/error
spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.web.ErrorMvcAutoConfiguration

기본이 true인 것을 false로 바꿔줌

resource/static/custom.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

h1 {
    font-family: 'Popins' !important;
}

.cover-background {
    position: relative !important;
    background-size: cover !important;
    overflow: hidden !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.p-0 {
    padding: 0 !important;
}

section {
    padding: 120px 0;
    overflow: hidden;
    background: #fff;
}

.error-page {
    background-color: #BABABA4A;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(234, 234, 235, 0.2);
    padding: 80px 20px;
}

.text-center {
    text-align: center !important;
}

.error-page h1 {
    font-size: 200px;
    line-height: 1;
    font-weight: 600;
}

.text-secondary {
    color: #15395A !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

resource/templates/404.html, 500.html, error.html 생성

폰트변경
https://fonts.google.com/

구글 폰트 사이트에 접속한 후, 맘에 드는 폰트 검색
Get embed code 클릭

 <!-- 구글 폰트 링크 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <!-- POPPINS체 사용 -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
    
    <h1 class="mb-0 text-secondary poppins-extrabold" style="font-family: 'Poppins' !important;">404</h1>

404.html에 코드 추가

⬇ 404.html 전체 코드

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>404 Error</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <!-- 구글 폰트 링크 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <!-- POPPINS체 사용 -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Favicon 탭에 들어가는 아이콘 -->
  <link rel="icon" href="https://getbootstrap.com//docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32"
    type="image/png">
  <link rel="icon" href="https://getbootstrap.com//docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16"
    type="image/png">
  <link rel="stylesheet" type="text/css" href="/custom.css">
</head>

<body>
  <section class="p-0 bg-img cover-background" style="background-image: url(https://bootdey.com/img/Content/bg1.jpg);">
    <div class="container-fluid d-flex flex-column">
      <div class="row align-items-center justify-content-center min-vh-100">
        <div class="col-md-9 col-lg-6 my-5">
          <div class="text-center error-page">
            <h1 class="mb-0 text-secondary poppins-extrabold" style="font-family: 'Poppins' !important; font-weight: 800; font-size: 80px;">404</h1>
            <h2 class="mb-4 text-white">페이지가 없습니다</h2>
            <p class="w-sm-80 mx-auto mb-4 text-white">관리자에게 문의하세요</p>
            <div>
              <a href="/board/list/free" class="btn btn-info btn-lg me-sm-2 mb-2 mb-sm-0">Home</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>

500.html, error.html도 동일한 코드로 진행, 문구만 바꿈

controller/CustomErrorController.java 생성

package com.eunji.backboard.controller;

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.http.HttpServletRequest;

@Controller
public class CustomErrorController implements ErrorController{
  @RequestMapping("/error")
  public String error(HttpServletRequest request) {
      Object status = request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE);    // 404, 500, 403

      if(status != null) {    // null이 아님 ? 에러가 났다!!
        Integer statusCode = Integer.valueOf(status.toString());

        if(statusCode == HttpStatus.NOT_FOUND.value()){   // 404 error일 때
          return "error/404";
        } else if(statusCode == HttpStatus.INTERNAL_SERVER_ERROR.value()){  // 500 error일 때
          return "error/500";   // 가장 중요!!
        }

      }
      return "error/error"; // status 코드는 없는데 오류가 나옴
      
  }
}

잘못된 url로 들어갔을 때 404.html 화면이 나타나는 것을 확인할 수 있음
내부 에러 발생시 500.html 화면 나타나는 것을 확인할 수 있음

'Spring Boot > STUDY' 카테고리의 다른 글

[Spring Boot] JPA 프로젝트 - 비밀번호 찾기 및 변경 기능 구현(2) (0)	2024.06.28
[Spring Boot] JPA 프로젝트 - 비밀번호 찾기 및 변경 기능 구현(1) (0)	2024.06.27
[Spring Boot] JPA 프로젝트 - AWS로 서버 연결 (1)	2024.06.26
[Spring Boot] JPA 프로젝트 - 조회수 기능 구현 (0)	2024.06.26
[Spring Boot] JPA 프로젝트 - 카테고리 추가 (0)	2024.06.25

현재글[Spring Boot] JPA 프로젝트 - 에러페이지 작업

코맹이의 개발일지

[Spring Boot] JPA 프로젝트 - 에러페이지 작업

'Spring Boot > STUDY' 카테고리의 다른 글

'Spring Boot/STUDY'의 다른글

티스토리툴바

[Spring Boot] JPA 프로젝트 - 에러페이지 작업

'Spring Boot > STUDY' 카테고리의 다른 글

'Spring Boot/STUDY'의 다른글

관련글

티스토리툴바