Monitorowanie wydajności Firebase na potrzeby witryn internetowych

1. Przegląd

Z tego samouczka dowiesz się, jak używać Monitorowania wydajności Firebase do pomiaru wydajności internetowej aplikacji do czatowania. Aby zobaczyć wersję demonstracyjną, odwiedź stronę https://fireperf-friendlychat.web.app/.

Te ćwiczenia w Codelabs są kontynuacją ćwiczeń w Codelabs dotyczących Firebase, w których dowiesz się, jak utworzyć aplikację do czatowania za pomocą pakietu Firebase Web SDK. Jeśli chcesz dowiedzieć się, jak używać platformy Firebase w internecie, tworząc aplikację do czatowania, najpierw zapoznaj się z kursem internetowym Firebase. Jeśli wiesz już, jak korzystać z platformy Firebase i interfejsu wiersza poleceń Firebase, a chcesz dowiedzieć się więcej o Monitorowaniu wydajności Firebase, to dobrze trafiłeś(-aś).

Czego się nauczysz

• Jak dodać do aplikacji internetowej usługę Firebase Performance Monitoring, aby uzyskać gotowe dane (wczytywanie strony i żądania sieciowe).
• Jak mierzyć konkretny fragment kodu za pomocą niestandardowych logów czasu.
• Jak rejestrować dodatkowe dane niestandardowe powiązane ze śledzeniem niestandardowym.
• Jak dodatkowo segmentować dane o skuteczności za pomocą atrybutów niestandardowych.
• Jak korzystać z panelu monitorowania wydajności, aby analizować wydajność aplikacji internetowej.

Czego potrzebujesz

• Wybrane IDE lub edytor tekstu, np. WebStorm, Atom, Sublime lub VS Code.
• terminal/konsola,
• wybraną przeglądarkę, np. Chrome;
• przykładowy kod z tego laboratorium (instrukcje pobierania kodu znajdziesz w następnej sekcji);

2. Pobieranie przykładowego kodu

Sklonuj repozytorium GitHub z poziomu wiersza poleceń:

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

Jeśli nie masz zainstalowanego narzędzia git, możesz pobrać repozytorium jako plik ZIP.

W repozytorium friendlychat-web znajdują się przykładowe projekty dla wielu platform.

W tym laboratorium używamy tylko tych 2 repozytoriów:

• 📁 performance-monitoring-start: kod początkowy, na którym będziesz pracować podczas tych ćwiczeń z programowania.
• 📁 performance-monitoring: pełny kod gotowej przykładowej aplikacji.

Uwaga: jeśli chcesz uruchomić gotową aplikację, musisz utworzyć projekt Firebase w konsoli Firebase.

Importowanie aplikacji startowej

W IDE otwórz lub zaimportuj katalog 📁 performance-monitoring-start ze sklonowanego repozytorium. Ten katalog 📁 performance-monitoring-start zawiera kod początkowy do ćwiczeń z programowania, czyli internetowej aplikacji do czatu.

3. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. Zaloguj się w konsoli Firebase, korzystając ze swojego konta Google.
2. Kliknij przycisk, aby utworzyć nowy projekt, a potem wpisz jego nazwę (np. FriendlyChat).
   

   Nazwa projektu jest używana jako nazwa wyświetlana w interfejsach Firebase, a usługa ta automatycznie tworzy na jej podstawie unikalny identyfikator projektu. Możesz teraz kliknąć ikonę Edytuj, aby ustawić preferowany identyfikator projektu. Pamiętaj jednak, że po utworzeniu projektu nie będzie można go zmienić.

   Zapamiętaj identyfikator projektu, ponieważ będzie on potrzebny później do identyfikowania projektu Firebase w interfejsie wiersza poleceń Firebase. Jeśli zapomnisz identyfikatora, możesz go później znaleźć w Ustawieniach projektu.

3. Kliknij Dalej.
4. Po wyświetleniu monitu przeczytaj i zaakceptuj warunki usługi Firebase, a potem kliknij Dalej.
5. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”).
6. W tym samouczku nie potrzebujesz Google Analytics, więc wyłącz opcję Google Analytics.
7. Kliknij Utwórz projekt, poczekaj, aż projekt zostanie udostępniony, a następnie kliknij Dalej.

Przejście na wyższy abonament Firebase

Aby korzystać z Cloud Storage dla Firebase, Twój projekt Firebase musi być objęty abonamentem z płatnością według wykorzystania (Blaze), co oznacza, że jest połączony z kontem rozliczeniowym Cloud.

• Konto rozliczeniowe Cloud wymaga formy płatności, np. karty kredytowej.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy możesz otrzymać środki w wysokości 300 USD i bezpłatne konto rozliczeniowe Cloud.
• Jeśli wykonujesz te ćwiczenia w ramach wydarzenia, zapytaj organizatora, czy są dostępne środki w Google Cloud.

Aby przenieść projekt na abonament Blaze:

1. W konsoli Firebase wybierz przejście na wyższy abonament.
2. Wybierz pakiet Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
   Jeśli w ramach tego przejścia na wyższy abonament konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrócenie do procesu przejścia na wyższy abonament w konsoli Firebase, aby go dokończyć.

Uwaga: po ukończeniu tego laboratorium możesz przejść na bezpłatny pakiet cenowy (Spark).

Dodawanie aplikacji internetowej Firebase do projektu

1. Kliknij ikonę internetu , aby utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację pod pseudonimem Friendly Chat, a następnie zaznacz pole wyboru obok opcji Skonfiguruj też Hosting Firebase dla tej aplikacji.
3. Kliknij Zarejestruj aplikację.
4. Wykonaj pozostałe czynności. Nie musisz teraz wykonywać instrukcji wyświetlanych na ekranie. Zostaną one omówione w dalszej części tych ćwiczeń z programowania.

Włączanie logowania przez Google na potrzeby uwierzytelniania w Firebase

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

Musisz włączyć logowanie Google:

1. W konsoli Firebase w panelu po lewej stronie znajdź sekcję Tworzenie.
2. Kliknij Uwierzytelnianie, a następnie kartę Metoda logowania ( otwórz konsolę).
3. Włącz dostawcę logowania Google, a następnie kliknij Zapisz.

Konfigurowanie Cloud Firestore

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

Aby skonfigurować Cloud Firestore w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie wybierz Baza danych Firestore.
2. Kliknij Utwórz bazę danych.
3. W polu Identyfikator bazy danych pozostaw wartość (default).
4. Wybierz lokalizację bazy danych i kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację, która jest blisko użytkowników.
5. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć swoje dane. Nierozpowszechniajani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa do bazy danych.
6. Kliknij Utwórz.

Konfigurowanie Cloud Storage dla Firebase

Aplikacja internetowa używa Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.

Aby skonfigurować Cloud Storage dla Firebase w projekcie Firebase:

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a następnie wybierz Storage.
2. Kliknij Rozpocznij.
3. Wybierz lokalizację domyślnego zasobnika Storage.
   Zasobniki w regionach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu „Zawsze bezpłatny” w Google Cloud Storage. W przypadku zasobników w innych lokalizacjach obowiązuje cennik i wykorzystanie Google Cloud Storage.
4. Kliknij Uruchom w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego laboratorium dodasz reguły bezpieczeństwa, aby zabezpieczyć swoje dane. Nieudostępniaj aplikacji publicznie bez dodania reguł bezpieczeństwa do zasobnika Storage.
5. Kliknij Utwórz.

4. Instalowanie interfejsu wiersza poleceń Firebase

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

1. Zainstaluj interfejs CLI, postępując zgodnie z tymi instrukcjami w dokumentacji Firebase.
2. Aby sprawdzić, czy interfejs CLI został zainstalowany prawidłowo, uruchom w terminalu to polecenie:

firebase --version

Upewnij się, że używasz wiersza poleceń Firebase w wersji 8.0.0 lub nowszej.

3. Autoryzuj wiersz poleceń Firebase, uruchamiając to polecenie:

firebase login

Szablon aplikacji internetowej jest skonfigurowany tak, aby pobierać konfigurację aplikacji dla Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w tym laboratorium). Aby jednak pobrać konfigurację, musimy powiązać Twoją aplikację z projektem Firebase.

4. Sprawdź, czy wiersz poleceń ma dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
5. Powiąż aplikację z projektem Firebase, uruchamiając to polecenie:

firebase use --add

6. Gdy pojawi się prośba, wybierz identyfikator projektu, a potem nadaj projektowi Firebase alias.

Alias jest przydatny, jeśli masz wiele środowisk (produkcyjne, przejściowe itp.). W tym ćwiczeniu użyjemy aliasu default.

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

5. Integracja z Monitorowaniem wydajności Firebase

Istnieją różne sposoby integracji z pakietem SDK Firebase Performance Monitoring dla internetu (szczegółowe informacje znajdziesz w dokumentacji). W tym ćwiczeniu 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 ten 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 też zainicjować pakiet SDK Firebase za pomocą obiektu konfiguracji, który zawiera informacje o projekcie Firebase i aplikacji internetowej, której chcemy używać. Ponieważ używamy Hostingu Firebase, możesz zaimportować specjalny skrypt, który przeprowadzi tę konfigurację za Ciebie. W tym laboratorium już dodaliśmy ten 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 pliku src/index.js dodaj ten wiersz pod TODO, aby zainicjować monitorowanie wydajności.

index.js

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

Monitorowanie wydajności będzie teraz automatycznie zbierać dane o wczytywaniu stron i żądaniach sieciowych, gdy użytkownicy będą korzystać z Twojej witryny. Więcej informacji o automatycznych śladach wczytywania stron znajdziesz w dokumentacji.

Dodaj bibliotekę polyfill opóźnienia przy pierwszym działaniu

Opóźnienie przy pierwszym działaniu jest przydatne, ponieważ reakcja przeglądarki na interakcję użytkownika wywołuje pierwsze wrażenie na temat szybkości działania aplikacji.

Opóźnienie przy pierwszym działaniu zaczyna się, gdy użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, np. kliknie przycisk lub hiperlink. Zatrzymuje się natychmiast po tym, jak przeglądarka może odpowiedzieć na dane wejściowe, co oznacza, że nie jest zajęta wczytywaniem ani analizowaniem treści.

Ta biblioteka polyfill jest opcjonalna w przypadku integracji monitorowania wydajności.

Otwórz plik public/index.html i usuń znacznik komentarza w tym wierszu:

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 integracja z Firebase Performance Monitoring w Twoim kodzie jest zakończona.

Istnieją też inne sposoby integracji z pakietem SDK Firebase Performance Monitoring na potrzeby internetu. Więcej informacji znajdziesz w artykule Pierwsze kroki z monitorowaniem wydajności w internecie.

Z poniższych instrukcji dowiesz się, jak dodawać ślady niestandardowe za pomocą Monitorowania wydajności Firebase. Jeśli chcesz zbierać tylko ślady automatyczne, przejdź do sekcji „Wdrażanie i rozpoczynanie wysyłania obrazów”.

6. Dodawanie niestandardowego śledzenia do aplikacji

Usługa Performance Monitoring umożliwia tworzenie niestandardowych logów czasu. Ślad niestandardowy to raport dotyczący czasu trwania bloku wykonania w aplikacji. Początek i koniec śladu niestandardowego określasz za pomocą interfejsów API udostępnianych przez pakiet SDK.

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

index.js

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

2. Aby zarejestrować niestandardowy ślad, musisz określić jego punkt początkowy i końcowy. Ślad można traktować jako licznik czasu.

index.js

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

 ...

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

Udało Ci się zdefiniować ślad niestandardowy. Po wdrożeniu kodu czas trwania niestandardowego śledzenia zostanie zarejestrowany, jeśli użytkownik wyśle wiadomość z obrazem. Dzięki temu dowiesz się, ile czasu zajmuje użytkownikom wysyłanie obrazów w Twojej aplikacji do czatowania.

7. Dodaj do aplikacji dane niestandardowe.

Możesz dodatkowo skonfigurować niestandardowe śledzenie, aby rejestrować niestandardowe dane dotyczące zdarzeń związanych z wydajnością, które występują w jego zakresie. Możesz na przykład użyć wskaźnika, aby sprawdzić, czy czas przesyłania zależy od rozmiaru obrazu w przypadku śledzenia niestandardowego zdefiniowanego w ostatnim kroku.

1. Odszukaj ślad niestandardowy z poprzedniego kroku (zdefiniowany w pliku src/index.js).
2. Pod symbolem TODO dodaj ten wiersz, aby zapisać rozmiar przesłanego obrazu.

index.js

 ...

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

 ...

Ten rodzaj danych umożliwia monitorowanie wydajności, rejestrowanie czasu trwania śledzenia niestandardowego oraz rozmiaru przesłanego obrazu.

8. Dodawanie atrybutu niestandardowego do aplikacji

W oparciu o poprzednie kroki możesz też zbierać atrybuty niestandardowe w niestandardowych śladach. Atrybuty niestandardowe mogą pomóc w segmentowaniu danych według kategorii specyficznych dla Twojej aplikacji. Możesz na przykład zbierać typ MIME pliku obrazu, aby sprawdzić, jak może on wpływać na skuteczność.

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

index.js

 ...

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

 ...

Ten atrybut umożliwia monitorowanie wydajności, aby kategoryzować czas trwania niestandardowego śledzenia na podstawie typu przesłanego obrazu.

9. [Extend] Dodawanie niestandardowego logu czasu za pomocą interfejsu User Timing API

Pakiet SDK Monitorowania wydajności Firebase został zaprojektowany tak, aby można go było wczytywać asynchronicznie i aby nie wpływał negatywnie na wydajność aplikacji internetowych podczas wczytywania strony. Zanim pakiet SDK zostanie wczytany, interfejs Firebase Performance Monitoring API nie jest dostępny. W takim przypadku nadal możesz dodawać niestandardowe logi czasu za pomocą User Timing API. Pakiet SDK Firebase Performance będzie pobierać czasy trwania z funkcji measure() i rejestrować je jako ślady niestandardowe.

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

1. W pliku public/index.html dodaj ten wiersz, aby oznaczyć początek wczytywania 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 te wiersze, aby oznaczyć koniec wczytywania skryptów stylów aplikacji i zmierzyć czas od początku do końca.

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 tu wpis będzie automatycznie zbierany przez Monitorowanie wydajności Firebase. W konsoli Firebase Performance znajdziesz później ślad niestandardowy o nazwie loadStyling.

10. Wdrażanie i rozpoczynanie wysyłania obrazów

Wdrażanie w Hostingu Firebase

Po dodaniu do kodu monitorowania wydajności Firebase wykonaj te czynności, aby wdrożyć kod w Firebase Hosting:

1. Sprawdź, czy wiersz poleceń ma dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
2. Wdróż pliki w projekcie Firebase, uruchamiając to polecenie:

firebase deploy

3. Konsola powinna wyświetlić te 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.firebasestorage.app
✔  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ź aplikację internetową, która jest teraz w pełni hostowana w Hostingu Firebase w 2 subdomenach Firebase: https://<projectId>.firebaseapp.com i https://<projectId>.web.app.

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

Otwórz konsolę Firebase i kliknij kartę Skuteczność. Jeśli zobaczysz komunikat powitalny z informacją „Wykryto pakiet SDK”, oznacza to, że integracja z Firebase Performance Monitoring została przeprowadzona prawidłowo.

Wysyłanie wiadomości z obrazem

Wygeneruj dane o wydajności, wysyłając obrazy w aplikacji do obsługi czatu.

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

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

11. Monitorowanie panelu

Po wdrożeniu aplikacji internetowej i wysłaniu wiadomości z obrazami jako użytkownik możesz sprawdzić dane o skuteczności w panelu monitorowania skuteczności (w konsoli Firebase).

Uwaga: dane o skuteczności zwykle pojawiają się w ciągu 12 godzin. Jeśli nie widzisz żadnych wyników w konsoli Firebase, sprawdź je później.

Otwieranie panelu

1. W konsoli Firebase wybierz projekt, w którym jest aplikacja Friendly Chat.
2. W panelu po lewej stronie znajdź sekcję Jakość i kliknij Skuteczność.

Sprawdzanie danych na urządzeniu

Gdy monitorowanie wydajności przetworzy dane aplikacji, u góry panelu zobaczysz karty. Jeśli nie widzisz jeszcze żadnych danych ani kart, sprawdź ponownie później.

1. Kliknij kartę Na urządzeniu.

• Tabela Ładowanie strony zawiera różne dane o skuteczności, które monitorowanie skuteczności automatycznie zbiera podczas ładowania strony.
• Tabela Czasy trwania zawiera wszystkie ślady niestandardowe zdefiniowane w kodzie aplikacji.

2. W tabeli Czasy trwania kliknij saveImageMessage, aby sprawdzić konkretne dane dotyczące logu.

3. Aby sprawdzić rozkład rozmiarów obrazów, kliknij Zbiorcze. Możesz zobaczyć dodane dane, które służą do pomiaru rozmiaru obrazu w tym śledzeniu niestandardowym.

4. W poprzednim kroku kliknij Z upływem czasu obok opcji Agreguj. Możesz też sprawdzić czas trwania śledzenia niestandardowego. Aby wyświetlić zebrane dane w bardziej szczegółowy sposób, kliknij Wyświetl więcej.

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

Sprawdzanie danych sieciowych

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

1. Wróć do ekranu głównego panelu monitorowania skutecznoś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 zacząć pracować nad rozwiązaniem, które poprawi wydajność aplikacji.

12. Gratulacje!

Masz włączony pakiet SDK Firebase do monitorowania wydajności i zbierasz automatyczne oraz niestandardowe ślady, aby mierzyć rzeczywistą wydajność aplikacji do czatowania.

Omówione zagadnienia:

• Dodanie pakietu SDK Firebase Performance Monitoring do aplikacji internetowej.
• Dodawanie do kodu niestandardowych logów czasu.
• rejestrowanie danych niestandardowych powiązanych ze śladem niestandardowym.
• segmentować dane o skuteczności za pomocą atrybutów niestandardowych;
• Dowiedz się, jak korzystać z panelu monitorowania wydajności, aby uzyskiwać statystyki dotyczące skuteczności aplikacji.

Więcej informacji:

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