Pemantauan Kinerja Firebase untuk web

1. Tinjauan

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 bawaan (pemuatan halaman dan permintaan jaringan).
• Cara mengukur bagian kode tertentu dengan pelacakan kustom.
• Cara merekam metrik khusus tambahan yang terkait dengan pelacakan khusus.
• Cara menyegmentasikan lebih lanjut data kinerja Anda dengan atribut khusus.
• Cara menggunakan dasbor pemantauan kinerja untuk memahami kinerja aplikasi web Anda.

Apa yang Anda butuhkan

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

2. Dapatkan kode contoh

Clone repositori GitHub codelab dari command line:

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

Sebagai alternatif, 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 hasil kloning. Direktori 📁 performance-monitoring-start ini berisi kode awal untuk codelab, yang merupakan aplikasi web chat.

3. Buat dan siapkan proyek Firebase

Buat proyek Firebase

1. Di konsol Firebase , 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 julukan 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; ini akan dibahas dalam langkah selanjutnya dari codelab ini.

Aktifkan login Google untuk autentikasi Firebase

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

Anda harus mengaktifkan masuk dengan Google :

1. Di konsol Firebase, temukan bagian Kembangkan di panel kiri.
2. Klik Otentikasi , 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 obrolan dan menerima pesan obrolan baru.

Anda harus mengaktifkan Cloud Firestore:

1. Di bagian Kembangkan 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 menyertakan aturan yang lebih aman. Kami akan menerapkannya nanti di codelab.

Aktifkan Penyimpanan Awan

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

Anda harus mengaktifkan Cloud Storage:

1. Di bagian Kembangkan konsol Firebase, klik Storage .
2. Klik Mulai .
3. Baca penafian tentang aturan keamanan untuk proyek Firebase Anda, lalu klik Mengerti .

Kode awal menyertakan aturan keamanan dasar, yang akan kami terapkan nanti di codelab.

4. Pasang antarmuka baris perintah Firebase

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

1. Instal CLI dengan mengikuti petunjuk ini 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 menarik konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori lokal aplikasi Anda (repositori yang telah Anda kloning sebelumnya di codelab). Namun untuk menarik 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 banyak lingkungan (produksi, pementasan, dll). Namun, untuk codelab ini, mari gunakan saja alias default .

7. Ikuti instruksi yang tersisa di baris perintah Anda.

5. Integrasikan dengan Pemantauan Kinerja Firebase

Ada berbagai cara untuk mengintegrasikan dengan Firebase Performance Monitoring SDK untuk web (lihat dokumentasi untuk 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.

index.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 , tetapi periksa kembali apakah baris tersebut ada.

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

index.js

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

Pemantauan Kinerja sekarang akan secara otomatis mengumpulkan pemuatan halaman dan metrik 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 daya tanggap aplikasi Anda.

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

Pustaka polyfill ini opsional untuk integrasi pemantauan kinerja.

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

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>

Pada titik ini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring dalam kode Anda!

Dalam langkah-langkah berikut, Anda akan mempelajari cara menambahkan pelacakan khusus menggunakan Firebase Performance Monitoring. Jika Anda hanya ingin mengumpulkan jejak otomatis, buka bagian "Terapkan dan mulai kirim gambar".

6. Tambahkan pelacakan khusus ke aplikasi Anda

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

1. Di file src/index.js , dapatkan objek performa, lalu buat pelacakan kustom untuk mengupload pesan gambar.

index.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 akhir untuk pelacakan. Anda dapat menganggap jejak sebagai pengatur waktu.

index.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 pelacakan khusus! Setelah menerapkan kode Anda, durasi pelacakan kustom akan direkam jika pengguna mengirimkan pesan gambar. Ini akan memberi Anda gambaran tentang berapa lama pengguna dunia nyata mengirim gambar di aplikasi obrolan Anda.

7. Tambahkan metrik khusus ke aplikasi Anda.

Anda dapat mengonfigurasi pelacakan kustom lebih lanjut untuk merekam metrik kustom untuk peristiwa terkait performa 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 pelacakan khusus dari langkah sebelumnya (ditentukan dalam file src/index.js Anda).
2. Tambahkan baris berikut di bawah TODO untuk mencatat ukuran gambar yang diunggah.

index.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-langkah sebelumnya, Anda juga dapat mengumpulkan atribut khusus pada jejak khusus Anda. Atribut khusus dapat membantu menyegmentasikan data berdasarkan kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan tipe MIME file gambar untuk menyelidiki bagaimana tipe MIME dapat memengaruhi performa.

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

index.js

 ...

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

 ...

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

9. [Perpanjang] Tambahkan pelacakan khusus dengan User Timing API

SDK Pemantauan Kinerja Firebase dirancang agar dapat dimuat secara asinkron, sehingga tidak akan berdampak negatif pada kinerja aplikasi web selama pemuatan halaman. Sebelum SDK dimuat, API Firebase Performance Monitoring tidak tersedia. Dalam skenario ini, Anda masih dapat menambahkan pelacakan kustom dengan menggunakan API Waktu Pengguna . Firebase performance SDK akan mengambil durasi dari measure() dan mencatatnya sebagai pelacakan khusus.

Kita akan mengukur durasi pemuatan skrip penataan aplikasi menggunakan User Timing API.

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

index.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 gaya aplikasi, dan untuk mengukur durasi antara awal dan akhir.

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>

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

10. Menyebarkan dan mulai mengirim gambar

Terapkan ke Firebase Hosting

Setelah menambahkan Firebase Performance Monitoring ke kode Anda, ikuti langkah berikut untuk menerapkan 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 harus 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 sekarang 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", 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 konsol Firebase).

Akses dasbor Anda

1. Di konsol Firebase , pilih proyek yang memiliki aplikasi Friendly Chat Anda.
2. Di panel kiri, cari bagian Quality , dan klik Performance .

Tinjau data di perangkat

Setelah pemantauan kinerja memproses data aplikasi Anda, 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 performa yang dikumpulkan oleh pemantauan performa secara otomatis saat halaman Anda dimuat.
• Tabel Durasi menunjukkan pelacakan khusus apa pun yang telah Anda tetapkan dalam kode aplikasi Anda.

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

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

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

5. Di halaman yang terbuka, Anda dapat mengelompokkan data durasi menurut jenis MIME gambar dengan mengeklik imageType . Data khusus ini dicatat karena atribut imageType yang Anda tambahkan ke pelacakan khusus.

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 untuk mengidentifikasi permintaan yang lambat dan mulailah mengerjakan perbaikan untuk meningkatkan kinerja aplikasi Anda!

12. Selamat!

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

Apa yang telah kami bahas:

• Menambahkan SDK Pemantauan Kinerja Firebase ke aplikasi web Anda.
• Menambahkan pelacakan khusus ke kode Anda.
• Mencatat metrik khusus yang terkait 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/cepat/