Passer à la navigation principale

Configurez la surveillance de performance dans Capacitor

Découvrez comment configurer la surveillance de performance dans votre application en utilisant Firebase et Sentry pour une meilleure efficacité et une satisfaction utilisateur.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

Configurez la surveillance de performance dans Capacitor

Voulez-vous optimiser la performance de votre Capacitor application ? Les outils de surveillance comme Firebase et targetLanguage":"French","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Sentry","peut vous aider à suivre les plantages, l'utilisation des ressources et les temps de réponse, pour une expérience utilisateur plus fluide. Voici un aperçu rapide :","Pourquoi Suivre les Performances",": Identifier les plantages, 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_KEEP_0__/__CAPGO_KEEP_1__-firebase-performance","et","@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-firebase-crashlytics","Sentry",": Suivi détaillé des erreurs, analyse des traces de pile et notifications en temps réel."]} protectedTokens

  • textstargetLanguage
  • Firebase:
    • Pourquoi Suivre les PerformancesIdentifier les plantages, optimiser l'utilisation des ressources et améliorer les temps de réponse. @capgo/capacitor-firebase-performance Suivi détaillé des erreurs, analyse des traces de pile et notifications en temps réel. @capgo/capacitor-firebase-crashlytics.
    • etpeut vous aider à suivre les plantages, l'utilisation des ressources et les temps de réponse, pour une expérience utilisateur plus fluide. Voici un aperçu rapide :
  • Étapes de configuration:
    • Installez Firebase ou Sentry SDK.
    • Configurez votre application pour suivre les métriques de performance ou les erreurs.
    • Utilisez des tableaux de bord pour analyser et améliorer la performance de l'application.

Comparaison rapide:

Caractéristique Firebase Sentry
Suivi en temps réel Legère retard Pratiquement instantané
Support natif Android, iOS Android, iOS, Web
Mesures personnalisées Basique Flexible
Complexité d'intégration Flux de travail basé sur Google Configuration simple SDK

Pour les mises à jour en temps réel, intégrez des outils comme Capgo pour envoyer des correctifs instantanément sans retard de l'App Store. Commencez à surveiller aujourd'hui pour améliorer l'efficacité et la satisfaction de vos utilisateurs.

Optimisez la santé de votre application avec Firebase Suivi de la performance …

Tableau de bord du plateforme Firebase

Sélectionnez un outil de suivi

Choisissez un outil de suivi qui convient aux besoins de votre application et aux compétences de votre équipe. Voici un aperçu de Firebase Performance Monitoring et Sentry pour vous aider à prendre une décision.

Comparaison d'outils

Caractéristique Suivi de la performance Firebase Sentry
Modèle de tarification Niveau gratuit avec des options payantes échelonnées Tarif gratuit avec des plans de croissance abordables
Surveillance en temps réel Informations d'analyse de performance avec un léger retard Surveillance presque instantanée
Support de plateforme native Android et iOS Android, iOS et web
Complexité d'intégration Fonctionne avec les services Google Configuration simple SDK
Suivi d'événements personnalisés Métriques personnalisées de base Suivi d'événements personnalisés flexible
Période de conservation Limité sur le niveau gratuit Étendu sur tous les plans

Critères de sélection

Lorsque vous vous décidez entre ces outils, considérez les éléments suivants :

  • Taille de l'application et le trafic: Pour les applications qui attendent une croissance rapide, Firebase est une bonne option. Sentry pourrait être mieux adapté pour des implémentations à petite échelle.
  • Exigences techniques: Firebase nécessite Services Google Play, ce qui le rend idéal pour les applications au sein de cet écosystème. Sentry fonctionne de manière independante, offrant plus de flexibilité sur les plateformes.
  • Expérience de l'équipe: Firebase aligns well with teams already familiar with Google tools, while Sentry’s straightforward SDK setup is easier for broader use cases.
  • Contraintes budgétaires: Les deux outils proposent des tarifs gratuits, mais comparez les coûts des fonctionnalités de mise à l'échelle pour vous assurer qu'elles conviennent à votre budget.
  • Objectifs d'intégration: Firebase s'intègre de manière fluide avec les workflows basés sur Google, tandis que Sentry est particulièrement fort en matière de suivi des erreurs.
  • Exigences réglementaires: Assurez-vous que l'outil est conforme aux normes telles que Règlement général sur la protection des données, en particulier si votre application traite des données utilisateur sensibles.
  • Fréquence d'actualisation: Si des mises à jour fréquentes sont critiques, des outils comme Capgo peuvent accélérer les corrections en direct, complétant votre ensemble de suivi.

Guide de configuration de Firebase

Configuration de la surveillance de performances Firebase dans votre Capacitor application démontre quelques étapes claires pour s'assurer d'une traçabilité des données précises.

Installer Firebase SDK

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

  • Installation des dépendances Firebase

Exécutez les commandes suivantes pour installer les packages Firebase nécessaires. Consultez les pages de documentation pour les détails de configuration complets : @capgo/capacitor-firebase-performance et @capgo/capacitor-firebase-crashlytics Guide de configuration de Firebase

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

Configurez Firebase dans votre fichier de l'application principale :

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();
  • Ajoutez les Configurations de Plateforme

Mettez à jour votre capacitor.config.json fichier pour activer la surveillance de performances :

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

Configurer la Suivi de Performances

Vous pouvez commencer à suivre des activités spécifiques de l'application comme les requêtes de base de données ou les requêtes réseau en utilisant la surveillance de performances Firebase.

  • 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 de Réseau
await FirebasePerformance.setAttributes({
  traceName: 'api_call',
  attributes: {
    endpoint: '/users',
    method: 'GET'
  }
});
  • Suivre les Métriques Customisées

Pour les métriques personnalisées, telles que 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 mises en œuvre, vous pouvez examiner les données collectées dans le Console Firebase.

Utilisez le Console Firebase

Après avoir configuré la surveillance, vous pouvez afficher et analyser vos données de performance d'application dans la Console Firebase :

  1. Accédez aux données de performance

    • Connectez-vous à la Console Firebase.
    • Sélectionnez votre projet.
    • Naviguez vers Surveillance de la performance.
    • Choisissez votre application dans le menu déroulant.
  2. Surveillez les principaux indicateurs de performance

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

  • Temps de démarrage de l'application
  • Taux de réussite des requêtes réseau
  • Temps de rendu de l'écran
  • Résultats provenant de traces personnalisées
  1. Configurer les Rapports Personnalisés

Créez des rapports personnalisés pour analyser des aspects spécifiques de la performance de votre application, comme :

  • Différences de performances par emplacement
  • Métriques basées sur le type de dispositif
  • Effets des conditions de réseau
  • Modèles dans les traces personnalisées

Utilisez ces outils pour identifier et résoudre efficacement les bouchons de performance.

Sentry Configuration de suivi des erreurs

Tableau de bord de suivi des erreurs Sentry

Firebase gère les métriques de performance, mais Sentry est tout entier axé sur la détection et la dépannage d'erreurs. Ensemble, ils vous donnent un fort ensemble de surveillance.

Installez Sentry SDK

Commencez par installer les packages de Sentry requis :

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

Une fois installés, configurez Sentry dans l'entrée de votre application.

Initialisez Sentry

Configurez Sentry dans l'entrée de votre application en utilisant 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 la suivi de version, qui relie les erreurs à des versions spécifiques de l'application.

Configurez le suivi des erreurs

Vous pouvez personnaliser le suivi des erreurs en utilisant des limites d'erreurs personnalisées et des blocs try-catch.

Limites d'erreurs 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() }
    });
}

Surveillance de la performance :

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

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

Ceux-ci assurent que vos logs d'application fonctionnent efficacement, ce qui les rend plus faciles à suivre et à résoudre via Sentry.

Utiliser le tableau de bord de Sentry

Le tableau de bord de Sentry fournit des outils pour creuser dans les erreurs et les comprendre mieux :

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

Ce tableau de bord rend la détection et la résolution des problèmes plus faciles.

Meilleures pratiques de surveillance

Concentrez-vous sur les principaux indicateurs de performance

L'analyse de Capgo de 750 applications de production [1] met en évidence les principaux indicateurs à surveiller :

  • Mise à jour réussie: Visez au moins 82 %.
  • Vitesse de mise à jour: Le CDN mondial devrait livrer 5 MB en 114 ms.
  • Adoption par les utilisateurs: 95 % des utilisateurs devraient mettre à jour dans les 24 heures.
  • Temps de réponse de API: Gardez-le sous 500 ms (moyenne mondiale est de 434 ms).

Configurez des alertes pour détecter rapidement toute déviation de ces indicateurs.

Créez des règles d'alerte efficaces

Voici un exemple de configuration des alertes pour le suivi de 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"
        }
    }
}

Maintenez le suivi et ajustez

Une fois vos alertes en place, concentrez-vous sur le suivi continu et la révision :

  • Vérifications de performances régulières: Examinez les taux de réussite des mises à jour par région, analysez les tendances d'erreurs pour différentes versions d'applications et suivez les temps de réponse de API pendant les heures de pointe.

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

  • Optimisation continue: Investigez les mises à jour échouées, identifiez les points de terminaison API qui fonctionnent lentement et évaluez l'engagement des utilisateurs après les mises à jour pour garantir des améliorations durables.

Capgo Mises à jour et suivi

Capgo Interface de dashboard de mise à jour en direct

Capgo Fonctionnalités Clés

Capgo’s système d’actualisation en temps réel, testé sur 750 applications de production, fournit des bundles de 5MB en seulement 114ms [1].

Les fonctionnalités clés comprennent :

  • Analytiques en temps réel: Suivez les taux de réussite des mises à jour, qui atteignent actuellement 82 % à l'échelle mondiale [1].
  • Déploiement instantané: Faites passer les correctifs critiques sans attendre l'approbation des magasins d'applications.
  • Mises à jour partielles: Téléchargez uniquement les composants modifiés, en économisant ainsi la bande passante et le temps.
  • Contrôle de version: Rendez-vous rapidement à des mises à jour qui négativement impactent la performance.

Ce système s'intègre facilement avec les outils de suivi existants, garantissant une opération fluide.

“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]

Combinez les outils avec Capgo

Capgo permet d'analyser les données, ce qui facilite les déploiements étalés, aidant les équipes à s'assurer de la stabilité avant une mise en production complète.

Aspect de suivi Capgo d'intégration Outils supplémentaires
Suivi des erreurs Suivi des erreurs intégré Associez-vous à Sentry pour des traces de pile détaillées
Mesures de performance Suivi des taux de réussite des mises à jour Utilisez Firebase pour les données d'interaction utilisateur
Temps de réponse API monitoring des réponses Améliorez avec des événements de timing personnalisés Firebase

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

  • Déployez les mises à jour aux premiers testeurs.
  • Utilisez les Capgo analytics pour surveiller les métriques de performance.
  • Étendez progressivement le déploiement à la base d'utilisateurs plus large.

“Nous pratiquons le développement agile et @Capgo est essentiel pour livrer continuellement à nos utilisateurs !” - Rodrigo Mantica [1]

Avec 23,5 millions de mises à jour livrées à l'échelle mondiale, le tableau de bord en temps réel de Capgo fournit des informations claires, permettant aux équipes de prendre des décisions éclairées sur les mises à jour et les améliorations de performance.

Étapes suivantes

Points principaux

Tenir une œil sur les principaux indicateurs est crucial pour une surveillance de performance efficace. Utilisez des outils pour suivre ces indicateurs critiques :

Type de métrique Aires de concentration clés Outils recommandés
Performances de l'application Temps de réponse, plantages Performances Firebase
Suivi des erreurs Taux d'exceptions, traces de pile Sentry
Mise à jour d'analytiques Réussite de la distribution Capgo Analytiques

Plongez plus profondément dans ces indicateurs et outils grâce aux ressources listées ci-dessous.

En savoir plus

Les outils et les pratiques de suivi de performances évoluent constamment. Restez en tête en explorant ces guides et stratégies :

Documentation officielle:

  • Documentation de suivi de performances Firebase
  • Guide d'intégration de Sentry’s Capacitor
  • Capacitor’s guides officiels d'optimisation de performances

Implémentation avancéeExplorez Capgo’s système d’analyse, utilisé avec succès dans plus de 750 applications de production. [1]Ils fournissent des informations sur les modèles de suivi et les stratégies d'actualisation en direct qui fonctionnent de manière fluide avec d'autres outils de suivi de performances.

Continuez de la section Configuration du suivi de performances dans Capacitor

Si vous utilisez Configurer la surveillance de performance dans Capacitor pour planifier le travail de plugin natif, le connecter à Répertoire de plugin Capgo pour le flux de travail du produit dans Répertoire de plugin Capgo, Plugins Capacitor par Capgo pour les détails d'implémentation dans Plugins Capacitor par Capgo, Ajouter ou Mettre à Jour les Plugins pour les détails d'implémentation dans Ajouter ou Mettre à Jour les Plugins, Alternatives de Plugin Entreprise Ionic pour le flux de travail du produit dans Alternatives de Plugin Entreprise Ionic, et Constructions natives Capgo pour le flux de travail du produit dans Constructions natives Capgo.

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction par le biais de Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans la voie de revue normale.

Commencez maintenant

Dernières actualités de notre blog

Capgo vous donne les meilleures informations dont vous avez besoin pour créer une application mobile vraiment professionnelle.