Monitorowanie wydajności Firebase w internecie

1. Przegląd

W tym ćwiczeniu z programowania 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ć demo 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 ze śledzeniem niestandardowym.
• 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ł

• Wybrany IDE lub edytor tekstu, taki jak WebStorm , Atom , Sublime lub VS Code
• Terminal/konsola
• Wybrana przeglądarka, taka jak Chrome
• Przykładowy kod ćwiczenia z programowania (zobacz następną sekcję tego ćwiczenia z programowania, aby dowiedzieć się, jak uzyskać kod).

2. Pobierz przykładowy kod

Sklonuj repozytorium GitHub laboratorium z poziomu 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ą

Korzystając z IDE, otwórz lub zaimportuj 📁 katalog performance-monitoring-start ze sklonowanego repozytorium. Ten 📁 katalog performance-monitoring-start zawiera kod startowy ćwiczenia z programowania, 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 dla swojego 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 opcji Skonfiguruj również 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 dalszych krokach tego ćwiczenia z programowania.

Włącz logowanie Google do uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się do aplikacji czatu przy użyciu ich 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 w konsoli Firebase kliknij opcję Baza danych .
2. Kliknij 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 ćwiczeniu 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ć Cloud Storage:

1. W sekcji Programowanie w konsoli Firebase kliknij Pamięć .
2. Kliknij Rozpocznij .
3. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa dla projektu Firebase, a następnie kliknij Rozumiem .

Kod startowy zawiera podstawową regułę bezpieczeństwa, którą wdrożymy później w ćwiczeniu z programowania.

4. Zainstaluj interfejs wiersza poleceń Firebase

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

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

firebase --version

Upewnij się, że Twoja wersja interfejsu Firebase CLI to 8.0.0 lub nowsza.

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

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację Twojej aplikacji dla Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w laboratorium programowania). 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 swojemu projektowi Firebase alias.

Alias ​​jest przydatny, jeśli masz wiele środowisk (produkcyjnych, pomostowych itp.). Jednak w tym ćwiczeniu z programowania użyjmy po prostu aliasu default .

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

5. Integracja z monitorowaniem wydajności Firebase

Istnieje wiele sposobów na integrację z pakietem SDK Firebase Performance Monitoring SDK (szczegóły znajdziesz w dokumentacji ). Podczas tego ćwiczenia z programowania 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 uwzględnić pakiet SDK Firebase Performance Monitoring.

index.js

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

2. Musimy również zainicjować pakiet Firebase SDK za pomocą obiektu konfiguracji, 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 ćwiczenia z programowania dodaliśmy już dla Ciebie następujący wiersz na dole pliku public/index.html , ale sprawdź, czy tam jest.

index.html

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

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

index.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 korzystają z Twojej witryny! Zapoznaj się z dokumentacją , aby dowiedzieć się więcej o automatycznym śledzeniu ładowania strony.

Dodaj pierwszą bibliotekę opóźnień wejściowych polyfill

Opóźnienie pierwszego wejścia jest przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje użytkownikom pierwsze wrażenie na temat responsywności aplikacji.

Opóźnienie pierwszego wejścia 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 do integracji monitorowania wydajności.

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

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>

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 tylko zbierać 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 . Śledzenie niestandardowe to raport dotyczący czasu trwania bloku wykonania w Twojej aplikacji. Możesz zdefiniować początek i koniec śledzenia niestandardowego za pomocą interfejsów API udostępnianych przez zestaw SDK.

1. W src/index.js pobierz obiekt wydajności, a następnie utwórz niestandardowy ślad, aby przesłać komunikat obrazu.

index.js

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

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

index.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ść z obrazem. Dzięki temu dowiesz się, ile czasu zajmuje rzeczywistym użytkownikom wysyłanie obrazów w Twojej aplikacji do czatu.

7. Dodaj niestandardowe dane 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. Na przykład możesz użyć metryki, aby sprawdzić, 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 src/index.js ).
2. Dodaj następujący wiersz poniżej TODO , aby zapisać rozmiar przesłanego obrazu.

index.js

 ...

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

 ...

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

8. Dodaj niestandardowy atrybut do swojej aplikacji

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

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

index.js

 ...

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

 ...

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

9. [Rozszerz] Dodaj własny ślad za pomocą User Timing API

Pakiet SDK do monitorowania wydajności Firebase został zaprojektowany tak, aby mógł być ładowany asynchronicznie i nie wpływał negatywnie na wydajność aplikacji internetowych podczas ładowania 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 API czasu użytkownika . Pakiet SDK wydajności Firebase pobierze czasy trwania z metody Measure() i zarejestruje je jako niestandardowe ślady.

Zamierzamy zmierzyć czas wczytywania skryptów stylizacji aplikacji za pomocą interfejsu User Timing API.

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

index.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 stylizacji aplikacji i zmierzyć czas między początkiem a końcem.

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>

Wpis, który tutaj utworzyłeś, zostanie automatycznie zebrany przez Monitorowanie wydajności Firebase. Niestandardowy ślad o nazwie loadStyling będzie można znaleźć później w konsoli Firebase Performance.

10. Wdróż i zacznij wysyłać obrazy

Wdróż w Hostingu Firebase

Po dodaniu funkcji Firebase Performance Monitoring do kodu wykonaj następujące kroki, aby wdrożyć kod w Firebase Hosting:

1. Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
2. Wdróż 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 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 komunikat powitalny z informacją „Wykryto pakiet SDK”, oznacza to, że pomyślnie zintegrowałeś się z Monitorowaniem wydajności Firebase!

Wyślij wiadomość obrazkową

Wygeneruj niektóre dane o wydajności, wysyłając obrazy w aplikacji do 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 wyświetlać się 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 monitorowanie wydajności przetworzy dane aplikacji, zobaczysz karty u góry pulpitu nawigacyjnego. Pamiętaj, aby zajrzeć później, jeśli nie widzisz jeszcze żadnych danych ani kart.

1. Kliknij kartę Na urządzeniu .

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

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

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

4. Kliknij W czasie obok opcji Agregacja w poprzednim kroku. Możesz również 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 posegmentować 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.

Sprawdź dane sieciowe

Żądanie sieciowe HTTP/S to raport, który przechwytuje czas odpowiedzi i rozmiar ładunku wywołań sieciowych.

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

12. Gratulacje!

Włączono pakiet Firebase SDK do monitorowania wydajności oraz zebrano automatyczne i niestandardowe ślady, aby mierzyć rzeczywiste działanie aplikacji do czatu!

Co omówiliśmy:

• Dodanie pakietu SDK do monitorowania wydajności Firebase do Twojej aplikacji internetowej.
• Dodawanie niestandardowych śladów do kodu.
• Rejestrowanie niestandardowych metryk powiązanych ze śledzeniem niestandardowym.
• Segmentowanie danych o skuteczności przy użyciu atrybutów niestandardowych.
• 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/szybki/