Vue 55: Manejo de Errores con onErrorCaptured
easy⏱ 5 mincoursevue
Capturando el error de render de un hijo
onErrorCaptured(hook) registra un hook en la instancia de un componente; cuando un descendiente lanza un error durante el render, en un watcher, o en un hook de ciclo de vida, Vue recorre el árbol de componentes hacia arriba llamando a cada hook onErrorCaptured registrado hasta que alguno retorna false, lo cual marca el error como manejado y detiene su propagación (si no, sigue subiendo y termina en app.config.errorHandler o en la consola como no manejado).
import { onErrorCaptured, ref } from 'vue';
export default {
setup() {
const error = ref(null);
onErrorCaptured((err, instance, info) => {
error.value = err.message;
return false; // stop propagation, render a fallback instead
});
return { error };
},
};
Respaldo global: app.config.errorHandler
onErrorCaptured es un límite de errores local (por subárbol); para un catch-all a nivel de toda la app (por ejemplo, para reportar cada error no capturado a un servicio de monitoreo) también puedes definir una sola vez app.config.errorHandler = (err, instance, info) => { ... } sobre la instancia de la app.
Este es el error boundary de Vue
Comparado con los error boundaries basados en clases de React (static getDerivedStateFromError / componentDidCatch), onErrorCaptured es el equivalente directo en Vue: capturar, contener, renderizar un respaldo, y mantener con vida el resto de la app.