Manejo de Errores y Excepciones en SvelteKit: Creación de Páginas Robustas y Amigables

Introducción al Manejo de Errores en SvelteKit 🛡️

El manejo de errores es una de las piezas fundamentales al construir aplicaciones web modernas y profesionales. Incluso con las mejores prácticas y pruebas exhaustivas, las cosas pueden fallar: un recurso puede no encontrarse, una base de datos puede dejar de responder temporalmente, o un usuario puede intentar acceder a una ruta no autorizada.

SvelteKit aborda el manejo de errores de una manera elegante, integrada y sumamente eficiente, tanto en el lado del servidor como en el navegador. A lo largo de este tutorial, exploraremos cómo SvelteKit captura y propaga los errores, cómo utilizar la función error() de @sveltejs/kit, y cómo diseñar páginas de error personalizadas que mantengan la confianza del usuario.

Arquitectura de Errores en SvelteKit 🏗️

Para entender cómo SvelteKit gestiona los errores, primero debemos comprender el ciclo de vida de una petición. Cuando un usuario solicita una página o realiza una carga de datos mediante archivos como +page.js, +page.server.js o +layout.server.js, pueden ocurrir fallos imprevistos.

SvelteKit clasifica los errores principalmente en dos tipos:

1. Errores esperados (Expected errors): Son aquellos que anticipamos y lanzamos intencionalmente utilizando la función error(). Por ejemplo, cuando un ID de producto no existe en la base de datos (Error 404) o cuando el usuario no está autenticado (Error 401).
2. Errores inesperados (Unexpected errors): Son excepciones de JavaScript no controladas, fallos de red imprevistos o errores de sintaxis (Error 500).

Lanzamiento de Errores Controlados con la Función error() 🚨

Cuando detectamos una condición anómala dentro de nuestras funciones de carga (load), podemos interrumpir la ejecución normal y enviar un código de estado HTTP junto con un mensaje descriptivo utilizando el módulo @sveltejs/kit.

Veamos un ejemplo práctico en un archivo +page.server.js para la página de detalle de un producto:

import { error } from '@sveltejs/kit';

export async function load({ params }) {
  const productId = params.id;
  const product = await fetchProductById(productId);

  if (!product) {
    throw error(404, {
      message: 'El producto que buscas no existe o ha sido eliminado.',
      code: 'PRODUCT_NOT_FOUND'
    });
  }

  if (!product.isAvailable) {
    throw error(403, 'Este producto no está disponible actualmente.');
  }

  return {
    product
  };
}

Creación de la Página de Error Global (+error.svelte) 🎨

Por defecto, SvelteKit incluye una página de error genérica básica. Sin embargo, para ofrecer una experiencia de usuario coherente con la identidad de nuestra marca, debemos crear nuestro propio componente de error en la raíz de nuestro directorio src/routes/.

El archivo se llama exactamente +error.svelte. SvelteKit inyecta automáticamente una propiedad global llamada page que contiene información detallada sobre el error actual.

Implementemos un diseño profesional y amigable:

<script>
  import { page } from '$app/stores';
</script>

<svelte:head>
  <title>Error {$page.status} - Mi Aplicación</title>
</svelte:head>

<main class="error-container">
  <div class="error-card">
    <span class="badge red">{$page.status}</span>
    <h1>¡Vaya! Algo ha salido mal</h1>
    
    <p class="error-message">
      {$page.error?.message || 'Ha ocurrido un error inesperado en el servidor.'}
    </p>

    {#if $page.error?.code}
      <p class="error-code">Código de error interno: <code>{$page.error.code}</code></p>
    {/if}

    <div class="actions">
      <a href="/" class="btn-primary">Volver al Inicio</a>
      <button class="btn-secondary" on:click={() => window.location.reload()}>
        Intentar de nuevo
      </button>
    </div>
  </div>
</main>

<style>
  .error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 1rem;
    font-family: system-ui, sans-serif;
  }
  .error-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    max-width: 500px;
    width: 100%;
  }
  h1 {
    margin: 1rem 0 0.5rem 0;
    color: #1a202c;
  }
  .error-message {
    color: #4a5568;
    margin-bottom: 1.5rem;
  }
  .actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .btn-primary, .btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
  }
  .btn-primary {
    background: #3182ce;
    color: white;
  }
  .btn-secondary {
    background: #edf2f7;
    color: #2d3748;
    border: none;
  }
</style>

Gestión de Errores Específicos por Subrutas 📂

Una de las características más potentes de SvelteKit es su capacidad de herencia y proximidad en el enrutamiento. No estás limitado a tener una única página de error global.

Si creas un archivo +error.svelte dentro de una subcarpeta (por ejemplo, src/routes/dashboard/+error.svelte), SvelteKit utilizará ese componente específico para cualquier error que ocurra dentro de la sección del panel de control y sus rutas hijas, permitiéndote ofrecer contextos visuales totalmente adaptados.

Buenas Prácticas y Consejos Avanzados 🌟

Para cerrar nuestro tutorial, recopilamos las mejores prácticas recomendadas por la comunidad de Svelte para mantener aplicaciones robustas:

• Nunca expongas información sensible: Evita mostrar trazas de pila (stack traces) completas o credenciales de bases de datos en los mensajes de error visibles para el usuario final.
• Registra los errores en el servidor: Utiliza herramientas de monitoreo como Sentry, LogRocket o Datadog dentro de tus hooks de SvelteKit (hooks.server.js) para capturar errores 500 inesperados.
• Mejora la UX con reintentos automáticos: En operaciones de red propensas a fallos intermitentes, implementa lógica de reintento (retry) antes de lanzar la excepción al usuario.

Conclusión 🏁

El manejo de errores en SvelteKit es flexible, intuitivo y está profundamente integrado en su arquitectura basada en archivos. Al dominar el uso de la función error() y la creación de componentes +error.svelte, garantizas que tu aplicación no solo sea funcional, sino también resiliente y profesional.