Monitoramento de desempenho do Firebase para web

1. Visão Geral

Neste codelab, você aprenderá a usar o Firebase Performance Monitoring para medir o desempenho de um app de chat da Web. Visite https://fireperf-friendlychat.web.app/ para ver uma demonstração ao vivo.

Este codelab é uma continuação do codelab da Web do Firebase , no qual você aprende a criar um aplicativo de bate-papo usando o SDK da Web do Firebase. Se você quiser aprender como usar a plataforma Firebase na Web criando um aplicativo de bate-papo, siga primeiro o codelab da Web do Firebase . Se você já sabe como usar a plataforma Firebase e CLI e deseja aprender sobre o Firebase Performance Monitoring, você está no lugar certo.

O que você aprenderá

• Como adicionar o Firebase Performance Monitoring ao seu aplicativo da web para obter métricas prontas para uso (carregamento de página e solicitações de rede).
• Como medir um trecho específico de código com rastreamentos personalizados.
• Como registrar métricas personalizadas adicionais vinculadas a um rastreamento personalizado.
• Como segmentar ainda mais seus dados de desempenho com atributos personalizados.
• Como usar o painel de monitoramento de desempenho para entender o desempenho do seu aplicativo web.

O que você precisará

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

2. Obtenha o código de exemplo

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

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

Alternativamente, se você não tiver o git instalado, poderá baixar o repositório como um arquivo zip .

O repositório friendlychat-web contém exemplos de projetos para múltiplas plataformas.

Este codelab usa apenas estes dois repositórios:

• 📁 performance-monitoring-start : o código inicial que você usará durante este codelab.
• 📁 monitoramento de desempenho : o código completo do aplicativo de amostra finalizado.

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

Importe o aplicativo inicial

Usando seu IDE, abra ou importe o diretório 📁 performance-monitoring-start do repositório clonado. Este diretório 📁 performance-monitoring-start contém o código inicial do codelab, que é um aplicativo de bate-papo da Web.

3. Crie e configure um projeto Firebase

Crie um projeto do Firebase

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

Lembre-se do ID do seu projeto do Firebase.

3. Clique em Criar projeto .

Importante : seu projeto do Firebase se chamará FriendlyChat, mas o Firebase atribuirá a ele automaticamente um ID de projeto exclusivo no formato friendlychat-1234 . Este identificador exclusivo é como seu projeto é realmente identificado (inclusive na CLI), enquanto FriendlyChat é simplesmente um nome de exibição.

Adicione um aplicativo da Web do Firebase ao projeto

1. Clique no ícone da web para criar um novo aplicativo da web do Firebase.
2. Registre o aplicativo com o apelido Friendly Chat e marque a caixa ao lado de Configurar também o Firebase Hosting para este aplicativo .
3. Clique em Registrar aplicativo .
4. Clique nas etapas restantes. Você não precisa seguir as instruções na tela agora; eles serão abordados nas etapas posteriores deste codelab.

Ative o login do Google para autenticação do Firebase

Para permitir que os usuários façam login no aplicativo de bate-papo com suas contas do Google, usaremos o método de login do Google .

Você precisará ativar o login do Google :

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

Ativar o Cloud Firestore

O aplicativo da web usa o Cloud Firestore para salvar mensagens de chat e receber novas mensagens de chat.

Você precisará ativar o Cloud Firestore:

1. Na seção Desenvolvimento do console do Firebase, clique em Banco de dados .
2. Clique em Criar banco de dados no painel Cloud Firestore.
3. Selecione a opção Iniciar em modo de teste e clique em Ativar após ler o aviso sobre as regras de segurança.

O código inicial deste codelab inclui regras mais seguras. Iremos implantá-los posteriormente no codelab.

Habilitar armazenamento em nuvem

O aplicativo da web usa Cloud Storage for Firebase para armazenar, fazer upload e compartilhar imagens.

Você precisará ativar o Cloud Storage:

1. Na seção Desenvolvimento do console do Firebase, clique em Armazenamento .
2. Clique em Começar .
3. Leia a isenção de responsabilidade sobre as regras de segurança do seu projeto do Firebase e clique em Entendi .

O código inicial inclui uma regra básica de segurança, que implantaremos posteriormente no codelab.

4. Instale 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 servir seu aplicativo da web localmente, bem como para implantar seu aplicativo da web em 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

Certifique-se de que sua versão do Firebase CLI seja v8.0.0 ou posterior.

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

firebase login

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

4. Certifique-se de que sua linha de comando esteja acessando o diretório local performance-monitoring-start do seu aplicativo.
5. Associe seu aplicativo ao projeto do Firebase executando o seguinte comando:

firebase use --add

6. Quando solicitado, selecione o ID do projeto e forneça um alias ao projeto do Firebase.

Um alias é útil se você tiver vários ambientes (produção, teste, etc.). No entanto, para este codelab, vamos usar apenas o alias default .

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

5. Integre-se ao monitoramento de desempenho do Firebase

Existem várias maneiras de integração com o SDK do Firebase Performance Monitoring para Web (consulte a documentação para obter detalhes). Neste codelab, ativaremos o monitoramento de desempenho de URLs de hospedagem .

Adicione monitoramento de desempenho e inicialize o Firebase

1. Abra o arquivo src/index.js e adicione a seguinte linha abaixo de TODO para incluir o SDK do Firebase Performance Monitoring.

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 aplicativo 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 a seguir na parte inferior 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 seguinte linha abaixo de TODO para inicializar o monitoramento de desempenho.

index.js

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

O Monitoramento de desempenho agora 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 rastreamentos automáticos de carregamento de página.

Adicione a primeira biblioteca polyfill de atraso de entrada

O atraso na primeira entrada é útil porque a resposta do navegador a uma interação do usuário dá aos usuários as primeiras impressões sobre a capacidade de resposta do seu aplicativo.

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

Esta biblioteca polyfill é opcional para integração de monitoramento de desempenho.

Abra o arquivo public/index.html e remova o 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 Firebase Performance Monitoring em seu código.

Existem também outras maneiras de integração com o SDK do Firebase Performance Monitoring para web. Para obter detalhes, consulte Introdução ao Monitoramento de desempenho para web .

Nas etapas a seguir, você aprenderá como adicionar traces personalizados usando o Firebase Performance Monitoring. Se você deseja apenas coletar os rastreamentos automáticos, vá para a seção "Implantar e começar a enviar imagens".

6. Adicione um rastreamento personalizado ao seu aplicativo

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

1. No arquivo src/index.js , obtenha um objeto de desempenho e crie um rastreamento 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 registrar um rastreamento personalizado, você precisa especificar o ponto inicial e o ponto final do rastreamento. Você pode pensar em um rastreamento como um cronômetro.

index.js

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

 ...

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

Você definiu com sucesso um rastreamento personalizado! Depois de implantar seu código, a duração do rastreamento personalizado será registrada se um usuário enviar uma mensagem de imagem. Isso lhe dará uma ideia de quanto tempo leva para os usuários do mundo real enviarem imagens em seu aplicativo de bate-papo.

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

Você pode configurar ainda mais um rastreamento customizado para registrar métricas customizadas para eventos relacionados ao desempenho que ocorrem dentro de seu escopo. Por exemplo, você pode usar uma métrica para investigar se o tempo de upload é afetado pelo tamanho de uma imagem para o rastreamento personalizado que definimos na última etapa.

1. Localize o rastreamento personalizado da etapa anterior (definido em seu arquivo src/index.js ).
2. Adicione a seguinte linha abaixo de TODO para registrar o tamanho da imagem carregada.

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 rastreamento personalizado, bem como o tamanho da imagem carregada.

8. Adicione um atributo personalizado ao seu aplicativo

Com base nas etapas anteriores, você também pode coletar atributos personalizados em seus rastreamentos personalizados . Atributos personalizados podem ajudar na segmentação de dados por categorias específicas do seu aplicativo. Por exemplo, você pode coletar o tipo MIME do arquivo de imagem para investigar como o tipo MIME pode afetar o desempenho.

1. Use o rastreamento personalizado definido em seu arquivo src/index.js .
2. Adicione a seguinte linha abaixo de TODO para registrar o tipo MIME da imagem carregada.

index.js

 ...

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

 ...

Este atributo permite que o monitoramento de desempenho categoriza a duração do rastreamento personalizado com base no tipo de imagem carregada.

9. [Estender] Adicione um rastreamento personalizado com API User Timing

O SDK do Firebase Performance Monitoring foi projetado para poder ser carregado de forma assíncrona e não impactar negativamente o desempenho de aplicativos da Web durante o carregamento da página. Antes do SDK ser carregado, a API Firebase Performance Monitoring não está disponível. Nesse cenário, você ainda pode adicionar rastreamentos personalizados usando a API User Timing . O SDK de desempenho do Firebase coletará as durações de Measure() e as registrará como rastreamentos personalizados.

Mediremos a duração do carregamento de scripts de estilo de aplicativo usando a API User Timing.

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

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 aplicativo e para 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 que você criou aqui será coletada automaticamente pelo Firebase Performance Monitoring. Você poderá encontrar um rastreamento personalizado chamado loadStyling no console do Firebase Performance posteriormente.

10. Implante e comece a enviar imagens

Implantar no Firebase Hosting

Depois de adicionar o Firebase Performance Monitoring ao seu código, siga estas etapas para implantar seu código no Firebase Hosting:

1. Certifique-se de que sua linha de comando esteja acessando o diretório local performance-monitoring-start do seu aplicativo.
2. Implante seus arquivos em seu projeto do Firebase executando o seguinte comando:

firebase deploy

3. O console deve exibir 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.appspot.com
✔  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. Visite seu aplicativo da Web que agora está totalmente hospedado usando o Firebase Hosting em dois de seus próprios 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 vá para a guia Desempenho . Se você vir uma mensagem de boas-vindas mostrando "SDK detectado", então você integrou com sucesso o Firebase Performance Monitoring!

Enviar mensagem de imagem

Gere alguns dados de desempenho enviando imagens em seu aplicativo de chat.

1. Depois de fazer login no seu aplicativo de bate-papo, clique no botão de upload de imagem .
2. Selecione um arquivo de imagem usando o seletor de arquivos.
3. Tente enviar 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.

Novas mensagens devem ser exibidas na interface do aplicativo junto com as imagens selecionadas.

11. Monitore o painel

Depois de implantar seu aplicativo Web e enviar mensagens de imagem como usuário, você poderá revisar os dados de desempenho no painel de monitoramento de desempenho (no console do Firebase).

Nota : Os dados de desempenho geralmente são exibidos em 12 horas. Verifique novamente mais tarde se não encontrar nenhum resultado no console do Firebase.

Acesse seu painel

1. No console do Firebase , selecione o projeto que contém seu aplicativo Friendly Chat .
2. No painel esquerdo, localize a seção Qualidade e clique em Desempenho .

Revise os dados no dispositivo

Depois que o monitoramento de desempenho processar os dados do seu aplicativo, você verá guias na parte superior do painel. Certifique-se de verificar novamente mais tarde se ainda não encontrar nenhum dado ou guia.

1. Clique na guia No dispositivo .

• A tabela Carregamentos de página mostra as diversas métricas de desempenho que o monitoramento de desempenho coleta automaticamente enquanto sua página está sendo carregada.
• A tabela Durações mostra todos os rastreamentos personalizados definidos no código do seu aplicativo.

2. Clique em saveImageMessage na tabela Durações para revisar métricas específicas do rastreamento.

3. Clique em Agregar para revisar a distribuição dos tamanhos de imagem. Você pode ver a métrica adicionada para medir o tamanho da imagem desse rastreamento personalizado.

4. Clique ao longo do tempo ao lado de Agregar na etapa anterior. Você também pode visualizar a duração do rastreamento personalizado. Clique em Ver mais para revisar os dados coletados com mais detalhes.

5. Na página que se abre, 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 adicionado ao rastreamento personalizado.

Revise os dados da rede

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

1. Volte para a tela principal do painel de monitoramento de desempenho.
2. Clique na guia Rede para ver uma lista de entradas de solicitação de rede para seu aplicativo web.
3. Navegue por eles para identificar solicitações lentas e comece a trabalhar em uma correção para melhorar o desempenho do seu aplicativo!

12. Parabéns!

Você ativou o SDK do Firebase para monitoramento de desempenho e coletou rastreamentos automáticos e personalizados para medir o desempenho real do seu aplicativo de bate-papo.

O que cobrimos:

• Adicionando o SDK do Firebase Performance Monitoring ao seu aplicativo da Web.
• Adicionando rastreamentos personalizados ao seu código.
• Gravação de métricas personalizadas vinculadas ao rastreamento personalizado.
• Segmentação de dados de desempenho usando atributos customizados.
• Compreender como usar o painel de monitoramento de desempenho para obter insights sobre o desempenho do seu aplicativo.

Saber mais:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/