Firebase-Leistungsüberwachung für das Web

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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/ , um eine Live-Demo zu sehen.

3b1284f5144b54f6.png

Was Sie lernen werden

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

Was du brauchen wirst

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

2. Holen Sie sich den Beispielcode

Klonen Sie das GitHub-Repository des Codelabs über die Befehlszeile:

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

Wenn Sie Git nicht installiert haben, können Sie das Repo alternativ als ZIP-Datei herunterladen .

Importieren Sie die Starter-App

Öffnen oder importieren Sie mit Ihrer IDE das Verzeichnis 📁 performance-monitoring-start aus dem geklonten Repository. Dieses 📁 performance-monitoring-start enthält den Startcode für das Codelab, das eine Chat-Web-App ist.

3. Erstellen und richten Sie ein Firebase-Projekt ein

Erstellen Sie ein Firebase-Projekt

  1. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen .
  2. Nennen Sie Ihr Firebase-Projekt FriendlyChat .

Merken Sie sich die Projekt-ID für Ihr Firebase-Projekt.

  1. Klicken Sie auf Projekt erstellen .

Fügen Sie dem Projekt eine Firebase-Web-App hinzu

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

ea9ab0db531a104c.png

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

Damit sich Nutzer mit ihren Google-Konten bei der Chat-App anmelden können, verwenden wir die Google -Anmeldemethode.

Sie müssen die Google -Anmeldung aktivieren:

  1. Suchen Sie in der Firebase-Konsole den Abschnitt „ Entwickeln “ im linken Bereich.
  2. Klicken Sie auf Authentifizierung und dann auf die Registerkarte Anmeldemethode ( gehen Sie zur Konsole ).
  3. Aktivieren Sie den Google -Anmeldeanbieter und klicken Sie dann auf Speichern .

7f3040a646c2e502.png

Aktivieren Sie Cloud Firestore

Die Web-App verwendet Cloud Firestore , um Chat-Nachrichten zu speichern und neue Chat-Nachrichten zu empfangen.

Sie müssen Cloud Firestore aktivieren:

  1. Klicken Sie im Abschnitt „ Entwickeln “ der Firebase-Konsole auf „ Datenbank “ .
  2. Klicken Sie im Cloud Firestore-Bereich auf Datenbank erstellen .
  3. Wählen Sie die Option Im Testmodus starten und klicken Sie dann auf Aktivieren , nachdem Sie den Haftungsausschluss zu den Sicherheitsregeln gelesen haben.

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, um Bilder zu speichern, hochzuladen und zu teilen.

Sie müssen Cloud Storage aktivieren:

  1. Klicken Sie im Abschnitt „ Entwickeln “ der Firebase-Konsole auf Speicher .
  2. Klicken Sie auf Erste Schritte .
  3. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln für Ihr Firebase-Projekt und klicken Sie dann auf Verstanden .

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-Dokumentation befolgen.
  2. Überprüfen Sie, ob die CLI korrekt 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 (dem Repository, das Sie zuvor im Codelab geklont haben) abzurufen. Aber um die Konfiguration abzurufen, müssen wir Ihre App mit Ihrem Firebase-Projekt verknüpfen.

  1. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale performance-monitoring-start Ihrer App zugreift.
  2. Verknüpfen Sie Ihre App mit Ihrem Firebase-Projekt, indem Sie den folgenden Befehl ausführen:
firebase use --add
  1. Wenn Sie dazu aufgefordert werden, wählen Sie Ihre Projekt-ID aus und geben Sie Ihrem Firebase-Projekt dann einen Alias.

Ein Alias ​​ist nützlich, wenn Sie mehrere Umgebungen haben (Produktion, Staging usw.). Für dieses Codelab verwenden wir jedoch einfach den Alias default .

  1. Befolgen Sie die verbleibenden Anweisungen in Ihrer Befehlszeile.

5. Integration mit Firebase Performance Monitoring

Es gibt verschiedene Möglichkeiten zur Integration mit dem Firebase Performance Monitoring SDK für das Web (Details finden Sie in der Dokumentation ). In diesem Codelab aktivieren wir die Leistungsüberwachung von Hosting-URLs .

Leistungsüberwachung hinzufügen und Firebase initialisieren

  1. Öffnen Sie die Datei src/index.js und fügen Sie dann die folgende Zeile unter TODO hinzu, um das Firebase Performance Monitoring SDK einzuschließen.

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. Für dieses Codelab haben wir bereits die folgende Zeile am Ende der Datei public/index.html für Sie hinzugefügt, aber überprüfen Sie noch einmal, ob sie vorhanden ist.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Fügen Sie in der Datei src/index.js die folgende Zeile unter TODO hinzu, um die Leistungsüberwachung zu initialisieren.

index.js

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

Die Leistungsüberwachung erfasst jetzt automatisch Messwerte zum Laden von Seiten und Netzwerkanfragen für Sie, wenn Benutzer Ihre Website verwenden! Lesen Sie die Dokumentation , um mehr über automatische Ablaufverfolgungen für das Laden von Seiten zu erfahren.

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

Die Verzögerung bei der ersten Eingabe ist nützlich, da der Browser, der auf eine Benutzerinteraktion reagiert, den Benutzern einen ersten Eindruck von der Reaktionsfähigkeit Ihrer App gibt.

Die Verzögerung bei der ersten Eingabe beginnt, wenn der Benutzer zum ersten Mal mit einem Element auf der Seite interagiert, z. B. auf eine Schaltfläche oder einen Hyperlink klickt. Es stoppt sofort, nachdem der Browser auf die Eingabe reagieren kann, was bedeutet, dass der Browser nicht damit beschäftigt ist, Ihre Inhalte zu laden oder zu parsen.

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

Öffnen Sie die Datei public/index.html und kommentieren Sie die folgende Zeile aus.

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 diesem Punkt haben Sie die Integration mit Firebase Performance Monitoring in Ihrem Code abgeschlossen!

In den folgenden Schritten erfahren Sie, wie Sie mithilfe der Firebase-Leistungsüberwachung benutzerdefinierte Ablaufverfolgungen hinzufügen. Wenn Sie nur die automatischen Ablaufverfolgungen erfassen möchten, gehen Sie zum Abschnitt „Bereitstellen und mit dem Senden von Bildern beginnen“.

6. Fügen Sie Ihrer App eine benutzerdefinierte Ablaufverfolgung hinzu

Mit der Leistungsüberwachung können Sie benutzerdefinierte Ablaufverfolgungen erstellen. Ein benutzerdefinierter Trace ist ein Bericht für die Dauer eines Ausführungsblocks in Ihrer App. Sie definieren den Beginn und das Ende einer benutzerdefinierten Ablaufverfolgung mithilfe der vom SDK bereitgestellten APIs.

  1. Rufen Sie in der Datei src/index.js ein Leistungsobjekt ab und erstellen Sie dann eine benutzerdefinierte Ablaufverfolgung zum Hochladen einer Bildnachricht.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Um eine benutzerdefinierte Ablaufverfolgung aufzuzeichnen, müssen Sie den Start- und Endpunkt für die Ablaufverfolgung angeben. Sie können sich eine Ablaufverfolgung 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 echte Benutzer brauchen, um Bilder in Ihrer Chat-App zu senden.

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

Sie können eine benutzerdefinierte Ablaufverfolgung weiter konfigurieren, um benutzerdefinierte Metriken für leistungsbezogene Ereignisse aufzuzeichnen, die in ihrem Bereich auftreten. Beispielsweise können Sie eine Metrik verwenden, um zu untersuchen, ob die Upload-Zeit von der Größe eines Bildes für die benutzerdefinierte Ablaufverfolgung beeinflusst wird, die wir im letzten Schritt definiert haben.

  1. Suchen Sie den benutzerdefinierten Trace aus dem vorherigen Schritt (definiert in Ihrer src/index.js -Datei).
  2. Fügen Sie die folgende Zeile unter TODO hinzu, um die Größe des hochgeladenen Bildes aufzuzeichnen.

index.js

 ...

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

 ...

Diese Metrik ermöglicht 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 benutzerdefinierte Attribute für Ihre benutzerdefinierten Ablaufverfolgungen erfassen. 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 auswirkt.

  1. Verwenden Sie den benutzerdefinierten Trace, der in Ihrer Datei src/index.js definiert ist.
  2. Fügen Sie die folgende Zeile unter TODO hinzu, um den MIME-Typ des hochgeladenen Bildes aufzuzeichnen.

index.js

 ...

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

 ...

Dieses Attribut ermöglicht die Leistungsüberwachung, um die benutzerdefinierte Ablaufverfolgungsdauer basierend auf dem hochgeladenen Bildtyp zu 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 sich nicht negativ auf die Leistung von Web-Apps während des Ladens von Seiten auswirkt. Vor dem Laden des SDK ist die Firebase Performance Monitoring API nicht verfügbar. In diesem Szenario können Sie immer noch benutzerdefinierte Traces hinzufügen, indem Sie die User Timing API verwenden. Das Firebase Performance SDK übernimmt die Dauer von measure() und protokolliert sie als benutzerdefinierte Traces.

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

  1. Fügen Sie in der Datei public/index.html die folgende Zeile hinzu, um den Beginn des Ladevorgangs der App-Styling-Skripts 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 Ladevorgangs der App-Styling-Skripts 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 von Ihnen hier erstellte Eintrag wird automatisch von Firebase Performance Monitoring erfasst. Später finden Sie in der Firebase-Leistungskonsole eine benutzerdefinierte Ablaufverfolgung namens loadStyling .

10. Stellen Sie Bilder bereit und beginnen Sie mit dem Senden

Bereitstellen auf Firebase-Hosting

Führen Sie nach dem Hinzufügen von Firebase Performance Monitoring zu Ihrem Code die folgenden Schritte aus, um Ihren Code auf Firebase Hosting bereitzustellen:

  1. Stellen Sie sicher, dass Ihre Befehlszeile auf das lokale performance-monitoring-start Ihrer App zugreift.
  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 vollständig mit Firebase-Hosting in zwei Ihrer eigenen Firebase-Subdomains gehostet wird: https://<projectId>.firebaseapp.com und https://<projectId>.web.app .

Stellen Sie sicher, dass die Leistungsüberwachung aktiviert ist

Öffnen Sie die Firebase-Konsole und wechseln Sie zur Registerkarte Leistung . Wenn Sie eine Willkommensnachricht mit dem Inhalt „SDK erkannt“ sehen, haben Sie die Firebase-Leistungsüberwachung 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, mehrere Bilder zu senden (einige Beispiele sind in public/images/ gespeichert), damit Sie die Verteilung von benutzerdefinierten Metriken und benutzerdefinierten Attributen 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 Bildnachrichten als Benutzer gesendet haben, können Sie Leistungsdaten im Leistungsüberwachungs-Dashboard (in der Firebase-Konsole) überprüfen.

Greifen Sie auf Ihr Dashboard zu

  1. Wählen Sie in der Firebase-Konsole das Projekt mit Ihrer Friendly Chat App aus.
  2. Suchen Sie im linken Bereich den Abschnitt Qualität und klicken Sie auf Leistung .

Überprüfen Sie die Daten auf dem Gerät

Nachdem die Leistungsüberwachung die Daten Ihrer App verarbeitet hat, werden am oberen Rand des Dashboards Registerkarten angezeigt. Schauen Sie später noch einmal vorbei, wenn Sie noch keine Daten oder Registerkarten sehen.

  1. Klicken Sie auf die Registerkarte Auf dem Gerät .
  • Die Tabelle Seitenladevorgänge zeigt die verschiedenen Leistungsmetriken, die die Leistungsüberwachung automatisch sammelt, während Ihre Seite geladen wird.
  • Die Tabelle Dauer zeigt alle benutzerdefinierten Ablaufverfolgungen, die Sie im Code Ihrer App definiert haben.
  1. Klicken Sie in der Tabelle Durations auf saveImageMessage , um bestimmte Metriken für die Ablaufverfolgung zu überprüfen.

e28758fd02d9ffac.png

  1. Klicken Sie auf Aggregieren , um die Verteilung der Bildgrößen zu überprüfen. Sie können die Metrik sehen, die Sie hinzugefügt haben, um die Bildgröße für diese benutzerdefinierte Ablaufverfolgung zu messen.

c3cbcfc0c739a0a8.png

  1. Klicken Sie im vorherigen Schritt neben Aggregate auf Im Laufe der Zeit . Sie können auch die Dauer des benutzerdefinierten Trace anzeigen. Klicken Sie auf Mehr anzeigen, um die gesammelten Daten detaillierter anzuzeigen.

16983baa31e05732.png

  1. Auf der sich öffnenden Seite können Sie die Dauerdaten nach Bild-MIME-Typ segmentieren, indem Sie auf imageType klicken. Diese spezifischen Daten wurden aufgrund des imageType-Attributs protokolliert, das Sie Ihrer benutzerdefinierten Ablaufverfolgung hinzugefügt haben.

8e5c9f32f42a1ca1.png

Überprüfen Sie die Netzwerkdaten

Eine HTTP/S-Netzwerkanforderung ist ein Bericht, der die Antwortzeit und Nutzlastgröße von Netzwerkaufrufen erfasst.

  1. Gehen Sie zurück zum Hauptbildschirm des Leistungsüberwachungs-Dashboards.
  2. Klicken Sie auf die Registerkarte Netzwerk , um eine Liste der Netzwerkanforderungseinträge für Ihre Web-App anzuzeigen.
  3. Durchsuchen Sie sie, um langsame Anfragen zu identifizieren, und beginnen Sie mit der Arbeit an einer Lösung, 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 benutzerdefinierter Ablaufverfolgungen zu Ihrem Code.
  • Aufzeichnen benutzerdefinierter Metriken, die mit dem benutzerdefinierten Trace verknüpft sind.
  • Leistungsdaten mit benutzerdefinierten Attributen segmentieren.
  • Verstehen, wie Sie das Leistungsüberwachungs-Dashboard verwenden, um Einblicke in die Leistung Ihrer App zu erhalten.

Mehr erfahren: