Memulai Performance Monitoring untuk web

Sebelum memulai

Jika Anda belum melakukannya, buka artikel Menambahkan Firebase ke project JavaScript untuk mempelajari cara:

  • Membuat project Firebase

  • Mendaftarkan aplikasi web Anda ke Firebase

Perlu diperhatikan bahwa saat menambahkan Firebase ke aplikasi, Anda dapat menyelesaikan beberapa langkah yang dijelaskan nanti di halaman ini (misalnya, menambahkan SDK dan menginisialisasi Firebase).

Langkah 1: Tambahkan dan lakukan inisialisasi Performance Monitoring

  1. Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase.

  2. Tambahkan Performance Monitoring JS SDK dan lakukan inisialisasi Performance Monitoring:

Web 

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 

import firebase from "firebase/compat/app";
import "firebase/compat/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 library polyfill penundaan input pertama

Untuk mengukur metrik penundaan input pertama, Anda perlu menambahkan library polyfill untuk metrik ini. Untuk petunjuk penginstalan, buka dokumentasi library ini.

Anda tidak perlu menambahkan library polyfill ini agar Performance Monitoring dapat melaporkan metrik aplikasi web lainnya.

Langkah 3: Buat peristiwa performa untuk tampilan data awal

Firebase mulai memproses peristiwa saat Anda berhasil menambahkan SDK ke aplikasi. Jika Anda masih melakukan pengembangan secara lokal, lakukan interaksi dengan aplikasi guna menghasilkan peristiwa untuk pengumpulan dan pemrosesan data awal.

  1. Salurkan dan tampilkan aplikasi web Anda di lingkungan lokal.

  2. Hasilkan peristiwa dengan memuat subhalaman untuk situs Anda, berinteraksi dengan aplikasi Anda, dan/atau memicu permintaan jaringan. Pastikan Anda membiarkan tab browser terbuka setidaknya selama 10 detik setelah halaman dimuat.

  3. Buka dasbor Performance di Firebase console. Anda akan melihat tampilan data awal dalam beberapa menit.

    Jika Anda tidak melihat tampilan data awal, lihat tips pemecahan masalah.

Langkah 4: (Opsional) Lihat pesan log untuk mencari peristiwa performa

  1. Buka alat developer browser (misalnya, tab Jaringan untuk Chrome Dev Tools atau di Network Monitor untuk Firefox).

  2. Refresh aplikasi web Anda di browser.

  3. Periksa apakah ada pesan error di pesan log Anda.

  4. Setelah beberapa detik, cari panggilan jaringan ke firebaselogging.googleapis.com di alat developer browser Anda. Jika ada panggilan jaringan, berarti browser mengirim data performa ke Firebase.

Jika aplikasi Anda tidak mencatat peristiwa performa ke dalam log, lihat tips pemecahan masalah.

Langkah 5: (Opsional) Tambahkan pemantauan kustom untuk kode tertentu

Untuk memantau data performa yang terkait dengan kode tertentu di aplikasi, Anda dapat menginstrumentasikan trace kode kustom.

Dengan trace kode kustom, Anda dapat mengukur durasi yang dibutuhkan aplikasi untuk menyelesaikan satu atau serangkaian tugas tertentu, seperti memuat kumpulan gambar atau membuat kueri untuk database. Metrik default untuk trace kode kustom adalah durasinya, tetapi Anda juga dapat menambahkan metrik kustom, seperti cache ditemukan dan peringatan memori.

Dalam kode, Anda dapat menentukan awal dan akhir trace kode kustom (dan menambahkan metrik kustom yang diinginkan) menggunakan API yang disediakan oleh Performance Monitoring SDK.

Baca artikel Menambahkan pemantauan untuk kode tertentu untuk mempelajari lebih lanjut fitur ini dan cara menambahkannya ke aplikasi Anda.

Langkah 6: Deploy aplikasi Anda lalu tinjau hasilnya

Setelah memvalidasi Performance Monitoring, Anda dapat men-deploy versi terbaru aplikasi kepada pengguna.

Anda dapat memantau data di dasbor Performance dari Firebase console.

Langkah berikutnya