Gestión de Errores y Elementos Especiales en Svelte 5

Aislamiento de Fallos con <svelte:boundary>

Introducido en la versión 5.3.0, este componente opera como un filtro de contención para excepciones inesperadas. Cuando se genera una ruptura durante la etapa de renderizado de sus descendientes, en la sincronización del estado o dentro de bloques $effect, el árbol defectuoso se reemplaza inmediatamente por una interfaz recuperable sin detener la ejecución de la aplicación.

Tenga en cuenta que las interupciones originadas dentro de controladores de eventos tradicionales nunca serán interceptadas por este sistema.

Parametrización Obligatoria

Para activar el comportamiento de resiliencia, debe inyectarse al menos uno de los siguientes descriptores:

  • failed: Fragmento condicional que monta UI alternativa y expone reset(). Su misión es limpiar la instancia fallida y forzar un reintento.
  • onerror: Callback asíncrono que captura (error, restaurar). Recomendado para conectar con sistemas de telemetría o gestionar variables globales distantes.
<svelte:boundary onerror={(e, r) => enviarMetrica(e, r)}>
  <WidgetInestable />

  {#snippet interrupcion(err, intentarNuevo)}
    <div class="zona-fallo">
      <p>Procesamiento interrumpido.</p>
      <button onclick={intentarNuevo}>Restablecer vista</button>
    </div>
  {/snippet}
</svelte:boundary>

Si la ejecución de onerror llegara a generar otra interrupción o se resolviera la promesa con rechazo, el fallo escalará jerárquicamente hasta localizar un límite superior activo.

Abstracción Nativa del Entorno Browser

El framework provee nodos dedicados a orquestar el ciclo de vida del navegador sin requerir desmontajes manuales de listeners ni validaciones null para SSR.

<svelte:window>

Registra oyentes directamente sobre el objeto global window. Su declaración está restringida estrictamente a la raíz del componente.

<svelte:window
  onresize={recalcularGrid}
  bind:innerHeight={dimensionVertical}>
</svelte:window>

Soporta sincronización bidireccional con propiedades como scrollX, scrollY, devicePixelRatio y outerWidth. Exceptuando las coordenadas de desplazamiento, todas operan en modo solo-lectura. regarding scrollX/Y: establecer un valor inicial nunca provocará movimiento automático por estándares de accesibilidad. Solo las mutaciones posteriores activarán el desplazamiento. Para navegación programática al iniciar, prefiera $effect(() => scrollTo(x, y)).

<svelte:document>

Amplía la lógica apuntando al contexto document. Ideal para rastrear fases que no dependen de la ventana principal, como cambios en el estado de visibilidad o bloqueo de puntero.

<svelte:document
  onvisibilitychange={gestionarEstadoTab}>
</svelte:document>

Vinculaciones disponibles: activeElement, fullscreenElement, pointerLockElement y visibilityState. Operan exclusivamente bajo restricciones de lectura.

<svelte:body>

Habilita la suscripción de observadores en document.body, simplificando el seguimiento de trayectorias del cursor como mouseenter o mouseleave que habitualmente exigen manipulaciones directas del DOM.

<svelte:body
  onmouseenter={activarModoFoco}
  onmouseleave={limpiarModoFoco}>
</svelte:body>

Inserción Estructurada en el Encabezado

<svelte:head>

Permite alojar metadatos, referencias y guiones directamente en el tag <head> del HTML generado. En entornos SSR, este bloque se separa lógicamente del cuerpo para permitir su extracción y reutilización independiente.

<svelte:head>
  <title>Indexación Optimizada</title>
  <meta name="robots" content="index,follow" />
  <link rel="canonical" href="https://app.ejemplo.com" />
</svelte:head>

Al igual que los elementos anteriores, exige posicionamiento exclusivo en la capa superior del archivo.

Evaluación Polimórfica de Etiquetas

<svelte:element>

Cuando la estructura del marcado depende de fuentes externas o gestores de contenidos, este nodo evalúa una expresión y proyecciona la etiqueta correspondiente. Hereda automáticamente atributos y escuchas inyectadas.

La única directiva válida es bind:this, dado que los mecanismos internos de Svelte no interoperan con nodos genéricos estándar.

<svelte:element this={seleccionTipo} bind:this={nodoRef}>
  <p>Renderizado adaptativo</p>
</svelte:element>

Consideraciones críticas:

  • Valores undefined o null suprimen completamente el renderizado.
  • Usar etiquetas sin cierre (br, img) junto a contenidos hijo disparará un crash en desarrollo.
  • Si el compilador no logra inferir el espacio de nombres, sobrescríbalo manualmente con xmlns.

Control Granular del Motor de Traducción

<svelte:options>

Establece parámetros que modifican la fase de compilación previa al ensamblaje, sustituyendo configuraciones centralizadas antiguas.

<svelte:options
  runes={true}
  namespace="svg"
  css="injected"
  customElement="grafico-interactivo">
</svelte:options>

Directrices soportadas:

  • runes: Fija explícitamente el motor de reactividad moderna (true) o compatibilidad clásica (false).
  • namespace: Contexto gráfico base: html, svg o mathml.
  • css: Estrategia de encapsulamiento. "injected" obliga al parseo interno vía runtime JS en navegador o etiquetas style embebidas en SSR.
  • customElement: Convierte el bloque en Web Component nativo. Acepta identificadores string o payload de extensión completa.

Aviso sobre legado: Las banderas immutable y accessors corresponden a arquitecturas predecessoras. Permanecen marcadas como deprecadas y generan rechazo inmediato cuando runes={true} está activo.

Etiquetas: svelte-5 svelte-boundary svelte-window svelte-document svelte-body

Publicado el 9-15 10:59

Etiquetas populares

©2026 Friki Work