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 aplicativo da web de bate-papo. Visite https://fireperf-friendlychat.web.app/ para ver uma demonstração ao vivo.

3b1284f5144b54f6.png

O que você aprenderá

  • Como adicionar o monitoramento de desempenho do Firebase ao seu aplicativo da web para obter métricas prontas para uso (carregamento de página e solicitações de rede).
  • Como medir uma parte específica do 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 de seu aplicativo da web.

O que você precisará

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

2. Obtenha o código de amostra

Clone do codelab repositório GitHub a partir da linha de comando:

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

Alternativamente, se você não tem git instalado, você pode baixar o repo como um arquivo zip .

Importe o aplicativo inicial

Usando seu IDE, abra ou importe o 📁 performance-monitoring-start diretório do repositório clonado. Este 📁 performance-monitoring-start diretório contém o código de partida para a codelab, que é um aplicativo web chat.

3. Crie e configure um projeto Firebase

Crie um projeto Firebase

  1. Na consola Firebase , clique em Adicionar Project.
  2. Nome do seu projeto Firebase FriendlyChat .

Lembre-se do ID do seu projeto Firebase.

  1. Clique em Criar Projeto.

Adicionar um aplicativo da web Firebase ao projeto

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

ea9ab0db531a104c.png

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

Para permitir aos usuários entrar para o aplicativo de bate-papo com as suas contas Google, usaremos o sign-in método Google.

Você precisa ativar o login do Google:

  1. No console Firebase, localize a seção Desenvolver no painel esquerdo.
  2. Clique em Autenticação, clique no sinal-in guia método ( ir para o console ).
  3. Ativar o sign-in provedor Google e clique em Salvar.

7f3040a646c2e502.png

Ativar Cloud Firestore

O aplicativo da Web usa Nuvem Firestore para guardar as mensagens de bate-papo e receber novas mensagens de chat.

Você precisará habilitar o Cloud Firestore:

  1. No console Firebase é seção de Revelação, clique Banco de Dados.
  2. Clique em Criar banco de dados no painel de Nuvem Firestore.
  3. Selecione a opção Iniciar o modo de teste em, em seguida, clique em Ativar depois de ler o aviso sobre as regras de segurança.

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

24bd1a097492eac6.png

Habilitar Cloud Storage

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

Você precisará habilitar o Cloud Storage:

  1. No console Firebase é a seção Desenvolver, clique em Armazenamento.
  2. Clique Get Started.
  3. Leia o aviso sobre regras de segurança para o seu projecto Firebase e clique Got-lo.

O código inicial inclui uma regra de segurança básica, que implementaremos 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. Instalar o CLI, seguindo as instruções na documentação 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 da Firebase CLI é v8.0.0 ou posterior.

  1. Autorize a Firebase CLI executando o seguinte comando:
firebase login

Configuramos o modelo de aplicativo da web para extrair a configuração do seu aplicativo para 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 Firebase.

  1. Certifique-se de que a sua linha de comando está acessando local do seu aplicativo performance-monitoring-start de diretório.
  2. Associe seu aplicativo ao projeto do Firebase executando o seguinte comando:
firebase use --add
  1. Quando solicitado, selecione o ID do seu projeto e, em seguida, atribua 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 apenas usar o alias default .

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

5. Integre com o Firebase Performance Monitoring

Existem várias maneiras de integrar com o desempenho Firebase Monitoramento SDK para web (consulte a documentação para mais detalhes). Neste codelab, que vai permitir o desempenho de monitoramento de URLs de hospedagem.

Adicionar monitoramento de desempenho e inicializar Firebase

  1. Abra o src/index.js arquivo, em seguida, adicione a seguinte linha abaixo do TODO para incluir o SDK Monitoramento Firebase Desempenho.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Também precisamos inicializar o Firebase SDK com um objeto de configuração que contém informações sobre o projeto 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ê. Por esta codelab, nós já adicionou a seguinte linha para você na parte inferior do public/index.html arquivo, mas double-check que ele está lá.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Na src/index.js arquivo, adicione a seguinte linha abaixo do TODO para inicializar o monitoramento de desempenho.

index.js

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

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

Adicione a primeira biblioteca de polyfill de atraso de entrada

Atraso primeira entrada é útil uma vez que o navegador respondendo a uma interação do usuário dá aos usuários as suas primeiras impressões sobre a capacidade de resposta do seu aplicativo.

O primeiro atraso de entrada começa quando o usuário interage pela primeira vez com um elemento na 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 public/index.html arquivo, em seguida, uncomment a seguinte linha.

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!

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

6. Adicione um rastreamento personalizado ao seu aplicativo

Monitoramento de Desempenho permite criar traços personalizados. Um rastreamento personalizado é um relatório para a duração de um bloco de execução em seu aplicativo. Você define o início e o fim de um rastreio customizado usando as APIs fornecidas pelo SDK.

  1. Na src/index.js arquivo, obter um objeto de desempenho, em seguida, criar um traço personalizado para fazer upload de uma mensagem de imagem.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Para gravar um rastreio personalizado, você precisa especificar o ponto de partida e o ponto de parada do rastreio. 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 customizada ao seu aplicativo.

Você pode configurar ainda um traço personalizado para métricas personalizadas recorde para eventos relacionados ao desempenho que ocorrem no seu âmbito. 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 personalizada da etapa anterior (definido no src/index.js arquivo).
  2. Adicione a seguinte linha abaixo do TODO para gravar 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 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 traços personalizados . Atributos personalizados podem ajudar na segmentação de dados por categorias específicas para 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 traço personalizado definido em sua src/index.js arquivo.
  2. Adicione a seguinte linha abaixo do TODO para gravar o tipo MIME da imagem enviada.

index.js

 ...

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

 ...

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

9. [Estender] Adicionar um rastreamento personalizado com a API de tempo do usuário

O Firebase Performance Monitoring SDK foi projetado para que pudesse ser carregado de forma assíncrona e não impactasse negativamente o desempenho dos aplicativos da web durante o carregamento da página. Antes de o SDK ser carregado, a API Firebase Performance Monitoring não está disponível. Neste cenário, você ainda são capazes de adicionar traços personalizados usando a API de tempo do usuário . SDK desempenho Firebase vai pegar as durações de medida () e registrá-los como traços personalizados.

Vamos medir a duração do carregamento de scripts de estilo de aplicativo usando a API de tempo do usuário.

  1. No public/index.html arquivo, adicione a seguinte linha para marcar o início da carga scripts do aplicativo de estilo.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Adicione as seguintes linhas 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ê será capaz de encontrar um traço personalizado chamado loadStyling no desempenho do console Firebase mais tarde.

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 a sua linha de comando está acessando local do seu aplicativo performance-monitoring-start de diretório.
  2. Implante seus arquivos no projeto do Firebase executando o seguinte comando:
firebase deploy
  1. 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
  1. Visite seu aplicativo web que está agora totalmente hospedado usando Firebase hospeda em dois dos seus próprios subdomínios Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app .

Verifique se o monitoramento de desempenho está habilitado

Abrir Firebase consola e vá para a guia Desempenho. Se você vir uma mensagem de boas-vindas mostrando "SDK detectado", significa que integrou-se com sucesso ao Firebase Performance Monitoring!

30df67e5a07d03b0.png

Enviar mensagem de imagem

Gere alguns dados de desempenho enviando imagens em seu aplicativo de bate-papo.

  1. Depois de entrar em seu aplicativo de bate-papo, clique no botão de upload de imagem 13734cb66773e5a3.png .
  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 personalizadas e atributos personalizados.

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

11. Monitore o painel

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

Acesse seu painel

  1. Na consola Firebase , selecione o projeto que tem o seu Friendly Chat aplicativo.
  2. No painel esquerdo, localize a seção Qualidade e clique em Desempenho.

Analise os dados no dispositivo

Depois que o monitoramento de desempenho processou os dados do seu aplicativo, você verá guias na parte superior do painel. Verifique novamente mais tarde se ainda não encontrar dados ou guias.

  1. Clique na guia dispositivo.
  • A página é carregada tabela mostra as várias métricas de desempenho que o desempenho de monitoramento coleta automaticamente enquanto a página está carregando.
  • A tabela durações mostra quaisquer vestígios personalizados que você definiu no código do seu aplicativo.
  1. Clique saveImageMessage na tabela de Durações de rever métricas específicas para o rastreamento.

e28758fd02d9ffac.png

  1. Clique Aggregate para rever a distribuição de tamanhos de imagem. Você pode ver a métrica que adicionou para medir o tamanho da imagem para este traço personalizado.

c3cbcfc0c739a0a8.png

  1. Clique Com o tempo que fica ao lado Agregado na etapa anterior. Você também pode visualizar a duração do traço personalizado. Clique em Ver mais para rever os dados coletados em mais detalhes.

16983baa31e05732.png

  1. Na página que se abre, você pode segmentar os dados de duração por imagem tipo MIME clicando imageType. Esses dados específicos foram registrados por causa do atributo imageType que você adicionou ao rastreamento personalizado.

8e5c9f32f42a1ca1.png

Analise os dados da rede

Um HTTP / S solicitação de rede é um relatório que captura o tempo de resposta e tamanho da carga de 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 solicitação de rede para o 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!

26a2be152a77ffb9.png

12. Parabéns!

Você ativou o Firebase SDK para monitoramento de desempenho e coletou traces automáticos e personalizados para medir o desempenho do seu aplicativo de chat no mundo real!

O que cobrimos:

  • Adicionar o Firebase Performance Monitoring SDK ao seu aplicativo da web.
  • Adicionando rastros personalizados ao seu código.
  • Registro de métricas personalizadas vinculadas ao rastreamento personalizado.
  • Segmentando 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: