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 tracce personalizzate per monitorare i dati sulle prestazioni associati a un codice specifico nella tua app. Con una tracce di codice personalizzata, puoi misurare il tempo impiegato dalla 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 personalizzato 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 mancate hit 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 predefiniti e alla metrica predefinita per la traccia.

Aggiungere tracce di codice personalizzate

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

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 spazio iniziale o finale, nessun carattere iniziale sottotraccia (_) 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

Aggiungi 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 precedente si riferisce all'oggetto window.performance del browser.

Quando utilizzi l'API User Timing, le metriche e gli attributi personalizzati non possono essere aggiunti 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: nessuno spazio vuoto iniziale o finale, nessun carattere di sottolineatura iniziale (_) e la 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 vuoto iniziale o finale, nessun carattere di sottolineatura 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 statistici raccolti nel tempo, sia sotto 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 scheda secondaria appropriata. La tabella mostra alcune delle metriche principali per ogni traccia e puoi anche ordinare l'elenco in base alla variazione percentuale per una metrica specifica.

Performance Monitoring fornisce una pagina di risoluzione dei problemi nella console Firebase che evidenzia le modifiche delle metriche, semplificando e riducendo al minimo l'impatto dei problemi di prestazioni su app e 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 vedi 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 per la risoluzione dei problemi mostra informazioni sulla metrica selezionata.
• Nella tabella delle tracce, fai clic sul nome di una traccia o su qualsiasi valore della metrica nella riga associata alla traccia.
• In un avviso via email, fai clic su Indaga ora.

Quando fai clic sul nome di una traccia nella tabella delle tracce, puoi visualizzare in dettaglio le metriche che ti interessano. Fai clic sul pulsante Filtraadd per filtrare i dati in base all'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 console Firebase.

• 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.