Pemantauan Kinerja Firebase untuk web

1. Ikhtisar

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase Performance Monitoring untuk mengukur performa aplikasi web chat. Kunjungi https://fireperf-friendlychat.web.app/ untuk melihat demo langsung.

Apa yang akan Anda pelajari

• Cara menambahkan Firebase Performance Monitoring ke aplikasi web Anda untuk mendapatkan metrik yang unik (pemuatan halaman dan permintaan jaringan).
• Cara mengukur bagian kode tertentu dengan jejak khusus.
• Cara mencatat metrik khusus tambahan yang terkait dengan pelacakan khusus.
• Cara mengelompokkan lebih lanjut data kinerja Anda dengan atribut khusus.
• Cara menggunakan dasbor pemantauan kinerja untuk memahami kinerja aplikasi web Anda.

Apa yang Anda perlukan

• IDE atau editor teks pilihan Anda, seperti WebStorm , Atom , Sublime , atau VS Code
• Terminal/konsol
• Browser pilihan Anda, seperti Chrome
• Kode contoh codelab (Lihat bagian selanjutnya dari codelab ini untuk mengetahui cara mendapatkan kode.)

2. Dapatkan kode contoh

Meng-clone repositori GitHub codelab dari baris perintah:

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

Alternatifnya, jika Anda belum menginstal git, Anda dapat mengunduh repo sebagai file zip .

Impor aplikasi awal

Menggunakan IDE Anda, buka atau impor direktori 📁 performance-monitoring-start dari repositori yang dikloning. Direktori 📁 performance-monitoring-start ini berisi kode awal untuk codelab, yang merupakan aplikasi web chat.

3. Membuat dan menyiapkan proyek Firebase

Buat proyek Firebase

1. Di Firebase console , klik Tambahkan Proyek .
2. Beri nama proyek Firebase Anda FriendlyChat .

Ingat ID proyek untuk proyek Firebase Anda.

3. Klik Buat Proyek .

Tambahkan aplikasi web Firebase ke proyek

1. Klik ikon web untuk membuat aplikasi web Firebase baru.
2. Daftarkan aplikasi dengan nama panggilan Friendly Chat , lalu centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini .
3. Klik Daftarkan aplikasi .
4. Klik melalui langkah-langkah yang tersisa. Anda tidak perlu mengikuti petunjuk di layar sekarang; hal ini akan dibahas pada langkah selanjutnya dalam codelab ini.

Aktifkan login Google untuk autentikasi Firebase

Untuk memungkinkan pengguna masuk ke aplikasi obrolan dengan akun Google mereka, kami akan menggunakan metode masuk Google .

Anda harus mengaktifkan login Google :

1. Di Firebase console, temukan bagian Kembangkan di panel kiri.
2. Klik Autentikasi , lalu klik tab Metode masuk ( buka konsol ).
3. Aktifkan penyedia masuk Google , lalu klik Simpan .

Aktifkan Cloud Firestore

Aplikasi web menggunakan Cloud Firestore untuk menyimpan pesan chat dan menerima pesan chat baru.

Anda harus mengaktifkan Cloud Firestore:

1. Di bagian Kembangkan di Firebase console, klik Database .
2. Klik Buat database di panel Cloud Firestore.
3. Pilih opsi Mulai dalam mode pengujian , lalu klik Aktifkan setelah membaca penafian tentang aturan keamanan.

Kode awal untuk codelab ini mencakup aturan yang lebih aman. Kami akan menerapkannya nanti di codelab.

Aktifkan Penyimpanan Cloud

Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengunggah, dan berbagi gambar.

Anda harus mengaktifkan Cloud Storage:

1. Di bagian Kembangkan di Firebase console, klik Penyimpanan .
2. Klik Memulai .
3. Baca penafian tentang aturan keamanan untuk proyek Firebase Anda, lalu klik Mengerti .

Kode awal mencakup aturan keamanan dasar, yang akan kita terapkan nanti di codelab.

4. Instal antarmuka baris perintah Firebase

Antarmuka baris perintah (CLI) Firebase memungkinkan Anda menggunakan Firebase Hosting untuk melayani aplikasi web Anda secara lokal serta untuk men-deploy aplikasi web ke proyek Firebase Anda.

1. Instal CLI dengan mengikuti petunjuk berikut di dokumen Firebase.
2. Verifikasi bahwa CLI telah diinstal dengan benar dengan menjalankan perintah berikut di terminal:

firebase --version

Pastikan versi Firebase CLI Anda adalah v8.0.0 atau lebih baru.

3. Otorisasi Firebase CLI dengan menjalankan perintah berikut:

firebase login

Kami telah menyiapkan template aplikasi web untuk mengambil konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori lokal aplikasi Anda (repositori yang Anda clone sebelumnya di codelab). Namun untuk melakukan konfigurasi, kami perlu mengaitkan aplikasi Anda dengan proyek Firebase Anda.

4. Pastikan baris perintah Anda mengakses direktori performance-monitoring-start lokal aplikasi Anda.
5. Kaitkan aplikasi Anda dengan proyek Firebase dengan menjalankan perintah berikut:

firebase use --add

6. Saat diminta, pilih ID proyek Anda, lalu berikan alias pada proyek Firebase Anda.

Alias ​​berguna jika Anda memiliki beberapa lingkungan (produksi, pementasan, dll). Namun, untuk codelab ini, mari kita gunakan saja alias default .

7. Ikuti instruksi selanjutnya di baris perintah Anda.

5. Integrasikan dengan Firebase Performance Monitoring

Ada berbagai cara untuk berintegrasi dengan Firebase Performance Monitoring SDK untuk web (lihat dokumentasi untuk mengetahui detailnya). Dalam codelab ini, kami akan mengaktifkan pemantauan performa dari URL Hosting .

Tambahkan pemantauan kinerja dan inisialisasi Firebase

1. Buka file src/index.js , lalu tambahkan baris berikut di bawah TODO untuk menyertakan Firebase Performance Monitoring SDK.

indeks.js

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

2. Kita juga perlu menginisialisasi Firebase SDK dengan objek konfigurasi yang berisi informasi tentang proyek Firebase dan aplikasi web yang ingin kita gunakan. Karena kami menggunakan Firebase Hosting, Anda dapat mengimpor skrip khusus yang akan melakukan konfigurasi ini untuk Anda. Untuk codelab ini, kami telah menambahkan baris berikut untuk Anda di bagian bawah file public/index.html , namun periksa kembali apakah baris tersebut ada.

indeks.html

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

3. Di file src/index.js , tambahkan baris berikut di bawah TODO untuk menginisialisasi pemantauan kinerja.

indeks.js

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

Performance Monitoring sekarang akan secara otomatis mengumpulkan metrik pemuatan halaman dan permintaan jaringan untuk Anda saat pengguna menggunakan situs Anda! Lihat dokumentasi untuk mempelajari lebih lanjut tentang pelacakan pemuatan halaman otomatis.

Tambahkan perpustakaan polyfill penundaan input pertama

Penundaan input pertama berguna karena browser yang merespons interaksi pengguna memberikan kesan pertama kepada pengguna tentang responsivitas aplikasi Anda.

Penundaan input pertama dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink. Ini berhenti segera setelah browser dapat merespons masukan, artinya browser tidak sibuk memuat atau menguraikan konten Anda.

Pustaka polyfill ini opsional untuk integrasi pemantauan kinerja.

Buka file public/index.html , lalu hapus komentar pada baris berikut.

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>

Sampai di sini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring di kode Anda!

Pada langkah-langkah berikut, Anda mempelajari cara menambahkan pelacakan kustom menggunakan Firebase Performance Monitoring. Jika Anda hanya ingin mengumpulkan jejak otomatis, buka bagian "Terapkan dan mulai mengirim gambar".

6. Tambahkan jejak khusus ke aplikasi Anda

Pemantauan Kinerja memungkinkan Anda membuat jejak khusus . Pelacakan kustom adalah laporan durasi blok eksekusi di aplikasi Anda. Anda menentukan awal dan akhir pelacakan kustom menggunakan API yang disediakan oleh SDK.

1. Di file src/index.js , dapatkan objek kinerja, lalu buat pelacakan khusus untuk mengunggah pesan gambar.

indeks.js

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

2. Untuk merekam pelacakan khusus, Anda perlu menentukan titik awal dan titik berhenti pelacakan. Anda dapat menganggap jejak sebagai pengatur waktu.

indeks.js

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

 ...

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

Anda telah berhasil menentukan jejak khusus! Setelah menerapkan kode Anda, durasi pelacakan kustom akan dicatat jika pengguna mengirim pesan gambar. Ini akan memberi Anda gambaran tentang berapa lama waktu yang dibutuhkan pengguna di dunia nyata untuk mengirim gambar di aplikasi obrolan Anda.

7. Tambahkan metrik khusus ke aplikasi Anda.

Anda dapat mengonfigurasi pelacakan kustom lebih lanjut untuk mencatat metrik kustom untuk peristiwa terkait kinerja yang terjadi dalam cakupannya. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu pengunggahan dipengaruhi oleh ukuran gambar untuk pelacakan khusus yang kami tentukan di langkah terakhir.

1. Temukan jejak khusus dari langkah sebelumnya (ditentukan dalam file src/index.js Anda).
2. Tambahkan baris berikut di bawah TODO untuk mencatat ukuran gambar yang diunggah.

indeks.js

 ...

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

 ...

Metrik ini memungkinkan pemantauan kinerja untuk mencatat durasi pelacakan khusus serta ukuran gambar yang diunggah.

8. Tambahkan atribut khusus ke aplikasi Anda

Berdasarkan langkah sebelumnya, Anda juga dapat mengumpulkan atribut khusus pada jejak khusus Anda . Atribut khusus dapat membantu mengelompokkan data berdasarkan kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki bagaimana jenis MIME dapat memengaruhi kinerja.

1. Gunakan pelacakan khusus yang ditentukan dalam file src/index.js Anda.
2. Tambahkan baris berikut di bawah TODO untuk merekam tipe MIME dari gambar yang diunggah.

indeks.js

 ...

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

 ...

Atribut ini memungkinkan pemantauan kinerja untuk mengkategorikan durasi pelacakan khusus berdasarkan jenis gambar yang diunggah.

9. [Perluas] Tambahkan jejak khusus dengan User Timing API

Firebase Performance Monitoring SDK dirancang agar dapat dimuat secara asinkron, sehingga tidak akan berdampak negatif terhadap performa aplikasi web selama pemuatan halaman. Sebelum SDK dimuat, Firebase Performance Monitoring API tidak tersedia. Dalam skenario ini, Anda masih dapat menambahkan jejak kustom dengan menggunakan User Timing API . Firebase performance SDK akan mengambil durasi dari size() dan mencatatnya sebagai pelacakan khusus.

Kami akan mengukur durasi memuat skrip penataan aplikasi menggunakan User Timing API.

1. Di file public/index.html , tambahkan baris berikut untuk menandai dimulainya pemuatan skrip penataan gaya aplikasi.

indeks.html

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

2. Tambahkan baris berikut untuk menandai akhir pemuatan skrip penataan gaya aplikasi, dan untuk mengukur durasi antara awal dan akhir.

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>

Entri yang Anda buat di sini akan dikumpulkan secara otomatis oleh Firebase Performance Monitoring. Anda akan dapat menemukan jejak khusus yang disebut loadStyling di Firebase Performance console nanti.

10. Terapkan dan mulai mengirim gambar

Terapkan ke Firebase Hosting

Setelah menambahkan Firebase Performance Monitoring ke kode Anda, ikuti langkah-langkah berikut untuk men-deploy kode Anda ke Firebase Hosting:

1. Pastikan baris perintah Anda mengakses direktori performance-monitoring-start lokal aplikasi Anda.
2. Terapkan file Anda ke proyek Firebase dengan menjalankan perintah berikut:

firebase deploy

3. Konsol akan menampilkan yang berikut:

=== 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. Kunjungi aplikasi web Anda yang kini dihosting sepenuhnya menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri: https://<projectId>.firebaseapp.com dan https://<projectId>.web.app .

Verifikasi bahwa pemantauan kinerja diaktifkan

Buka Firebase console dan buka tab Performance . Jika Anda melihat pesan selamat datang yang menunjukkan "SDK terdeteksi", berarti Anda telah berhasil berintegrasi dengan Firebase Performance Monitoring!

Kirim pesan gambar

Hasilkan beberapa data kinerja dengan mengirimkan gambar di aplikasi obrolan Anda.

1. Setelah masuk ke aplikasi obrolan Anda, klik tombol unggah gambar .
2. Pilih file gambar menggunakan pemilih file.
3. Coba kirim beberapa gambar (beberapa sampel disimpan di public/images/ ) sehingga Anda dapat menguji distribusi metrik khusus dan atribut khusus.

Pesan baru akan ditampilkan di UI aplikasi bersama dengan gambar yang Anda pilih.

11. Pantau dasbor

Setelah men-deploy aplikasi web dan mengirim pesan gambar sebagai pengguna, Anda dapat meninjau data performa di dasbor pemantauan performa (di Firebase console).

Akses dasbor Anda

1. Di Firebase console , pilih proyek yang memiliki aplikasi Friendly Chat Anda.
2. Di panel kiri, temukan bagian Kualitas , dan klik Kinerja .

Tinjau data di perangkat

Setelah pemantauan kinerja memproses data aplikasi, Anda akan melihat tab di sepanjang bagian atas dasbor. Pastikan untuk memeriksa kembali nanti jika Anda belum melihat data atau tab apa pun.

1. Klik tab Di perangkat .

• Tabel Pemuatan halaman menunjukkan berbagai metrik kinerja yang dikumpulkan secara otomatis oleh pemantauan kinerja saat halaman Anda dimuat.
• Tabel Durasi menampilkan jejak kustom apa pun yang telah Anda tetapkan dalam kode aplikasi Anda.

2. Klik saveImageMessage di tabel Durasi untuk meninjau metrik spesifik untuk pelacakan.

3. Klik Agregat untuk meninjau distribusi ukuran gambar. Anda dapat melihat metrik yang Anda tambahkan untuk mengukur ukuran gambar untuk pelacakan khusus ini.

4. Klik Seiring waktu yang berada di sebelah Agregat pada langkah sebelumnya. Anda juga dapat melihat Durasi pelacakan kustom. Klik Lihat selengkapnya untuk meninjau data yang dikumpulkan secara lebih detail.

5. Di halaman yang terbuka, Anda dapat mengelompokkan data durasi berdasarkan jenis MIME gambar dengan mengklik imageType . Data spesifik ini dicatat karena atribut imageType yang Anda tambahkan ke pelacakan kustom Anda.

Tinjau data jaringan

Permintaan jaringan HTTP/S adalah laporan yang mencatat waktu respons dan ukuran muatan panggilan jaringan.

1. Kembali ke layar utama dasbor pemantauan kinerja.
2. Klik tab Jaringan untuk melihat daftar entri permintaan jaringan untuk aplikasi web Anda.
3. Telusuri permintaan tersebut untuk mengidentifikasi permintaan yang lambat dan mulailah melakukan perbaikan untuk meningkatkan kinerja aplikasi Anda!

12. Selamat!

Anda telah mengaktifkan Firebase SDK untuk pemantauan kinerja dan mengumpulkan pelacakan otomatis dan pelacakan khusus untuk mengukur kinerja aplikasi chat Anda di dunia nyata!

Apa yang telah kami bahas:

• Menambahkan Firebase Performance Monitoring SDK ke aplikasi web Anda.
• Menambahkan jejak khusus ke kode Anda.
• Mencatat metrik khusus yang dikaitkan dengan pelacakan khusus.
• Menyegmentasikan data kinerja menggunakan atribut khusus.
• Memahami cara menggunakan dasbor pemantauan kinerja untuk mendapatkan wawasan tentang kinerja aplikasi Anda.

Belajarlah lagi:

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