Monitoramento de desempenho do Firebase para Web

1. Visão geral

Neste codelab, você vai aprender a usar o Monitoramento de desempenho do Firebase para medir o desempenho de um app da Web com chat. Acesse https://fireperf-friendlychat.web.app/ para conferir uma demonstração ao vivo.

Este codelab é uma continuação do codelab do Firebase para Web, em que você aprende a criar um app de chat com o SDK da Web do Firebase. Se você quiser aprender a usar a plataforma do Firebase na Web criando um app de chat, siga primeiro o codelab do Firebase para Web. Se você já sabe como usar a plataforma e a CLI do Firebase e quer aprender sobre o Monitoramento de desempenho do Firebase, está no lugar certo.

O que você aprenderá

• Como adicionar o Monitoramento de desempenho do Firebase ao seu app da Web para receber métricas prontas para uso (carregamento de página e solicitações de rede).
• Como medir um trecho específico de código com rastros personalizados.
• Como registrar outras métricas personalizadas vinculadas a um trace personalizado.
• Como segmentar ainda mais seus dados de performance com atributos personalizados.
• Como usar o painel de monitoramento de desempenho para entender o desempenho do seu app da Web.

Pré-requisitos

• O ambiente de desenvolvimento integrado ou editor de texto de sua preferência, como o WebStorm, o Atom, o Sublime ou o VS Code
• Um terminal/console
• Um navegador de sua escolha, como o Chrome
• O exemplo de código do codelab (confira a próxima seção deste codelab para saber como acessar o código).

2. Acessar o exemplo de código

Clone o repositório do GitHub do codelab na linha de comando:

git clone https://github.com/firebase/codelab-friendlychat-web

Se o git não estiver instalado, faça o download do repositório como um arquivo ZIP.

O repositório friendlychat-web contém projetos de exemplo para várias plataformas.

Este codelab usa apenas estes dois repositórios:

• 📁 performance-monitoring-start: o código inicial que você vai usar como base durante este codelab.
• 📁 performance-monitoring: o código completo do app de exemplo finalizado.

Observação: se você quiser executar o app finalizado, ainda precisará criar um projeto do Firebase no console do Firebase.

Importar o app inicial

Usando seu ambiente de desenvolvimento integrado, abra ou importe o diretório 📁 performance-monitoring-start do repositório clonado. Esse diretório performance-monitoring-start 📁 contém o código inicial do codelab, que é um app de chat da Web.

3. Criar e configurar um projeto do Firebase

Criar um projeto do Firebase

1. No Console do Firebase, clique em Adicionar projeto.
2. Nomeie seu projeto do Firebase como FriendlyChat.

Lembre-se do ID do seu projeto do Firebase.

3. Clique em Criar projeto.

Importante: seu projeto do Firebase vai ser chamado de FriendlyChat,, mas o Firebase vai atribuir automaticamente um ID de projeto exclusivo no formato friendlychat-1234. Esse identificador exclusivo é como seu projeto é realmente identificado (inclusive na CLI), enquanto FriendlyChat é simplesmente um nome de exibição.

Fazer upgrade do plano de preços do Firebase

Para usar o Cloud Storage para Firebase, seu projeto do Firebase precisa estar no plano de preços pague conforme o uso (Blaze), ou seja, vinculado a uma conta do Cloud Billing.

• Uma conta do Cloud Billing exige uma forma de pagamento, como cartão de crédito.
• Se você ainda não conhece o Firebase e o Google Cloud, confira se você se qualifica para receber um crédito de US$300 e uma conta de teste sem custo financeiro do Cloud Billing.
• Se você estiver fazendo este codelab como parte de um evento, pergunte ao organizador se há créditos do Cloud disponíveis.

Para fazer upgrade do seu projeto para o plano Blaze, siga estas etapas:

1. No console do Firebase, selecione Fazer upgrade do seu plano.
2. Selecione o plano Blaze. Siga as instruções na tela para vincular uma conta do Cloud Billing ao seu projeto.
   Se você precisar criar uma conta do Cloud Billing como parte do upgrade, talvez seja necessário voltar ao fluxo de upgrade no Console do Firebase para concluir o upgrade.

Observação: você pode fazer downgrade do seu projeto para o plano de preços sem custo financeiro (Spark) depois de concluir este codelab.

Adicionar um app da Web do Firebase ao projeto

1. Clique no ícone da Web para criar um app da Web do Firebase.
2. Registre o app com o apelido Friendly Chat e marque a caixa ao lado de Também configurar o Firebase Hosting para este app.
3. Clique em Registrar app.
4. Clique nas etapas restantes. Você não precisa seguir as instruções exibidas na tela agora, porque elas serão abordadas em etapas posteriores deste codelab.

Ativar o Login do Google para a autenticação do Firebase

Para que os usuários façam login no app de chat com as Contas do Google deles, usaremos o método Google.

É necessário ativar o Login do Google:

1. No Console do Firebase, localize a seção Desenvolver no painel esquerdo.
2. Clique em Autenticação e na guia Método de login ( acessar o console).
3. Ative o provedor de login do Google e clique em Salvar.

Configurar o Cloud Firestore

O app da Web usa o Cloud Firestore para salvar e receber novas mensagens de chat.

Veja como configurar o Cloud Firestore no seu projeto do Firebase:

1. No painel esquerdo do Console do Firebase, expanda Build e selecione Banco de dados do Firestore.
2. Clique em Criar banco de dados.
3. Deixe o ID do banco de dados definido como (default).
4. Selecione um local para o banco de dados e clique em Próxima.
   No caso de apps reais, escolha um local próximo aos usuários.
5. Clique em Iniciar no modo de teste. Leia a exoneração de responsabilidade sobre as regras de segurança.
   Ainda neste codelab, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao seu banco de dados.
6. Clique em Criar.

Configurar o Cloud Storage para Firebase

O app da Web usa o Cloud Storage para Firebase para armazenar, fazer upload e compartilhar fotos.

Veja como configurar o Cloud Storage para Firebase no seu projeto do Firebase:

1. No painel esquerdo do Console do Firebase, expanda Build e selecione Storage.
2. Clique em Começar.
3. Selecione um local para o bucket do Storage padrão.
   Os buckets em US-WEST1, US-CENTRAL1 e US-EAST1 podem aproveitar o nível "Sempre gratuito" do Google Cloud Storage. Os buckets em todos os outros locais seguem os preços e o uso do Google Cloud Storage.
4. Clique em Iniciar no modo de teste. Leia a exoneração de responsabilidade sobre as regras de segurança.
   Mais adiante neste codelab, você vai adicionar regras de segurança para proteger seus dados. Não distribua ou exponha um aplicativo publicamente sem adicionar regras de segurança ao bucket do Storage.
5. Clique em Criar.

4. Instalar a interface de linha de comando do Firebase

A interface de linha de comando (CLI) do Firebase permite que você use o Firebase Hosting para disponibilizar seu app da Web localmente e implantá-lo no seu projeto do Firebase.

1. Instale a CLI seguindo estas instruções na documentação do Firebase.
2. Verifique se a CLI foi instalada corretamente executando o seguinte comando em um terminal:

firebase --version

Verifique se sua versão da CLI do Firebase é a 8.0.0 ou mais recente.

3. Autorize a CLI do Firebase executando o seguinte comando:

firebase login

Configuramos o modelo de app da Web para receber a configuração do seu app para o Firebase Hosting do diretório local do app (o repositório que você clonou anteriormente no codelab). No entanto, para receber a configuração, precisamos associar o app ao projeto do Firebase.

4. Confira se a linha de comando está acessando o diretório performance-monitoring-start local do seu app.
5. Para associar o app ao projeto do Firebase, execute o seguinte comando:

firebase use --add

6. Quando solicitado, selecione o ID do projeto e atribua um alias ao projeto do Firebase.

O alias é útil se você tiver vários ambientes (produção, preparo etc.). No entanto, neste codelab, basta usar o alias default.

7. Siga as instruções restantes na linha de comando.

5. Integrar com o Monitoramento de desempenho do Firebase

Há várias maneiras de fazer a integração com o SDK do Monitoramento de desempenho do Firebase para Web. Para mais detalhes, consulte a documentação. Neste codelab, vamos ativar o monitoramento de desempenho em URLs do Hosting.

Adicionar o Monitoramento de desempenho e inicializar o Firebase

1. Abra o arquivo src/index.js e adicione a linha a seguir abaixo de TODO para incluir o SDK do Monitoramento de desempenho do Firebase.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Também precisamos inicializar o SDK do Firebase com um objeto de configuração que contém informações sobre o projeto do Firebase e o app da Web que queremos usar. Como estamos usando o Firebase Hosting, você pode importar um script especial que fará essa configuração para você. Para este codelab, já adicionamos a linha abaixo no final do arquivo public/index.html, mas verifique se ela está lá.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. No arquivo src/index.js, adicione a linha a seguir abaixo de TODO para inicializar o monitoramento de desempenho.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

O Monitoramento de desempenho vai coletar automaticamente métricas de carregamento de página e solicitação de rede para você quando os usuários usarem seu site. Consulte a documentação para saber mais sobre os rastros automáticos de carregamento de página.

Adicionar a biblioteca de polyfill de primeiro atraso de entrada

O First Input Delay é útil, já que a resposta do navegador a uma interação do usuário fornece aos usuários as primeiras impressões sobre a capacidade de resposta do app.

O atraso na primeira interação começa quando o usuário interage pela primeira vez com um elemento na página, como clicar em um botão ou hiperlink. Ela é interrompida imediatamente depois que o navegador é capaz de responder à entrada, o que significa que o navegador não está ocupado carregando ou analisando seu conteúdo.

Essa biblioteca de polyfill é opcional para a integração do Monitoramento de desempenho.

Abra o arquivo public/index.html e remova a marca de comentário da linha a seguir.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Neste ponto, você concluiu a integração com o Monitoramento de desempenho do Firebase no seu código.

Também há outras maneiras de fazer a integração com o SDK do Monitoramento de desempenho do Firebase para Web. Para mais detalhes, consulte Primeiros passos com o Monitoramento de desempenho para Web.

Nas etapas a seguir, você aprenderá a adicionar traces personalizados usando o Monitoramento de desempenho do Firebase. Se você quiser coletar apenas os rastros automáticos, acesse a seção "Implantar e começar a enviar imagens".

6. Adicionar um rastro personalizado ao app

O Monitoramento de desempenho permite criar rastros personalizados. Um trace personalizado é um relatório sobre a duração de um bloco de execução no app. Você define o início e o fim de um trace personalizado usando as APIs fornecidas pelo SDK.

1. No arquivo src/index.js, receba um objeto de performance e crie um rastro personalizado para fazer upload de uma mensagem de imagem.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Para gravar um trace personalizado, você precisa especificar o ponto de início e o ponto de parada. Pense nos rastros como um timer.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Você definiu um trace personalizado. Após a implantação do código, a duração do rastro personalizado será registrada se um usuário enviar uma mensagem de imagem. Isso vai dar uma ideia de quanto tempo os usuários reais levam para enviar imagens no seu app de chat.

7. Adicione uma métrica personalizada ao seu app.

É possível configurar ainda mais um rastro personalizado para registrar métricas personalizadas de eventos relacionados ao desempenho que ocorrem no escopo. Por exemplo, você pode usar uma métrica para investigar se o tempo de upload é afetado pelo tamanho de uma imagem no rastro personalizado que definimos na última etapa.

1. Localize o rastro personalizado da etapa anterior (definido no arquivo src/index.js).
2. Adicione a linha a seguir abaixo de TODO para registrar o tamanho da imagem enviada.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Essa métrica permite que o monitoramento de desempenho registre a duração do trace personalizado e o tamanho da imagem enviada.

8. Adicionar um atributo personalizado ao app

Com base nas etapas anteriores, também é possível coletar atributos personalizados nos seus traces personalizados. Os atributos personalizados ajudam a segmentar dados por categorias específicas do app. Por exemplo, é possível coletar o tipo MIME do arquivo de imagem para investigar como ele pode afetar o desempenho.

1. Use o rastro personalizado definido no arquivo src/index.js.
2. Adicione a linha a seguir abaixo de TODO para registrar o tipo MIME da imagem enviada.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Esse atributo permite que o monitoramento de desempenho categorize a duração do trace personalizado com base no tipo de imagem enviado.

9. [Extend] Adicionar um trace personalizado com a API User Timing

O SDK do Monitoramento de desempenho do Firebase foi projetado para ser carregado de forma assíncrona e não afetar negativamente o desempenho dos apps da Web durante o carregamento da página. Antes do carregamento do SDK, a API Monitoramento de desempenho do Firebase não fica disponível. Nesse cenário, ainda é possível adicionar traces personalizados usando a API User Timing. O SDK de desempenho do Firebase selecionará as durações de measure() e as registrará como traces personalizados.

Vamos medir a duração do carregamento de scripts de estilo de app usando a API User Timing.

1. No arquivo public/index.html, adicione a linha abaixo para marcar o início do carregamento dos scripts de estilo do app.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Adicione as linhas a seguir para marcar o fim do carregamento dos scripts de estilo do app e medir a duração entre o início e o fim.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

A entrada criada aqui será coletada automaticamente pelo Monitoramento de desempenho do Firebase. Você vai encontrar um trace personalizado loadStyling no Console do Firebase Performance mais tarde.

10. Implante e comece a enviar imagens

Implantar no Firebase Hosting

Depois de adicionar o Monitoramento de desempenho do Firebase ao código, siga estas etapas para implantá-lo no Firebase Hosting:

1. Verifique se a linha de comando está acessando o diretório local performance-monitoring-start do app.
2. Implante os arquivos no projeto do Firebase executando o seguinte comando:

firebase deploy

3. O console vai mostrar o seguinte:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. Acesse seu app da Web que agora está totalmente hospedado usando o Firebase Hosting em dois dos seus subdomínios do Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app.

Verifique se o monitoramento de desempenho está ativado

Abra o Console do Firebase e acesse a guia Performance. Se você receber uma mensagem de boas-vindas com a mensagem "SDK detectado", significa que a integração com o Monitoramento de desempenho do Firebase foi concluída.

Enviar mensagem com imagem

Gere alguns dados de performance enviando imagens no seu app de chat.

1. Depois de fazer login no app de chat, clique no botão de upload de imagem .
2. Selecione um arquivo de imagem usando o seletor de arquivos.
3. Envie várias imagens (algumas amostras são armazenadas em public/images/) para que você possa testar a distribuição de métricas e atributos personalizados.

As novas mensagens serão exibidas na interface do app junto com as imagens selecionadas.

11. Monitorar o painel

Depois de implantar seu app da Web e enviar mensagens de imagem como um usuário, é possível analisar os dados de desempenho no painel de monitoramento de desempenho (no console do Firebase).

Observação: os dados de performance geralmente aparecem em até 12 horas. Verifique novamente mais tarde se não encontrar nenhum resultado no Console do Firebase.

Acessar seu painel

1. No Console do Firebase, selecione o projeto que tem seu app Friendly Chat.
2. No painel à esquerda, localize a seção Qualidade e clique em Performance.

Analisar dados no dispositivo

Depois que o monitoramento de desempenho processar os dados do app, você verá guias na parte superior do painel. Verifique novamente mais tarde se nenhum dado ou guia ainda estiver aparecendo.

1. Clique na guia No dispositivo.

• A tabela A página é carregada mostra as diversas métricas que o Monitoramento de desempenho coleta automaticamente enquanto sua página é carregada.
• A tabela Duração mostra todos os rastros personalizados que você definiu no código do app.

2. Clique em saveImageMessage na tabela Durations para analisar métricas específicas do trace.

3. Clique em Agrupar para analisar a distribuição dos tamanhos de imagem. Você pode conferir a métrica que adicionou para medir o tamanho da imagem desse trace personalizado.

4. Clique em Ao longo do tempo, que fica ao lado de Agrupar na etapa anterior. Também é possível ver a Duração do trace personalizado. Clique em Ver mais para analisar os dados coletados com mais detalhes.

5. Na página que será aberta, você pode segmentar os dados de duração por tipo MIME de imagem clicando em imageType. Esses dados específicos foram registrados devido ao atributo imageType que você adicionou ao seu rastro personalizado.

Analisar os dados de rede

Uma solicitação de rede HTTP/S é um relatório que captura o tempo de resposta e o tamanho do payload das chamadas de rede.

1. Volte para a tela principal do painel de monitoramento de desempenho.
2. Clique na guia Rede para conferir uma lista de entradas de solicitação de rede do seu app da Web.
3. Navegue por eles para identificar solicitações lentas e começar a trabalhar em uma correção para melhorar a performance do app.

12. Parabéns!

Você ativou o SDK do Firebase para monitoramento de desempenho e coletou traces automáticos e personalizados para avaliar o desempenho real do seu app de chat.

O que vimos:

• Adicionar o SDK do Monitoramento de desempenho do Firebase ao seu app da Web.
• Adicionar traces personalizados ao código.
• Registro de métricas personalizadas vinculadas ao rastro personalizado
• Segmentação de dados de desempenho usando atributos personalizados.
• Entender como usar o painel de monitoramento de desempenho para ter insights sobre o desempenho do seu app.

Saiba mais:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/ (link em inglês)