Spring Boot İle Hata Sayfaları Oluşturma

Published in

folksdev

4 min readMay 18, 2021

Herkese Merhaba bugün bir medium hesabı açmaya karar verdim , beni bu hesabı açmaya zorlayan en büyük etken yazma tutkum oldu. Umarım bu platformda yararlı içerikler sunabilirm ve birilerine faydam dokunur .Tekrardan herkese merhaba…

Hepimiz en az bir kere hata sayfaları ile karşılaşmışızdır. Peki nedir bu hata sayfaları ? Hata sayfaları ziyaret ettiğiniz bir sayfada sorun olduğu , o sayfanın olmadığı ve hatta özel nedenlerden dolayı site sahibinin kullanıcıları bilgilendirmek amaçlı koyduğu sayfalardır.

Şuan aktif olarak Java’da Spring Boot ile çalıştığım için spring boot’da nasıl hata sayfaları oluşturacağımızı öğreneceğiz. İlk öncelikle İDE’mizi açalım.

new -> project -> spring initializr diyerek proje detaylarını girelim

Bağımlılıklar kısmında ise bunları ekleyelim

Proje Detaylarını halletmeden önce son olarak hata sayfalarını koyacağımız klasör yolunu belirtelim.

Şimdi her şey tamam olduğuna göre hata sayfalarını oluşturmaya başlayacağız. Bu yazıda 404 hata sayfasını oluşturup sonucunu hep beraber göreceğiz.

404.html adında bir dosya açtıktan sonra içine hata sayfamızın nasıl görünmesi gerektiğini yazıyoruz. Eğer html/css/javascript bilginiz yoksa yahut ben backend ciyim arkadaş ne uğraşacağım diyorsanız hazır templateler fazlası ile işinizi görecektir.

404.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>OOPS</title>
  <style>
    /**/
    :root {
      --main-color: #eaeaea;
      --stroke-color: black;

    }
    /**/
    body {
      background: var(--main-color);
    }
    h1 {
      margin: 100px auto 0 auto;
      color: var(--stroke-color);
      font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
      font-size: 10rem; line-height: 10rem;
      font-weight: 200;
      text-align: center;
    }
    h2 {
      margin: 20px auto 30px auto;
      font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
      font-size: 1.5rem;
      font-weight: 200;
      text-align: center;
    }
    h1, h2 {
      -webkit-transition: opacity 0.5s linear, margin-top 0.5s linear; /* Safari */
      transition: opacity 0.5s linear, margin-top 0.5s linear;
    }
    .loading h1, .loading h2 {
      margin-top: 0px;
      opacity: 0;
    }
    .gears {
      position: relative;
      margin: 0 auto;
      width: auto; height: 0;
    }
    .gear {
      position: relative;
      z-index: 0;
      width: 120px; height: 120px;
      margin: 0 auto;
      border-radius: 50%;
      background: var(--stroke-color);
    }
    .gear:before{
      position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
      z-index: 2;
      content: "";
      border-radius: 50%;
      background: var(--main-color);
    }
    .gear:after {
      position: absolute; left: 25px; top: 25px;
      z-index: 3;
      content: "";
      width: 70px; height: 70px;
      border-radius: 50%;
      border: 5px solid var(--stroke-color);
      box-sizing: border-box;
      background: var(--main-color);
    }
    .gear.one {
      left: -130px;
    }
    .gear.two {
      top: -75px;
    }
    .gear.three {
      top: -235px;
      left: 130px;
    }
    .gear .bar {
      position: absolute; left: -15px; top: 50%;
      z-index: 0;
      width: 150px; height: 30px;
      margin-top: -15px;
      border-radius: 5px;
      background: var(--stroke-color);
    }
    .gear .bar:before {
      position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
      z-index: 1;
      content: "";
      border-radius: 2px;
      background: var(--main-color);
    }
    .gear .bar:nth-child(2) {
      transform: rotate(60deg);
      -webkit-transform: rotate(60deg);
    }
    .gear .bar:nth-child(3) {
      transform: rotate(120deg);
      -webkit-transform: rotate(120deg);
    }
    @-webkit-keyframes clockwise {
      0% { -webkit-transform: rotate(0deg);}
      100% { -webkit-transform: rotate(360deg);}
    }
    @-webkit-keyframes anticlockwise {
      0% { -webkit-transform: rotate(360deg);}
      100% { -webkit-transform: rotate(0deg);}
    }
    @-webkit-keyframes clockwiseError {
      0% { -webkit-transform: rotate(0deg);}
      20% { -webkit-transform: rotate(30deg);}
      40% { -webkit-transform: rotate(25deg);}
      60% { -webkit-transform: rotate(30deg);}
      100% { -webkit-transform: rotate(0deg);}
    }
    @-webkit-keyframes anticlockwiseErrorStop {
      0% { -webkit-transform: rotate(0deg);}
      20% { -webkit-transform: rotate(-30deg);}
      60% { -webkit-transform: rotate(-30deg);}
      100% { -webkit-transform: rotate(0deg);}
    }
    @-webkit-keyframes anticlockwiseError {
      0% { -webkit-transform: rotate(0deg);}
      20% { -webkit-transform: rotate(-30deg);}
      40% { -webkit-transform: rotate(-25deg);}
      60% { -webkit-transform: rotate(-30deg);}
      100% { -webkit-transform: rotate(0deg);}
    }
    .gear.one {
      -webkit-animation: anticlockwiseErrorStop 2s linear infinite;
    }
    .gear.two {
      -webkit-animation: anticlockwiseError 2s linear infinite;
    }
    .gear.three {
      -webkit-animation: clockwiseError 2s linear infinite;
    }
    .loading .gear.one, .loading .gear.three {
      -webkit-animation: clockwise 3s linear infinite;
    }
    .loading .gear.two {
      -webkit-animation: anticlockwise 3s linear infinite;
    }
  </style>
</head>
<body>


<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:100,200,300,400" rel="stylesheet">
<body class="loading">
<h1>500</h1>
<h2>Unexpected Error <b>:(</b></h2>
<div class="gears">
  <div class="gear one">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="gear two">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="gear three">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>
<script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> 
<script src = "js / main.js" type = "text / javascript"> </ script > 
</body> 


<script> 
  $ (function () { 
    setTimeout (işlev () { 
      $ ('gövde'). removeClass ('yükleniyor'); 
    }, 1000); 
  }); 


</script> 
</body> 
</html>

Güzel! Hata sayfasının nasıl çalıştığını görmek için sitemize 404 hatası verdirmek gerekiyor.Ben domainin yanına /deneme yazdım. Sonuç aşağıdaki gibi. Bu sayfa olmadığı için 404 hatası verdi ve 404 sayfamız çalıştı.

500 Hatasını almak için bir örnek bırakıp yazımı burada noktalamak istiyorum.

@RestController
public class ErrorPage{

    @RequestMapping("/index")
    public String Index() {
        //Kodumuzda hata olduğu için 505 sayfası tetiklenerek çalışacaktır
        int i=1/0;
        return "index";
    }
}

Spring Boot İle Hata Sayfaları Oluşturma

404.html

Written by Furkan Özmen