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 yang digunakan untuk mempelajari cara membangun aplikasi chat menggunakan Firebase Web SDK. Jika Anda ingin mempelajari cara menggunakan platform Firebase di web dengan membuat aplikasi chat, ikuti codelab web Firebase terlebih dahulu. Jika Anda sudah mengetahui cara menggunakan platform Firebase dan CLI, dan ingin mempelajari Firebase Performance Monitoring, Anda berada di tempat yang tepat.

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 terkait dengan pelacakan kustom.
• Cara menyegmentasikan data performa lebih lanjut dengan atribut khusus.
• 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 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.
• 🔮 pemantauan performa: Kode lengkap untuk aplikasi contoh yang sudah selesai.

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

Mengimpor aplikasi awal

Dengan menggunakan IDE, buka atau impor direktori 🏏 performance-monitoring-start dari repositori yang di-clone. Direktori trust 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 project ID unik untuk project tersebut dalam bentuk friendlychat-1234. ID unik ini adalah cara project Anda diidentifikasi (termasuk di CLI), sedangkan FriendlyChat hanyalah nama tampilan.

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 Siapkan juga Firebase Hosting untuk aplikasi ini.
3. Klik Register app.
4. Klik langkah-langkah selanjutnya. Anda tidak perlu mengikuti petunjuk di layar sekarang. Petunjuk ini akan dibahas di langkah-langkah selanjutnya dari codelab ini.

Mengaktifkan login dengan Google untuk autentikasi Firebase

Untuk mengizinkan pengguna login ke aplikasi chat dengan akun Google mereka, kita akan menggunakan metode login Google.

Anda harus mengaktifkan login dengan Google:

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

Mengaktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

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

Kode awal untuk codelab ini menyertakan aturan yang lebih aman. Kita akan men-deploy-nya nanti di codelab.

Mengaktifkan Cloud Storage

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

Anda harus mengaktifkan Cloud Storage:

1. Di bagian Develop Firebase console, klik Storage.
2. Klik Mulai.
3. Baca pernyataan penyangkalan tentang aturan keamanan untuk project Firebase Anda, lalu klik Oke.

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

4. Menginstal antarmuka command line Firebase

Dengan antarmuka command line (CLI) Firebase, Anda dapat menggunakan Firebase Hosting untuk menyalurkan aplikasi web secara lokal serta men-deploy aplikasi web ke project Firebase.

1. Instal CLI dengan mengikuti petunjuk ini di dokumen Firebase.
2. Pastikan 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 mengambil konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori lokal aplikasi (repositori yang Anda clone sebelumnya di codelab). Namun, untuk menarik konfigurasi, kami perlu mengaitkan aplikasi Anda dengan project Firebase Anda.

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. Saat diminta, pilih project ID Anda, lalu beri alias untuk project Firebase Anda.

Alias berguna jika Anda memiliki beberapa lingkungan (produksi, staging, dll.). Namun, untuk codelab ini, mari kita gunakan saja 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 bisa 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 di sana.

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 sekarang akan otomatis mengumpulkan metrik pemuatan halaman dan permintaan jaringan saat pengguna menggunakan situs Anda. Lihat dokumentasi untuk mempelajari trace pemuatan halaman otomatis lebih lanjut.

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.

Penundaan input pertama dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink. Fungsi ini langsung berhenti 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 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 tahap ini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring di kode Anda.

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 pelacakan otomatis, buka bagian "Deploy dan mulai kirim gambar".

6. Menambahkan pelacakan kustom ke aplikasi

Performance Monitoring memungkinkan Anda membuat trace kustom. Trace kustom adalah laporan durasi blok eksekusi di aplikasi Anda. Anda menentukan awal dan akhir trace kustom menggunakan API yang disediakan oleh SDK.

1. Di 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 mencatat pelacakan kustom, Anda harus menentukan titik awal dan titik perhentian untuk pelacakan tersebut. Anda dapat menganggap pelacakan sebagai penghitung 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 kustom. Setelah men-deploy kode, durasi trace kustom akan dicatat jika pengguna mengirim pesan gambar. Ini akan memberi Anda gambaran tentang waktu yang dibutuhkan pengguna di dunia nyata untuk mengirim gambar di aplikasi chat Anda.

7. Menambahkan metrik kustom ke aplikasi Anda.

Anda dapat mengonfigurasi pelacakan kustom lebih lanjut untuk mencatat metrik kustom untuk peristiwa terkait performa yang terjadi dalam cakupannya. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu upload dipengaruhi oleh ukuran gambar untuk trace 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 mencatat 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 sebelumnya, Anda juga dapat mengumpulkan atribut khusus di trace kustom. Atribut khusus dapat membantu menyegmentasikan data menurut kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki cara jenis MIME memengaruhi performa.

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

index.js

 ...

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

 ...

Atribut ini memungkinkan pemantauan performa untuk mengategorikan durasi trace kustom berdasarkan jenis gambar yang diupload.

9. [Perluas] Menambahkan pelacakan kustom dengan User Timing API

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

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

1. Dalam 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 otomatis dikumpulkan oleh Firebase Performance Monitoring. Anda akan dapat menemukan trace kustom yang disebut 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.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. Buka aplikasi web yang kini dihosting sepenuhnya menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri: https://<projectId>.firebaseapp.com dan https://<projectId>.web.app.

Memastikan pemantauan performa telah diaktifkan

Buka Firebase console, lalu buka tab Performa. Jika Anda melihat pesan sambutan yang menampilkan "SDK detected", berarti Anda telah berhasil berintegrasi dengan Firebase Performance Monitoring.

Kirim pesan gambar

Buat sejumlah data performa dengan mengirimkan 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 sampel disimpan di public/images/) agar Anda dapat menguji distribusi metrik kustom dan atribut khusus.

Pesan baru akan ditampilkan di UI aplikasi beserta gambar yang dipilih.

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, cari bagian Kualitas, lalu klik Performa.

Tinjau data di perangkat

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

1. Klik tab Di perangkat.

• Tabel Pemuatan halaman menampilkan berbagai metrik performa yang dikumpulkan secara otomatis oleh pemantauan performa saat halaman Anda dimuat.
• Tabel Durasi menampilkan trace kustom yang telah Anda tentukan di kode aplikasi Anda.

2. Klik saveImageMessage di tabel Durations untuk meninjau metrik tertentu untuk trace.

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

4. Klik Over time yang berada di samping Aggregate di 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 guna melihat daftar entri permintaan jaringan untuk aplikasi web Anda.
3. Jelajahi untuk mengidentifikasi permintaan yang lambat dan mulai lakukan perbaikan untuk meningkatkan kinerja aplikasi Anda.

12. Selamat!

Anda telah mengaktifkan Firebase SDK untuk pemantauan performa serta mengumpulkan trace otomatis dan trace kustom untuk mengukur performa sebenarnya dari aplikasi chat Anda.

Yang telah kita bahas:

• Menambahkan Firebase Performance Monitoring SDK ke aplikasi web Anda.
• Menambahkan trace kustom ke kode Anda.
• Mencatat metrik kustom yang terkait dengan rekaman aktivitas kustom.
• Menyegmentasikan data performa menggunakan atribut khusus.
• 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/