Firebase Performance Monitoring pour le Web

1. Présentation

Dans cet atelier de programmation, vous allez apprendre à utiliser Firebase Performance Monitoring pour mesurer les performances d'une application Web de chat. Accédez à https://fireperf-friendlychat.web.app/ pour voir une démonstration en direct.

Cet atelier de programmation est la suite de l'atelier de programmation Web Firebase, dans lequel vous apprenez à créer une application de chat à l'aide du SDK Web Firebase. Si vous souhaitez apprendre à utiliser la plate-forme Firebase sur le Web en créant une application de chat, suivez d'abord l'atelier de programmation Firebase pour le Web. Si vous savez déjà utiliser la plate-forme et la CLI Firebase, et que vous souhaitez en savoir plus sur Firebase Performance Monitoring, vous êtes au bon endroit.

Points abordés

• Ajouter Firebase Performance Monitoring à votre application Web pour obtenir des métriques prêtes à l'emploi (chargement de la page et requêtes réseau)
• Mesurer un code spécifique à l'aide de traces personnalisées
• Enregistrer des métriques personnalisées supplémentaires associées à une trace personnalisée
• Segmenter davantage vos données sur les performances à l'aide d'attributs personnalisés
• Utiliser le tableau de bord de surveillance des performances pour comprendre les performances de votre application Web

Prérequis

• L'IDE ou l'éditeur de texte de votre choix, tel que WebStorm, Atom, Sublime ou VS Code
• Un terminal/une console
• Un navigateur de votre choix, tel que Chrome
• L'exemple de code de l'atelier de programmation (voir la section suivante de cet atelier de programmation pour savoir comment obtenir le code)

2. Obtenir l'exemple de code

Clonez le dépôt GitHub de l'atelier de programmation à partir de la ligne de commande:

git clone https://github.com/firebase/codelab-friendlychat-web

Si vous n'avez pas installé git, vous pouvez également télécharger le dépôt sous forme de fichier ZIP.

Le dépôt friendlychat-web contient des exemples de projets adaptés à différentes plates-formes.

Cet atelier de programmation n'utilise que ces deux dépôts:

• 📁 performance-monitoring-start: code de départ sur lequel vous allez vous appuyer dans cet atelier de programmation.
• 📁 performance-monitoring: code complet de l'exemple d'application finalisé.

Remarque: Si vous souhaitez exécuter l'application terminée, vous devrez tout de même créer un projet Firebase dans la console Firebase.

Importer l'application de démarrage

Dans votre IDE, ouvrez ou importez le répertoire 📁performance-monitoring-start à partir du dépôt cloné. Ce répertoire 📁 performance-monitoring-start contient le code de démarrage de l'atelier de programmation, qui est une application Web de chat.

3. Créer et configurer un projet Firebase

Créer un projet Firebase

1. Dans la console Firebase, cliquez sur Ajouter un projet.
2. Nommez votre projet Firebase FriendlyChat.

Prenez note de l'ID de votre projet Firebase.

3. Cliquez sur Créer un projet.

Important: Votre projet Firebase s'appelle FriendlyChat,, mais Firebase lui attribue automatiquement un ID de projet unique au format friendlychat-1234. Cet identifiant unique correspond à la façon dont votre projet est réellement identifié (y compris dans la CLI), tandis que FriendlyChat est simplement un nom à afficher.

Passer à un forfait Firebase supérieur

Pour utiliser Cloud Storage for Firebase, votre projet Firebase doit être associé au forfait Blaze avec paiement à l'usage, ce qui signifie qu'il est associé à un compte de facturation Cloud.

• Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
• Si vous débutez avec Firebase et Google Cloud, vérifiez si vous pouvez bénéficier d'un crédit de 300$et d'un compte de facturation Cloud en essai sans frais.
• Si vous suivez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur s'il existe des crédits Cloud disponibles.

Pour passer à la formule Blaze, procédez comme suit:

1. Dans la console Firebase, sélectionnez l'option Mettre à niveau votre forfait.
2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
   Si vous avez dû créer un compte de facturation Cloud dans le cadre de cette migration, vous devrez peut-être revenir au flux de migration dans la console Firebase pour la terminer.

Remarque: Vous pouvez passer votre projet au forfait Spark sans frais une fois cet atelier de programmation terminé.

Ajouter une application Web Firebase au projet

1. Cliquez sur l'icône Web  pour créer une application Web Firebase.
2. Enregistrez l'application sous le nom Friendly Chat, puis cochez la case Configurer également Firebase Hosting pour cette application.
3. Cliquez sur Enregistrer l'application.
4. Cliquez pour passer les étapes restantes. Vous n'avez pas besoin de suivre les instructions à l'écran pour le moment. Elles seront abordées dans les étapes suivantes de cet atelier de programmation.

Activer Google Sign-In pour Firebase Authentication

Pour permettre aux utilisateurs de se connecter à l'application de chat avec leurs comptes Google, nous utiliserons la méthode de connexion Google.

Vous devez activer la connexion Google:

1. Dans la console Firebase, localisez la section Développer dans le panneau de gauche.
2. Cliquez sur Authentication (Authentification), puis sur l'onglet Sign-in Method (Méthode de connexion) (accédez à la console).
3. Activez le fournisseur de connexion Google, puis cliquez sur Enregistrer.

Configurer Cloud Firestore

L'application Web utilise Cloud Firestore pour enregistrer des messages de chat et en recevoir.

Voici comment configurer Cloud Firestore dans votre projet Firebase:

1. Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Firestore database (Base de données Firestore).
2. Cliquez sur Créer une base de données.
3. Laissez le champ Database ID (ID de la base de données) défini sur (default).
4. Sélectionnez un emplacement pour votre base de données, puis cliquez sur Suivant.
   Pour une application réelle, choisissez un emplacement proche de vos utilisateurs.
5. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre base de données.
6. Cliquez sur Créer.

Configurer Cloud Storage for Firebase

L'application Web utilise Cloud Storage for Firebase pour stocker, importer et partager des photos.

Voici comment configurer Cloud Storage for Firebase dans votre projet Firebase:

1. Dans le panneau de gauche de la console Firebase, développez Build (Compilation), puis sélectionnez Storage (Stockage).
2. Cliquez sur Commencer.
3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
   Les buckets dans US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau"Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres zones géographiques sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
4. Cliquez sur Démarrer en mode test. Lisez la clause de non-responsabilité concernant les règles de sécurité.
   Plus tard dans cet atelier de programmation, vous ajouterez des règles de sécurité pour sécuriser vos données. Ne distribuez pas ni n'exposez pas publiquement une application sans ajouter de règles de sécurité à votre bucket Storage.
5. Cliquez sur Créer.

4. Installer l'interface de ligne de commande Firebase

L'interface de ligne de commande (CLI) Firebase vous permet d'utiliser Firebase Hosting pour diffuser votre application Web en local et de la déployer dans votre projet Firebase.

1. Installez la CLI en suivant ces instructions dans la documentation Firebase.
2. Vérifiez que la CLI a bien été installée en exécutant la commande suivante dans un terminal:

firebase --version

Assurez-vous que votre version de la CLI Firebase est la version 8.0.0 ou ultérieure.

3. Autorisez la CLI Firebase en exécutant la commande suivante:

firebase login

Nous avons configuré le modèle d'application Web pour extraire la configuration de votre application pour Firebase Hosting à partir du répertoire local de votre application (le dépôt que vous avez cloné plus tôt dans l'atelier de programmation). Toutefois, pour extraire la configuration, nous devons associer votre application à votre projet Firebase.

4. Assurez-vous que votre ligne de commande accède au répertoire performance-monitoring-start local de votre application.
5. Pour associer votre application à votre projet Firebase, exécutez la commande suivante:

firebase use --add

6. Lorsque vous y êtes invité, sélectionnez votre ID de projet, puis attribuez un alias à votre projet Firebase.

Un alias est utile si vous disposez de plusieurs environnements (production, préproduction, etc.). Cependant, pour cet atelier de programmation, utilisons simplement l'alias default.

7. Suivez le reste des instructions dans votre ligne de commande.

5. Intégrer à Firebase Performance Monitoring

Il existe plusieurs façons d'intégrer le SDK Firebase Performance Monitoring pour le Web (consultez la documentation pour en savoir plus). Dans cet atelier de programmation, nous allons activer la surveillance des performances à partir des URL d'hébergement.

Ajouter la surveillance des performances et initialiser Firebase

1. Ouvrez le fichier src/index.js, puis ajoutez la ligne suivante sous TODO pour inclure le SDK Firebase Performance Monitoring.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Nous devons également initialiser le SDK Firebase avec un objet de configuration contenant des informations sur le projet Firebase et l'application Web que nous souhaitons utiliser. Étant donné que nous utilisons Firebase Hosting, vous pouvez importer un script spécial qui effectuera cette configuration à votre place. Pour cet atelier de programmation, nous avons déjà ajouté la ligne suivante au bas du fichier public/index.html, mais vérifiez qu'elle est bien présente.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. Dans le fichier src/index.js, ajoutez la ligne suivante sous TODO pour initialiser la surveillance des performances.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

La surveillance des performances collecte désormais automatiquement les métriques de chargement de page et de requête réseau lorsque les utilisateurs accèdent à votre site. Pour en savoir plus sur les traces de chargement de page automatiques, consultez la documentation.

Ajouter la bibliothèque de polyfill pour le délai de première saisie

Le First Input Delay est utile, car le navigateur qui répond à une interaction utilisateur donne aux utilisateurs leur première impression sur la réactivité de votre application.

Le délai de première saisie commence lorsque l'utilisateur interagit pour la première fois avec un élément de la page, par exemple en cliquant sur un bouton ou un lien hypertexte. Il s'arrête immédiatement lorsque le navigateur peut répondre à la saisie, ce qui signifie qu'il n'est pas occupé à charger ou à analyser votre contenu.

Cette bibliothèque de polyfill est facultative pour l'intégration de la surveillance des performances.

Ouvrez le fichier public/index.html, puis annulez la mise en commentaire de la ligne suivante.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

À ce stade, vous avez terminé l'intégration de Firebase Performance Monitoring dans votre code.

Il existe d'autres façons d'intégrer le SDK Firebase Performance Monitoring pour le Web. Pour en savoir plus, consultez Premiers pas avec Performance Monitoring pour le Web.

Dans les étapes suivantes, vous allez découvrir comment ajouter des traces personnalisées à l'aide de Firebase Performance Monitoring. Si vous ne souhaitez collecter que les traces automatiques, accédez à la section "Déployer et commencer à envoyer des images".

6. Ajouter une trace personnalisée à votre application

La surveillance des performances vous permet de créer des traces personnalisées. Une trace personnalisée est un rapport sur la durée d'un bloc d'exécution dans votre application. Vous définissez le début et la fin d'une trace personnalisée à l'aide des API fournies par le SDK.

1. Dans le fichier src/index.js, obtenez un objet de performances, puis créez une trace personnalisée pour importer un message image.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Pour enregistrer une trace personnalisée, vous devez spécifier le point de départ et le point d'arrêt de la trace. Vous pouvez considérer une trace comme un minuteur.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Vous avez défini une trace personnalisée. Une fois votre code déployé, la durée de la trace personnalisée sera enregistrée si un utilisateur envoie un message avec une image. Cela vous donnera une idée du temps qu'il faut aux utilisateurs réels pour envoyer des images dans votre application de chat.

7. Ajoutez une métrique personnalisée à votre application.

Vous pouvez également configurer une trace personnalisée pour enregistrer des métriques personnalisées pour les événements liés aux performances qui se produisent dans son champ d'application. Par exemple, vous pouvez utiliser une métrique pour déterminer si la taille d'une image affecte le temps d'importation pour la trace personnalisée que nous avons définie à l'étape précédente.

1. Recherchez la trace personnalisée de l'étape précédente (définie dans votre fichier src/index.js).
2. Ajoutez la ligne suivante sous TODO pour enregistrer la taille de l'image importée.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Cette métrique permet à la surveillance des performances d'enregistrer la durée de la trace personnalisée ainsi que la taille de l'image importée.

8. Ajouter un attribut personnalisé à votre application

En vous appuyant sur les étapes précédentes, vous pouvez également collecter des attributs personnalisés sur vos traces personnalisées. Les attributs personnalisés peuvent vous aider à segmenter les données en fonction de catégories spécifiques à votre application. Par exemple, vous pouvez collecter le type MIME du fichier image pour déterminer son impact sur les performances.

1. Utilisez la trace personnalisée définie dans votre fichier src/index.js.
2. Ajoutez la ligne suivante sous TODO pour enregistrer le type MIME de l'image importée.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Cet attribut permet à la surveillance des performances de classer la durée de la trace personnalisée en fonction du type d'image importé.

9. [Extension] Ajouter une trace personnalisée avec l'API User Timing

Le SDK Firebase Performance Monitoring a été conçu pour pouvoir être chargé de manière asynchrone et ne pas avoir d'impact négatif sur les performances des applications Web lors du chargement de la page. Avant le chargement du SDK, l'API Firebase Performance Monitoring n'est pas disponible. Dans ce scénario, vous pouvez toujours ajouter des traces personnalisées à l'aide de l'API User Timing. Le SDK Firebase Performance récupère les durées de measure() et les consigne en tant que traces personnalisées.

Nous allons mesurer la durée de chargement des scripts de stylisation de l'application à l'aide de l'API User Timing.

1. Dans le fichier public/index.html, ajoutez la ligne suivante pour marquer le début de la charge des scripts de style de l'application.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Ajoutez les lignes suivantes pour marquer la fin de la charge des scripts de style de l'application et pour mesurer la durée entre le début et la fin.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

L'entrée que vous avez créée ici sera automatiquement collectée par Firebase Performance Monitoring. Vous trouverez une trace personnalisée appelée loadStyling dans la console Firebase Performances ultérieurement.

10. Déployer et commencer à envoyer des images

Déployer sur Firebase Hosting

Après avoir ajouté Firebase Performance Monitoring à votre code, procédez comme suit pour le déployer sur Firebase Hosting:

1. Assurez-vous que votre ligne de commande accède au répertoire performance-monitoring-start local de votre application.
2. Déployez vos fichiers dans votre projet Firebase en exécutant la commande suivante:

firebase deploy

3. La console doit afficher ce qui suit:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. Accédez à votre application Web, désormais entièrement hébergée avec Firebase Hosting, sur deux de vos propres sous-domaines Firebase: https://<projectId>.firebaseapp.com et https://<projectId>.web.app.

Vérifier que la surveillance des performances est activée

Ouvrez la console Firebase, puis accédez à l'onglet Performances. Si le message d'accueil "SDK détecté" s'affiche, cela signifie que vous avez bien intégré Firebase Performance Monitoring.

Envoyer un message avec une image

Générez des données sur les performances en envoyant des images dans votre application de chat.

1. Une fois connecté à votre application de chat, cliquez sur le bouton d'importation d'image .
2. Sélectionnez un fichier image à l'aide du sélecteur de fichiers.
3. Essayez d'envoyer plusieurs images (quelques exemples sont stockés dans public/images/) afin de pouvoir tester la distribution des métriques et des attributs personnalisés.

Les nouveaux messages doivent s'afficher dans l'UI de l'application, avec les images que vous avez sélectionnées.

11. Surveiller le tableau de bord

Après avoir déployé votre application Web et envoyé des messages avec des images en tant qu'utilisateur, vous pouvez consulter les données de performances dans le tableau de bord de surveillance des performances (dans la console Firebase).

Remarque: Les données sur les performances s'affichent généralement sous 12 heures. Si vous ne voyez aucun résultat dans la console Firebase, revenez plus tard.

Accéder à votre tableau de bord

1. Dans la console Firebase, sélectionnez le projet contenant votre application Friendly Chat.
2. Dans le panneau de gauche, recherchez la section Qualité, puis cliquez sur Performances.

Examiner les données de l'appareil

Une fois que la surveillance des performances a traité les données de votre application, des onglets s'affichent en haut du tableau de bord. Si aucune donnée ni aucun onglet ne s'affichent, n'hésitez pas à revenir plus tard.

1. Cliquez sur l'onglet Sur l'appareil.

• Le tableau Chargements de pages affiche les différentes métriques de performances que la surveillance des performances collecte automatiquement pendant le chargement de votre page.
• Le tableau Durées affiche toutes les traces personnalisées que vous avez définies dans le code de votre application.

2. Cliquez sur saveImageMessage dans le tableau Durées pour consulter les métriques spécifiques de la trace.

3. Cliquez sur Agréger pour examiner la distribution des tailles d'image. Vous pouvez voir la métrique que vous avez ajoutée pour mesurer la taille de l'image pour cette trace personnalisée.

4. Cliquez sur Au fil du temps à côté de Agréger à l'étape précédente. Vous pouvez également consulter la durée de la trace personnalisée. Cliquez sur Afficher plus pour consulter plus en détail les données collectées.

5. Sur la page qui s'affiche, vous pouvez segmenter les données de durée par type MIME d'image en cliquant sur imageType. Ces données spécifiques ont été enregistrées en raison de l'attribut imageType que vous avez ajouté à votre trace personnalisée.

Examiner les données réseau

Une requête réseau HTTP/S est un rapport qui capture le temps de réponse et la taille de la charge utile des appels réseau.

1. Revenez à l'écran principal du tableau de bord de surveillance des performances.
2. Cliquez sur l'onglet Network (Réseau) pour afficher la liste des entrées de requêtes réseau de votre application Web.
3. Parcourez-les pour identifier les requêtes lentes et commencez à travailler sur une solution pour améliorer les performances de votre application.

12. Félicitations !

Vous avez activé le SDK Firebase pour la surveillance des performances et collecté des traces automatiques et personnalisées afin de mesurer les performances réelles de votre application de chat.

Points abordés :

• Ajouter le SDK Firebase Performance Monitoring à votre application Web
• Ajouter des traces personnalisées à votre code
• Enregistrement des métriques personnalisées associées à la trace personnalisée.
• Segmenter les données sur les performances à l'aide d'attributs personnalisés
• Comprendre comment utiliser le tableau de bord de surveillance des performances pour obtenir des insights sur les performances de votre application

En savoir plus:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/