Páginas de errores personalizadas Laravel

Fecha de publicación: 25/08/20

Antes de empezar

Propósito del proyecto

Crearemos páginas totalmente personalizadas a nuestra plantilla web para cada error en Laravel. Los errores que se editan son el 401, 403, 404, 419, 500, 503 pero tambien se pueden añadir más.

¿Que necesitamos?

  • Tener laravel en una máquina virtual como homestead. Más información aquí →
  • Un navegador
  • Un procesador de texto, en mi caso VSCode
  • Cierto conocimiento sobre Larabel y el funcionamiento de Blade.

Explicación

Creación de archivos

Vamos a crear los archivos necesarios para mostrar las páginas de errores personalizados. No es necesario que lo hagamos manualmente ya que Laravel nos proporciona un comando artisan para esto vendor:publish. Para poder ejecutar este comando tenemos que estar con el terminal en la raíz de nuestra carpeta del proyecto laravel. Vale cualquier terminal ya sea predeterminado del sistema u otro instalado.

Una vez situados en la carpeta ejecutaremos el siguiente comando:

php artisan vendor:publish --tag=laravel-errors

Una vez hecho esto veremos como en nuestra carpeta "resources > views" nos habrá aparecido la carpeta errors con todos los archivos de error y tres archivos más que son las plantillas que puedes usar.

Plantilla errores

Ahora que ya hemos creado los archivos simplemente tenemos que modificarlos a nuestro gusto. Si no queremos complicarnos mucho el propio Laravel nos da tres plantillas predefinidas pero aquí hemos venido a modificarlo para que encaje a la perfección con nuestra plantilla personalizada así que de primera tenemos que crear un nuevo archivo que podemos llamar como queramos. En mi caso el archivo se llamará custom quedanto el nombre completo como custom.blade.php. Importante añadirle el .blade.php para que funcione.

Dentro de esta plantilla podemos hacer lo que queramos. Crear una plantilla desde cero o seguir la estructura básica de nuestra web. En mi caso seguira la estructura básica de la web porque quiero que aparezca la barra de navegación y el footer.

Como quiero que siga la plantilla blasica, dirección de mi plantilla básica "resources > views > layouts > plantilla.blade.php" de mi web, en el archivo que hemos creado anteriormente, custom.blade.php, le ponemos que extiende de la otra plantilla @extends ("layouts.plantilla"). Ahora nuestra plantilla de errores tiene todo el básico de nuestra web, estructura html, css, javaScript, etc.

La plantilla básica debe de tener un @yield("contenido") para que podamos añadir la información que queramos mostrar en cada página de error. Si ya tienes el "@yield" desde el archivo custom.blade.php que tenemos en la carpeta errors añadimos @section ("contenido") y en su interior escribimos la estructura que tendran todas las páginas de error. En mi caso quiero que tengan cada una una imagen personalizada, un titulo, una descripción, código de error producido y un botón que nos lleve a la página principal. Quedaría de la siguiente forma:

                
<!-- pantilla para páginas de errores situado en resource > errors > custom.blade.php -->

@extends ("layouts.plantilla")

@section ("content")

<!--block-->
<section>
    <div class="container p-3 p-lg-4 theme-bg-light">
        <div class="row">
            <div class="col-md-8 mb-3 mx-auto text-center">
                @yield('image')
                <h5 class="card-title color-main">¡@yield('body-title')!</h5>
                <p class="card-text">@yield('text')</p>
                <p class="card-text" style="font-family: monospace; color:gray;">Código de error: @yield('code')</p>
                <nav class="blog-nav nav nav-justified my-2">
                    <a class="nav-link-next nav-item nav-link rounded" href="/index">
                        <i class="fas fa-arrow-alt-circle-right mr-2"></i>Página principal
                    </a>
                </nav>
            </div><!--//col-->
        </div><!--//row-->
    </div><!--//container-->
</section><!--//block-->

@endsection
                
            

Errores

Borramos todo lo que tenga el documento y de decimos que el archivo es una extensión de custom.blade.php por lo que lo pondremos de esta forma @extends('errors::custom'). Ahora simplemente tenemos que rellenar los "yield" que tenia la plantilla para personalizar los errores quedando de la siguiente forma:

                
@extends('errors::custom')

@section('image')
<img src="https://pabloduran.es/images/errors/error-404.svg" class="img-fluid" alt="imagen error 404">
@endsection

@section('title', __('404'))
@section('body-title', 'Página no encontrada')
@section('text', __('Lo siento, pero no he podido encontrar la página que buscas.'))
@section('code', '404')
                
            

Ahora simplemente tenemos que repetir el proceso para todos los errores con su información específica. El resultado final será algo parecido a la siguiente imagen en mi caso.

Ejemplo del resultado de la página de error 404

Conclusión

De la forma que hemos creado las páginas de errores es totalmente escalable ya que si se añaden o quitan cosas del menú de navegación, scripts u otros elementos las páginas de errores tambien se actualizarán y en el caso de la plantilla especifica para errores ocurre lo mismo, solo tienes que modificar la plantilla para que todas las páginas se ajusten al nuevo formato.