app.config.errorHandler para errores globales
Manejador global de errores, registro en Sentry/Datadog y visualización de errores según el entorno
app.config.errorHandler para errores globales es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.
El manejador global de errores
Vue expone app.config.errorHandler, una única función que captura los errores de cualquier parte de la aplicación que no se hayan gestionado localmente. Es su última línea de defensa.
La firma del manejador
Recibe los mismos tres argumentos que onErrorCaptured: el error, la instancia del componente y una cadena de información.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Configuración
Configúrelo en la instancia de la aplicación, en el archivo de entrada, antes de montar la aplicación.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Captura de errores no gestionados
Captura los errores del renderizado de componentes, los hooks del ciclo de vida, los watchers y los manejadores de eventos de toda la aplicación, incluidos los que se propagaron más allá de los hooks locales onErrorCaptured.
Informes a Sentry en producción
En producción, reenvíe los errores a un servicio de monitorización como Sentry para conocer los fallos que encuentran los usuarios.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Registro detallado en desarrollo
Durante el desarrollo, registre información más detallada en la consola para depurar con rapidez.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Ramificación según el entorno
Un manejador sólido hace ambas cosas: informa en producción y registra información detallada en desarrollo, todo en una sola función.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Errores asíncronos
El manejador global también captura los errores lanzados dentro de hooks del ciclo de vida y watchers asíncronos. Para las promesas rechazadas no gestionadas directamente fuera de Vue, añada también un listener de window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Relación con los límites
Los límites locales y onErrorCaptured gestionan y contienen los errores cerca del lugar donde ocurren; el manejador global es la red de seguridad para todo lo que se escapa. Use ambos conjuntamente.
No los ignore silenciosamente
Evite un manejador vacío que oculte los errores. Como mínimo, regístrelos o notifíquelos siempre: los fallos silenciosos vuelven invisibles los errores y dificultan mucho su localización.
Añadir contexto
Enriquezca los informes con la ruta actual, el identificador del usuario o la versión de la aplicación para agilizar el análisis de los errores en producción.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Comprobación rápida
¿Qué gestiona app.config.errorHandler?
Recapitulación
Ha aprendido que app.config.errorHandler = (err, instance, info) => {} es el capturador global: informa a Sentry en producción, registra información detallada durante el desarrollo y se combina con límites locales para lograr una gestión de errores por capas y resiliente.
Preguntas frecuentes
¿La lección «app.config.errorHandler para errores globales» es gratis?
Sí — el texto completo de «app.config.errorHandler para errores globales» 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 «app.config.errorHandler para errores globales»?
Manejador global de errores, registro en Sentry/Datadog y visualización de errores según el entorno 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 3 de 4.
¿Cuánto tiempo toma la lección «app.config.errorHandler para errores globales»?
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