+error.svelte para páginas de error personalizadas
Cree interfaces de error personalizadas que muestren el código de estado y el mensaje
+error.svelte para páginas de error personalizadas es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Interfaz de error personalizada
Cree +error.svelte en cualquier carpeta de rutas para crear una página de error adaptada.
Página de error raíz
src/routes/+error.svelte captura los errores que no haya capturado un límite de error anidado.
<!-- +error.svelte -->
<script>
import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>Acceder al estado
$page.status proporciona el estado HTTP (404, 500, etc.).
Acceder al mensaje
$page.error.message proporciona el mensaje que pasó a error() o el mensaje genérico de handleError.
Diferencias del prerenderizado
Las páginas de error estáticas pueden prerenderizarse; las dinámicas se renderizan en cada solicitud.
Límites anidados
Coloque +error.svelte en subcarpetas para limitar la interfaz de error a secciones específicas.
Mensajes claros
Adapte el mensaje: un 404 debería sugerir navegar a otro lugar, mientras que un 500 debería disculparse y enlazar con soporte.
ID de seguimiento
Muestre un ID de seguimiento devuelto por handleError para que los usuarios puedan indicárselo al equipo de soporte.
Enlaces de recuperación
Ofrezca siempre una forma de volver: un enlace al inicio, un cuadro de búsqueda o un botón para recargar.
Marca
Diseñe la página de error como el resto de la aplicación; forma parte de la experiencia del usuario.
Actualizaciones reactivas
$page se actualiza si el usuario navega dentro del contexto del error, por lo que la interfaz se mantiene actualizada.
Comprobación rápida
¿Cómo se accede al estado del error?
Resumen
Coloque +error.svelte en cada carpeta para delimitar las interfaces de error. Lea $page.status y $page.error.
Preguntas frecuentes
¿La lección «+error.svelte para páginas de error personalizadas» es gratis?
Sí — el texto completo de «+error.svelte para páginas de error personalizadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «+error.svelte para páginas de error personalizadas»?
Cree interfaces de error personalizadas que muestren el código de estado y el mensaje Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «+error.svelte para páginas de error personalizadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- +error.svelte para páginas de error personalizadas
- Errores esperados e inesperados
- Asistentes error() y redirect()
- Páginas de error en layouts anidados