Monitorowanie wydajności Firebase w internecie

1. Przegląd

W tym laboratorium kodowania dowiesz się, jak używać monitorowania wydajności Firebase do mierzenia wydajności aplikacji internetowej do czatu. Odwiedź https://fireperf-friendlychat.web.app/ , aby zobaczyć prezentację na żywo.

Czego się nauczysz

• Jak dodać monitorowanie wydajności Firebase do swojej aplikacji internetowej, aby uzyskać gotowe dane (obciążenie strony i żądania sieciowe).
• Jak zmierzyć określony fragment kodu za pomocą niestandardowych śladów.
• Jak rejestrować dodatkowe, niestandardowe metryki powiązane z niestandardowym śledzeniem.
• Jak dalej segmentować dane o skuteczności za pomocą atrybutów niestandardowych.
• Jak korzystać z pulpitu nawigacyjnego monitorowania wydajności, aby zrozumieć wydajność aplikacji internetowej.

Co będziesz potrzebował

• IDE lub edytor tekstu do wyboru, taki jak WebStorm , Atom , Sublime lub VS Code
• Terminal/konsola
• Wybrana przeglądarka, na przykład Chrome
• Przykładowy kod laboratorium kodu (Zobacz następną sekcję tego laboratorium kodu, aby dowiedzieć się, jak uzyskać kod).

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub Codelab z wiersza poleceń:

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

Alternatywnie, jeśli nie masz zainstalowanego git, możesz pobrać repozytorium jako plik ZIP .

Zaimportuj aplikację startową

Używając swojego IDE, otwórz lub zaimportuj katalog 📁 performance-monitoring-start ze sklonowanego repozytorium. Ten 📁 katalog performance-monitoring-start zawiera kod startowy dla codelab, czyli aplikacji internetowej do czatu.

3. Utwórz i skonfiguruj projekt Firebase

Utwórz projekt Firebase

1. W konsoli Firebase kliknij Dodaj projekt .
2. Nazwij swój projekt Firebase FriendlyChat .

Zapamiętaj identyfikator projektu swojego projektu Firebase.

3. Kliknij Utwórz projekt .

Dodaj aplikację internetową Firebase do projektu

1. Kliknij ikonę internetową aby utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację pod pseudonimem Friendly Chat , a następnie zaznacz pole wyboru Skonfiguruj także Hosting Firebase dla tej aplikacji .
3. Kliknij Zarejestruj aplikację .
4. Kliknij pozostałe kroki. Nie musisz teraz postępować zgodnie z instrukcjami wyświetlanymi na ekranie; zostaną one omówione w późniejszych krokach tego modułu.

Włącz logowanie Google na potrzeby uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się do aplikacji czatu przy użyciu kont Google, użyjemy metody logowania Google .

Musisz włączyć logowanie przez Google :

1. W konsoli Firebase znajdź sekcję Develop w lewym panelu.
2. Kliknij Uwierzytelnianie , a następnie kliknij kartę Metoda logowania ( przejdź do konsoli ).
3. Włącz dostawcę logowania Google , a następnie kliknij Zapisz .

Włącz Cloud Firestore

Aplikacja internetowa używa Cloud Firestore do zapisywania wiadomości na czacie i odbierania nowych wiadomości na czacie.

Musisz włączyć Cloud Firestore:

1. W sekcji Programowanie konsoli Firebase kliknij Baza danych .
2. Kliknij Utwórz bazę danych w okienku Cloud Firestore.
3. Wybierz opcję Uruchom w trybie testowym , a następnie kliknij Włącz po przeczytaniu zastrzeżenia dotyczącego zasad bezpieczeństwa.

Kod startowy dla tego laboratorium kodów zawiera bezpieczniejsze reguły. Wdrożymy je później w codelab.

Włącz przechowywanie w chmurze

Aplikacja internetowa korzysta z Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.

Musisz włączyć Cloud Storage:

1. W sekcji Develop konsoli Firebase kliknij Storage .
2. Kliknij Rozpocznij .
3. Przeczytaj zastrzeżenie dotyczące reguł bezpieczeństwa dla Twojego projektu Firebase, a następnie kliknij Rozumiem .

Kod początkowy zawiera podstawową regułę bezpieczeństwa, którą wdrożymy później w laboratorium kodu.

4. Zainstaluj interfejs wiersza poleceń Firebase

Interfejs wiersza poleceń (CLI) Firebase umożliwia używanie Firebase Hosting do lokalnego udostępniania aplikacji internetowej, a także do wdrażania aplikacji internetowej w projekcie Firebase.

1. Zainstaluj CLI, postępując zgodnie z instrukcjami zawartymi w dokumentacji Firebase.
2. Sprawdź, czy interfejs CLI został poprawnie zainstalowany, uruchamiając następujące polecenie w terminalu:

firebase --version

Upewnij się, że Twoja wersja Firebase CLI to v8.0.0 lub nowsza.

3. Autoryzuj Firebase CLI, uruchamiając następujące polecenie:

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej, aby pobierać konfigurację Twojej aplikacji dla Hostingu Firebase z lokalnego katalogu Twojej aplikacji (repozytorium sklonowanego wcześniej w laboratorium kodu). Aby jednak pobrać konfigurację, musimy powiązać Twoją aplikację z projektem Firebase.

4. Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
5. Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:

firebase use --add

6. Po wyświetleniu monitu wybierz identyfikator projektu, a następnie nadaj projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjne, pomostowe itp.). Jednak w tym laboratorium kodu po prostu użyjmy aliasu default .

7. Postępuj zgodnie z pozostałymi instrukcjami w wierszu poleceń.

5. Zintegruj z monitorowaniem wydajności Firebase

Istnieją różne sposoby integracji z pakietem Firebase Performance Monitoring SDK dla sieci (szczegółowe informacje można znaleźć w dokumentacji ). Podczas tego laboratorium kodowania włączymy monitorowanie wydajności z adresów URL hostingu .

Dodaj monitorowanie wydajności i zainicjuj Firebase

1. Otwórz plik src/index.js , a następnie dodaj następujący wiersz poniżej TODO , aby dołączyć pakiet SDK Firebase Performance Monitoring.

indeks.js

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

2. Musimy również zainicjować Firebase SDK obiektem konfiguracyjnym, który zawiera informacje o projekcie Firebase i aplikacji internetowej, której chcemy użyć. Ponieważ korzystamy z Hostingu Firebase, możesz zaimportować specjalny skrypt, który wykona tę konfigurację za Ciebie. Na potrzeby tego laboratorium kodowania dodaliśmy już następujący wiersz na dole pliku public/index.html , ale sprawdź, czy się tam znajduje.

indeks.html

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

3. W pliku src/index.js dodaj następujący wiersz poniżej TODO , aby zainicjować monitorowanie wydajności.

indeks.js

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

Monitorowanie wydajności będzie teraz automatycznie zbierać dane dotyczące obciążenia strony i żądań sieciowych, gdy użytkownicy będą korzystać z Twojej witryny! Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o automatycznym śledzeniu ładowania strony.

Dodaj pierwszą bibliotekę polyfill opóźnienia wejścia

Opóźnienie przy pierwszym wprowadzeniu danych jest przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje użytkownikom pierwsze wrażenia na temat czasu reakcji Twojej aplikacji.

Pierwsze opóźnienie wejścia rozpoczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, na przykład kliknięciem przycisku lub hiperłącza. Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie zareagować na dane wejściowe, co oznacza, że ​​przeglądarka nie jest zajęta ładowaniem ani analizowaniem treści.

Ta biblioteka polyfill jest opcjonalna do integracji monitorowania wydajności.

Otwórz plik public/index.html , a następnie odkomentuj następujący wiersz.

indeks.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>

W tym momencie zakończyłeś integrację z Firebase Performance Monitoring w swoim kodzie!

W poniższych krokach dowiesz się, jak dodawać niestandardowe ślady za pomocą Firebase Performance Monitoring. Jeśli chcesz zbierać tylko automatyczne ślady, przejdź do sekcji „Wdróż i rozpocznij wysyłanie obrazów”.

6. Dodaj niestandardowe śledzenie do swojej aplikacji

Monitorowanie wydajności umożliwia tworzenie niestandardowych śladów . Śledzenie niestandardowe to raport dotyczący czasu trwania blokady wykonania w Twojej aplikacji. Definiujesz początek i koniec śledzenia niestandardowego za pomocą interfejsów API udostępnianych przez zestaw SDK.

1. W pliku src/index.js pobierz obiekt wydajności, a następnie utwórz niestandardowy ślad do przesłania wiadomości graficznej.

indeks.js

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

2. Aby zarejestrować ślad niestandardowy, należy określić punkt początkowy i punkt końcowy śladu. Możesz myśleć o śladzie jako o zegarze.

indeks.js

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

 ...

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

Pomyślnie zdefiniowałeś niestandardowy ślad! Po wdrożeniu kodu czas trwania śledzenia niestandardowego zostanie zarejestrowany, jeśli użytkownik wyśle ​​wiadomość graficzną. Dzięki temu dowiesz się, ile czasu zajmuje prawdziwym użytkownikom wysyłanie obrazów w Twojej aplikacji do czatu.

7. Dodaj niestandardową metrykę do swojej aplikacji.

Możesz dodatkowo skonfigurować niestandardowe śledzenie , aby rejestrować niestandardowe metryki dla zdarzeń związanych z wydajnością, które występują w jego zakresie. Możesz na przykład użyć metryki do zbadania, czy na czas przesyłania ma wpływ rozmiar obrazu dla niestandardowego śladu, który zdefiniowaliśmy w ostatnim kroku.

1. Znajdź niestandardowy ślad z poprzedniego kroku (zdefiniowany w pliku src/index.js ).
2. Dodaj następujący wiersz poniżej TODO , aby zapisać rozmiar przesłanego obrazu.

indeks.js

 ...

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

 ...

Ta metryka umożliwia monitorowanie wydajności w celu rejestrowania niestandardowego czasu trwania śledzenia oraz rozmiaru przesłanego obrazu.

8. Dodaj niestandardowy atrybut do swojej aplikacji

Opierając się na poprzednich krokach, możesz także zbierać niestandardowe atrybuty w swoich niestandardowych śladach . Atrybuty niestandardowe mogą pomóc w segmentowaniu danych według kategorii specyficznych dla Twojej aplikacji. Na przykład możesz zebrać typ MIME pliku obrazu, aby zbadać, w jaki sposób typ MIME może wpłynąć na wydajność.

1. Użyj niestandardowego śledzenia zdefiniowanego w pliku src/index.js .
2. Dodaj następujący wiersz poniżej TODO , aby zapisać typ MIME przesłanego obrazu.

indeks.js

 ...

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

 ...

Ten atrybut umożliwia monitorowanie wydajności w celu kategoryzowania niestandardowego czasu trwania śledzenia na podstawie typu przesłanego obrazu.

9. [Rozszerz] Dodaj niestandardowe śledzenie za pomocą interfejsu User Timing API

Pakiet SDK Firebase Performance Monitoring został zaprojektowany w taki sposób, aby można go było ładować asynchronicznie i nie wpływał negatywnie na wydajność aplikacji internetowych podczas wczytywania strony. Przed załadowaniem pakietu SDK interfejs Firebase Performance Monitoring API jest niedostępny. W tym scenariuszu nadal możesz dodawać niestandardowe ślady za pomocą interfejsu User Timing API . Zestaw SDK wydajności Firebase pobierze czasy trwania z Measure() i zarejestruje je jako niestandardowe ślady.

Będziemy mierzyć czas ładowania skryptów do stylizacji aplikacji za pomocą User Timing API.

1. W pliku public/index.html dodaj następujący wiersz, aby zaznaczyć początek ładowania skryptów stylów aplikacji.

indeks.html

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

2. Dodaj następujące wiersze, aby zaznaczyć koniec ładowania skryptów stylów aplikacji i zmierzyć czas między początkiem a końcem.

indeks.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>

Utworzony tutaj wpis zostanie automatycznie zebrany przez Firebase Performance Monitoring. Później będzie można znaleźć niestandardowy ślad o nazwie loadStyling w konsoli Firebase Performance.

10. Wdróż i rozpocznij wysyłanie obrazów

Wdróż w Hostingu Firebase

Po dodaniu Firebase Performance Monitoring do swojego kodu wykonaj następujące kroki, aby wdrożyć swój kod w Hostingu Firebase:

1. Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
2. Wdróż swoje pliki w projekcie Firebase, uruchamiając następujące polecenie:

firebase deploy

3. Konsola powinna wyświetlić następujące informacje:

=== 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

4. Odwiedź swoją aplikację internetową, która jest teraz w pełni hostowana przy użyciu Hostingu Firebase w dwóch Twoich własnych subdomenach Firebase: https://<projectId>.firebaseapp.com i https://<projectId>.web.app .

Sprawdź, czy monitorowanie wydajności jest włączone

Otwórz konsolę Firebase i przejdź do zakładki Wydajność . Jeśli zobaczysz wiadomość powitalną „Wykryto SDK”, pomyślnie zintegrowałeś się z Firebase Performance Monitoring!

Wyślij wiadomość graficzną

Wygeneruj dane dotyczące wydajności, wysyłając obrazy w aplikacji czatu.

1. Po zalogowaniu się do aplikacji czatu kliknij przycisk przesyłania obrazu .
2. Wybierz plik obrazu za pomocą selektora plików.
3. Spróbuj wysłać wiele obrazów (kilka próbek jest przechowywanych w public/images/ ), aby przetestować dystrybucję niestandardowych metryk i niestandardowych atrybutów.

Nowe wiadomości powinny być wyświetlane w interfejsie aplikacji wraz z wybranymi obrazami.

11. Monitoruj deskę rozdzielczą

Po wdrożeniu aplikacji internetowej i wysłaniu wiadomości graficznych jako użytkownik możesz przeglądać dane dotyczące wydajności w panelu monitorowania wydajności (w konsoli Firebase).

Uzyskaj dostęp do swojego pulpitu nawigacyjnego

1. W konsoli Firebase wybierz projekt, który zawiera Twoją aplikację Friendly Chat .
2. W lewym panelu znajdź sekcję Jakość i kliknij Wydajność .

Przejrzyj dane na urządzeniu

Gdy funkcja monitorowania wydajności przetworzy dane Twojej aplikacji, zobaczysz zakładki u góry pulpitu nawigacyjnego. Jeśli nie widzisz jeszcze żadnych danych ani kart, sprawdź ponownie później.

1. Kliknij kartę Na urządzeniu .

• Tabela wczytywania strony zawiera różne wskaźniki wydajności zbierane automatycznie przez monitorowanie wydajności podczas wczytywania strony.
• Tabela Durations zawiera wszystkie niestandardowe ślady zdefiniowane w kodzie aplikacji.

2. Kliknij saveImageMessage w tabeli Durations , aby przejrzeć określone metryki dla śledzenia.

3. Kliknij opcję Agreguj , aby przejrzeć rozkład rozmiarów obrazów. Możesz zobaczyć metrykę dodaną do mierzenia rozmiaru obrazu dla tego niestandardowego śladu.

4. Kliknij W czasie , który znajduje się obok Agreguj w poprzednim kroku. Możesz także wyświetlić czas trwania śledzenia niestandardowego. Kliknij Wyświetl więcej , aby przejrzeć zebrane dane bardziej szczegółowo.

5. Na stronie, która się otworzy, możesz podzielić dane czasu trwania według typu MIME obrazu, klikając imageType . Te konkretne dane zostały zarejestrowane z powodu atrybutu imageType dodanego do niestandardowego śledzenia.

Przejrzyj dane sieciowe

Żądanie sieciowe HTTP/S to raport rejestrujący czas odpowiedzi i rozmiar ładunku wywołań sieciowych.

1. Wróć do głównego ekranu pulpitu nawigacyjnego monitorowania wydajności.
2. Kliknij kartę Sieć , aby wyświetlić listę wpisów żądań sieciowych dotyczących Twojej aplikacji internetowej.
3. Przejrzyj je, aby zidentyfikować powolne żądania i rozpocząć pracę nad poprawką, która poprawi wydajność Twojej aplikacji!

12. Gratulacje!

Włączyłeś Firebase SDK do monitorowania wydajności i zebrałeś automatyczne i niestandardowe dane śledzenia, aby mierzyć rzeczywistą wydajność Twojej aplikacji do czatu!

Co omówiliśmy:

• Dodanie pakietu SDK Firebase Performance Monitoring do Twojej aplikacji internetowej.
• Dodawanie niestandardowych śladów do kodu.
• Rejestrowanie niestandardowych metryk powiązanych z niestandardowym śledzeniem.
• Segmentacja danych dotyczących wydajności przy użyciu niestandardowych atrybutów.
• Zrozumienie, jak korzystać z pulpitu nawigacyjnego monitorowania wydajności, aby uzyskać wgląd w wydajność aplikacji.

Ucz się więcej:

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