Configurer le monitoring des performances dans Capacitor

Vous voulez optimiser la Capacitor performance de votre app ? Les outils de monitoring comme Firebase et Sentry peut vous aider à suivre les crashs, l’utilisation des ressources et les temps de réponse, pour garantir une expérience utilisateur plus fluide. Voici un aperçu rapide :

• Pourquoi surveiller les performances: identifier les crashs, optimiser l’utilisation des ressources et améliorer les temps de réponse.
• Outils à utiliser:
  • Firebase: données de performance en temps réel, surveillance du réseau et suivi d’événements personnalisés via @capgo/capacitor-firebase-performance et @capgo/capacitor-firebase-crashlytics.
  • Sentry: Suivi détaillé des erreurs, analyse des stack traces et notifications en temps réel.
• Setup Steps:
  • Installez Firebase ou Sentry SDK.
  • Configurez votre app pour suivre les métriques de performance ou les erreurs.
  • Utilisez des dashboards pour analyser et améliorer les performances de l'app.

Comparaison rapide:

Pour les live updates, intégrez des outils comme Capgo to push fixes instantly without app store delays. Start monitoring today to enhance your app’s efficiency and user satisfaction.

Optimisez la santé de votre application avec Firebase Surveillance des performances …

Choisir un outil de monitoring

Choisissez un outil de monitoring adapté aux besoins de votre application et à l’expertise de votre équipe. Voici un comparatif entre Firebase Performance Monitoring et Sentry pour vous aider à décider.

Comparatif des outils

Critères de sélection

Pour choisir entre ces outils, tenez compte des points suivants :

• Taille de l'app et trafic: Pour les apps en croissance rapide, Firebase est un choix solide. Sentry peut mieux convenir à des implémentations à plus petite échelle.
• Exigences techniques: Firebase nécessite Google Play Services, ce qui le rend idéal pour les apps de cet écosystème. Sentry fonctionne indépendamment et offre plus de flexibilité d'une plateforme à l'autre.
• Expérience d’équipe: Firebase s’adapte bien aux équipes déjà familières des outils Google, tandis que la configuration SDK simple de Sentry est plus facile pour des cas d’usage plus larges.
• Contraintes budgétaires: Both tools offer free tiers, but compare the costs of scaling features to ensure they fit your budget.
• Objectifs d’intégration: Firebase s’intègre parfaitement aux flux de travail Google, tandis que Sentry excelle dans le suivi des erreurs.
• Exigences réglementaires: Assurez-vous que l’outil est conforme aux normes telles que le RGPD, surtout si votre application traite des données sensibles des utilisateurs.
• Fréquence de mise à jour: Si des mises à jour fréquentes sont essentielles, des outils comme Capgo accélèrent les correctifs live et complètent votre configuration de monitoring.

Guide de configuration Firebase

La configuration du monitoring de performance Firebase dans votre app Capacitor nécessite quelques étapes claires pour garantir un suivi précis des données.

Installer le SDK Firebase

Commencez par ajouter le SDK Firebase à votre projet et configurez-le pour votre(s) plateforme(s) :

• Installer les dépendances Firebase

Exécutez les commandes suivantes pour installer les paquets Firebase nécessaires. Consultez le @capgo/capacitor-firebase-performance et @capgo/capacitor-firebase-crashlytics pages des plugins pour les détails de configuration :

npm install @capgo/capacitor-firebase-performance
npm install firebase

• Initialiser Firebase

Configurez Firebase dans votre fichier d'application 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();

• Ajouter les configurations de plateforme

Mettez à jour votre capacitor.config.json fichier pour activer le suivi des performances :

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

Configurer le suivi des performances

Vous pouvez commencer à suivre des activités spécifiques de l'app, comme les requêtes de base de données ou réseau, en utilisant Firebase Performance Monitoring.

• Suivre les requêtes de base de données

async function trackDatabaseQuery() {
  const trace = await FirebasePerformance.startTrace({ traceName: 'database_query' });

  // Perform your database operation
  await performDatabaseOperation();

  await FirebasePerformance.stopTrace({ traceName: 'database_query' });
}

• Surveiller les requêtes réseau

await FirebasePerformance.setAttributes({
  traceName: 'api_call',
  attributes: {
    endpoint: '/users',
    method: 'GET'
  }
});

• Suivre des métriques personnalisées

Pour les métriques personnalisées, comme le suivi de la valeur d'un panier d'achat :

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

Une fois ces traces implémentées, vous pourrez consulter les données collectées dans la console Firebase.

Utiliser la console Firebase

Une fois le monitoring configuré, vous pouvez consulter et analyser les données de performance de votre application dans la console Firebase :

1. Accéder aux données de performance

   • Connectez-vous à la console Firebase.
   • Sélectionnez votre projet.
   • Accédez à Suivi des performances.
   • Choisissez votre application dans le menu déroulant.

2. Surveiller les indicateurs clés

Le dashboard fournit des informations sur divers indicateurs de performance, notamment :

• Temps de démarrage de l’app
• Taux de réussite des requêtes réseau
• Temps de rendu des écrans
• Résultats des traces personnalisées

3. Configurer des rapports personnalisés

Créez des rapports sur mesure pour analyser des aspects spécifiques des performances de votre application, tels que :

• Différences de performance par localisation
• Métriques basées sur le type d’appareil
• Effets des conditions réseau
• Modèles dans les traces personnalisées

Utilisez ces outils pour identifier et résoudre efficacement les goulots d’étranglement de performance.

Sentry Configuration du suivi des erreurs

Firebase gère les métriques de performance, tandis que Sentry se concentre sur la détection et le diagnostic des erreurs. Ensemble, ils vous offrent un monitoring robuste.

Installer Sentry SDK

Commencez par installer les packages Sentry requis :

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

Une fois installé, configurez Sentry dans le point d'entrée de votre application.

Initialiser Sentry

Configurez Sentry dans le point d'entrée de votre application avec la configuration suivante :

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
});

Cette configuration inclut le suivi des releases, ce qui permet de lier les erreurs à des versions d'app spécifiques.

Configurer le suivi des erreurs

Vous pouvez affiner le suivi des erreurs en utilisant des error boundaries personnalisées et des blocs try-catch.

Error boundaries personnalisées :

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

Suivi d'erreurs spécifiques :

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

Monitoring des performances :

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

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

Ces méthodes garantissent que votre application journalise les erreurs efficacement, ce qui facilite leur suivi et leur résolution via Sentry.

Utiliser le dashboard Sentry

Le dashboard Sentry fournit des outils pour analyser les erreurs et mieux les comprendre :

• Surveillance en temps réel: Vérifiez la fréquence des erreurs, leur statut de résolution et les utilisateurs affectés.
• Analyse des erreurs: Examinez les stack traces, regroupez les erreurs similaires et filtrez par environnement.
• Alertes: Définissez des seuils d'erreurs, configurez les options de notification et créez des règles d'alerte personnalisées.

Ce dashboard simplifie le diagnostic et la résolution des problèmes.

Bonnes pratiques de monitoring

Concentrez-vous sur les métriques clés

L’analyse de 750 apps en production par Capgo [1] met en avant les métriques clés à surveiller :

• Taux de réussite des mises à jour : visez au moins 82 %.
• Vitesse de mise à jour : le CDN global doit fournir 5 Mo en 114 ms.
• Adoption par les utilisateurs: 95% of users should update within 24 hours.
• Temps de réponse API: Gardez-la sous 500 ms (la moyenne mondiale est de 434 ms).

Configurez des alertes pour détecter rapidement tout écart sur ces métriques.

Créer des règles d’alerte efficaces

Voici un exemple de configuration d’alertes pour le monitoring des performances :

// 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"
        }
    }
}

Continuer à surveiller et à ajuster

Une fois vos alertes en place, concentrez-vous sur le monitoring continu et les ajustements réguliers :

• Vérifications régulières des performances: Examinez les taux de réussite des mises à jour par région, analysez les tendances d’erreurs selon les versions de l’application et surveillez les temps de réponse de API aux heures de pointe.

• Déploiements progressifs des mises à jour: Commencez par 10 % des utilisateurs pendant les 24 premières heures. Si tout se passe bien, passez à 50 % et finalisez le déploiement après 48 heures de performances stables.

• Optimisation continue: Analysez les mises à jour échouées, identifiez les endpoints API lents et évaluez l’engagement des utilisateurs après les mises à jour pour garantir des améliorations durables.

Capgo Mises à jour et supervision

Fonctionnalités clés de Capgo

Le système live update de Capgo, testé sur 750 apps en production, délivre des bundles de 5 Mo en seulement 114 ms [1].

Les fonctionnalités clés incluent :

• Analytics en temps réel: Suivez les taux de réussite des mises à jour, actuellement en moyenne de 82 % à l’échelle mondiale [1].
• Déploiement instantané: Déployez des correctifs critiques sans attendre la validation des stores.
• Mises à jour partielles: Téléchargez uniquement les composants modifiés pour économiser de la bande passante et du temps.
• Gestion des versions: Effectuez rapidement un rollback des mises à jour qui dégradent les performances.

Ce système s'intègre facilement aux outils de monitoring existants pour garantir un fonctionnement fluide.

« Nous avons déployé Capgo mises à jour OTA en production pour notre base de plus de 5000 utilisateurs. Le fonctionnement est très fluide : presque tous nos utilisateurs sont à jour quelques minutes seulement après le déploiement de l'OTA sur @Capgo. » - colenso [1]

Combinez vos outils avec Capgo

L'analyse de Capgo permet des déploiements progressifs, aidant les équipes à garantir la stabilité avant une release complète.

Pour configurer efficacement le système de canaux de Capgo :

• Deploy updates to beta testers first.
• Utilisez l’analyse de Capgo pour suivre les indicateurs de performance.
• Étendre progressivement le déploiement à l’ensemble de la base utilisateurs.

« Nous pratiquons le développement agile et @Capgo est essentiel pour livrer en continu à nos utilisateurs ! » - Rodrigo Mantica [1]

Avec 23,5 M de mises à jour livrées dans le monde, le dashboard en temps réel de Capgo offre des insights clairs, permettant aux équipes de prendre des décisions éclairées sur les mises à jour et l’optimisation des performances.

Étapes suivantes

Points clés

Surveiller les métriques clés est essentiel pour un monitoring des performances efficace. Utilisez des outils pour suivre ces indicateurs critiques :

Approfondissez ces métriques et ces outils grâce aux ressources listées ci-dessous.

En savoir plus

Les outils et pratiques de monitoring de performance évoluent sans cesse. Gardez une longueur d'avance en explorant ces guides et stratégies :

Documentation officielle:

• Documentation Firebase Performance Monitoring
• Guide d'intégration Capacitor de Sentry
• Guides officiels d'optimisation des performances de Capacitor

Implémentation avancéeExplorez le système d'analytics de Capgo, utilisé avec succès dans plus de 750 applications en production [1]Leur documentation offre un aperçu des modèles de monitoring et des stratégies live update qui s'intègrent parfaitement aux autres outils de suivi de performance.

Continuer avec « Configurer le monitoring de performance dans Capacitor »

Si vous utilisez Configurer le monitoring des performances dans Capacitor pour planifier le travail sur les plugins natifs, connectez-l’à Capgo Répertoire des plugins pour le workflow produit dans Capgo Plugin Directory, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou mettre à jour des plugins pour les détails d'implémentation dans Adding or Updating Plugins, Alternatives aux plugins Ionic Enterprise pour le workflow produit dans les alternatives aux plugins Ionic Enterprise, et Capgo Native Build pour le workflow produit dans Capgo Native Builds.