Saltar al contenido principal

Configura el monitoreo de rendimiento en Capacitor

Aprende a configurar el monitoreo de rendimiento en tu aplicación utilizando Firebase y Sentry para una mayor eficiencia y satisfacción del usuario.

Martin Donadieu

Martin Donadieu

Gerente de contenido

Configura el monitoreo de rendimiento en Capacitor

¿Quieres optimizar tu Capacitor ¿Cómo afecta la aplicación a su rendimiento? Herramientas de monitoreo como Firebase y Sentry pueden ayudarlo a rastrear errores, uso de recursos y tiempos de respuesta, garantizando una experiencia de usuario más suave. Aquí hay un breve resumen:

  • ¿Por qué monitorear el rendimiento?: Identificar errores, optimizar el uso de recursos y mejorar los tiempos de respuesta.
  • Herramientas para usar:
    • Firebase: Datos de rendimiento en tiempo real, monitoreo de red y seguimiento de eventos personalizados.
    • Sentry: Seguimiento de errores detallado, análisis de trazas de pila y notificaciones en tiempo real.
  • Paso de Configuración:
    • Instale Firebase o Sentry SDK.
    • Configure su aplicación para la medición de métricas de rendimiento o errores.
    • Use tableros para analizar y mejorar el rendimiento de la aplicación.

Comparación Rápida:

CaracterísticaFirebaseSentry
Monitoreo en Tiempo RealRetraso levePróximamente instantáneo
Soporte nativoAndroid, iOSAndroid, iOS, Web
Métricas personalizadasBásicoFlexible
Complejidad de integraciónFlujos de trabajo basados en GoogleConfiguración de SDK simple

Para actualizaciones en vivo, integre herramientas como Capgo enviar correcciones de inmediato sin demoras de la tienda de aplicaciones. Comience a monitorear hoy para mejorar la eficiencia y la satisfacción del usuario de su aplicación.

Optimice la salud de la aplicación con Firebase Monitoreo de rendimiento …

Panel de control de la plataforma Firebase

Seleccione una herramienta de monitoreo

Elige una herramienta de monitoreo que se adapte a las necesidades de tu aplicación y a la experiencia de tu equipo. Aquí tienes una visión de Firebase Performance Monitoring y Sentry para ayudarte a tomar una decisión.

Comparación de herramientas

CaracterísticaMonitoreo de rendimiento de FirebaseSentry
Modelo de PreciosNivel gratuito con opciones de pago escalablesNivel gratuito con planes de crecimiento asequibles
Monitoreo en tiempo realInsights de rendimiento con un ligero retrasoMonitoreo cercano a instantáneo
Soporte para plataforma nativaAndroid y iOSAndroid, iOS y web
Complejidad de integraciónFunciona con servicios de GoogleConfiguración simple de SDK
Seguimiento de Eventos PersonalizadosMétricas personalizadas básicasSeguimiento de eventos personalizados flexible
Período de RetenciónLimitado en la versión gratuitaExtendido en todos los planes

Criterios de Selección

Al decidir entre estas herramientas, considere lo siguiente:

  • Tamaño de la Aplicación y TráficoPara aplicaciones que esperan un crecimiento rápido, Firebase es una buena opción. Sentry podría ser más adecuado para implementaciones de menor escala.
  • Requisitos Técnicos: Firebase requiere Servicios de Google Play, lo que lo hace ideal para aplicaciones dentro de ese ecosistema. Sentry funciona de manera independiente, ofreciendo más flexibilidad en varias plataformas.
  • Experiencia del Equipo: Firebase aligns well with teams already familiar with Google tools, while Sentry’s straightforward SDK setup is easier for broader use cases.
  • Restricciones Presupuestarias: Ambos herramientas ofrecen niveles gratuitos, pero compara los costos de escalado de características para asegurarte de que se ajusten a tu presupuesto.
  • Objetivos de Integración: Los Servicios de Firebase se integran de manera fluida con flujos de trabajo basados en Google, mientras que Sentry es particularmente fuerte en el seguimiento de errores.
  • Requisitos Regulatorios: Asegúrate de que la herramienta cumpla con estándares como el RGPD, especialmente si tu aplicación maneja datos de usuario sensibles.
  • Frecuencia de Actualización: Si las actualizaciones frecuentes son críticas, herramientas como Capgo pueden acelerar las correcciones en vivo, complementando tu configuración de monitoreo.

Guía de Configuración de Firebase

Configurar el seguimiento de rendimiento de Firebase en tu Capacitor app requiere unos pocos pasos claros para garantizar el seguimiento preciso de datos.

Install Firebase SDK

Comienza agregando el paquete de Firebase SDK a tu proyecto y configurándolo para tu plataforma(s):

  • Instalar Dependencias de Firebase

Ejecuta los siguientes comandos para instalar los paquetes de Firebase necesarios:

npm install @capgo/capacitor-firebase-performance
npm install firebase
  • Iniciar Firebase

Configura Firebase en tu archivo de aplicación principal:

import { FirebasePerformance } from '@capgo/capacitor-firebase-performance';
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  // Add your Firebase configuration object here
};

initializeApp(firebaseConfig);
await FirebasePerformance.initializePerformance();
  • Agregar Configuraciones de Plataforma

Actualice su archivo para habilitar el seguimiento de rendimiento: capacitor.config.json Configurar el seguimiento de rendimiento

{
  "plugins": {
    "FirebasePerformance": {
      "collectMetrics": true,
      "instrumentationEnabled": true,
      "dataCollectionEnabled": true
    }
  }
}

Puede empezar a rastrear actividades específicas de la aplicación, como consultas de base de datos o solicitudes de red, utilizando el seguimiento de rendimiento de Firebase.

Rastrear Consultas de Base de Datos

  • Monitorear Solicitudes de Red
async function trackDatabaseQuery() {
  const trace = await FirebasePerformance.startTrace({ traceName: 'database_query' });

  // Perform your database operation
  await performDatabaseOperation();

  await FirebasePerformance.stopTrace({ traceName: 'database_query' });
}
  • Rastrear Métricas Personalizadas
await FirebasePerformance.setAttributes({
  traceName: 'api_call',
  attributes: {
    endpoint: '/users',
    method: 'GET'
  }
});
  • Para métricas personalizadas, como rastrear el valor de un carrito de compras:

Una vez implementadas estas trazas, puede revisar los datos recopilados en la Consola de Firebase.

await FirebasePerformance.putMetric({
  traceName: 'checkout_flow',
  metricName: 'cart_value',
  value: 99.99
});

Usar Consola de Firebase

Después de configurar el seguimiento, puede ver y analizar los datos de rendimiento de su aplicación en la Consola de Firebase:

__CAPGO_KEEP_0__

  1. Acceso a datos de rendimiento

    • Inicia sesión en la consola de Firebase.
    • Selecciona tu proyecto.
    • Navega a Monitoreo de rendimiento.
    • Elige tu aplicación desde el menú desplegable.
  2. Monitorea métricas clave

La consola proporciona información sobre varios indicadores de rendimiento, incluyendo:

  • Tiempo de inicio de la aplicación
  • Tasa de éxito de solicitudes de red
  • Tiempo de renderizado de pantalla
  • Resultados de trazas personalizadas
  1. Configuración de Informes Personalizados

Crea informes personalizados para analizar aspectos específicos del rendimiento de tu aplicación, como:

  • Diferencias de rendimiento por ubicación
  • Métricas basadas en tipo de dispositivo
  • Efectos de condiciones de red
  • Patrones en trazas personalizadas

Utiliza estas herramientas para identificar y abordar efectivamente los puntos de congestión de rendimiento.

Sentry Configuración de seguimiento de errores

Panel de seguimiento de errores de Sentry

Firebase maneja métricas de rendimiento, pero Sentry se enfoca en atrapar y diagnosticar errores. Juntos, te brindan una configuración de monitoreo sólida.

Instala Sentry SDK

Comience instalando los paquetes de Sentry requeridos:

npm install @sentry/capacitor
# Add the Sentry package for your specific framework

Una vez instalados, configure Sentry en el punto de entrada de su aplicación.

Inicie Sentry

Configure el seguimiento de errores en el punto de entrada de su aplicación utilizando la siguiente configuración:

import * as Sentry from "@sentry/capacitor";
import { BrowserTracing } from "@sentry/browser";

Sentry.init({
    dsn: "your-project-dsn",
    integrations: [new BrowserTracing()],
    tracesSampleRate: 0.2,
    environment: "production",
    release: "app-version@" + process.env.VERSION,
    dist: process.env.BUILD_NUMBER,
    debug: false
});

Esta configuración incluye el seguimiento de versiones de la aplicación, lo que vincula errores a versiones específicas de la aplicación.

Configure el seguimiento de errores

Puede personalizar el seguimiento de errores aún más utilizando límites de errores personalizados y bloques try-catch.

Límites de errores personalizados:

class ErrorBoundary extends React.Component {
    componentDidCatch(error, errorInfo) {
        Sentry.captureException(error, { extra: errorInfo });
    }
}

Seguimiento de errores específicos:

try {
    riskyOperation();
} catch (error) {
    Sentry.captureException(error, {
        tags: { operation: "data_sync", severity: "critical" },
        extra: { userId: currentUser.id, timestamp: new Date().toISOString() }
    });
}

Monitoreo de rendimiento:

const transaction = Sentry.startTransaction({
    name: "API Request",
    op: "http.request"
});

try {
    await makeApiCall();
} finally {
    transaction.finish();
}

Estos métodos garantizan que su aplicación registre errores de manera efectiva, lo que los hace más fáciles de rastrear y resolver a través de Sentry.

Utilice la consola de Sentry

La consola de Sentry proporciona herramientas para investigar errores y comprenderlos mejor:

  • Monitoreo en tiempo real: Ver la frecuencia de errores, el estado de resolución y los usuarios afectados.
  • Análisis de errores: Revisar las trazas de pila, agrupar errores similares y filtrar por entorno.
  • Alertas: Establecer umbrales de errores, configurar opciones de notificación y crear reglas de alerta personalizadas.

Esta consola hace que diagnosticar y solucionar problemas sea sencillo.

Prácticas recomendadas de monitoreo

Centrarse en métricas clave

Capgo’s análisis de 750 aplicaciones de producción [1] destaca las métricas clave a monitorear:

  • Tasa de Éxito de Actualización: Dirígete a al menos el 82%.
  • Velocidad de Actualización: La CDN global debería entregar 5 MB en 114 ms.
  • Adopción de Usuarios: El 95% de los usuarios deberían actualizar dentro de 24 horas.
  • API Tiempo de Respuesta: Manténlo bajo los 500 ms (la media global es 434 ms).

Configura alertas para detectar rápidamente cualquier desviación en estos indicadores.

Crear Reglas de Alerta Efectivas

Aquí tienes un ejemplo de cómo configurar alertas para el monitoreo de rendimiento:

// Example alert configuration
{
    performance: {
        apiLatency: {
            threshold: 1000, // ms
            period: "5m",
            condition: "above"
        },
        errorRate: {
            threshold: 1.0, // percentage
            period: "15m",
            condition: "above"
        },
        updateSuccess: {
            threshold: 75, // percentage
            period: "1h",
            condition: "below"
        }
    }
}

Sigue Monitoreando y Ajustando

Una vez que sus alertas estén en su lugar, se centren en la supervisión continua y la refinación:

  • Verificaciones de Rendimiento Permanentes: Revisar las tasas de éxito de actualizaciones por región, analizar tendencias de errores para diferentes versiones de la aplicación y monitorear los tiempos de respuesta de API durante las horas pico.

  • Implementación Etapada de Actualizaciones: Comience con el 10% de los usuarios durante las primeras 24 horas. Si todo funciona correctamente, aumente a 50% y finalice la implementación después de 48 horas de rendimiento estable.

  • Optimización Continua: Investigue las actualizaciones fallidas, identifique los puntos finales de API que funcionan lentamente y evalúe la participación de los usuarios después de las actualizaciones para garantizar mejoras sostenidas.

Capgo Actualizaciones y Monitoreo

Capgo Interfaz de la Consola de Actualizaciones en Vivo

Características de Capgo

El sistema de actualizaciones en vivo de Capgo, probado en 750 aplicaciones de producción, entrega paquetes de 5MB en solo 114ms [1].

Características clave incluyen:

  • Análisis en tiempo real: Supervisa las tasas de éxito de actualizaciones en tiempo real, que actualmente promedian un 82% a nivel mundial [1].
  • Implementación Instantánea: Envía correcciones críticas sin esperar aprobaciones de las tiendas de aplicaciones.
  • Actualizaciones Parciales: Descarga solo los componentes modificados, ahorrando ancho de banda y tiempo.
  • Control de Versiones: Realiza actualizaciones rápidas que negativamente impactan el rendimiento.

Este sistema se integra fácilmente con herramientas de monitoreo existentes, garantizando una operación suave.

“We rolled out Capgo OTA updates in production for our user base of +5000. We’re seeing very smooth operation almost all our users are upto date within minutes of the OTA being deployed to @Capgo.” - colenso [1]

Combina herramientas con Capgo

Capgo’s analytics permit despliegues escalonados, ayudando a los equipos a asegurarse de la estabilidad antes de un lanzamiento completo.

Aspecto de MonitoreoCapgo IntegraciónHerramientas Adicionales
Seguimiento de ErroresMonitoreo de Errores IntegradoPare con Sentry para obtener detalles de las trazas de pila
Métricas de RendimientoRastrea las tasas de éxito de actualizacionesUtilice Firebase para datos de interacción de usuarios
Tiempo de RespuestaAPI monitoreo de respuestaMejora con eventos de tiempo de Firebase personalizados

Para configurar el sistema de canales de Capgo de manera efectiva:

  • Despliegue actualizaciones a los primeros probadores de beta.
  • Utilice Capgo’s analytics para monitorear métricas de rendimiento.
  • Amplíe gradualmente el lanzamiento a la base de usuarios más amplia.

“We practice agile development and @Capgo is mission-critical in delivering continuously to our users!” - Rodrigo Mantica [1]

“Practicamos el desarrollo ágil y @Capgo es crucial para entregar continuamente a nuestros usuarios!” - Rodrigo Mantica

Con 23,5M actualizaciones entregadas globalmente, __CAPGO_KEEP_0__’s dashboard en tiempo real proporciona claras perspectivas, capacitando a los equipos para tomar decisiones informadas sobre actualizaciones y mejoras de rendimiento.

Pasos siguientes

Puntos principales

Mantener un ojo en las métricas clave es crucial para un monitoreo de rendimiento efectivo. Utilice herramientas para rastrear estos indicadores críticos:Tipo de métricaHerramientas Recomendadas
Rendimiento de la AplicaciónTiempo de respuesta, erroresDesempeño de Firebase
Seguimiento de ErroresTasas de errores, trazas de pilaSentry
Actualización de AnálisisÉxito de DistribuciónCapgo Análisis

Explora más a fondo estas métricas y herramientas a través de los recursos listados a continuación.

Saber Más

Las herramientas y prácticas de monitoreo de rendimiento siempre están avanzando. Manténgase al día explorando estas guías y estrategias:

Documentación oficial:

  • Documentación de monitoreo de rendimiento de Firebase
  • Guía de integración de Sentry’s Capacitor
  • Capacitor’s guías oficiales de optimización de rendimiento

Implementación avanzadaExplora Capgo’s sistema de análisis, exitosamente utilizado en más de 750 aplicaciones de producción [1]. Su documentación proporciona información sobre patrones de monitoreo y estrategias de actualización en vivo que funcionan de manera fluida con otras herramientas de seguimiento de rendimiento.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando haya un error en la capa web, envíe la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen en el camino de revisión normal.

Comience ahora

Últimas noticias de nuestro Blog

Capgo le da las mejores perspectivas que necesita para crear una aplicación móvil verdaderamente profesional.