31 🚫 ERROR 404 Personalizado | Diseñando la Página de No Encontrado (Admin y Shop) | Laravel 12

Duración: 16 min
Módulo: 🛒 Tienda Online (Frontend Shop) y Funcionalidades 25-33 Lección 7 de 9

Descripción

Lección 31: 🚫 Error 404 Personalizado | Diseño Profesional de la Página "No Encontrado"

Esta lección aborda una mejora fundamental en la experiencia de usuario: reemplazar la página de error 404 por defecto de Laravel con vistas personalizadas y amigables, diferenciadas para el área pública de la tienda y el panel de administración.

🌐 Configuración del Error 404 General (Shop)

Se empieza por la implementación del error en el área pública del e-commerce, asegurando que los visitantes no vean la pantalla negra de error de Laravel [02:33]:

  • Ruta Universal de Errores: Laravel simplifica la personalización de errores al reconocer automáticamente cualquier vista creada dentro de la carpeta resources/views/errors/ con el nombre del código de error, como 404.blade.php [04:33].
  • Adaptación de Plantilla: Se extiende el layout principal de la web (layouts.web) y se copia el contenido visual de la página 404 de la plantilla [05:19].
  • Ajuste de Contexto: Para evitar errores de variables, se incluye la declaración de la variable $ajuste (necesaria para el header y footer del layout) directamente en la vista de error mediante un bloque @php [06:39].
  • Volver a Inicio: Se localiza el texto a español y se configura el botón "Volver a la página de inicio" para redirigir a la ruta principal de la tienda [09:02].

🛡️ Diferenciación de Vistas (Admin vs. Shop)

Para mantener la coherencia visual, el error en el panel de administración debe usar el layout del admin, lo cual requiere una lógica de enrutamiento más avanzada:

  • Definición de Fallback: Se utiliza la función Route::fallback() al final del archivo de rutas web.php. Esta función actúa como un comodín que intercepta cualquier ruta no definida que el usuario intente acceder [10:47].
  • Lógica Condicional: Dentro del fallback, se implementa una condición que verifica si la URL contiene el segmento admin [11:02].
    • ✅ Si es Admin: Devuelve la vista 404-admin.blade.php, que utiliza el layout del administrador [11:49].
    • ❌ Si es Web: Devuelve la vista 404.blade.php (la versión de la tienda).
  • Vista de Administración: Se crea la vista 404-admin.blade.php [12:07], se extiende del layout layouts.admin [11:57] y se configura su botón de "Ir al inicio" para redirigir al dashboard del administrador [13:43].

De esta manera, el sistema garantiza que cualquier URL inexistente muestre una página de error profesional y amigable, respetando el diseño de la sección a la que se estaba intentando acceder [14:42].