Monitorowanie wydajności Firebase dla sieci

Z tego kodowania dowiesz się, jak używać funkcji 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 (ładowanie strony i żądania sieciowe).
• Jak zmierzyć określony fragment kodu za pomocą niestandardowych śladów.
• Jak rejestrować dodatkowe, niestandardowe metryki powiązane z niestandardowym śladem.
• Jak dalej segmentować dane 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 edytor IDE lub tekst, taki jak WebStorm , Atom , Sublime lub VS Code
• Terminal / konsola
• Wybrana przeglądarka, np. Chrome
• Przykładowy kod codelab (zobacz następną sekcję tego codelab, aby dowiedzieć się, jak uzyskać kod).

Sklonuj repozytorium Codelab GitHub 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ą

Korzystając ze środowiska IDE, otwórz lub zaimportuj 📁 katalog performance-monitoring-start ze sklonowanego repozytorium. Ten 📁 katalog performance-monitoring-start zawiera kod startowy codelab, który jest aplikacją internetową do czatu.

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ę, używając pseudonimu Friendly Chat , a następnie zaznacz pole obok 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 dalszych krokach tego kodeksu.

Włącz logowanie Google do uwierzytelniania Firebase

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

Musisz włączyć logowanie Google :

1. W konsoli Firebase znajdź sekcję Programowanie w lewym panelu.
2. Kliknij opcję 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 korzysta z Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości czatu.

Musisz włączyć Cloud Firestore:

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

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

Włącz przechowywanie w chmurze

Aplikacja internetowa korzysta z Cloud Storage for 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 wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa dla projektu Firebase, a następnie kliknij Rozumiem .

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

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 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 wiersza polecenia Firebase to 8.0.0 lub nowsza.

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

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację aplikacji dla Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium, które zostało sklonowane wcześniej w codelab). Jednak aby pobrać konfigurację, musimy powiązać Twoją aplikację z Twoim projektem Firebase.

4. Upewnij się, że wiersz poleceń uzyskuje dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
5. Skojarz 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, przejściowe itp.). Jednak dla tego codelab użyjmy po prostu aliasu default .

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

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

Dodaj monitorowanie wydajności i zainicjuj Firebase

1. Otwórz plik public/index.html , a następnie dodaj poniższy wiersz poniżej TODO aby dołączyć pakiet SDK do monitorowania wydajności Firebase.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>

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

index.html

<script src="/__/firebase/init.js"></script>

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

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

Monitorowanie wydajności będzie teraz automatycznie zbierać wskaźniki 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 stron.

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

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

Pierwsze opóźnienie wejścia rozpoczyna się, gdy użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, np. Po kliknięciu przycisku lub hiperłącza. 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 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.

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 kolejnych krokach dowiesz się, jak dodawać niestandardowe ślady za pomocą funkcji monitorowania wydajności Firebase. Jeśli chcesz tylko zbierać automatyczne ślady, przejdź do sekcji „Wdrażanie i wysyłanie obrazów”.

Monitorowanie wydajności umożliwia tworzenie niestandardowych śladów . Śledzenie niestandardowe to raport dotyczący czasu trwania bloku wykonywania w aplikacji. Użytkownik definiuje początek i koniec śledzenia niestandardowego za pomocą interfejsów API dostarczonych przez zestaw SDK.

1. W pliku public/scripts/main.js pobierz obiekt wydajności, a następnie utwórz niestandardowy ślad w celu przesłania wiadomości obrazkowej.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');

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

main.js

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

 ...

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

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

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

1. Zlokalizuj niestandardowy ślad z poprzedniego kroku (zdefiniowany w pliku public/scripts/main.js ).
2. Dodaj następujący wiersz pod TODO aby zapisać rozmiar przesłanego obrazu.

main.js

 ...

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

 ...

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

Opierając się na poprzednich krokach, możesz również zbierać atrybuty niestandardowe 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ć, jak typ MIME może wpłynąć na wydajność.

1. Użyj niestandardowego śledzenia zdefiniowanego w pliku public/scripts/main.js
2. Dodaj następujący wiersz pod TODO aby zapisać typ MIME przesłanego obrazu.

main.js

 ...

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

 ...

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

Pakiet SDK do monitorowania wydajności Firebase został zaprojektowany tak, aby można go było ładować asynchronicznie i nie wpływałby 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żna dodawać niestandardowe ślady przy użyciu interfejsu API czasu użytkownika . Pakiet SDK wydajności Firebase pobierze czasy trwania z Measure () i zarejestruje je jako niestandardowe ślady.

Będziemy mierzyć czas wczytywania skryptów stylizujących aplikacje za pomocą interfejsu User Timing API.

1. W pliku public/index.html dodaj następujący wiersz, aby oznaczyć początek ładowania skryptów stylizacji 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>

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

Wdróż w Hostingu Firebase

Po dodaniu funkcji monitorowania wydajności Firebase do 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óż 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 przez Hosting Firebase w dwóch Twoich własnych subdomenach https://<projectId>.firebaseapp.com : https://<projectId>.firebaseapp.com i https://<projectId>.web.app .

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

Otwórz konsolę Firebase i przejdź do karty Wydajność . Jeśli zobaczysz wiadomość powitalną o treści „Wykryto pakiet SDK”, oznacza to, że udało Ci się zintegrować z monitorowaniem wydajności Firebase!

Wyślij wiadomość obrazkową

Wygeneruj dane dotyczące 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ś mógł przetestować dystrybucję niestandardowych metryk i atrybutów niestandardowych.

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

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 panelu

1. W konsoli Firebase wybierz projekt zawierający Twoją aplikację Friendly Chat .
2. W lewym panelu znajdź sekcję Jakość i kliknij Wydajność .

Przejrzyj dane na urządzeniu

Po przetworzeniu danych aplikacji przez monitorowanie wydajności zobaczysz zakładki u góry pulpitu nawigacyjnego. Jeśli nie widzisz jeszcze żadnych danych ani kart, sprawdź później.

1. Kliknij kartę Na urządzeniu .

• Strony ładuje tabela przedstawia różne wskaźniki wydajności, które automatycznie monitorujące wydajność zbiera natomiast strona jest ładowanie.
• Tabela Czas trwania pokazuje wszelkie niestandardowe ślady zdefiniowane w kodzie aplikacji.

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

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

4. Kliknij opcję W czasie obok opcji Agreguj w poprzednim kroku. Możesz również 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 podzielić dane dotyczące 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, który rejestruje czas odpowiedzi i rozmiar ładunku wywołań sieciowych.

1. Wróć do głównego ekranu pulpitu 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ą poprawiającą wydajność aplikacji!

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

Co omówiliśmy:

• Dodanie pakietu SDK do monitorowania wydajności Firebase do aplikacji internetowej.
• Dodawanie niestandardowych śladów do kodu.
• Rejestrowanie metryk niestandardowych powiązanych z niestandardowym śladem.
• Segmentowanie danych skuteczności za pomocą atrybutów niestandardowych.
• Zrozumienie, jak używać 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/