Surveillance des performances des déploiements de fonctionnalités

1. Présentation

Dans cet atelier de programmation, vous allez apprendre à surveiller les performances de votre application lors du déploiement d'une fonctionnalité. Notre application exemple aura des fonctionnalités de base et sera configurée pour afficher une image de fond différente en fonction d'un indicateur Firebase Remote Config. Nous allons voir comment instrumenter des traces pour surveiller les performances de l'application, déployer une modification de configuration dans l'application, surveiller l'impact et voir comment améliorer les performances.

Points abordés

  • Ajouter Firebase Performance Monitoring à votre application mobile pour obtenir des métriques prêtes à l'emploi (comme le temps de démarrage de l'application et les images lentes ou figées)
  • Ajouter des traces personnalisées pour comprendre les chemins de code critiques de vos parcours utilisateur
  • Utiliser le tableau de bord de surveillance des performances pour comprendre vos métriques et suivre les changements importants tels que le déploiement d'une fonctionnalité
  • Configurer des alertes de performances pour surveiller vos métriques clés
  • Déployer une modification de Firebase Remote Config

Prérequis

  • Android Studio version 4.0 ou ultérieure
  • Un émulateur Android avec le niveau d'API 16 ou supérieur.
  • Java version 8 ou ultérieure
  • Connaissances de base sur Firebase Remote Config

2. Configurer l'exemple de projet

Télécharger le code

Exécutez la commande suivante pour cloner l'exemple de code de cet atelier de programmation. Cette opération crée un dossier nommé codelab-perf-rc-android sur votre ordinateur:

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

Si Git n'est pas installé sur votre ordinateur, vous pouvez également télécharger le code directement depuis GitHub.

Importez le projet sous le dossier firebase-perf-rc-android-start dans Android Studio. Vous verrez probablement s'afficher des exceptions d'exécution ou un avertissement concernant un fichier google-services.json manquant. Nous allons corriger ce problème dans la section suivante.

Dans cet atelier de programmation, vous allez utiliser le plug-in Firebase Assistant pour enregistrer votre application Android avec un projet Firebase et ajouter les fichiers de configuration, les plug-ins et les dépendances Firebase nécessaires à votre projet Android, le tout depuis Android Studio.

Associer votre application à Firebase

  1. Accédez à Android Studio/Help > Vérifiez si des mises à jour sont disponibles pour vous assurer que vous utilisez les dernières versions d'Android Studio et de Firebase Assistant.
  2. Sélectionnez Tools > Firebase (Outils > Firebase) pour ouvrir le volet Assistant.

c0e42ef063d21eab.png

  1. Sélectionnez Performance Monitoring à ajouter à votre application, puis cliquez sur Get started with Performance Monitoring (Premiers pas avec Performance Monitoring).
  2. Cliquez sur Se connecter à Firebase pour associer votre projet Android à Firebase (la console Firebase s'ouvre alors dans votre navigateur).
  3. Dans la console Firebase, cliquez sur Ajouter un projet, puis saisissez un nom de projet Firebase (si vous en avez déjà un, vous pouvez le sélectionner à la place). Cliquez sur Continuer et acceptez les conditions d'utilisation pour créer le projet Firebase et une application Firebase.

Une boîte de dialogue s'affiche pour vous inviter à associer votre nouvelle application Firebase à votre projet Android Studio.

51a549ebde2fe57a.png

  1. Cliquez sur Se connecter.
  2. Ouvrez Android Studio. La confirmation que votre application est connectée à Firebase s'affiche dans le volet Assistant.

40c24c4a56a45990.png

Ajouter Performance Monitoring à votre application

Dans le volet Assistant d'Android Studio, cliquez sur Add Performance Monitoring to your app (Ajouter la surveillance des performances à votre application).

Une boîte de dialogue Accept Changes (Accepter les modifications) devrait s'afficher. Android Studio devrait ensuite synchroniser votre application pour s'assurer que toutes les dépendances nécessaires ont été ajoutées.

3046f3e1f5fea06f.png

Enfin, un message indiquant que toutes les dépendances sont correctement configurées devrait s'afficher dans le volet Assistant d'Android Studio.

62e79fd18780e320.png

Pour une étape supplémentaire, activez la journalisation de débogage en suivant les instructions de l'étape "(Facultatif) Activer la journalisation de débogage". Les mêmes instructions sont également disponibles dans la documentation publique.

3. Exécuter l'application

Vous devriez maintenant voir le fichier google-services.json dans le répertoire du module (au niveau de l'application) de votre application, et elle devrait maintenant se compiler. Dans Android Studio, cliquez sur Run > Run 'app' (Exécuter 'app') pour compiler et exécuter l'application sur votre émulateur Android.

Lorsque l'application s'exécute, un écran de démarrage comme celui-ci doit s'afficher :

ffbd413a6983b205.png

Après quelques secondes, la page principale avec l'image par défaut s'affiche :

D946cab0df319e50.png

Que se passe-t-il en arrière-plan ?

L'écran de démarrage est implémenté dans SplashScreenActivity et effectue les opérations suivantes:

  1. Dans onCreate(), nous initialisons les paramètres Firebase Remote Config et extrayons les valeurs de configuration que vous définirez dans le tableau de bord Remote Config plus tard dans cet atelier de programmation.
  2. Dans executeTasksBasedOnRC(), nous lisons la valeur de configuration de l'option seasonal_image_url. Si une URL est fournie par la valeur de configuration, nous téléchargeons l'image de manière synchrone.
  3. Une fois le téléchargement terminé, l'application accède à MainActivity et appelle finish() pour mettre fin à SplashScreenActivity.

Dans MainActivity, si seasonal_image_url est défini via Remote Config, la fonctionnalité est activée et l'image téléchargée s'affiche en arrière-plan de la page principale. Sinon, l'image par défaut (illustrée ci-dessus) sera affichée.

4. Configurer Remote Config

Maintenant que votre application est en cours d'exécution, vous pouvez configurer le nouveau flag de fonctionnalité.

  1. Dans le panneau de gauche de la console Firebase, localisez la section Engage (Engager), puis cliquez sur Remote Config.
  2. Cliquez sur le bouton Créer une configuration pour ouvrir le formulaire de configuration et ajoutez seasonal_image_url comme clé de paramètre.
  3. Cliquez sur Ajouter une description, puis saisissez la description suivante : Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. Cliquez sur Ajouter -> Valeur conditionnelle -> Créer une condition.
  5. Pour le nom de la condition, saisissez Seasonal image rollout.
  6. Pour la section Applies if..., sélectionnez User in random percentile <= 0%. (Vous souhaitez laisser la fonctionnalité désactivée jusqu'à ce que vous soyez prêt à la déployer à une étape ultérieure.)
  7. Cliquez sur Créer une condition. Vous utiliserez cette condition plus tard pour déployer la nouvelle fonctionnalité auprès de vos utilisateurs.

7a07526eb9e81623.png

  1. Ouvrez le formulaire "Créer votre premier paramètre", puis recherchez le champ Valeur pour le déploiement des images saisonnières. Saisissez l'URL de la page sur laquelle l'image saisonnière sera téléchargée: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. Laissez la valeur par défaut définie sur une chaîne vide. Cela signifie que l'image par défaut dans le codebase sera affichée plutôt qu'une image téléchargée à partir d'une URL.
  3. Cliquez sur Enregistrer.

99e6cd2ebcdced.png

La configuration a été créée en tant que brouillon.

  1. Cliquez sur Publier les modifications et confirmez les modifications en haut de la page pour mettre à jour votre application.

39cd3e96d370c7ce.png

5. Ajouter une surveillance du temps de chargement des données

Votre application précharge certaines données avant d'afficher MainActivity et affiche un écran de démarrage pour masquer ce processus. Vous ne voulez pas que vos utilisateurs attendent trop longtemps sur cet écran. Il est donc généralement utile de surveiller la durée d'affichage de l'écran de démarrage.

Avec Firebase Performance Monitoring, c'est possible. Vous pouvez instrumenter des traces de code personnalisés pour surveiller les performances d'un code spécifique dans votre application, comme le temps de chargement des données et le temps de traitement de votre nouvelle fonctionnalité.

Pour suivre la durée d'affichage de l'écran de démarrage, vous devez ajouter une trace de code personnalisé à SplashScreenActivity, qui correspond au Activity qui implémente l'écran de démarrage.

  1. Initialisez, créez et démarrez une trace de code personnalisée nommée splash_screen_trace:

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. Terminez la trace dans la méthode onDestroy() de SplashScreenActivity:

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

Étant donné que votre nouvelle fonctionnalité télécharge et traite une image, vous allez ajouter une deuxième trace de code personnalisé pour suivre le temps supplémentaire que votre élément a ajouté à SplashScreenActivity.

  1. Initialisez, créez et démarrez une trace de code personnalisée nommée splash_seasonal_image_processing :

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. Terminez la trace dans les méthodes onLoadFailed() et onResourceReady() de RequestListener:

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

Maintenant que vous avez ajouté des traces de code personnalisées pour suivre la durée de l'écran de démarrage (splash_screen_trace)) et le temps de traitement de la nouvelle fonctionnalité (splash_seasonal_image_processing), exécutez à nouveau l'application dans Android Studio. Vous devriez voir un message de journalisation contenant Logging trace metric: splash_screen_trace, suivi de la durée de la trace. Aucun message de journal ne s'affiche pour splash_seasonal_image_processing, car vous n'avez pas encore activé la nouvelle fonctionnalité.

6. Ajouter un attribut personnalisé à la trace

Pour les traces de code personnalisées, Performance Monitoring consigne automatiquement les attributs par défaut (métadonnées courantes telles que la version de l'application, le pays, l'appareil, etc.) afin que vous puissiez filtrer les données pour la trace dans la console Firebase. Vous pouvez également ajouter et surveiller des attributs personnalisés.

Dans votre application, vous venez d'ajouter deux traces de code personnalisées pour surveiller la durée de l'écran de démarrage et le temps de traitement de la nouvelle fonctionnalité. Un facteur pouvant affecter ces durées est si l'image affichée est l'image par défaut ou si elle doit être téléchargée à partir d'une URL. Et qui sait ? Vous pourriez finir par télécharger une image à partir de différentes URL.

Ajoutons donc un attribut personnalisé représentant l'URL de l'image saisonnière à ces traces de code personnalisés. Vous pourrez ainsi filtrer ultérieurement les données de durée en fonction de ces valeurs.

  1. Ajoutez l'attribut personnalisé (seasonal_image_url_attribute) pour splash_screen_trace au début de la méthode executeTasksBasedOnRC :

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. Ajoutez le même attribut personnalisé pour splash_seasonal_image_processing juste après l'appel startTrace("splash_seasonal_image_processing") :

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

Maintenant que vous avez ajouté un attribut personnalisé (seasonal_image_url_attribute) pour vos deux traces personnalisées (splash_screen_trace et splash_seasonal_image_processing), exécutez à nouveau l'application dans Android Studio. Vous devriez voir un message de journalisation contenant Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Vous n'avez pas encore activé le paramètre Remote Config seasonalImageUrl. C'est pourquoi la valeur de l'attribut est unset.

Le SDK Performance Monitoring collecte les données de trace et les envoie à Firebase. Vous pouvez consulter les données dans le tableau de bord Performances de la console Firebase. Nous en reparlerons en détail à l'étape suivante de l'atelier de programmation.

7. Configurer le tableau de bord Performance Monitoring

Configurer votre tableau de bord pour surveiller votre fonctionnalité

Dans la console Firebase, sélectionnez le projet contenant votre application Friendly Eats.

Dans le panneau de gauche, recherchez l'option Publier et Surveiller, puis cliquez sur Performances.

Vous devriez voir le tableau de bord Performances avec vos tout premiers points de données dans le tableau des métriques. Le SDK Performance Monitoring collecte les données de performances de votre application et les affiche dans les minutes qui suivent la collecte.

f57e5450b70034c9.png

Ce tableau des métriques vous permet de suivre les métriques clés de votre application. La vue par défaut inclut la durée de la trace du temps de démarrage de votre application, mais vous pouvez ajouter les métriques qui vous intéressent le plus. Étant donné que vous effectuez le suivi de la nouvelle fonctionnalité que vous avez ajoutée, vous pouvez personnaliser votre tableau de bord pour afficher la durée de la trace de code personnalisée splash_screen_trace.

  1. Cliquez sur l'une des cases vides Sélectionner une métrique.
  2. Dans la boîte de dialogue, sélectionnez le type de trace Traces personnalisées et le nom de la trace splash_screen_trace.

1fb81f4dba3220e0.png

  1. Cliquez sur Sélectionner une métrique. La durée de splash_screen_trace devrait être ajoutée à votre tableau de bord.

Vous pouvez suivre les mêmes étapes pour ajouter d'autres métriques qui vous intéressent afin de voir rapidement comment leurs performances évoluent au fil du temps et même avec différentes versions.

1d465c021e58da3b.png

Le tableau des métriques est un outil puissant qui permet de suivre les performances des métriques clés enregistrées par vos utilisateurs. Pour cet atelier de programmation, vous disposez d'un petit ensemble de données sur une période restreinte. Vous utiliserez donc d'autres vues du tableau de bord qui vous aideront à comprendre les performances du déploiement des fonctionnalités.

8. Déployer votre fonctionnalité

Maintenant que vous avez configuré la surveillance, vous êtes prêt à déployer la modification Firebase Remote Config (seasonal_image_url) que vous avez configurée précédemment.

Pour déployer un changement, revenez à la page Remote Config de la console Firebase afin d'augmenter le centile utilisateur de votre condition de ciblage. Normalement, vous devriez déployer de nouvelles fonctionnalités pour une petite partie des utilisateurs et les augmenter uniquement lorsque vous êtes certain qu'elles ne présentent aucun problème. Toutefois, dans cet atelier de programmation, vous êtes les seuls utilisateurs de l'application. Vous pouvez donc faire passer le centile à 100%.

  1. Cliquez sur l'onglet Conditions en haut de la page.
  2. Cliquez sur la condition Seasonal image rollout que vous avez ajoutée précédemment.
  3. Définissez le centile sur 100%.
  4. Cliquez sur Save condition (Enregistrer la condition).
  5. Cliquez sur Publier les modifications et confirmez les modifications.

70f993502b27e7a0.png

Retournez dans Android Studio, redémarrez l'application dans votre émulateur pour voir la nouvelle fonctionnalité. Après l'écran de démarrage, vous devriez voir le nouvel écran principal vide.

b0cc91b6e48fb842.png

9. Vérifier l'évolution des performances

Examinons maintenant les performances de chargement des écrans de démarrage à l'aide du tableau de bord Performances de la console Firebase. À cette étape de l'atelier de programmation, vous allez utiliser différentes parties du tableau de bord pour afficher les données sur les performances.

  1. Dans l'onglet principal Tableau de bord, faites défiler la page jusqu'au tableau des traces, puis cliquez sur l'onglet Traces personnalisées. Dans ce tableau, vous verrez les traces de code personnalisées que vous avez ajoutées précédemment, ainsi que des traces prêtes à l'emploi.
  2. Maintenant que vous avez activé la nouvelle fonctionnalité, recherchez la trace de code personnalisé splash_seasonal_image_processing, qui a mesuré le temps nécessaire au téléchargement et au traitement de l'image. La valeur Duration de la trace vous permet de voir que ce téléchargement et ce traitement prennent un temps considérable.

439adc3ec71805b7.png

  1. Comme vous disposez de données pour splash_seasonal_image_processing, vous pouvez ajouter la durée de cette trace à votre panneau des métriques en haut de l'onglet Dashboard (Tableau de bord).

Comme précédemment, cliquez sur l'une des cases Sélectionner une métrique vides. Dans la boîte de dialogue, sélectionnez le type de trace Traces personnalisées et le nom de la trace splash_seasonal_image_processing. Enfin, cliquez sur Sélectionner une métrique pour ajouter cette métrique au tableau de données.

7fb64d2340410576.png

  1. Pour confirmer ces différences, vous pouvez examiner de plus près les données concernant splash_screen_trace. Cliquez sur la fiche splash_screen_trace dans le tableau des métriques, puis sur Afficher les détails de la métrique.

B1c275c30679062a.png

  1. Sur la page d'informations, une liste d'attributs s'affiche en bas à gauche, y compris l'attribut personnalisé que vous avez créé précédemment. Cliquez sur l'attribut personnalisé seasonal_image_url_attribute pour afficher la durée de l'écran de démarrage pour chaque URL d'image saisonnière à droite :

8fa1a69019bb045e.png

  1. Les valeurs de durée de l'écran de démarrage seront probablement un peu différentes de celles de la capture d'écran ci-dessus, mais la durée d'utilisation de l'écran de démarrage devrait être plus longue lorsque l'image est téléchargée à partir d'une URL par rapport à l'utilisation de l'image par défaut (représentée par "non définie").

Dans cet atelier de programmation, la raison de cette durée plus longue peut être simple, mais dans une application réelle, ce n'est peut-être pas aussi évident. Les données de durée collectées proviennent de différents appareils exécutant l'application dans différentes conditions de connexion réseau, et ces conditions peuvent être pires que ce que vous attendez. Voyons comment vous pourriez résoudre ce problème si vous étiez dans une situation réelle.

  1. Cliquez sur Performances en haut de la page pour revenir à l'onglet principal Tableau de bord: 640b696b79d90103.png
  2. Dans le tableau des traces en bas de la page, cliquez sur l'onglet Requêtes réseau. Dans ce tableau, vous pouvez voir toutes les requêtes réseau de votre application agrégées en modèles d'URL, y compris le modèle d'URL images.unsplash.com/**. Si vous comparez la valeur de ce temps de réponse au temps total nécessaire pour télécharger et traiter l'image (c'est-à-dire la durée de la trace splash_seasonal_image_processing), vous pouvez constater qu'une grande partie du temps est consacrée au téléchargement de l'image.

6f92ce0f23494507.png

Résultats des performances

Grâce à Firebase Performance Monitoring, vous avez constaté l'impact suivant sur les utilisateurs finaux lorsque la nouvelle fonctionnalité était activée :

  1. Le temps passé sur SplashScreenActivity a augmenté.
  2. La durée de splash_seasonal_image_processing était très longue.
  3. Le délai était dû au temps de réponse du téléchargement de l'image et au temps de traitement correspondant.

À l'étape suivante, vous allez atténuer l'impact sur les performances en rétablissant la fonctionnalité et en identifiant comment améliorer son implémentation.

10. Effectuer un rollback de la fonctionnalité

Augmenter le nombre d'utilisateurs un temps d'attente pendant l'écran de démarrage n'est pas souhaitable. L'un des principaux avantages de Remote Config est la possibilité de suspendre et d'annuler votre déploiement sans avoir à publier une autre version pour les utilisateurs. Vous pouvez ainsi réagir rapidement aux problèmes (comme les problèmes de performances que vous avez détectés lors de la dernière étape) et réduire le nombre d'utilisateurs mécontents.

Pour résoudre rapidement le problème, réinitialisez le pourcentage de déploiement sur 0 afin que tous vos utilisateurs voient à nouveau l'image par défaut :

  1. Revenez à la page Remote Config (Remote Config) de la console Firebase.
  2. Cliquez sur Conditions en haut de la page.
  3. Cliquez sur la condition Seasonal image rollout que vous avez ajoutée précédemment.
  4. Définissez le percentile sur 0 %.
  5. Cliquez sur Save condition (Enregistrer la condition).
  6. Cliquez sur Publier les modifications et confirmez les modifications.

18c4f1cbac955a04.png

Redémarrez l'application dans Android Studio. L'écran principal d'origine, à l'état vide, devrait s'afficher:

D946cab0df319e50.png

11. Corriger les problèmes de performances

Vous avez découvert précédemment dans l'atelier de programmation que le téléchargement d'une image pour votre écran de démarrage entraînait le ralentissement de votre application. En examinant de plus près l'image téléchargée, vous constatez que vous utilisez la résolution d'origine de l'image, qui était supérieure à 2 Mo. Pour résoudre rapidement votre problème de performances, réduisez la qualité à une résolution plus appropriée afin de réduire le temps de téléchargement de l'image.

Déployer à nouveau la valeur Remote Config

  1. Revenez à la page Remote Config dans la console Firebase.
  2. Cliquez sur l'icône Modifier du paramètre seasonal_image_url.
  3. Modifiez la valeur de Valeur pour le déploiement des images saisonnières sur https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640, puis cliquez sur Enregistrer.

828dd1951a2ec4a4.png

  1. Cliquez sur l'onglet Conditions en haut de la page.
  2. Cliquez sur Déploiement des images saisonnières, puis rétablissez le percentile à 100 %.
  3. Cliquez sur Save condition (Enregistrer la condition).

1974fa3bb789f36c.png

  1. Cliquez sur le bouton Publier les modifications.

12. Tester la correction et configurer des alertes

Exécuter l'application en local

Après avoir défini la nouvelle valeur de configuration pour utiliser une autre URL d'image de téléchargement, exécutez à nouveau l'application. Cette fois, vous devriez remarquer que le temps passé sur l'écran de démarrage est plus court qu'auparavant.

B0cc91b6e48fb842.png

Consulter les performances des modifications

Revenez au tableau de bord Performances dans la console Firebase pour voir à quoi ressemblent les métriques.

  1. Cette fois, vous allez utiliser le tableau des traces pour accéder à la page d'informations. En bas du tableau des traces, dans l'onglet Traces personnalisées, cliquez sur la trace personnalisée splash_seasonal_image_processing pour afficher à nouveau une vue plus détaillée de sa métrique de durée.

2d7aaca03112c062.png

  1. Cliquez sur l'attribut personnalisé seasonal_image_url_attribute pour afficher à nouveau la répartition de ces attributs. Si vous pointez sur les URL, une valeur correspondant à la nouvelle URL de l'image réduite s'affiche : https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (avec le ?w=640 à la fin). La valeur de durée associée à cette image est considérablement plus courte que celle de l'image précédente et plus acceptable pour vos utilisateurs.

10e30c037a4237a2.png

  1. Maintenant que vous avez amélioré les performances de votre écran de démarrage, vous pouvez configurer des alertes pour être averti lorsqu'une trace dépasse un seuil que vous avez défini. Ouvrez le tableau de bord "Performances", cliquez sur l'icône du menu à développer (trois points) pour splash_screen_trace, puis sur Paramètres d'alerte.

4bd0a2a1faa14479.png

  1. Cliquez sur le bouton pour activer l'alerte Durée. Définissez la valeur du seuil un peu au-dessus de la valeur que vous obteniez afin que vous receviez un e-mail si votre trace_écran_de_démarrage dépasse le seuil.
  1. Cliquez sur Enregistrer pour créer votre alerte. Faites défiler la page jusqu'au tableau des traces, puis cliquez sur l'onglet Traces personnalisées pour vérifier que votre alerte est activée.

2bb93639e2218d1.png

13. Félicitations !

Félicitations ! Vous avez activé le SDK Firebase Performance Monitoring et collecté des traces pour mesurer les performances d'une nouvelle fonctionnalité. Vous avez surveillé les métriques de performances clés lors du déploiement d'une nouvelle fonctionnalité et avez réagi rapidement lorsqu'un problème de performances a été détecté. Tout cela était possible grâce à la possibilité de modifier la configuration avec Remote Config et de surveiller les problèmes de performances en temps réel.

Points abordés

  • Ajouter le SDK Firebase Performance Monitoring à votre application
  • Ajouter une trace de code personnalisée à votre code pour mesurer une fonctionnalité spécifique
  • Configurer un paramètre Remote Config et une valeur conditionnelle pour contrôler/déployer une nouvelle fonctionnalité
  • Comprendre comment utiliser le tableau de bord de surveillance des performances pour identifier les problèmes lors d'un déploiement
  • Configurer des alertes de performances pour être averti lorsque les performances de votre application dépassent un seuil que vous avez défini

En savoir plus