Componentes de límite de errores
Creación de un componente contenedor ErrorBoundary con slot de reserva y visualización del error
Componentes de límite de errores es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué es un límite de errores
Un límite de errores es un componente reutilizable que envuelve una parte de la interfaz, captura los errores que se producen en su interior y muestra una alternativa en lugar de permitir que falle toda la aplicación.
La idea principal
El límite mantiene un indicador hasError. Mientras sea false, renderiza sus elementos secundarios; cuando captura un error, cambia a true y renderiza una alternativa.
import { ref } from "vue";
const hasError = ref(false);Capturar el error
Use onErrorCaptured para establecer el indicador y detener la propagación, de modo que el límite gestione por completo el fallo.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Almacenar los detalles del error
Capture también el error en sí para que la alternativa pueda mostrar un mensaje o pueda ofrecer un reintento.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});La estructura de la plantilla
Renderice el slot predeterminado (los elementos secundarios) cuando todo funcione correctamente y un slot de reserva cuando se produzca un error.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>El slot predeterminado muestra los elementos secundarios
El slot predeterminado contiene la interfaz protegida. En condiciones normales, el límite es invisible: simplemente deja pasar los elementos secundarios.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>El slot de reserva se muestra cuando hay un error
Proporcione un slot con nombre fallback para la interfaz de error. Puede recibir el error mediante una prop de slot con ámbito.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Agregar un reintento
Exponga un mecanismo de restablecimiento para que los usuarios puedan recuperarse. Un método elimina el indicador y vuelve a renderizar los elementos secundarios.
function reset() {
hasError.value = false;
error.value = null;
}Reintentar en la alternativa
Pase reset mediante el slot con ámbito para que la alternativa pueda ofrecer un botón para volver a intentarlo.
<slot v-else name="fallback" :error="error" :reset="reset" />Contenido alternativo predeterminado
Proporcione al slot alternativo un contenido predeterminado adecuado para que el límite funcione incluso sin recibir un contenido alternativo personalizado.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Por qué son importantes los límites
Sin límites, un widget que falle puede bloquear una vista completa. Los límites aíslan los fallos para que el resto de la aplicación siga funcionando: un patrón clave de resiliencia.
Comprobación rápida
¿Cómo decide un límite de errores qué debe renderizar?
Recapitulación
Ha construido un límite de errores: una ref hasError, un onErrorCaptured que la establece y devuelve false, un slot predeterminado para los elementos hijos y un slot alternativo (con el error y un reset) que se muestra cuando ocurre un error, aislando los fallos del resto de la aplicación.
Preguntas frecuentes
¿La lección «Componentes de límite de errores» es gratis?
Sí — el texto completo de «Componentes de límite de errores» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes de límite de errores»?
Creación de un componente contenedor ErrorBoundary con slot de reserva y visualización del error Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 2 de 4.
¿Cuánto tiempo toma la lección «Componentes de límite de errores»?
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 Vue Academy?
Sí. Cada lección de Vue 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
- Hook de ciclo de vida onErrorCaptured
- Componentes de límite de errores
- app.config.errorHandler para errores globales
- Gestión de errores asíncronos en composables