Inizia con il monitoraggio delle prestazioni per il Web

Prima di iniziare

Se non l'hai già fatto, visita Aggiungi Firebase al tuo progetto JavaScript per scoprire come:

  • Crea un progetto Firebase

  • Registra la tua app Web con Firebase

Tieni presente che quando aggiungi Firebase alla tua app, potresti completare alcuni dei passaggi descritti più avanti in questa pagina (ad esempio, aggiungere l'SDK e inizializzare Firebase).

Passaggio 1 : aggiungere e inizializzare il monitoraggio delle prestazioni

  1. Se non lo hai già fatto, installa Firebase JS SDK e inizializza Firebase .

  2. Aggiungi l'SDK JS di Performance Monitoring e inizializza il monitoraggio delle prestazioni:

API modulare 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);

API con spazio dei nomi 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();

Passaggio 2 : aggiungi la prima libreria polyfill del ritardo di input

Per misurare la prima metrica del ritardo di input , è necessario aggiungere la libreria polyfill per questa metrica. Per le istruzioni di installazione, fare riferimento alla documentazione della libreria.

L'aggiunta di questa libreria di polyfill non è necessaria affinché il monitoraggio delle prestazioni segnali le altre metriche dell'app Web.

Passaggio 3 : generare eventi prestazionali per la visualizzazione iniziale dei dati

Firebase inizia a elaborare gli eventi quando aggiungi correttamente l'SDK alla tua app. Se stai ancora sviluppando localmente, interagisci con la tua app per generare eventi per la raccolta e l'elaborazione iniziali dei dati.

  1. Servi e visualizza la tua app Web in un ambiente locale.

  2. Genera eventi caricando pagine secondarie per il tuo sito, interagendo con la tua app e/o attivando richieste di rete. Assicurati di mantenere aperta la scheda del browser per almeno 10 secondi dopo il caricamento della pagina.

  3. Vai alla dashboard Prestazioni della console Firebase. Dovresti visualizzare i dati iniziali entro pochi minuti.

    Se non vedi la visualizzazione dei dati iniziali, consulta i suggerimenti per la risoluzione dei problemi .

Passaggio 4 : (facoltativo) visualizzare i messaggi di registro per gli eventi di prestazione

  1. Apri gli strumenti per sviluppatori del tuo browser (ad esempio, la scheda Rete per Chrome Dev Tools o in Network Monitor per Firefox ).

  2. Aggiorna la tua app Web nel browser.

  3. Controlla i messaggi di registro per eventuali messaggi di errore.

  4. Dopo alcuni secondi, cerca una chiamata di rete a firebaselogging.googleapis.com negli strumenti per sviluppatori del tuo browser. La presenza di quella chiamata di rete mostra che il browser sta inviando dati sulle prestazioni a Firebase.

Se la tua app non registra gli eventi relativi alle prestazioni, consulta i suggerimenti per la risoluzione dei problemi .

Passaggio 5 : (facoltativo) aggiungi il monitoraggio personalizzato per un codice specifico

Per monitorare i dati sulle prestazioni associati a un codice specifico nella tua app, puoi strumentare le tracce del codice personalizzato .

Con una traccia del codice personalizzata, puoi misurare il tempo impiegato dalla tua app per completare un'attività specifica o una serie di attività, ad esempio il caricamento di una serie di immagini o l'esecuzione di query sul database. La metrica predefinita per una traccia del codice personalizzato è la sua durata, ma puoi anche aggiungere metriche personalizzate, come riscontri nella cache e avvisi di memoria.

Nel tuo codice, definisci l'inizio e la fine di una traccia di codice personalizzato (e aggiungi eventuali metriche personalizzate desiderate) utilizzando l'API fornita da Performance Monitoring SDK.

Visita Aggiungi monitoraggio per codice specifico per ulteriori informazioni su queste funzionalità e su come aggiungerle alla tua app.

Passaggio 6 : distribuisci la tua app, quindi esamina i risultati

Dopo aver convalidato il monitoraggio delle prestazioni, puoi distribuire la versione aggiornata della tua app ai tuoi utenti.

Puoi monitorare i dati sulle prestazioni nel dashboard Prestazioni della console Firebase.

Prossimi passi