Pemantauan Kinerja Firebase untuk web

1. Ikhtisar

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase Performance Monitoring untuk mengukur kinerja 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 siap pakai (pemuatan halaman dan permintaan jaringan).
• Cara mengukur bagian kode tertentu dengan jejak khusus.
• Cara merekam metrik khusus tambahan yang terkait dengan pelacakan khusus.
• Cara lebih lanjut menyegmentasikan 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
• Terminal/konsol
• Peramban pilihan Anda, seperti Chrome
• Kode sampel codelab (Lihat bagian selanjutnya dari codelab ini untuk cara mendapatkan kode.)

2. Dapatkan kode sampel

Kloning repositori GitHub codelab dari baris perintah:

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

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

Impor aplikasi pemula

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

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 nama panggilan Friendly Chat , lalu centang kotak di samping Juga siapkan Firebase Hosting untuk aplikasi ini .
3. Klik Daftar 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 masuk dengan Google untuk autentikasi Firebase

Untuk mengizinkan pengguna masuk ke aplikasi obrolan dengan akun Google mereka, kami akan menggunakan metode masuk dengan 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 konsol Firebase, klik Database .
2. Klik Buat database di panel Cloud Firestore.
3. Pilih opsi Mulai dalam mode uji , 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 konsol Firebase, klik Penyimpanan .
2. Klik Mulai .
3. Baca penafian tentang aturan keamanan untuk proyek Firebase Anda, lalu klik Mengerti .

Kode awal menyertakan 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 men-deploy 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 yang 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 Anda kloning sebelumnya di codelab). Tetapi 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 untuk proyek Firebase Anda.

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

7. Ikuti instruksi yang tersisa 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 detailnya). Di codelab ini, kami akan mengaktifkan pemantauan kinerja 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 SDK Firebase 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 itu ada.

index.html

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

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

index.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. Itu berhenti segera setelah browser dapat merespons input, artinya browser tidak sibuk memuat atau menguraikan 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!

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

6. Tambahkan jejak khusus ke aplikasi Anda

Performance Monitoring memungkinkan Anda membuat jejak kustom . Pelacakan kustom adalah laporan untuk 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 performa, lalu buat pelacakan kustom untuk mengunggah pesan gambar.

index.js

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

2. Untuk merekam pelacakan kustom, Anda perlu menentukan titik awal dan titik berhenti 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 jejak kustom! Setelah menerapkan kode Anda, durasi pelacakan kustom akan direkam jika pengguna mengirim pesan gambar. Ini akan memberi Anda gambaran tentang berapa lama waktu yang dibutuhkan pengguna dunia nyata untuk mengirim gambar di aplikasi obrolan Anda.

7. Tambahkan metrik khusus ke aplikasi Anda.

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

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

index.js

 ...

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

 ...

Metrik ini memungkinkan pemantauan kinerja untuk merekam 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 dalam mengelompokkan data menurut kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki bagaimana jenis MIME dapat memengaruhi kinerja.

1. Gunakan jejak kustom 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 pelacakan khusus berdasarkan jenis gambar yang diunggah.

9. [Perpanjang] Tambahkan jejak khusus dengan API Pengaturan Waktu Pengguna

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

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

1. Di file public/index.html , tambahkan baris berikut untuk menandai dimulainya pemuatan skrip penataan 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 penataan 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 kustom yang disebut loadStyling di konsol Firebase Performance nanti.

10. Terapkan dan mulai mengirim gambar

Terapkan ke Firebase Hosting

Setelah menambahkan Firebase Performance Monitoring ke kode Anda, ikuti langkah-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", maka Anda telah berhasil terintegrasi 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 file picker.
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 menerapkan aplikasi web dan mengirim pesan gambar sebagai pengguna, Anda dapat meninjau data kinerja di dasbor pemantauan kinerja (di Firebase console).

Akses dasbor Anda

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

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 kinerja yang dikumpulkan secara otomatis oleh pemantauan kinerja saat halaman Anda dimuat.
• Tabel Durasi menunjukkan setiap pelacakan kustom yang telah Anda tetapkan dalam kode aplikasi Anda.

2. Klik simpanImageMessage di tabel Durasi untuk meninjau metrik tertentu untuk pelacakan.

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

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

5. Di halaman yang terbuka, Anda dapat mengelompokkan data durasi menurut tipe 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 menangkap 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. Jelajahi mereka untuk mengidentifikasi permintaan yang lambat dan mulai mengerjakan 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 dunia nyata dari aplikasi obrolan Anda!

Apa yang telah kami bahas:

• Menambahkan Firebase Performance Monitoring SDK ke aplikasi web Anda.
• Menambahkan jejak kustom ke kode Anda.
• Merekam metrik khusus yang terkait dengan pelacakan khusus.
• Segmentasi 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/