Hook de ciclo de vida onErrorCaptured
Captura de errores de componentes secundarios, devolución de false para detener la propagación y objetos de error
Hook de ciclo de vida onErrorCaptured es una lección gratuita de Vue 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 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.
Captura de errores en componentes
Vue proporciona el hook del ciclo de vida onErrorCaptured para capturar errores lanzados por componentes descendientes. Esto permite que un componente padre intercepte los fallos de su subárbol.
La firma del hook
onErrorCaptured recibe tres argumentos: el error, la instancia del componente que lo produjo y una cadena info que describe dónde ocurrió.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});El argumento err
El primer argumento es el objeto de error lanzado, normalmente una instancia de Error con un mensaje y una pila que puede registrar o mostrar.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});El argumento instance
El segundo argumento es la instancia del componente que generó el error, útil para depurar o añadir contexto a sus informes.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});El argumento info
El tercer argumento es una cadena que indica qué ciclo de vida u operación activó el error, por ejemplo, "render function", "setup function" o un hook específico.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Solo errores de componentes descendientes
Es importante señalar que onErrorCaptured captura errores de los descendientes, no del propio setup ni del renderizado del componente. Coloque el hook en un antecesor del código que desea proteger.
Detener la propagación
De forma predeterminada, un error capturado sigue propagándose hacia los controladores de los componentes antecesores y el controlador global. Devuelva false para impedir que continúe.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Por qué detener la propagación
Devolver false contiene el error localmente, lo que resulta útil cuando este componente gestiona por completo el fallo (por ejemplo, muestra una alternativa) y no desea que se active también el controlador global.
Dejar que se propague
Si desea que los controladores de nivel superior (o el global) también vean el error, no devuelva false. De este modo, el hook lo registra localmente y permite que el error continúe propagándose.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Un uso práctico
Un uso común es combinar el registro con un indicador de recuperación. Establezca un indicador reactivo para mostrar una alternativa mientras informa del error con fines de diagnóstico.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Consideraciones asíncronas
onErrorCaptured captura errores del renderizado, del ciclo de vida y de los controladores síncronos de los descendientes. Algunos errores asíncronos (rechazos de promesas no capturados) se gestionan mejor a nivel global; esto se aborda más adelante.
Comprobación rápida
¿Qué hace devolver false desde onErrorCaptured?
Resumen
Ha aprendido que onErrorCaptured((err, instance, info)) captura errores de componentes descendientes. La cadena info proporciona contexto del ciclo de vida y devolver false detiene la propagación para que el componente pueda gestionar el fallo localmente.
Preguntas frecuentes
¿La lección «Hook de ciclo de vida onErrorCaptured» es gratis?
Sí — el texto completo de «Hook de ciclo de vida onErrorCaptured» 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 «Hook de ciclo de vida onErrorCaptured»?
Captura de errores de componentes secundarios, devolución de false para detener la propagación y objetos de 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 1 de 4.
¿Cuánto tiempo toma la lección «Hook de ciclo de vida onErrorCaptured»?
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