Loading...

Páginas de errores personalizadas Laravel

Pablo Durán
Comparte el post:

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. Esta plantilla debe de estar dentro de la carpeta errors que nos ha generado artisan anteriormente.

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 lo 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 ("partials.layout")

@section ("navbar")
@include("partials.navbar-solid")
@endsection

@section ("isPageFullHeight", $isPageFullHeight = "true")

@section ("content")
<div class="container d-flex flex-column justify-content-center pt-5 mt-n6" style="flex: 1 0 auto;">
  <div class="pt-7 pb-5">
    <div class="text-center mb-2 pb-4">
      <h1 class="mb-grid-gutter">
        <img class="d-inline-block" src="https://programadorpdf.com/images/errors/error-@yield('code').svg" alt="Error @yield('code')" style=" max-height: 400px">
        <span class="visually-hidden">Error @yield('code')</span><span class="d-block pt-3 fs-sm fw-semibold text-danger">Código de error: @yield('code')</span>
      </h1>
      <h2>@yield('h2')</h2>
      <p class="pb-2">@yield('text')</p>
      <a class="btn btn-translucent-primary me-3" href="https://programadorpdf.com/index">Página principal</a>
    </div>
  </div>
</div>
@endsection

@section ("footer")
@include("partials.footer")
@endsection

Páginas de errores

Abrimos cualquier página de error que se nos ha generado como por ejemplo la error-404.blade.php y borramos todo lo que tenga el documento. Le 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. El archivo quedaría de la siguiente forma:

@extends('errors::custom')

@section ("title", $title = "404 Error")
@section ("h2", $h2 = "¡Página no encontrada!")
@section ("text", $text = "No he podido encontrar la página que estás buscando.")
@section ("code", $title = "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.

Listado de componentes extra a descargar

Código de errores

Laravel de forma predeterminada nos crea los siguente errores:
  • Error 401: Aparece cuando la petición no ha podido ser ejecutada debido a que quien lo solicita carece de permisos.
  • Error 403: Es similar al 401. La diferencia es que en este caso si que ha podido empezar a procesar la petición pero ha terminado encontrandose un problema de permisos.
  • Error 404: Nos aparece al no encontrar la petición que se le ha solicitado.
  • Error 419: Es específico de Laravel y lo usa cuando no se ha podido encontrar el CSRF (Fix Cross Site Scripting) en los formularios que se envían al servidor.
  • Error 429: Este aparece cuando se lanzan muchas peticiones desde un mismo lugar. El límite es configurable.
  • Error 500: A ocurrido un error por parte del servidor sin especificar cual.
  • Error 503: Aparece cuando el servidor no está listo para procesar la solicitud. Puede ocurrir cuando el servidor está apagado o está saturado.