Surveillance des performances des déploiements de fonctionnalités

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez à surveiller les performances de votre application lors du déploiement d'une fonctionnalité. Notre exemple d'application aura des fonctionnalités de base, et il est configuré pour afficher une image d'arrière-plan différente basée sur un indicateur Firebase Remote Config. Nous passerons en revue les traces d'instrumentation pour surveiller les performances de l'application, déployer un changement de configuration dans l'application, surveiller l'effet et voir comment nous pouvons améliorer les performances.

Ce que vous apprendrez

  • Comment ajouter Firebase Performance Monitoring à votre application mobile pour obtenir des métriques prêtes à l'emploi (comme l'heure de démarrage de l'application et les images lentes ou gelées)
  • Comment ajouter des traces personnalisées pour comprendre les chemins de code critiques de vos parcours utilisateur
  • Comment utiliser le tableau de bord de surveillance des performances pour comprendre vos métriques et suivre les changements importants comme le déploiement d'une fonctionnalité
  • Comment configurer des alertes de performance pour surveiller vos indicateurs clés
  • Comment déployer une modification de Firebase Remote Config

Conditions préalables

  • Android Studio 4.0 ou supérieur
  • Un émulateur Android avec API de niveau 16 ou supérieur.
  • Java version 8 ou supérieure
  • Une compréhension de base de 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 pour cet atelier de programmation. Cela créera un dossier appelé codelab-perf-rc-android sur votre machine :

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

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

Importez le projet sous le firebase-perf-rc-android-start dans Android Studio. Vous verrez probablement des exceptions d'exécution ou peut-être un avertissement concernant un fichier google-services.json manquant. Nous corrigerons cela dans la section suivante.

Dans cet atelier de programmation, vous utiliserez le plug-in Firebase Assistant pour enregistrer votre application Android auprès d'un projet Firebase et ajouter les fichiers de configuration, plug-ins et dépendances Firebase nécessaires à votre projet Android, le tout depuis Android Studio !

Connectez votre application à Firebase

  1. Accédez à Android Studio / Aide > Rechercher les mises à jour pour vous assurer que vous utilisez les dernières versions d'Android Studio et de l'assistant Firebase.
  2. Sélectionnez Outils > Firebase pour ouvrir le volet Assistant .

c0e42ef063d21eab.png

  1. Choisissez Performance Monitoring à ajouter à votre application, puis cliquez sur Get started with Performance Monitoring .
  2. Cliquez sur Se connecter à Firebase pour connecter votre projet Android à Firebase (cela ouvrira la console Firebase dans votre navigateur) .
  3. Dans la console Firebase, cliquez sur Ajouter un projet , puis saisissez un nom de projet Firebase (si vous avez déjà un projet Firebase, vous pouvez sélectionner ce projet existant à la place) . Cliquez sur Continuer et acceptez les conditions pour créer le projet Firebase et une nouvelle application Firebase.

Vous devriez ensuite voir une boîte de dialogue pour connecter votre nouvelle application Firebase à votre projet Android Studio.

51a549ebde2fe57a.png

  1. Cliquez sur Connecter .
  2. Ouvrez AndroidStudio. Dans le volet Assistant , vous verrez la confirmation que votre application est connectée à Firebase.

40c24c4a56a45990.png

Ajoutez la surveillance des performances à votre application

Dans le volet Assistant d'Android Studio, cliquez sur Ajouter la surveillance des performances à votre application .

Vous devriez voir une boîte de dialogue Accepter les modifications , après quoi Android Studio doit synchroniser votre application pour vous assurer que toutes les dépendances nécessaires ont été ajoutées.

3046f3e1f5fea06f.png

Enfin, vous devriez voir le message de réussite dans le volet Assistant d'Android Studio indiquant que toutes les dépendances sont correctement configurées.

62e79fd18780e320.png

En tant qu'é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écutez 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 votre application devrait maintenant être compilée. Dans Android Studio, cliquez sur Exécuter > Exécuter 'app' pour créer et exécuter l'application sur votre émulateur Android.

Lorsque l'application est en cours d'exécution, vous devriez d'abord voir un écran de démarrage comme celui-ci :

ffbd413a6983b205.png

Puis, après quelques secondes, la page principale avec l'image par défaut s'affichera :

d946cab0df319e50.png

Que se passe-t-il sous le capot ?

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 récupérons 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 du drapeau 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é sera activée et l'image téléchargée sera affichée en arrière-plan de la page principale. Sinon, l'image par défaut (illustrée ci-dessus) sera affichée.

4. Configurer la configuration à distance

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

  1. Dans le panneau de gauche de la console Firebase , localisez la section Engage , 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 entrez cette description : Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. Cliquez sur Ajouter nouveau -> Valeur conditionnelle -> Créer une nouvelle 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 ultérieurement.)
  7. Cliquez sur Créer une condition . Vous utiliserez cette condition ultérieurement pour déployer la nouvelle fonctionnalité auprès de vos utilisateurs.

7a07526eb9e81623.png

  1. Ouvrez le formulaire Créer votre premier paramètre et localisez le champ de déploiement Valeur pour l'image saisonnière . Entrez l'URL où l'image saisonnière sera téléchargée : https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. Laissez la valeur par défaut sous forme de chaîne vide. Cela signifie que l'image par défaut dans la base de code sera affichée plutôt qu'une image téléchargée à partir d'une URL.
  3. Cliquez sur Enregistrer .

99e6cd2ebcdced.png

Vous pouvez voir que la nouvelle configuration est créée en tant que brouillon.

  1. Cliquez sur Publier les modifications et confirmez les modifications en haut 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 normalement avantageux de surveiller la durée d'affichage de l'écran de démarrage.

Firebase Performance Monitoring fournit un moyen de le faire. Vous pouvez instrumenter des traces de code personnalisées 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 allez ajouter une trace de code personnalisée à SplashScreenActivity , qui est l' 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 ajouterez une deuxième trace de code personnalisé qui suivra le temps supplémentaire que votre fonctionnalité 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 deux 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 Logging trace metric: splash_screen_trace , suivi de la durée de la trace. Vous ne verrez pas de message de journal 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 enregistre automatiquement les attributs par défaut (métadonnées communes telles que la version de l'application, le pays, l'appareil, etc.) afin que vous puissiez filtrer les données de 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 qui peut affecter ces durées est de savoir si l'image affichée est l'image par défaut ou si l'image doit être téléchargée à partir d'une URL. Et qui sait, vous pourriez éventuellement avoir différentes URL à partir desquelles vous téléchargez une image.

Ajoutons donc un attribut personnalisé représentant l'URL de l'image saisonnière à ces traces de code personnalisées. De cette façon, vous pouvez filtrer les données de durée par ces valeurs ultérieurement.

  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' 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 de configuration à distance seasonImageUrl , c'est pourquoi la valeur de l'attribut n'est pas unset .

Le SDK de surveillance des performances collectera les données de trace et les enverra à Firebase. Vous pouvez afficher les données dans le tableau de bord des performances de la console Firebase, que nous expliquerons en détail à l'étape suivante de l'atelier de programmation.

7. Configurez votre tableau de bord de surveillance des performances

Configurez 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 la section Release & Monitor , puis cliquez sur Performance .

Vous devriez voir votre tableau de bord Performance avec vos tout premiers points de données dans votre tableau de métriques ! Le SDK de surveillance des performances collecte les données de performances de votre application et les affiche quelques minutes après la collecte.

f57e5450b70034c9.png

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

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

1fb81f4dba3220e0.png

  1. Cliquez sur Select metric et vous devriez voir la durée de splash_screen_trace ajoutée à votre tableau de bord !

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

1d465c021e58da3b.png

Le tableau des métriques est un outil puissant pour suivre les performances des métriques clés rencontrées par vos utilisateurs. Pour cet atelier de programmation, vous disposez d'un petit ensemble de données dans une plage de temps étroite. Vous utiliserez donc d'autres vues de tableau de bord qui vous aideront à comprendre les performances du déploiement de la fonctionnalité.

8. Déployez votre fonctionnalité

Maintenant que vous avez configuré votre 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 une modification, vous reviendrez à la page de configuration à distance dans la console Firebase pour augmenter le centile de l'utilisateur de votre condition de ciblage. Normalement, vous déployez de nouvelles fonctionnalités pour une petite partie des utilisateurs et ne l'augmentez que lorsque vous êtes sûr qu'il n'y a aucun problème avec cela. Dans cet atelier de programmation, cependant, vous êtes les seuls utilisateurs de l'application, vous pouvez donc modifier le centile à 100 %.

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

70f993502b27e7a0.png

De retour 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 les changements de performances

Voyons maintenant les performances de chargement de l'écran de démarrage à l'aide du tableau de bord des performances dans la console Firebase. Dans cette étape de l'atelier de programmation, vous utiliserez différentes parties du tableau de bord pour afficher les données de performances.

  1. Dans l'onglet principal du tableau de bord , faites défiler 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 certaines 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 mesure le temps nécessaire pour télécharger et traiter l'image. À partir de la valeur Durée de la trace, vous pouvez voir que ce téléchargement et ce traitement prennent beaucoup de temps.

439adc3ec71805b7.png

  1. Puisque vous avez des données pour splash_seasonal_image_processing , vous pouvez ajouter la durée de cette trace à votre tableau de métriques en haut de l'onglet Tableau de bord .

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

7fb64d2340410576.png

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

b1c275c30679062a.png

  1. Dans la page de détails, vous verrez une liste d'attributs 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 sur la droite :

8fa1a69019bb045e.png

  1. Les valeurs de durée de votre écran de démarrage seront probablement un peu différentes de celles de la capture d'écran ci-dessus, mais vous devriez avoir une durée 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éfini").

Dans cet atelier de programmation, la raison de cette durée plus longue peut être simple, mais dans une application réelle, elle n'est peut-être pas si évidente. Les données de durée collectées proviendront de différents appareils, exécutant l'application dans diverses conditions de connexion réseau, et ces conditions pourraient être pires que ce à quoi vous vous attendiez. Voyons comment vous enquêteriez sur ce problème s'il s'agissait d'une situation réelle.

  1. Cliquez sur Performances en haut de la page pour revenir à l'onglet principal du 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 verrez toutes les requêtes réseau de votre application agrégées dans des 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 au téléchargement et au traitement de l'image (c'est-à-dire la durée de la trace splash_seasonal_image_processing ), vous pouvez voir qu'une grande partie du temps est consacrée au téléchargement de l'image.

6f92ce0f23494507.png

Constatations sur les performances

À l'aide de Firebase Performance Monitoring, vous avez constaté l'impact suivant sur les utilisateurs finaux avec la nouvelle fonctionnalité 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 retard était dû au temps de réponse pour le téléchargement de l'image et au temps de traitement correspondant nécessaire pour l'image.

Dans l'étape suivante, vous atténuerez l'impact sur les performances en annulant la fonctionnalité et en identifiant comment vous pouvez améliorer l'implémentation de la fonctionnalité.

10. Annuler la fonctionnalité

Augmenter le temps d'attente de vos utilisateurs 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'inverser votre déploiement sans avoir à publier une autre version pour vos utilisateurs. Cela vous permet de réagir rapidement aux problèmes (comme les problèmes de performances que vous avez découverts à la dernière étape) et de minimiser le nombre d'utilisateurs mécontents.

En guise d'atténuation rapide, vous réinitialiserez le centile de déploiement à 0 afin que tous vos utilisateurs voient à nouveau l'image par défaut :

  1. Revenez à la page de configuration à distance dans la console Firebase.
  2. Cliquez sur Conditions en haut de la page.
  3. Cliquez sur la condition de Seasonal image rollout vous avez ajoutée précédemment.
  4. Changez le centile à 0 %.
  5. Cliquez sur Enregistrer la condition .
  6. Cliquez sur Publier les modifications et confirmez les modifications.

18c4f1cbac955a04.png

Redémarrez l'application dans Android Studio et vous devriez voir l'écran principal vide d'origine :

d946cab0df319e50.png

11. Résoudre les problèmes de performances

Vous avez découvert plus tôt dans l'atelier de programmation que le téléchargement d'une image pour votre écran de démarrage provoquait le ralentissement de votre application. En regardant de plus près l'image téléchargée, vous voyez que vous utilisez la résolution d'origine de l'image, qui était supérieure à 2 Mo ! Une solution rapide à votre problème de performances consiste à réduire la qualité à une résolution plus appropriée afin que l'image prenne moins de temps à télécharger.

Déployez à nouveau la valeur de configuration à distance

  1. Revenez à la page de configuration à distance dans la console Firebase.
  2. Cliquez sur l'icône Modifier pour le paramètre seasonal_image_url .
  3. Mettez à jour la valeur du déploiement d'image saisonnier 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 saisonnier de l'image , puis remettez le centile à 100 %.
  3. Cliquez sur Enregistrer la condition .

1974fa3bb789f36c.png

  1. Cliquez sur le bouton Publier les modifications .

12. Testez le correctif et configurez des alertes

Exécutez l'application localement

Avec la nouvelle valeur de configuration définie pour utiliser une URL d'image de téléchargement différente, 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

Visualiser les performances des modifications

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

  1. Cette fois, vous utiliserez le tableau des traces pour accéder à la page de détails. Dans le 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 revoir la répartition des attributs personnalisés. Si vous survolez les URL, vous verrez une valeur qui correspond à la nouvelle URL de l'image de taille réduite : 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 la valeur 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 vous avertir lorsqu'une trace dépasse un seuil que vous avez défini. Ouvrez le tableau de bord des performances et cliquez sur l'icône du menu de débordement (trois points) pour splash_screen_trace et cliquez sur Paramètres d'alerte .

4bd0a2a1faa14479.png

  1. Cliquez sur le bouton pour activer l'alerte de durée . Définissez la valeur de seuil légèrement au-dessus de la valeur que vous voyiez afin que si votre splash_screen_trace dépasse le seuil, vous recevrez un e-mail.
  1. Cliquez sur Enregistrer pour créer votre alerte. Faites défiler jusqu'au tableau des traces , puis cliquez sur l'onglet Traces personnalisées pour voir que votre alerte est activée !

2bb93639e2218d1.png

13. Félicitations !

Toutes nos 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 mesures de performances clés pour le déploiement d'une nouvelle fonctionnalité et réagi rapidement lorsqu'un problème de performances a été découvert. Tout cela était possible avec la possibilité d'apporter des modifications de configuration avec Remote Config et de surveiller les problèmes de performances en temps réel.

Ce que nous avons couvert

  • Ajouter le SDK de surveillance des performances Firebase à votre application
  • Ajouter une trace de code personnalisée à votre code pour mesurer une fonctionnalité spécifique
  • Configuration d'un paramètre de configuration à distance et d'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 vous avertir lorsque les performances de votre application franchissent un seuil que vous avez défini

Apprendre encore plus