Aggiungere il monitoraggio personalizzato per un codice dell'app specifico

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

Puoi creare le tue tracce per monitorare i dati sul rendimento associati a un codice specifico nella tua app. Con una traccia del 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 del codice personalizzato è la "durata" (il tempo tra i punti di inizio e di fine 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 thread-safe.

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

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

Attributi predefiniti, attributi personalizzati e metriche personalizzate

Puoi configurare ulteriormente una traccia del codice personalizzato per registrare metriche personalizzate per gli eventi relativi alle prestazioni che si verificano nell'ambito della traccia. Ad esempio, puoi creare una metrica personalizzata per il numero di successi e fallimenti della cache o per il numero di volte in cui la UI non risponde per un periodo di tempo evidente.

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

Aggiungi tracce di codice personalizzate

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

Tieni presente quanto segue:

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

Per avviare e arrestare una traccia del codice personalizzato, racchiudi il codice che vuoi tracciare 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 Tempi utente

Oltre all'API Trace Performance Monitoring, puoi aggiungere tracce di codice personalizzate 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 avvenute prima del caricamento.

Per utilizzare questa funzionalità, racchiudi il codice che vuoi monitorare con i contrassegni dei tempi 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, non puoi aggiungere metriche e attributi personalizzati alle tracce di codice personalizzato. Utilizza l'API Trace Performance Monitoring se vuoi aggiungere questi elementi personalizzati a una traccia del codice personalizzata.

Aggiungi metriche personalizzate alle tracce di codice personalizzato

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

Tieni presente quanto segue:

• I nomi delle metriche personalizzate devono soddisfare i seguenti requisiti: nessuno spazio vuoto all'inizio o alla fine, nessun carattere di trattino basso (_) all'inizio e lunghezza massima di 100 caratteri.
• Ogni traccia di codice personalizzato 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 relativi alle prestazioni 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

Crea attributi personalizzati per le tracce di codice personalizzato

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

Per utilizzare gli attributi personalizzati, aggiungi alla tua app un codice che definisca l'attributo e lo associ a una specifica traccia di codice personalizzato. Puoi impostare l'attributo personalizzato in qualsiasi momento tra l'inizio e l'interruzione 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 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 da parte di Google.

  Scopri di più su questa linea 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

Monitora, visualizza e filtra i dati sul rendimento

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

Monitora metriche specifiche nella tua dashboard

Per scoprire l'andamento delle metriche chiave, aggiungile alla scheda delle metriche nella parte superiore della dashboard Rendimento. Puoi identificare rapidamente le regressioni visualizzando le modifiche di settimana in settimana o verificare che le modifiche recenti al codice stiano migliorando le prestazioni.

Per aggiungere una metrica alla dashboard delle metriche:

1. Vai alla dashboard Prestazioni nella console Firebase.
2. Fai clic su una scheda delle metriche vuota, poi seleziona una metrica esistente da aggiungere alla dashboard.
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 bacheca delle metriche mostra i dati delle metriche raccolti nel tempo, sia in forma grafica sia come variazione percentuale numerica.

Scopri di più su come utilizzare la dashboard.

Visualizza le tracce e i relativi dati

Per visualizzare le tracce, vai alla dashboard Prestazioni 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 persino 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 evidenzia le modifiche alle metriche, semplificando la risoluzione rapida e riducendo al minimo l'impatto dei problemi di prestazioni sulle tue app e sui tuoi utenti. Puoi utilizzare la pagina di risoluzione dei problemi quando vieni a conoscenza di potenziali problemi di prestazioni, ad esempio nei seguenti scenari:

• Selezioni le metriche pertinenti nella dashboard e noti un delta elevato.
• Nella tabella delle tracce, ordina i dati 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 prestazioni.

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 di 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 di interesse. Fai clic sul pulsante Filtroadd per filtrare i dati in base all'attributo, ad esempio:

• Filtra per URL pagina per visualizzare i dati di una pagina specifica del tuo sito.
• Filtra per Tipo di connessione effettivo per scoprire l'impatto di una connessione 3G sulla tua app
• Filtra per Paese per assicurarti che la località del database non influisca su una regione specifica.

Scopri di più sulla visualizzazione dei dati per le 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 peggiorano le prestazioni della tua app. Ad esempio, puoi configurare un avviso via email per il tuo team se la durata di una specifica traccia di codice personalizzato supera una soglia impostata.