Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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 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 versi 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 versi 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 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 untuk membuat Performance Monitoring 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 untuk 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 Performa 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 tugas 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, tentukan awal dan akhir trace kode kustom (dan tambahkan metrik kustom yang diinginkan) menggunakan API yang disediakan oleh Performance Monitoring SDK.

Kunjungi 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 performa di dasbor Performa di Firebase console.

Langkah berikutnya