Vue Academy · Lección

Supervisión y mantenimiento

Supervise las aplicaciones en producción y manténgalas en buen estado.

Supervisión y mantenimiento es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. 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 3 lecciones en total.

La vida después del lanzamiento

Publicar la aplicación es el comienzo, no el final. Una aplicación saludable necesita supervisión continua para detectar errores, analítica para comprender el uso y mantenimiento periódico para mantenerse segura y actualizada.

¿Por qué hacer seguimiento de errores?

Los errores que ocurren en los dispositivos de los usuarios son invisibles para usted a menos que los recopile. El seguimiento de errores captura los fallos en producción para que pueda corregir los problemas que encuentran los usuarios, a menudo antes de que los notifiquen.

Sentry para el seguimiento de errores

Sentry es un servicio de seguimiento de errores muy utilizado. Instale su SDK e inicialícelo cuando se inicie la aplicación para capturar automáticamente los errores no controlados.

npm install @sentry/vue

Inicializar Sentry

Inicialice Sentry con el DSN de su proyecto y la instancia de la aplicación Vue para que pueda integrarse con el manejo de errores de Vue.

import * as Sentry from "@sentry/vue"
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
Sentry.init({
  app,
  dsn: "https://example@sentry.io/123"
})
app.mount("#app")

Capturar errores personalizados

Además de la captura automática, puede notificar manualmente los errores gestionados para obtener contexto sobre los problemas que su código ya captura.

try {
  riskyOperation()
} catch (err) {
  Sentry.captureException(err)
}

Añadir analítica

La analítica le indica cómo utilizan realmente los usuarios su aplicación: qué páginas visitan, en qué hacen clic y dónde abandonan. Estos datos orientan las decisiones sobre el producto.

Seguimiento de vistas de página

Con Vue Router, puede enviar un evento de vista de página en cada navegación mediante un hook del router.

router.afterEach((to) => {
  trackPageView(to.fullPath)
})

Mantener actualizadas las dependencias

Los paquetes obsoletos acumulan errores y vulnerabilidades de seguridad. Compruebe periódicamente si hay actualizaciones y aplíquelas realizando pruebas durante el proceso.

npm outdated
npm update

Auditar vulnerabilidades

Ejecute una auditoría de seguridad para encontrar vulnerabilidades conocidas en el árbol de dependencias y aplique las correcciones disponibles.

npm audit
npm audit fix

Supervisar el rendimiento en producción

Los usuarios reales tienen dispositivos y redes variados. Use la supervisión de usuarios reales (a menudo integrada en las herramientas de errores) y métricas como el tiempo de carga para garantizar que el rendimiento siga siendo bueno después del lanzamiento.

Gestionar cambios incompatibles

Las actualizaciones de versiones principales pueden introducir cambios incompatibles. Lea el registro de cambios y la guía de migración, actualice en una rama, ejecute su conjunto de pruebas y corrija los problemas antes de fusionar. Las pruebas hacen que este proceso sea seguro.

Comprobación rápida

Compruebe sus conocimientos sobre supervisión y mantenimiento.

Recapitulación

Después del lanzamiento, supervise la aplicación mediante el seguimiento de errores (Sentry), comprenda el uso mediante la analítica, mantenga los paquetes actualizados con npm outdated y npm audit, y vigile el rendimiento en producción. Gestione con cuidado los cambios incompatibles mediante su conjunto de pruebas. A continuación, explorará patrones avanzados y buenas prácticas.

Preguntas frecuentes

¿La lección «Supervisión y mantenimiento» es gratis?

Sí — el texto completo de «Supervisión y mantenimiento» 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 3 lecciones en total.

¿Qué aprenderé en «Supervisión y mantenimiento»?

Supervise las aplicaciones en producción y manténgalas en buen estado. 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 3.

¿Cuánto tiempo toma la lección «Supervisión y mantenimiento»?

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

← Volver a Vue Academy