Monitorowanie wydajności Firebase w Internecie

1. Przegląd

Podczas tych zajęć z programowania dowiesz się, jak używać narzędzia Firebase Performance Monitoring do pomiaru wydajności aplikacji internetowej do czatowania. Odwiedź https://fireperf-Friendlychat.web.app/ , aby zobaczyć wersję demonstracyjną na żywo.

Czego się dowiesz

• Jak dodać monitorowanie wydajności Firebase do swojej aplikacji internetowej, aby uzyskać gotowe wskaźniki (ładowanie strony i żądania sieciowe).
• Jak zmierzyć konkretny fragment kodu za pomocą niestandardowych śladów.
• Jak rejestrować dodatkowe, niestandardowe metryki powiązane z niestandardowym śledzeniem.
• Jak dalej segmentować dane dotyczące wydajności za pomocą atrybutów niestandardowych.
• Jak korzystać z pulpitu nawigacyjnego monitorowania wydajności, aby zrozumieć wydajność aplikacji internetowej.

Co będziesz potrzebował

• Wybrane IDE lub edytor tekstu, taki jak WebStorm , Atom , Sublime lub VS Code
• Terminal/konsola
• Wybrana przeglądarka, np. Chrome
• Przykładowy kod laboratorium programistycznego (zobacz następną sekcję tego ćwiczenia z programowania, 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 gita, 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 ćwiczeń z programowania, czyli aplikacji internetowej do czatowania.

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

3. Kliknij opcję Utwórz projekt .

Dodaj aplikację internetową Firebase do projektu

1. Kliknij ikonę sieci aby utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację pod pseudonimem Friendly Chat , a następnie zaznacz pole obok Skonfiguruj także Hosting Firebase dla tej aplikacji .
3. Kliknij opcję Zarejestruj aplikację .
4. Kliknij pozostałe kroki. Nie musisz teraz wykonywać instrukcji wyświetlanych na ekranie; zostaną one omówione w późniejszych etapach tego ćwiczenia z programowania.

Włącz logowanie Google do uwierzytelniania Firebase

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

Musisz włączyć logowanie Google :

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

Włącz Cloud Firestore

Aplikacja internetowa korzysta z Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.

Musisz włączyć Cloud Firestore:

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

Kod startowy tego ćwiczenia z programowania zawiera bezpieczniejsze reguły. Wdrożymy je później w laboratorium z programowania.

Włącz przechowywanie w chmurze

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

Musisz włączyć przechowywanie w chmurze:

1. W sekcji Programowanie w konsoli Firebase kliknij Pamięć masowa .
2. Kliknij opcję Rozpocznij .
3. Przeczytaj zastrzeżenie dotyczące reguł bezpieczeństwa projektu Firebase, a następnie kliknij Rozumiem .

Kod początkowy zawiera podstawową regułę bezpieczeństwa, którą wdrożymy w dalszej części zajęć z programowania.

4. Zainstaluj interfejs wiersza poleceń Firebase

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

1. Zainstaluj interfejs 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 interfejsu CLI Firebase to wersja 8.0.0 lub nowsza.

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

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej tak, aby pobierał konfigurację aplikacji dla Firebase Hosting z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej podczas ćwiczeń z programowania). Aby jednak pobrać konfigurację, musimy powiązać Twoją aplikację z projektem Firebase.

4. Upewnij się, że wiersz poleceń 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 (produkcyjnych, testowych itp.). Jednak w tym ćwiczeniu z kodowania użyjmy po prostu 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 SDK do monitorowania wydajności Firebase w Internecie (szczegóły można znaleźć w dokumentacji ). Podczas tych zajęć z programowania umożliwimy monitorowanie wydajności z poziomu 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 pod TODO , aby uwzględnić pakiet SDK do monitorowania wydajności Firebase.

indeks.js

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

2. Musimy także zainicjować SDK Firebase obiektem konfiguracyjnym, który zawiera informacje o projekcie Firebase i aplikacji internetowej, której chcemy używać. Ponieważ korzystamy z Hostingu Firebase, możesz zaimportować specjalny skrypt, który wykona tę konfigurację za Ciebie. Na potrzeby tych ćwiczeń z kodowania dodaliśmy już następujący wiersz na dole pliku public/index.html , ale sprawdź dokładnie, czy tam jest.

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 automatycznych śladach ładowania strony.

Dodaj pierwszą bibliotekę wypełniania opóźnienia wejściowego

Opóźnienie pierwszego wprowadzenia danych jest przydatne, ponieważ reakcja przeglądarki na interakcję użytkownika daje użytkownikom pierwsze wrażenia na temat responsywności aplikacji.

Opóźnienie pierwszego wprowadzenia rozpoczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, na przykład klikając przycisk lub hiperłącze. Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie odpowiedzieć na dane wejściowe, co oznacza, że ​​przeglądarka nie jest zajęta ładowaniem ani analizowaniem zawartości.

Ta biblioteka Polyfill jest opcjonalna w celu integracji monitorowania wydajności.

Otwórz plik public/index.html i 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ą monitorowania wydajności Firebase. Jeśli chcesz zbierać tylko automatyczne ślady, przejdź do sekcji „Wdróż i rozpocznij wysyłanie obrazów”.

6. Dodaj niestandardowy ślad do swojej aplikacji

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

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

indeks.js

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

2. Aby zarejestrować niestandardowy ślad, należy określić punkt początkowy i końcowy śladu. Trace można traktować jako licznik czasu.

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 niestandardowego śledzenia zostanie zarejestrowany, jeśli użytkownik wyśle ​​wiadomość graficzną. Dzięki temu dowiesz się, ile czasu zajmuje rzeczywistym użytkownikom wysyłanie obrazów w aplikacji do czatowania.

7. Dodaj niestandardową metrykę do swojej aplikacji.

Możesz dodatkowo skonfigurować śledzenie niestandardowe , 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, aby sprawdzić, czy rozmiar obrazu dla niestandardowego śledzenia, który zdefiniowaliśmy w ostatnim kroku, ma wpływ na czas przesyłania.

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ć atrybuty niestandardowe w swoich niestandardowych śladach . Atrybuty niestandardowe mogą pomóc w segmentowaniu danych według kategorii specyficznych dla Twojej aplikacji. Można na przykład zebrać typ MIME pliku obrazu, aby sprawdzić, jak 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 niestandardowy ślad za pomocą interfejsu User Timing API

Zestaw SDK do monitorowania wydajności Firebase został zaprojektowany tak, aby można go było ładować asynchronicznie i nie wpływać negatywnie na wydajność aplikacji internetowych podczas ładowania strony. Przed załadowaniem pakietu SDK interfejs API monitorowania wydajności Firebase nie jest dostę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 metody Measure() i zarejestruje je jako niestandardowe ślady.

Będziemy mierzyć czas ładowania skryptów stylizujących aplikację za pomocą interfejsu User Timing API.

1. W pliku public/index.html dodaj następujący wiersz, aby oznaczyć początek ładowania skryptów stylizujących aplikację.

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 oznaczyć koniec ładowania skryptów stylizujących aplikację 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>

Wpis, który tutaj utworzyłeś, zostanie automatycznie zebrany przez usługę Firebase Performance Monitoring. Później będziesz mógł znaleźć niestandardowy ślad o nazwie loadStyling w konsoli Firebase Performance.

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

Wdróż w hostingu Firebase

Po dodaniu Monitorowania wydajności Firebase do swojego kodu wykonaj następujące kroki, aby wdrożyć kod w Hostingu Firebase:

1. Upewnij się, że wiersz poleceń 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 Firebase Hosting 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 karty Wydajność . Jeśli zobaczysz komunikat powitalny „Wykryto pakiet SDK”, oznacza to, że pomyślnie zintegrowałeś się z monitorowaniem wydajności Firebase!

Wyślij wiadomość obrazkową

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

1. Po zalogowaniu się do aplikacji do czatowania 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 atrybutów niestandardowych.

Nowe wiadomości powinny wyświetlić się w interfejsie aplikacji wraz z wybranymi obrazami.

11. Monitoruj pulpit nawigacyjny

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, w którym znajduje się aplikacja Friendly Chat .
2. W lewym panelu znajdź sekcję Jakość i kliknij Wydajność .

Przejrzyj dane na urządzeniu

Gdy monitorowanie wydajności przetworzy dane aplikacji, w górnej części pulpitu nawigacyjnego zostaną wyświetlone karty. Pamiętaj, aby sprawdzić ponownie później, jeśli nie widzisz jeszcze żadnych danych ani kart.

1. Kliknij kartę Na urządzeniu .

• Tabela ładowania stron przedstawia różne metryki wydajności, które monitorowanie wydajności zbiera automatycznie podczas ładowania strony.
• Tabela Durations zawiera wszelkie niestandardowe ślady zdefiniowane w kodzie aplikacji.

2. Kliknij opcję saveImageMessage w tabeli Czas trwania , aby przejrzeć określone metryki śledzenia.

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

4. Kliknij opcję Na przestrzeni czasu obok opcji Agreguj w poprzednim kroku. Możesz także wyświetlić czas trwania niestandardowego śledzenia. Kliknij opcję Wyświetl więcej, aby bardziej szczegółowo przejrzeć zebrane dane.

5. Na stronie, która się otworzy, możesz posegmentować dane dotyczące czasu trwania według typu MIME obrazu, klikając imageType . Te konkretne dane zostały zarejestrowane ze względu na atrybut imageType dodany do niestandardowego śledzenia.

Przejrzyj dane sieciowe

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

1. Wróć do głównego ekranu panelu monitorowania wydajności.
2. Kliknij kartę Sieć , aby wyświetlić listę wpisów żądań sieciowych dla aplikacji internetowej.
3. Przejrzyj je, aby zidentyfikować powolne żądania i rozpocząć pracę nad poprawką poprawiającą wydajność aplikacji!

12. Gratulacje!

Włączyłeś pakiet SDK Firebase do monitorowania wydajności i zebrałeś automatyczne i niestandardowe ślady, aby zmierzyć rzeczywistą wydajność swojej aplikacji do czatowania!

Co omówiliśmy:

• Dodawanie pakietu SDK do monitorowania wydajności Firebase do aplikacji internetowej.
• Dodawanie niestandardowych śladów do kodu.
• Rejestrowanie metryk niestandardowych powiązanych z niestandardowym śledzeniem.
• Segmentacja danych dotyczących wydajności przy użyciu atrybutów niestandardowych.
• Zrozumienie, jak korzystać z panelu 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/szybki/