Catch up on everthing we announced at this year's Firebase Summit. Learn more

Adicionar monitoramento personalizado para códigos específicos do app

O Monitoramento de desempenho coleta traces para ajudar você a acompanhar o desempenho do app. Um trace é um relatório de dados de desempenho capturados entre dois momentos no app.

É possível criar seus próprios traces para monitorar dados de desempenho associados a um código específico no app. Com um trace de código personalizado, é possível medir o tempo que o app leva para concluir uma tarefa ou um conjunto de tarefas específicas, como, por exemplo, carregar um conjunto de imagens ou consultar o banco de dados.

A métrica padrão de um trace de código personalizado é a "duração" dele (o tempo entre os pontos inicial e de interrupção do trace), mas também é possível adicionar métricas personalizadas.

No código, defina o início e o fim de um trace de código personalizado usando as APIs fornecidas pelo SDK do Monitoramento de desempenho. Os traces de código personalizados podem ser iniciados a qualquer momento depois de criados e têm concorrência segura.

Como a métrica padrão coletada para esses traces é "duração", às vezes eles são chamados de "traces de duração".

É possível visualizar dados desses traces na subguia Traces personalizados da tabela de traces, que está na parte inferior do painel Desempenho. Saiba mais sobre como usar o console mais adiante nesta página.

Atributos padrão e atributos e métricas personalizados

Em relação aos traces de código personalizados, o Monitoramento de desempenho registra automaticamente os atributos padrão (metadados comuns, como país, navegador, URL da página etc.) para filtrar os dados do trace no Console do Firebase. Também é possível adicionar e monitorar atributos personalizados, como fases de jogos ou propriedades de usuários.

É possível configurar ainda mais um trace de código personalizado para registrar métricas personalizadas de eventos relacionados ao desempenho que ocorrem no escopo do trace. Por exemplo, é possível criar uma métrica personalizada para o número de ausências e ocorrências em cache ou para o número de vezes que a IU não responde durante um período considerável.

Os atributos e as métricas personalizados são exibidos no Console do Firebase ao lado dos atributos e da métrica padrão do trace.

Adicionar traces de código personalizados

Use a API Trace do Monitoramento de desempenho para adicionar traces de código personalizados e, assim, monitorar um código de aplicativo específico.

Observações:

  • Um app pode ter vários traces de código personalizados.
  • Mais de um trace de código personalizado pode ser executado ao mesmo tempo.
  • Os nomes dos traces de código personalizados precisam atender aos seguintes requisitos: não ter espaço em branco no início ou no fim, não ter caractere sublinhado (_) no início e ter, no máximo, 100 caracteres.
  • Os traces de código personalizados aceitam a adição de métricas personalizadas e atributos personalizados.

Para iniciar e interromper um trace de código personalizado, una o código que você quer rastrear com linhas de código semelhantes às seguintes:

Versão 9 para a Web

import { trace } from "firebase/performance";

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

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

t.stop();

Versão 8 para a Web

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

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

trace.stop();

Adicionar traces de código personalizados usando a API User Timing

Além da API Trace do Monitoramento de desempenho, é possível adicionar traces de código personalizados usando a API User Timing (em inglês) nativa do navegador. A duração de um trace medida usando essa API é selecionada automaticamente pelo SDK do Monitoramento de desempenho. O uso da API User Timing é especialmente útil se você preferir carregar o SDK do Monitoramento de desempenho de forma assíncrona. Após a inicialização do SDK, ele registrará as medições que ocorreram antes do carregamento.

Para usar esse recurso, una o código que você quer rastrear com as marcações da User Timing:

Versão 9 para a Web

const performance = window.performance;

performance.mark("measurementStart");

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

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

Versão 8 para a Web

const performance = window.performance;

performance.mark("measurementStart");

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

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

Observe que, no exemplo acima, performance se refere ao objeto window.performance do navegador.

Ao usar a API User Timing, não é possível adicionar métricas e atributos personalizados aos traces de código personalizados. Use a API Trace do Monitoramento de desempenho se quiser adicionar esses elementos personalizados a um trace de código personalizado.

Adicionar métricas personalizadas aos traces de código personalizados

Use a API Trace do Monitoramento de desempenho para adicionar métricas personalizadas aos traces de código personalizados.

Observações:

  • Os nomes das métricas personalizadas precisam atender aos seguintes requisitos: não ter espaço em branco no início ou no fim, não ter caractere sublinhado no início (_) e ter, no máximo, 100 caracteres.
  • Cada trace de código personalizado pode registrar até 32 métricas, incluindo a métrica Duração padrão.

Para incluir uma métrica personalizada, adicione uma linha de código semelhante às seguintes toda vez que o evento ocorrer. Por exemplo, a métrica personalizada a seguir contabiliza eventos relacionados ao desempenho que ocorrem no seu app.

Versão 9 para a Web

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;
}

Versão 8 para a Web

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;
}

Criar atributos personalizados para traces de código personalizados

Use a API Trace do Monitoramento de desempenho para adicionar atributos personalizados aos traces de código personalizados.

Para usar atributos personalizados, adicione códigos ao app que definam o atributo e o associem a um trace de código personalizado específico. É possível definir o atributo personalizado a qualquer momento entre o início e a interrupção do trace.

Observações:

  • Os nomes dos atributos personalizados precisam atender aos seguintes requisitos: não ter espaço em branco no início ou no fim, não ter caractere sublinhado no início (_) e ter, no máximo, 32 caracteres.

  • Cada trace de código personalizado pode registrar até cinco atributos personalizados.

  • Não use atributos personalizados que contenham informações que identifiquem um indivíduo para o Google.

    Saiba mais sobre essa diretriz

Versão 9 para a Web

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();

Versão 8 para a Web

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();

Acompanhar, visualizar e filtrar dados de desempenho

Para ver os dados de desempenho em tempo real, verifique se seu app usa uma versão do SDK do Monitoramento de desempenho compatível com o processamento de dados em tempo real. Saiba mais.

Acompanhar métricas específicas no painel

Para saber qual é a tendência das suas principais métricas, adicione-as ao seu quadro de métricas na parte superior do painel Desempenho. É possível identificar rapidamente as regressões vendo alterações semanais ou verificar se as mudanças recentes no código estão melhorando o desempenho.

Uma imagem do painel de métricas no painel do Monitoramento de desempenho do Firebase

Para adicionar uma métrica ao quadro, acesse o painel Desempenho no Console do Firebase e clique na guia Painel. Clique em um card de métricas vazio e selecione uma métrica atual para adicionar ao quadro. Clique em em um card de métricas preenchido para ver mais opções, como substituir ou remover uma métrica.

O quadro de métricas mostra os dados de métricas coletados ao longo do tempo, em forma de gráfico e como uma alteração percentual numérica.

Saiba mais sobre como usar o painel.

Visualizar traces e os respectivos dados

Para visualizar os traces, acesse o painel Desempenho no Console do Firebase, role para baixo até a tabela de traces e clique na subguia adequada. A tabela exibe algumas das principais métricas para cada trace e é possível até classificar a lista pela alteração percentual de uma métrica específica.

Se você clicar no nome de um trace na tabela de traces, poderá clicar em várias telas para explorar o trace e detalhar as métricas de interesse. Na maioria das páginas, é possível usar o botão Filtrar (no canto superior esquerdo da tela) para filtrar os dados por atributo, por exemplo:

Uma imagem dos dados do Monitoramento de desempenho do Firebase sendo filtrados por atributos
  • Filtre por URL da página para visualizar dados de uma página específica do seu site.
  • Filtre por Tipo de conexão vigente para saber como uma conexão 3G afeta o app.
  • Filtre por País para garantir que o local do banco de dados não está afetando uma região específica.

Saiba mais sobre como visualizar dados dos traces.

Próximas etapas