Menu

Spring Boot Aplicacion Web Parte 10.

0 Comment


Paginas de Error.

Un toque extra en aplicaciones web es presentar buenas paginas de error y no solo mostrar codigos y cosas raras en la pantalla del usuario.

Mostraremos una pagina generica para los errores 500 y 404.

Error pages
Error pages

Contenido

  1. Crear Pagina de Error General.
  2. Crear Pagina de Error 404.
  3. Git Commit.

1.Crear Pagina de Error General.

Spring Boot solo necesita un archivo llamado error.html en la raiz de la carpeta template y automaticamente el error 500 sera redireccionado a este dicho archivo.

Como lo dije en el parrafo anterior, crea un archivo en la raiz de la carpeta ‘template’ llamado error.html y agrega las imagenes necesarios en la carpeta de ‘static’.

error.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<!--JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- FRAMEWORK BOOTSTRAP para el estilo de la pagina-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    <!-- Los iconos tipo Solid de Fontawesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
    <script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

    <!-- Nuestro css-->
    <link rel="stylesheet" type="text/css" href="static/css/index.css" th:href="@{/css/index.css}">
	
	<style type="text/css">
		body{
			padding-top:5%;
		}
	
		img{
			width:75%;
		}
		
	</style>
</head>
<body>
<div class="container text-center">
	<div class="mx-auto col-10 card">
		<div class="card-header">
			<h4 th:text="${error}">Internal Server Error</h4>
		</div>
		<div class="card-body">
			<a href="/userForm" ><img src="static/img/error/500.png" th:src="@{/img/error/500.png}"/></a>
		</div>
		<div class="card-footer">
			<span th:text="${message}">Message</span><br/> 
			<span th:text="${exception}">Trace </span><br/>
		</div>
	</div>	    
</div>
</body>
</html>

2.Crear Pagina de Error 404.

Para asignar una pagina personalizada a un error http especifico el proceso es un poquito diferente, Spring Boot tambien lo carga automaticamente pero necesita estar en una ruta diferente.

Crea una carpeta llamada “error” dentro de la carpeta templates, la ruta seria “src/main/resources/templates/error/y el nombre del archivo es el numero del codigo de error, por ejemplo 404.html.

404.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<!--JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- FRAMEWORK BOOTSTRAP para el estilo de la pagina-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    <!-- Los iconos tipo Solid de Fontawesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
    <script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

    <!-- Nuestro css-->
    <link rel="stylesheet" type="text/css" href="static/css/index.css" th:href="@{/css/index.css}">
	
	<style type="text/css">
		body{
			padding-top:5%;
		}
	
		img{
			width:100%;
		}
		
	</style>
</head>
<body>
<div class="container text-center">
	<div class="mx-auto col-10 card">
		<div class="card-header">
			<h4>404 Page Not Found</h4>
		</div>
		<div class="card-body">
			<a href="/userForm" ><img src="static/img/error/404.png" th:src="@{/img/error/404.png}"/></a>
			<p> FUENTE: <b>https://www.computersrepaired.com.au/images/404-page-technogeek.png</b></p>
		</div>
	</div>	    
</div>
</body>
</html>
Error File Structure
Error File Structure

3.Git Commit

Error Pages Git Commit
Error Pages Git Commit

Menu

  1. Setup
  2. Entidades y POJOS
  3. Basic HTML
  4. Lista de Usuarios
  5. Crear Usuario y Validar Campos
  6. Editar Usuario
  7. Eliminar Usuario
  8. Cambiar Contraseña
  9. Spring Security
  10. Paginas de Error

Gracias por llegar al final de este post.
No se te olvide dejar tus comentario o preguntas aca abajo o en mi twitter @Cruizg93

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *