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 live demo.

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 teks editor pilihan Anda, seperti WebStorm , Atom , Sublime , atau Kode VS
• Terminal/konsol
• Peramban pilihan Anda, seperti Chrome
• Kode sampel codelab (Lihat bagian selanjutnya dari codelab ini untuk cara mendapatkan kode.)

2. Dapatkan kode sampel

Mengkloning codelab ini GitHub repositori dari baris perintah:

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

Atau, jika Anda tidak memiliki git terinstal, Anda dapat men-download repo sebagai file zip .

Impor aplikasi pemula

Menggunakan IDE Anda, terbuka atau mengimpor 📁 performance-monitoring-start direktori dari repositori kloning. 📁 ini performance-monitoring-start direktori berisi kode awal untuk codelab, yang merupakan aplikasi chatting web.

3. Buat dan siapkan proyek Firebase

Buat proyek Firebase

1. Dalam Firebase konsol , klik Add Project.
2. 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. Mendaftarkan aplikasi dengan julukan Friendly Chat , dan kemudian centang kotak di samping juga mengatur Firebase Hosting untuk aplikasi ini.
3. Klik Register 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 memungkinkan pengguna untuk masuk ke aplikasi chat dengan account Google mereka, kita akan menggunakan Google masuk metode.

Anda harus mengaktifkan Google masuk:

1. Dalam Firebase konsol, temukan bagian Kembangkan di panel sebelah kiri.
2. Klik Authentication, kemudian klik Sign-in tab metode ( pergi ke konsol ).
3. Aktifkan Google masuk penyedia, dan kemudian 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. Dalam Firebase konsol ini Mengembangkan, klik Database.
2. Klik Membuat database di panel Cloud Firestore.
3. Pilih Mulai di pilihan mode tes, kemudian klik Aktifkan setelah membaca disclaimer 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. Dalam Firebase konsol ini Mengembangkan, klik Storage.
2. Klik Get Started.
3. Baca disclaimer tentang aturan keamanan untuk proyek Firebase Anda, dan kemudian klik Got itu.

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 docs 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 Anda kloning sebelumnya di codelab). Namun untuk menarik konfigurasi, kami perlu mengaitkan aplikasi Anda dengan proyek Firebase Anda.

4. Pastikan bahwa baris perintah Anda mengakses lokal aplikasi Anda performance-monitoring-start direktori.
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 menggunakan alias default .

7. Ikuti instruksi yang tersisa di baris perintah Anda.

5. Integrasikan dengan Firebase Performance Monitoring

Ada berbagai cara untuk mengintegrasikan dengan Kinerja Firebase Pemantauan SDK untuk web (lihat dokumentasi untuk rincian). Dalam codelab ini, kita akan memungkinkan pemantauan kinerja dari URL Hosting.

Tambahkan pemantauan kinerja dan inisialisasi Firebase

1. Buka src/index.js file, kemudian tambahkan baris berikut di bawah TODO untuk menyertakan Firebase Kinerja Pemantauan 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, kita sudah menambahkan baris berikut untuk Anda di bawah public/index.html file, namun periksa bahwa itu ada.

index.html

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

3. Dalam src/index.js file, 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 jejak beban halaman otomatis.

Tambahkan perpustakaan polyfill penundaan input pertama

Pertama delay masukan berguna karena browser menanggapi interaksi pengguna memberikan pengguna kesan pertama mereka tentang respon dari 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 public/index.html file, kemudian tanda komentar 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 akan 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

Pemantauan kinerja memungkinkan Anda untuk membuat jejak 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 src/index.js berkas, mendapatkan kinerja objek, kemudian membuat jejak kustom untuk meng-upload 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 lebih mengkonfigurasi jejak kustom untuk merekam metrik kustom untuk acara yang berhubungan dengan kinerja yang terjadi dalam ruang lingkup. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu unggah dipengaruhi oleh ukuran gambar untuk pelacakan khusus yang kami tentukan di langkah terakhir.

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

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

Membangun langkah-langkah sebelumnya, Anda juga dapat mengumpulkan atribut khusus pada Anda jejak kustom . 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 didefinisikan dalam Anda src/index.js berkas.
2. Tambahkan baris berikut di bawah TODO untuk merekam jenis MIME gambar upload.

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 jejak kustom dengan menggunakan Waktu Pengguna API . Kinerja Firebase SDK akan mengambil jangka waktu dari ukuran () dan log mereka sebagai jejak kustom.

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

1. Dalam public/index.html file, tambahkan baris berikut untuk menandai awal dari beban script aplikasi styling.

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 jejak adat yang disebut loadStyling di Firebase Kinerja konsol kemudian.

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 bahwa baris perintah Anda mengakses lokal aplikasi Anda performance-monitoring-start direktori.
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 sepenuhnya host menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri: https://<projectId>.firebaseapp.com dan https://<projectId>.web.app .

Verifikasi bahwa pemantauan kinerja diaktifkan

Terbuka Firebase konsol dan pergi ke tab Performance. Jika Anda melihat pesan selamat datang yang menunjukkan "SDK terdeteksi", maka Anda telah berhasil mengintegrasikan 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. Mencoba mengirim beberapa gambar (beberapa sampel disimpan dalam 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. 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. Dalam Firebase konsol , pilih proyek yang memiliki Anda Friendly Chat aplikasi.
2. Pada panel sebelah kiri, cari bagian Kualitas, dan klik Kinerja.

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 perangkat On.

• Laman beban meja menunjukkan berbagai metrik kinerja bahwa kinerja pemantauan secara otomatis mengumpulkan sementara halaman Anda adalah pemuatan.
• The Durasi meja menunjukkan jejak khusus yang Anda didefinisikan dalam kode aplikasi Anda.

2. Klik saveImageMessage dalam tabel Durasi untuk meninjau metrik khusus untuk jejak.

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 waktu Selama yang terletak di sebelah Agregat pada langkah sebelumnya. Anda juga dapat melihat Durasi jejak kustom. Klik Lihat lebih untuk meninjau data yang dikumpulkan secara lebih rinci.

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

Tinjau data jaringan

HTTP / S permintaan jaringan adalah laporan yang menangkap waktu respon dan ukuran payload 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/