Personalizar páginas de error en Laravel

  • Publicado el 03 enero, 2025
  • Palabras: 57

Aprende a crear y personalizar páginas de error para diferentes códigos de estado HTTP en Laravel, haciendo que el manejo de errores de tu aplicación sea fácil de usar y más profesional.

Personalizar páginas de error en Laravel

#Crear páginas de error básicas

Puedes crear páginas de error personalizadas agregando plantillas Blade en el directorio de errores:

 

// resources/views/errors/404.blade.php
<h2>{{ $exception->getMessage() }}</h2>

 

#Publicar plantillas predeterminadas

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

 

#Ejemplo práctico

A continuación se explica cómo crear un sistema integral de gestión de errores:

 

// resources/views/errors/layout.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'Error')</title>
    <style>
        .error-container {
            text-align: center;
            padding: 40px;
        }
        .error-code {
            font-size: 72px;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="error-container">
        @yield('content')
        
        @if(app()->environment('local'))
            <div class="debug-info">
                {{ $exception->getMessage() }}
            </div>
        @endif
    </div>
</body>
</html>

// resources/views/errors/404.blade.php
@extends('errors.layout')

@section('title', '404 Not Found')

@section('content')
    <div class="error-code">404</div>
    <h1>Page Not Found</h1>
    <p>The page you're looking for doesn't exist.</p>
    <a href="{{ url('/') }}">Return Home</a>
@endsection

// resources/views/errors/500.blade.php
@extends('errors.layout')

@section('title', '500 Server Error')

@section('content')
    <div class="error-code">500</div>
    <h1>Server Error</h1>
    <p>We are experiencing some technical difficulties.</p>
    <p>Please try again later.</p>
@endsection

// resources/views/errors/4xx.blade.php
@extends('errors.layout')

@section('title', 'Client Error')

@section('content')
    <div class="error-code">{{ $exception->getStatusCode() }}</div>
    <h1>Oops! Something went wrong</h1>
    <p>{{ $exception->getMessage() ?: 'An error occurred while processing your request.' }}</p>
@endsection

 

La configuración proporciona un diseño de página de error consistente y al mismo tiempo maneja diferentes escenarios de error de manera adecuada.

Antonio Jenaro
Antonio Jenaro

Web Developer

Archivado en:

Fuente: Harris Raftopoulos

Inicia la conversación

Hazte miembro de Antonio Jenaro para comenzar a comentar.

Regístrate ahora

¿Ya estás registrado? Inicia sesión