Sebelum kamu memulai
Jika Anda belum melakukannya, kunjungi Tambahkan Firebase ke proyek JavaScript Anda untuk mempelajari cara:
Buat proyek Firebase
Daftarkan aplikasi web Anda dengan Firebase
Perhatikan bahwa saat menambahkan Firebase ke aplikasi, Anda mungkin menyelesaikan beberapa langkah yang dijelaskan nanti di halaman ini (misalnya, menambahkan SDK dan menginisialisasi Firebase).
Langkah 1 : Tambahkan dan inisialisasi Performance Monitoring
Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase .
Tambahkan JS SDK Performance Monitoring dan inisialisasi Performance Monitoring:
Web version 9
import { initializeApp } from "firebase/app"; import { getPerformance } from "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = getPerformance(app);
Web version 8
import firebase from "firebase/app"; import "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = firebase.performance();
Langkah 2 : Tambahkan pustaka polyfill penundaan input pertama
Untuk mengukur metrik keterlambatan input pertama , Anda perlu menambahkan pustaka polyfill untuk metrik ini. Untuk petunjuk penginstalan, lihat dokumentasi perpustakaan .
Menambahkan pustaka polyfill ini tidak diperlukan untuk Performance Monitoring untuk melaporkan metrik aplikasi web lainnya.
Langkah 3 : Hasilkan peristiwa kinerja untuk tampilan data awal
Firebase mulai memproses peristiwa saat Anda berhasil menambahkan SDK ke aplikasi Anda. Jika Anda masih mengembangkan secara lokal, berinteraksilah dengan aplikasi Anda untuk menghasilkan peristiwa untuk pengumpulan dan pemrosesan data awal.
Sajikan dan lihat aplikasi web Anda di lingkungan lokal.
Hasilkan peristiwa dengan memuat subhalaman untuk situs Anda, berinteraksi dengan aplikasi Anda, dan/atau memicu permintaan jaringan. Pastikan tab browser tetap terbuka setidaknya selama 10 detik setelah halaman dimuat.
Buka dasbor Performa konsol Firebase. Anda akan melihat tampilan data awal Anda dalam beberapa menit.
Jika Anda tidak melihat tampilan data awal Anda, tinjau tips pemecahan masalah .
Langkah 4 : (Opsional) Lihat pesan log untuk peristiwa kinerja
Buka alat pengembang browser Anda (misalnya, tab Jaringan untuk Alat Pengembang Chrome atau di Monitor Jaringan untuk Firefox ).
Segarkan aplikasi web Anda di browser.
Periksa pesan log Anda untuk setiap pesan kesalahan.
Setelah beberapa detik, cari panggilan jaringan ke
firebaselogging.googleapis.com
di alat pengembang browser Anda. Adanya panggilan jaringan tersebut menunjukkan bahwa browser mengirimkan data performa ke Firebase.
Jika aplikasi Anda tidak mencatat peristiwa kinerja, tinjau tips pemecahan masalah .
Langkah 5 : (Opsional) Tambahkan pemantauan khusus untuk kode tertentu
Untuk memantau data kinerja yang terkait dengan kode tertentu di aplikasi, Anda dapat melengkapi pelacakan kode khusus .
Dengan pelacakan kode khusus, Anda dapat mengukur berapa lama waktu yang dibutuhkan aplikasi untuk menyelesaikan tugas atau kumpulan tugas tertentu, seperti memuat kumpulan gambar atau membuat kueri database Anda. Metrik default untuk pelacakan kode khusus adalah durasinya, tetapi Anda juga dapat menambahkan metrik khusus, seperti cache hits dan peringatan memori.
Dalam kode Anda, Anda menentukan awal dan akhir pelacakan kode khusus (dan menambahkan metrik khusus yang diinginkan) menggunakan API yang disediakan oleh Performance Monitoring SDK.
Kunjungi Tambahkan pemantauan untuk kode tertentu guna mempelajari lebih lanjut tentang fitur ini dan cara menambahkannya ke aplikasi Anda.
Langkah 6 : Terapkan aplikasi Anda lalu tinjau hasilnya
Setelah Anda memvalidasi Performance Monitoring, Anda dapat menerapkan versi terbaru aplikasi Anda kepada pengguna.
Anda dapat memantau data performa di dasbor Performa Firebase console.
Langkah selanjutnya
Dapatkan pengalaman langsung dengan Firebase Performance Monitoring for Web Codelab .
Pelajari lebih lanjut tentang data yang dikumpulkan secara otomatis oleh Performance Monitoring:
- Data untuk pemuatan halaman di aplikasi Anda
- Data untuk permintaan jaringan HTTP/S yang dikeluarkan oleh aplikasi Anda
Lihat, lacak, dan filter data performa Anda di Firebase console
Tambahkan pemantauan untuk tugas atau alur kerja tertentu di aplikasi Anda dengan memperlengkapi pelacakan kode khusus