Firebase-Leistungsüberwachung für das Web

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie mit Firebase Performance Monitoring die Leistung einer Chat-Web-App messen. Besuchen Sie https://fireperf-friendlychat.web.app/ eine Live - Demo zu sehen.

3b1284f5144b54f6.png

Was du lernst

  • So fügen Sie Ihrer Web-App Firebase Performance Monitoring hinzu, um sofort einsatzbereite Messwerte (Seitenlade- und Netzwerkanforderungen) zu erhalten.
  • So messen Sie einen bestimmten Codeabschnitt mit benutzerdefinierten Traces.
  • So zeichnen Sie zusätzliche, benutzerdefinierte Metriken auf, die mit einem benutzerdefinierten Trace verknüpft sind.
  • So segmentieren Sie Ihre Leistungsdaten mit benutzerdefinierten Attributen weiter.
  • So verwenden Sie das Dashboard zur Leistungsüberwachung, um die Leistung Ihrer Web-App zu verstehen.

Was du brauchen wirst

  • Das IDE oder Texteditor Ihrer Wahl, wie WebStorm , Atom , Sublime oder VS - Code
  • Ein Terminal/eine Konsole
  • Ein Browser Ihrer Wahl, z. B. Chrome
  • Der Beispielcode des Codelabs (Informationen zum Abrufen des Codes finden Sie im nächsten Abschnitt dieses Codelabs.)

2. Holen Sie sich den Beispielcode

Klon mit dem den Codelab GitHub - Repository über die Befehlszeile:

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

Wenn Sie Alternativ haben keine git installiert haben , können Sie die repo als Zip - Datei herunterladen .

Importieren Sie die Starter-App

Verwenden Sie Ihre IDE, öffnen oder 📁 importieren performance-monitoring-start - Verzeichnis aus dem geklonten Repository. Dieses 📁 performance-monitoring-start enthält den Startcode für das Code - Lab, die ein Chat - Web - App ist.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

  1. In der Firebase - Konsole , klicken Sie auf Projekt hinzufügen.
  2. Benennen Sie Ihre Firebase Projekt FriendlyChat .

Merken Sie sich die Projekt-ID Ihres Firebase-Projekts.

  1. Klicken Sie auf Projekt erstellen.

Dem Projekt eine Firebase-Web-App hinzufügen

  1. Klicken Sie auf das Websymbol 58d6543a156e56f9.png um eine neue Firebase-Web-App zu erstellen.
  2. Registrieren Sie die App mit dem Spitznamen Friendly Chat , und dann das Kontrollkästchen neben sich auch für Firebase diese App Hosting eingerichtet.
  3. Klicken Sie auf Registrieren App.
  4. Klicken Sie sich durch die verbleibenden Schritte. Sie müssen den Anweisungen auf dem Bildschirm jetzt nicht folgen. diese werden in späteren Schritten dieses Codelabs behandelt.

ea9ab0db531a104c.png

Aktivieren Sie die Google-Anmeldung für die Firebase-Authentifizierung

Damit Benutzer auf die Chat - App melden Sie sich mit ihren Google - Konten, werden wir die Google-Anmeldemethode verwenden.

Sie müssen Google-Anmeldung aktivieren:

  1. In der Konsole Firebase, suchen Sie den Abschnitt im linken Bereich entwickeln.
  2. Klicken Sie auf Authentifizierung, klicken Sie auf den Anmelde-Verfahren Registerkarte ( gehen Sie zu trösten ).
  3. Aktivieren Sie die Google-Anmeldeanbieter, und klicken Sie dann auf Speichern.

7f3040a646c2e502.png

Cloud Firestore aktivieren

Der Web - App nutzt Cloud - Firestor Chat - Nachrichten zu speichern und neue Chat - Nachrichten.

Sie müssen Cloud Firestore aktivieren:

  1. In der Konsole ist Firebase Abschnitt Entwickeln Sie auf Datenbank.
  2. Klicken Sie auf Datenbank erstellen in dem Cloud Firestor Bereich.
  3. Wählen Sie den Start in Testmodus - Option, klicken Sie dann auf Aktivieren nach dem Haftungsausschluss über die Sicherheitsregeln zu lesen.

Der Startcode für dieses Codelab enthält sicherere Regeln. Wir werden sie später im Codelab bereitstellen.

24bd1a097492eac6.png

Cloud-Speicher aktivieren

Die Web-App verwendet Cloud Storage for Firebase zum Speichern, Hochladen und Freigeben von Bildern.

Sie müssen Cloud Storage aktivieren:

  1. In der Konsole ist Firebase Abschnitt entwickelt, auf Speicher.
  2. Klicken Sie auf Erste Schritte.
  3. Lesen Sie den Haftungsausschluss über Sicherheitsregeln für Ihr Projekt Firebase, und klicken Sie dann auf Got es.

Der Startcode enthält eine grundlegende Sicherheitsregel, die wir später im Codelab bereitstellen.

4. Installieren Sie die Firebase-Befehlszeilenschnittstelle

Mit der Firebase-Befehlszeilenschnittstelle (CLI) können Sie Firebase Hosting verwenden, um Ihre Web-App lokal bereitzustellen und Ihre Web-App in Ihrem Firebase-Projekt bereitzustellen.

  1. Installieren Sie die CLI , indem Sie diese Anweisungen in der Firebase docs.
  2. Stellen Sie sicher, dass die CLI ordnungsgemäß installiert wurde, indem Sie den folgenden Befehl in einem Terminal ausführen:
firebase --version

Stellen Sie sicher, dass Ihre Version der Firebase-CLI v8.0.0 oder höher ist.

  1. Autorisieren Sie die Firebase-CLI, indem Sie den folgenden Befehl ausführen:
firebase login

Wir haben die Web-App-Vorlage eingerichtet, um die Konfiguration Ihrer App für Firebase Hosting aus dem lokalen Verzeichnis Ihrer App abzurufen (dem Repository, das Sie zuvor im Codelab geklont haben). Um die Konfiguration abzurufen, müssen wir Ihre App jedoch mit Ihrem Firebase-Projekt verknüpfen.

  1. Stellen Sie sicher , dass Ihre Befehlszeile Ihrer App lokalen zugreift performance-monitoring-start
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wählen Sie bei Aufforderung Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt einen Alias.

Ein Alias ​​ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Doch für diesen Codelab, lassen Sie sich einfach den Alias verwendet default .

  1. Folgen Sie den restlichen Anweisungen in Ihrer Befehlszeile.

5. Integration mit Firebase Performance Monitoring

Es gibt verschiedene Möglichkeiten , mit der Firebase Performance - Monitoring - SDK für Web (siehe die Integration Dokumentation für Details). In diesem Code - Lab werden wir die Überwachung der Leistung von Hosting - URLs ermöglichen.

Leistungsüberwachung hinzufügen und Firebase initialisieren

  1. Öffnen Sie die src/index.js Datei, dann fügen Sie die folgende Zeile unter dem TODO , um die Firebase Performance - Monitoring - SDK enthalten.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Außerdem müssen wir das Firebase SDK mit einem Konfigurationsobjekt initialisieren, das Informationen über das Firebase-Projekt und die Web-App enthält, die wir verwenden möchten. Da wir Firebase Hosting verwenden, können Sie ein spezielles Skript importieren, das diese Konfiguration für Sie übernimmt. Zu diesem Code - Lab haben wir die folgende Zeile für Sie am unteren Rand der bereits hinzugefügt public/index.html Datei, aber doppelte Kontrolle , dass es da ist.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Im src/index.js - Datei die folgende Zeile unter dem TODO Leistungsüberwachung zu initialisieren.

index.js

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

Die Leistungsüberwachung erfasst jetzt automatisch Messwerte für Seitenauslastung und Netzwerkanfragen für Sie, wenn Benutzer Ihre Site verwenden! Lesen Sie die Dokumentation mehr über die automatische Seitenladespuren zu lernen.

Fügen Sie die erste Polyfill-Bibliothek mit Eingangsverzögerung hinzu

Erste Eingangsverzögerung ist sinnvoll , da der Browser auf eine Interaktion des Benutzers reagiert Benutzer ihre ersten Eindrücke über die Reaktionsfähigkeit Ihrer App gibt.

Die Verzögerung der ersten Eingabe beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. durch Klicken auf eine Schaltfläche oder einen Hyperlink. Es stoppt sofort, nachdem der Browser auf die Eingabe reagiert hat, was bedeutet, dass der Browser nicht damit beschäftigt ist, Ihren Inhalt zu laden oder zu parsen.

Diese Polyfill-Bibliothek ist optional für die Integration der Leistungsüberwachung.

Öffnen Sie die public/index.html Datei, dann Kommentar- der folgenden Zeile.

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>

An dieser Stelle haben Sie die Integration mit Firebase Performance Monitoring in Ihren Code abgeschlossen!

In den folgenden Schritten erfahren Sie, wie Sie mit Firebase Performance Monitoring benutzerdefinierte Traces hinzufügen. Wenn Sie nur die automatischen Traces sammeln möchten, gehen Sie zum Abschnitt "Bereitstellen und Senden von Bildern starten".

6. Fügen Sie Ihrer App einen benutzerdefinierten Trace hinzu

Performance Monitoring ermöglicht es Ihnen , individuelle Spuren zu erstellen. Eine benutzerdefinierte Ablaufverfolgung ist ein Bericht für die Dauer eines Ausführungsblocks in Ihrer App. Sie definieren den Anfang und das Ende einer benutzerdefinierten Ablaufverfolgung mithilfe der vom SDK bereitgestellten APIs.

  1. Im src/index.js Datei, ein Leistungsobjekt erhalten, dann eine eigene Spur erstellen für das Hochladen eines Bildes Nachricht.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Um einen benutzerdefinierten Trace aufzuzeichnen, müssen Sie den Start- und Endpunkt für den Trace angeben. Sie können sich einen Trace als Timer vorstellen.

index.js

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

 ...

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

Sie haben erfolgreich einen benutzerdefinierten Trace definiert! Nach der Bereitstellung Ihres Codes wird die Dauer der benutzerdefinierten Ablaufverfolgung aufgezeichnet, wenn ein Benutzer eine Bildnachricht sendet. Dadurch erhalten Sie eine Vorstellung davon, wie lange es dauert, dass Benutzer in der realen Welt Bilder in Ihrer Chat-App senden.

7. Fügen Sie Ihrer App eine benutzerdefinierte Metrik hinzu.

Sie können weiterhin eine konfigurieren benutzerdefinierten Trace zur Aufzeichnung individueller Kennzahlen für leistungsbezogene Ereignisse , die in ihrem Umfang auftreten. Sie können beispielsweise mithilfe einer Metrik untersuchen, ob die Upload-Zeit von der Größe eines Bildes für den im letzten Schritt definierten benutzerdefinierten Trace beeinflusst wird.

  1. Suchen Sie die benutzerdefinierte Spur aus dem vorherigen Schritt (definiert in Ihrer src/index.js - Datei).
  2. Fügen Sie die folgende Zeile unter der TODO die Größe des hochgeladenen Bild aufzuzeichnen.

index.js

 ...

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

 ...

Diese Metrik ermöglicht es der Leistungsüberwachung, die benutzerdefinierte Ablaufverfolgungsdauer sowie die hochgeladene Bildgröße aufzuzeichnen.

8. Fügen Sie Ihrer App ein benutzerdefiniertes Attribut hinzu

Aufbauend auf den vorherigen Schritten können Sie auch collect Attribute individuelle auf Ihren individuellen Spuren . Benutzerdefinierte Attribute können bei der Segmentierung von Daten nach Kategorien helfen, die für Ihre App spezifisch sind. Sie können beispielsweise den MIME-Typ der Bilddatei erfassen, um zu untersuchen, wie sich der MIME-Typ auf die Leistung auswirken könnte.

  1. Verwenden Sie die benutzerdefinierte Spur definiert in Ihrer src/index.js Datei.
  2. Fügen Sie die folgende Zeile unter dem TODO den MIME - Typ des hochgeladenen Bild aufzuzeichnen.

index.js

 ...

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

 ...

Mit diesem Attribut kann die Leistungsüberwachung die benutzerdefinierte Ablaufverfolgungsdauer basierend auf dem hochgeladenen Bildtyp kategorisieren.

9. [Erweitern] Fügen Sie einen benutzerdefinierten Trace mit der User Timing API hinzu

Das Firebase Performance Monitoring SDK wurde so konzipiert, dass es asynchron geladen werden kann und die Leistung von Web-Apps beim Laden der Seite nicht beeinträchtigt. Vor dem Laden des SDK ist die Firebase Performance Monitoring API nicht verfügbar. In diesem Szenario sind Sie noch in der Lage individuelle Spuren hinzufügen , indem die Verwendung von Nutzer - Timing - API . Firebase Performance SDK wird die Dauer von abholen measure () und melden sie als individuelle Spuren.

Wir werden die Dauer des Ladens von App-Styling-Skripten mithilfe der User Timing API messen.

  1. In der public/index.html - Datei die folgende Zeile den Start des App Styling - Skripte laden zu markieren.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Fügen Sie die folgenden Zeilen hinzu, um das Ende des Ladens der App-Styling-Skripte zu markieren und die Dauer zwischen Start und Ende zu messen.

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>

Der hier erstellte Eintrag wird automatisch von Firebase Performance Monitoring erfasst. Sie können eine benutzerdefinierte Spur finden genannt loadStyling später in der Firebase Leistungskonsole.

10. Bereitstellen und Senden von Bildern

Auf Firebase-Hosting bereitstellen

Nachdem Sie Ihrem Code Firebase Performance Monitoring hinzugefügt haben, führen Sie die folgenden Schritte aus, um Ihren Code in Firebase Hosting bereitzustellen:

  1. Stellen Sie sicher , dass Ihre Befehlszeile Ihrer App lokalen zugreift performance-monitoring-start
  2. Stellen Sie Ihre Dateien in Ihrem Firebase-Projekt bereit, indem Sie den folgenden Befehl ausführen:
firebase deploy
  1. Die Konsole sollte Folgendes anzeigen:
=== 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.appspot.com
✔  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
  1. Besuchen Sie Ihre Web - App , die jetzt ist voll Firebase gehosteten Hosting bei zwei Ihrer eigenen Firebase Subdomains: https://<projectId>.firebaseapp.com und https://<projectId>.web.app .

Stellen Sie sicher, dass die Leistungsüberwachung aktiviert ist

Öffnen Firebase Konsole und gehen Sie auf die Registerkarte Leistung. Wenn eine Willkommensnachricht mit der Meldung "SDK erkannt" angezeigt wird, haben Sie die Firebase Performance Monitoring erfolgreich integriert!

30df67e5a07d03b0.png

Bildnachricht senden

Generieren Sie einige Leistungsdaten, indem Sie Bilder in Ihrer Chat-App senden.

  1. Nachdem Sie sich bei Ihrer Chat-App angemeldet haben, klicken Sie auf die Schaltfläche zum Hochladen von Bildern 13734cb66773e5a3.png .
  2. Wählen Sie mit der Dateiauswahl eine Bilddatei aus.
  3. Versuchen Sie das Senden mehrerer Bilder (einige Proben werden in gespeichert public/images/ ) , so dass Sie die Verteilung von benutzerdefinierten Metriken und benutzerdefinierte Attribute testen können.

Neue Nachrichten sollten zusammen mit Ihren ausgewählten Bildern in der Benutzeroberfläche der App angezeigt werden.

11. Überwachen Sie das Dashboard

Nachdem Sie Ihre Web-App bereitgestellt und als Benutzer Bildnachrichten gesendet haben, können Sie die Leistungsdaten im Leistungsüberwachungs-Dashboard (in der Firebase-Konsole) überprüfen.

Greifen Sie auf Ihr Dashboard zu

  1. In der Firebase - Friendly Chat Konsole , wählen Sie das Projekt , das Ihre ist Friendly Chat App.
  2. Im linken Fensterbereich die Qualität Abschnitt, und klicken Sie auf Leistung.

Daten auf dem Gerät überprüfen

Nachdem die Leistungsüberwachung die Daten Ihrer App verarbeitet hat, werden oben im Dashboard Registerkarten angezeigt. Schauen Sie später noch einmal vorbei, wenn Sie noch keine Daten oder Tabs sehen.

  1. Klicken Sie auf die Registerkarte On - Gerät.
  • Die Seite lädt Tabelle zeigt die verschiedenen Performance - Metriken , dass die Leistung automatisch Überwachung sammelt , während die Seite geladen ist.
  • Die Dauern Tabelle zeigt alle benutzerdefinierten Spuren , die Sie in Ihrer App - Code festgelegt haben.
  1. Klicken Sie saveImageMessage in der Dauern Tabelle spezifische Metriken für die Spur zu überprüfen.

e28758fd02d9ffac.png

  1. Klicken Sie auf Aggregate , die Verteilung von Bildgrößen zu überprüfen. Sie können die Metrik sehen, die Sie hinzugefügt haben, um die Bildgröße für diesen benutzerdefinierten Trace zu messen.

c3cbcfc0c739a0a8.png

  1. Klicken Sie im Laufe der Zeit, die Aggregate im vorherigen Schritt weiter ist. Sie können auch die Dauer der benutzerdefinierten Spur anzuzeigen. Klicken Sie auf Mehr , die gesammelten Daten im Detail zu überprüfen.

16983baa31e05732.png

  1. Auf der Seite , die durch Klicken auf imagetype können Sie Segment die Dauerdaten von Bild MIME - Typ wird geöffnet. Diese spezifischen Daten wurden aufgrund des imageType-Attributs protokolliert, das Sie Ihrem benutzerdefinierten Trace hinzugefügt haben.

8e5c9f32f42a1ca1.png

Netzwerkdaten überprüfen

Eine HTTP / S Netzwerkanforderung ist ein Bericht, erfasst die Reaktionszeit und die Nutzlast der Größe des Netzwerks Anrufs.

  1. Gehen Sie zurück zum Hauptbildschirm des Leistungsüberwachungs-Dashboards.
  2. Klicken Sie auf die Registerkarte Netzwerk eine Liste der Netzwerkanfrage Einträge für Ihre Web - App zu sehen.
  3. Durchsuchen Sie sie, um langsame Anfragen zu identifizieren und beginnen Sie mit der Arbeit an einem Fix, um die Leistung Ihrer App zu verbessern!

26a2be152a77ffb9.png

12. Herzlichen Glückwunsch!

Sie haben das Firebase SDK für die Leistungsüberwachung aktiviert und automatische Traces und benutzerdefinierte Traces gesammelt, um die reale Leistung Ihrer Chat-App zu messen!

Was wir abgedeckt haben:

  • Hinzufügen des Firebase Performance Monitoring SDK zu Ihrer Web-App.
  • Hinzufügen von benutzerdefinierten Ablaufverfolgungen zu Ihrem Code.
  • Aufzeichnen von benutzerdefinierten Metriken, die mit dem benutzerdefinierten Trace verbunden sind.
  • Segmentierung von Leistungsdaten mit benutzerdefinierten Attributen.
  • Verstehen, wie Sie das Dashboard zur Leistungsüberwachung verwenden, um Einblicke in die Leistung Ihrer App zu erhalten.

Mehr erfahren: