Firebase Performance Monitoring untuk web

1. Ringkasan

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

Codelab ini dimaksudkan sebagai lanjutan dari codelab web Firebase, tempat Anda mempelajari cara membangun aplikasi chat menggunakan Firebase Web SDK. Jika Anda ingin mempelajari cara menggunakan platform Firebase di web dengan membangun aplikasi chat, ikuti codelab web Firebase terlebih dahulu. Jika Anda sudah mengetahui cara menggunakan platform Firebase dan CLI serta ingin mempelajari Firebase Performance Monitoring, Anda berada di tempat yang tepat.

Hal yang akan Anda pelajari

• Cara menambahkan Firebase Performance Monitoring ke aplikasi web untuk mendapatkan metrik siap pakai (pemuatan halaman dan permintaan jaringan).
• Cara mengukur bagian kode tertentu dengan trace kustom.
• Cara mencatat metrik kustom tambahan yang terikat dengan trace kustom.
• Cara menyegmentasikan lebih lanjut data performa Anda dengan atribut kustom.
• Cara menggunakan dasbor pemantauan performa untuk memahami performa aplikasi web Anda.

Yang Anda butuhkan

• 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 berikutnya dari codelab ini untuk mengetahui cara mendapatkan kode.)

2. Mendapatkan kode contoh

Clone repositori GitHub codelab dari command line:

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

Atau, jika Anda belum menginstal git, Anda dapat mendownload repo sebagai file ZIP.

Repositori friendlychat-web berisi project contoh untuk beberapa platform.

Codelab ini hanya menggunakan dua repositori berikut:

• 📁 performance-monitoring-start: Kode awal yang akan Anda buat selama codelab ini.
• 📁 performance-monitoring: Kode lengkap untuk aplikasi contoh yang telah selesai.

Catatan: Jika ingin menjalankan aplikasi yang sudah selesai, Anda masih harus membuat project Firebase di Firebase console.

Mengimpor aplikasi awal

Dengan IDE Anda, buka atau impor direktori 🪄 performance-monitoring-start dari repositori yang di-clone. Direktori 🪄 performance-monitoring-start ini berisi kode awal untuk codelab, yang merupakan aplikasi web chat.

3. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Di Firebase console, klik Add Project.
2. Beri nama project Firebase Anda FriendlyChat.

Ingat project ID untuk project Firebase Anda.

3. Klik Buat Project.

Penting: Project Firebase Anda akan diberi nama FriendlyChat,, tetapi Firebase akan otomatis menetapkan ID project unik pada project menjadi friendlychat-1234. Project Anda akan diidentifikasi dengan ID unik ini (termasuk di CLI), sedangkan FriendlyChat hanyalah nama tampilan.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai penggunaan (Blaze), yang berarti project tersebut ditautkan ke akun Penagihan Cloud.

• Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
• Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit senilai$300 dan akun Penagihan Cloud Uji Coba Gratis.
• Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

1. Di Firebase console, pilih upgrade your plan.
2. Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
   Jika Anda perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Catatan: Anda dapat mendowngrade project ke paket harga tanpa biaya (Spark) setelah menyelesaikan codelab ini.

Menambahkan aplikasi web Firebase ke project

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

Mengaktifkan login dengan Google untuk autentikasi Firebase

Agar pengguna dapat login ke aplikasi chat dengan Akun Google mereka, kita akan menggunakan metode login Google.

Anda harus mengaktifkan login dengan Google:

1. Di Firebase console, cari bagian Develop di panel kiri.
2. Klik Authentication, lalu klik tab Sign-in method ( buka konsol).
3. Aktifkan penyedia login Google, lalu klik Save.

Menyiapkan Cloud Firestore

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

Berikut cara menyiapkan Cloud Firestore di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
2. Klik Buat database.
3. Biarkan Database ID ditetapkan ke (default).
4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Di codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
6. Klik Buat.

Menyiapkan Cloud Storage for Firebase

Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengupload, dan membagikan foto.

Berikut adalah cara menyiapkan Cloud Storage for Firebase di project Firebase Anda:

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
2. Klik Mulai.
3. Pilih lokasi untuk bucket Storage default Anda.
   Bucket di US-WEST1, US-CENTRAL1, dan US-EAST1 dapat memanfaatkan paket "Selalu Gratis" untuk Google Cloud Storage. Bucket di semua lokasi lainnya mengikuti harga dan penggunaan Google Cloud Storage.
4. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Di bagian akhir codelab ini, Anda akan menambahkan aturan keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
5. Klik Buat.

4. Menginstal antarmuka command line Firebase

Antarmuka command line (CLI) Firebase memungkinkan Anda menggunakan Firebase Hosting untuk menyalurkan aplikasi web secara lokal serta untuk men-deploy aplikasi web ke project Firebase.

1. Instal CLI dengan mengikuti petunjuk ini di dokumentasi Firebase.
2. Pastikan 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. Beri 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 (repositori yang telah Anda clone sebelumnya di codelab). Namun, untuk mengambil konfigurasi, kita perlu mengaitkan aplikasi Anda dengan project Firebase.

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

firebase use --add

6. Jika diminta, pilih project ID Anda, lalu berikan alias untuk project Firebase Anda.

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

7. Ikuti petunjuk selanjutnya di command line.

5. Mengintegrasikan dengan Firebase Performance Monitoring

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

Menambahkan pemantauan performa dan melakukan 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 project Firebase dan aplikasi web yang ingin kita gunakan. Karena kita 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. Dalam file src/index.js, tambahkan baris berikut di bawah TODO untuk melakukan inisialisasi pemantauan performa.

index.js

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

Performance Monitoring kini akan otomatis mengumpulkan metrik pemuatan halaman dan permintaan jaringan untuk Anda saat pengguna menggunakan situs Anda. Lihat dokumentasi untuk mempelajari lebih lanjut trace pemuatan halaman otomatis.

Menambahkan library polyfill penundaan input pertama

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

First input delay dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink. Fungsi ini akan berhenti tepat setelah browser dapat merespons input, yang berarti bahwa browser tidak sibuk memuat atau mengurai konten Anda.

Library polyfill ini bersifat opsional untuk integrasi pemantauan performa.

Buka file public/index.html, lalu hapus tanda komentar di 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 tahap ini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring dalam kode.

Ada juga cara lain untuk berintegrasi dengan Firebase Performance Monitoring SDK untuk web. Untuk mengetahui detailnya, lihat Memulai Performance Monitoring untuk web.

Pada langkah berikut, Anda akan mempelajari cara menambahkan trace kustom menggunakan Firebase Performance Monitoring. Jika Anda hanya ingin mengumpulkan rekaman aktivitas otomatis, buka bagian "Men-deploy dan mulai mengirim gambar".

6. Menambahkan rekaman aktivitas kustom ke aplikasi

Performance Monitoring memungkinkan Anda membuat rekaman aktivitas kustom. Pelacakan kustom adalah laporan selama durasi blok eksekusi di aplikasi Anda. Anda menentukan awal dan akhir pelacakan kustom menggunakan API yang disediakan oleh SDK.

1. Dalam file src/index.js, dapatkan objek performa, lalu buat rekaman aktivitas kustom untuk mengupload pesan gambar.

index.js

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

2. Untuk merekam rekaman aktivitas kustom, Anda harus menentukan titik awal dan titik berhenti untuk rekaman aktivitas. Anda dapat menganggap rekaman aktivitas sebagai timer.

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 rekaman aktivitas kustom. Setelah men-deploy kode, durasi trace kustom akan dicatat jika pengguna mengirim pesan gambar. Hal ini akan memberi Anda gambaran tentang berapa lama waktu yang diperlukan pengguna di dunia nyata untuk mengirim gambar di aplikasi chat Anda.

7. Tambahkan metrik kustom ke aplikasi Anda.

Anda dapat mengonfigurasi rekaman aktivitas kustom lebih lanjut untuk mencatat metrik kustom untuk peristiwa terkait performa yang terjadi dalam cakupan. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu upload dipengaruhi oleh ukuran gambar untuk pelacakan kustom yang kita tentukan di langkah terakhir.

1. Temukan rekaman aktivitas kustom dari langkah sebelumnya (ditentukan dalam file src/index.js).
2. Tambahkan baris berikut di bawah TODO untuk merekam ukuran gambar yang diupload.

index.js

 ...

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

 ...

Metrik ini memungkinkan pemantauan performa untuk mencatat durasi trace kustom serta ukuran gambar yang diupload.

8. Menambahkan atribut khusus ke aplikasi

Berdasarkan langkah-langkah sebelumnya, Anda juga dapat mengumpulkan atribut kustom di pelacakan kustom. Atribut khusus dapat membantu mengelompokkan data berdasarkan kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki pengaruh jenis MIME terhadap performa.

1. Gunakan rekaman aktivitas kustom yang ditentukan dalam file src/index.js Anda.
2. Tambahkan baris berikut di bawah TODO untuk mencatat jenis MIME gambar yang diupload.

index.js

 ...

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

 ...

Atribut ini memungkinkan pemantauan performa mengategorikan durasi rekaman aktivitas kustom berdasarkan jenis gambar yang diupload.

9. [Memperluas] Menambahkan trace kustom 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 akan tersedia. Dalam skenario ini, Anda masih dapat menambahkan trace kustom menggunakan User Timing API. Firebase performance SDK akan mengambil durasi dari measure() dan mencatatnya sebagai rekaman aktivitas kustom.

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

1. Di file public/index.html, tambahkan baris berikut untuk menandai awal pemuatan skrip gaya visual 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 visual 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 otomatis dikumpulkan oleh Firebase Performance Monitoring. Anda akan dapat menemukan rekaman aktivitas kustom bernama loadStyling di Firebase Performance console nanti.

10. Men-deploy dan mulai mengirim gambar

Men-deploy ke Firebase Hosting

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

1. Pastikan command line mengakses direktori performance-monitoring-start lokal aplikasi Anda.
2. Deploy file Anda ke project Firebase dengan menjalankan perintah berikut:

firebase deploy

3. Konsol akan menampilkan hal 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.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. Buka 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.

Memastikan bahwa pemantauan performa diaktifkan

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

Kirim pesan gambar

Buat beberapa data performa dengan mengirim gambar di aplikasi chat Anda.

1. Setelah login ke aplikasi chat, klik tombol upload gambar .
2. Pilih file gambar menggunakan pemilih file.
3. Coba kirim beberapa gambar (beberapa contoh disimpan di public/images/) sehingga Anda dapat menguji distribusi metrik kustom dan atribut khusus.

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

11. Memantau dasbor

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

Catatan: Data performa biasanya ditampilkan dalam waktu 12 jam. Pastikan untuk memeriksa kembali nanti jika Anda tidak melihat hasil apa pun di Firebase console.

Mengakses dasbor

1. Di Firebase console, pilih project yang memiliki aplikasi Friendly Chat Anda.
2. Di panel kiri, temukan bagian Kualitas, lalu klik Performa.

Tinjau data di perangkat

Setelah pemantauan performa 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 menampilkan berbagai metrik performa yang otomatis dikumpulkan oleh pemantauan performa saat halaman Anda dimuat.
• Tabel Durations menampilkan trace kustom yang telah Anda tetapkan dalam kode aplikasi.

2. Klik saveImageMessage di tabel Durasi untuk meninjau metrik tertentu untuk rekaman aktivitas.

3. Klik Gabungan untuk meninjau distribusi ukuran gambar. Anda dapat melihat metrik yang ditambahkan untuk mengukur ukuran gambar pada trace kustom ini.

4. Klik Over time yang berada di samping Aggregate pada langkah sebelumnya. Anda juga dapat melihat Durasi pelacakan kustom. Klik Lihat lainnya untuk meninjau data yang dikumpulkan secara lebih mendetail.

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

Meninjau data jaringan

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

1. Kembali ke layar utama dasbor pemantauan performa.
2. Klik tab Jaringan untuk melihat daftar entri permintaan jaringan untuk aplikasi web Anda.
3. Jelajahi masalah tersebut untuk mengidentifikasi permintaan yang lambat dan mulai lakukan perbaikan untuk meningkatkan performa aplikasi Anda.

12. Selamat!

Anda telah mengaktifkan Firebase SDK untuk pemantauan performa dan mengumpulkan pelacakan otomatis dan pelacakan kustom untuk mengukur performa aplikasi chat Anda di dunia nyata.

Yang telah kita bahas:

• Menambahkan Firebase Performance Monitoring SDK ke aplikasi web Anda.
• Menambahkan trace kustom ke kode Anda.
• Merekam metrik kustom yang terkait dengan trace kustom.
• Mengelompokkan data performa menggunakan atribut kustom.
• Memahami cara menggunakan dasbor pemantauan performa untuk mendapatkan insight tentang performa aplikasi Anda.

Pelajari lebih lanjut:

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