Aggiungere il monitoraggio personalizzato per un codice dell'app specifico

Performance Monitoring raccoglie le tracce per aiutarti a monitorare il rendimento della tua app. Una traccia è un report dei dati sul rendimento acquisiti tra due istanti nella tua app.

Puoi creare le tue tracce per monitorare i dati sul rendimento associati a codice specifico nella tua app. Con una traccia di codice personalizzata, puoi misurare il tempo necessario alla tua app per completare un'attività specifica o un insieme di attività, ad esempio il caricamento di un insieme di immagini o l'esecuzione di query sul database.

La metrica predefinita per una traccia di codice personalizzata è la "durata" (il tempo tra i punti di inizio e di arresto della traccia), ma puoi anche aggiungere metriche personalizzate.

Nel codice, definisci l'inizio e la fine di una traccia di codice personalizzata utilizzando le API fornite dall'SDK Performance Monitoring. Le tracce di codice personalizzate possono essere avviate in qualsiasi momento dopo la loro creazione e sono sicure per i thread.

Poiché la metrica predefinita raccolta per queste tracce è "duration", a volte vengono chiamate "tracce Duration".

Puoi visualizzare i dati di queste tracce nella sottoscheda Tracce personalizzate della tabella delle tracce, che si trova nella parte inferiore della dashboard Rendimento (scopri di più sull'utilizzo della console più avanti in questa pagina).

Attributi predefiniti, attributi personalizzati e metriche personalizzate

Puoi configurare ulteriormente una traccia di codice personalizzata per registrare metriche personalizzate per gli eventi correlati al rendimento che si verificano nell'ambito della traccia. Ad esempio, puoi creare una metrica personalizzata per il numero di hit e miss della cache o per il numero di volte in cui l'interfaccia utente diventa non rispondente per un periodo di tempo significativo.

Gli attributi e le metriche personalizzate vengono visualizzati nella console Firebase insieme agli attributi e alla metrica predefiniti per la traccia.

Aggiungere tracce di codice personalizzate

Utilizza l'Performance Monitoring API Trace per aggiungere tracce di codice personalizzate per monitorare un codice dell'applicazione specifico.

Tieni presente quanto segue:

• Un'app può avere più tracce di codice personalizzate.
• È possibile eseguire più tracce di codice personalizzate contemporaneamente.
• I nomi delle tracce di codice personalizzate devono soddisfare i seguenti requisiti: nessun carattere di spazio iniziale o finale, nessun carattere iniziale di trattino basso (_) e la lunghezza massima è di 100 caratteri.
• Le tracce di codice personalizzate supportano l'aggiunta di metriche personalizzate e attributi personalizzati.

Per avviare e interrompere una traccia di codice personalizzato, racchiudi il codice da monitorare con righe di codice simili alle seguenti:

import { trace } from "firebase/performance";

const t = trace(perf, "CUSTOM_TRACE_NAME");
t.start();

// Code that you want to trace 
// ...

t.stop();
perf_add_custom_trace.js

const trace = perf.trace("CUSTOM_TRACE_NAME");
trace.start();

// Code that you want to trace 
// ...

trace.stop();
index.js

Aggiungere tracce di codice personalizzate utilizzando l'API User Timing

Oltre all'Performance MonitoringAPI Trace, puoi aggiungere tracce di codice personalizzato utilizzando l'API User Timing nativa di un browser. La durata di una traccia misurata utilizzando questa API viene rilevata automaticamente dall'SDK Performance Monitoring. L'utilizzo dell'API User Timing è particolarmente utile se preferisci caricare l'SDK Performance Monitoring in modo asincrono. Una volta inizializzato, l'SDK registrerà le misurazioni effettuate prima del suo caricamento.

Per utilizzare questa funzionalità, racchiudi il codice da tracciare con gli indicatori di temporizzazione utente:

const performance = window.performance;

performance.mark("measurementStart");

// Code that you want to trace 
// ...

performance.mark("measurementStop");
performance.measure("customTraceName", "measurementStart", "measurementStop");
perf_user_timing_marks.js

const performance = window.performance;

performance.mark("measurementStart");

// Code that you want to trace 
// ...

performance.mark("measurementStop");
performance.measure("customTraceName", "measurementStart", "measurementStop");
index.js

Tieni presente che performance nell'esempio riportato sopra si riferisce all'oggetto window.performance del browser.

Quando utilizzi l'API User Timing, non puoi aggiungere metriche e attributi personalizzati alle tracce di codice personalizzato. Utilizza l'Performance MonitoringAPI Trace se vuoi aggiungere questi elementi personalizzati a una traccia di codice personalizzata.

Aggiungere metriche personalizzate alle tracce di codice personalizzato

Utilizza l'Performance Monitoring API Trace per aggiungere metriche personalizzate alle tracce di codice personalizzate.

Tieni presente quanto segue:

• I nomi delle metriche personalizzate devono soddisfare i seguenti requisiti: nessun carattere iniziale o finale di spazio vuoto, nessun carattere iniziale di trattino basso (_) e una lunghezza massima di 100 caratteri.
• Ogni traccia di codice personalizzata può registrare fino a 32 metriche (inclusa la metrica predefinita Durata).

Per aggiungere una metrica personalizzata, aggiungi una riga di codice simile alla seguente ogni volta che si verifica l'evento. Ad esempio, questa metrica personalizzata conteggia gli eventi correlati al rendimento che si verificano nella tua app.

import { trace } from "firebase/performance";

async function getInventory(inventoryIds) {
  const t = trace(perf, "inventoryRetrieval");

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  t.incrementMetric("numberOfIds", inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  t.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  t.stop();

  return inventoryData;
}
perf_add_custom_metrics.js

async function getInventory(inventoryIds) {
  const trace = perf.trace("inventoryRetrieval");

  // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
  trace.incrementMetric("numberOfIds", inventoryIds.length);

  // Measures the time it takes to request inventory based on the amount of inventory
  trace.start();
  const inventoryData = await retrieveInventory(inventoryIds);
  trace.stop();

  return inventoryData;
}
index.js

Creare attributi personalizzati per le tracce di codice personalizzate

Utilizza l'Performance Monitoring API Trace per aggiungere attributi personalizzati alle tracce di codice personalizzato.

Per utilizzare gli attributi personalizzati, aggiungi alla tua app del codice che definisce l'attributo e lo associa a una traccia di codice personalizzata specifica. Puoi impostare l'attributo personalizzato in qualsiasi momento tra l'inizio e la fine della traccia.

Tieni presente quanto segue:

• I nomi degli attributi personalizzati devono soddisfare i seguenti requisiti:

  • Nessuno spazio iniziale o finale, nessun carattere trattino basso (_) iniziale
  • Nessuno spazio
  • La lunghezza massima è di 32 caratteri
  • I caratteri consentiti per il nome sono A-Z, a-z e _.

• Ogni traccia di codice personalizzato può registrare fino a 5 attributi personalizzati.

• Assicurati che gli attributi personalizzati non contengano informazioni che consentono l'identificazione personale di un individuo per Google.

  Scopri di più su queste linee guida

import { trace } from "firebase/performance";

const t = trace(perf, "test_trace");
t.putAttribute("experiment", "A");

// Update scenario
t.putAttribute("experiment", "B");

// Reading scenario
const experimentValue = t.getAttribute("experiment");

// Delete scenario
t.removeAttribute("experiment");

// Read attributes
const traceAttributes = t.getAttributes();
perf_add_custom_attributes.js

const trace = perf.trace("test_trace");
trace.putAttribute("experiment", "A");

// Update scenario
trace.putAttribute("experiment", "B");

// Reading scenario
const experimentValue = trace.getAttribute("experiment");

// Delete scenario
trace.removeAttribute("experiment");

// Read attributes
const traceAttributes = trace.getAttributes();
index.js

Monitorare, visualizzare e filtrare i dati sul rendimento

Per visualizzare i dati sulle prestazioni in tempo reale, assicurati che la tua app utilizzi una versione dell'SDK Performance Monitoring compatibile con l'elaborazione dei dati in tempo reale. Scopri di più sui dati sul rendimento in tempo reale.

Monitorare metriche specifiche nella dashboard

Per conoscere le tendenze delle tue metriche principali, aggiungile alla scheda delle metriche nella parte superiore della dashboard Rendimento. Puoi identificare rapidamente le regressioni monitorando le variazioni di settimana in settimana o verificare che le modifiche recenti al codice stiano migliorando il rendimento.

Per aggiungere una metrica alla scheda delle metriche:

1. Vai alla dashboard Rendimentonella console Firebase.
2. Fai clic su una scheda metrica vuota, quindi seleziona una metrica esistente da aggiungere alla scheda.
3. Fai clic su more_vert in una scheda delle metriche compilata per visualizzare altre opzioni, ad esempio per sostituire o rimuovere una metrica.

La scheda delle metriche mostra i dati delle metriche raccolti nel tempo, sia in forma grafica sia come variazione percentuale numerica.

Scopri di più sull'utilizzo della dashboard.

Visualizzare le tracce e i relativi dati

Per visualizzare le tracce, vai alla dashboard Rendimento nella console Firebase, scorri verso il basso fino alla tabella delle tracce e fai clic sulla sottoscheda appropriata. La tabella mostra alcune metriche principali per ogni traccia e puoi anche ordinare l'elenco in base alla variazione percentuale di una metrica specifica.

Performance Monitoring fornisce una pagina per la risoluzione dei problemi nella console Firebase che mette in evidenza le variazioni delle metriche, consentendo di risolvere rapidamente e ridurre al minimo l'impatto dei problemi di prestazioni sulle tue app e sui tuoi utenti. Puoi utilizzare la pagina di risoluzione dei problemi quando vengono rilevati potenziali problemi di prestazioni, ad esempio nei seguenti scenari:

• Seleziona le metriche pertinenti nella dashboard e noti un delta elevato.
• Nella tabella delle tracce, ordina in modo da visualizzare i delta più grandi in alto e vedrai una variazione percentuale significativa.
• Ricevi un avviso via email che ti informa di un problema di rendimento.

Puoi accedere alla pagina di risoluzione dei problemi nei seguenti modi:

• Nella dashboard delle metriche, fai clic sul pulsante Visualizza i dettagli della metrica.
• In qualsiasi scheda delle metriche, seleziona more_vert => Visualizza dettagli. La pagina di risoluzione dei problemi mostra informazioni sulla metrica selezionata.
• Nella tabella delle tracce, fai clic sul nome di una traccia o su un valore della metrica nella riga associata alla traccia.
• In un avviso via email, fai clic su Esegui accertamenti ora.

Quando fai clic sul nome di una traccia nella tabella delle tracce, puoi visualizzare in dettaglio le metriche di interesse. Fai clic sul pulsante Filtraadd per filtrare i dati per attributo, ad esempio:

• Filtra in base a URL pagina per visualizzare i dati relativi a una pagina specifica del tuo sito
• Filtra in base a Tipo di connessione efficace per scoprire in che modo una connessione 3G influisce sulla tua app
• Filtra per Paese per assicurarti che la posizione del database non influisca su una regione specifica.

Scopri di più su come visualizzare i dati relativi alle tue tracce.

Passaggi successivi

• Scopri di più sull'utilizzo degli attributi per esaminare i dati sul rendimento.

• Scopri di più su come monitorare i problemi di prestazioni nella consoleFirebase.

• Configura avvisi per le modifiche al codice che stanno peggiorando il rendimento della tua app. Ad esempio, puoi configurare un avviso via email per il tuo team se la durata di una traccia di codice personalizzato specifica supera una soglia impostata.