Supervisión del rendimiento de Firebase para la web

1. Información general

En este laboratorio de código, aprenderá a usar Firebase Performance Monitoring para medir el rendimiento de una aplicación web de chat. Visite https://fireperf-friendlychat.web.app/ para ver una demostración en vivo.

lo que aprenderás

• Cómo agregar Firebase Performance Monitoring a su aplicación web para obtener métricas listas para usar (carga de página y solicitudes de red).
• Cómo medir una pieza específica de código con trazas personalizadas.
• Cómo registrar métricas personalizadas adicionales vinculadas a un seguimiento personalizado.
• Cómo segmentar aún más sus datos de rendimiento con atributos personalizados.
• Cómo utilizar el panel de control de rendimiento para comprender el rendimiento de su aplicación web.

Lo que necesitarás

• El IDE o editor de texto de su elección, como WebStorm , Atom , Sublime o VS Code
• Una terminal/consola
• Un navegador de su elección, como Chrome
• El código de muestra del laboratorio de programación (consulte la siguiente sección de este laboratorio de programación para saber cómo obtener el código).

2. Obtenga el código de muestra

Clona el repositorio de GitHub del codelab desde la línea de comandos:

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

Alternativamente, si no tiene git instalado, puede descargar el repositorio como un archivo zip .

Importar la aplicación de inicio

Usando su IDE, abra o importe el directorio 📁 performance-monitoring-start desde el repositorio clonado. Este 📁 directorio performance-monitoring-start contiene el código de inicio para el laboratorio de código, que es una aplicación web de chat.

3. Crea y configura un proyecto de Firebase

Crear un proyecto de Firebase

1. En Firebase console , haga clic en Agregar proyecto .
2. Nombre su proyecto de Firebase FriendlyChat .

Recuerde el ID del proyecto para su proyecto de Firebase.

3. Haga clic en Crear proyecto .

Agregar una aplicación web de Firebase al proyecto

1. Haga clic en el icono de la web para crear una nueva aplicación web de Firebase.
2. Registre la aplicación con el apodo Friendly Chat y luego marque la casilla junto a Configurar también Firebase Hosting para esta aplicación .
3. Haga clic en Registrar aplicación .
4. Haga clic en los pasos restantes. No necesita seguir las instrucciones en pantalla ahora; estos se cubrirán en pasos posteriores de este laboratorio de código.

Habilitar el inicio de sesión de Google para la autenticación de Firebase

Para permitir que los usuarios inicien sesión en la aplicación de chat con sus cuentas de Google, utilizaremos el método de inicio de sesión de Google .

Deberá habilitar el inicio de sesión de Google :

1. En Firebase console, busque la sección Desarrollar en el panel izquierdo.
2. Haga clic en Autenticación , luego haga clic en la pestaña Método de inicio de sesión ( vaya a la consola ).
3. Habilite el proveedor de inicio de sesión de Google y luego haga clic en Guardar .

Habilitar Cloud Firestore

La aplicación web usa Cloud Firestore para guardar mensajes de chat y recibir nuevos mensajes de chat.

Deberá habilitar Cloud Firestore:

1. En la sección Desarrollar de la consola Firebase, haga clic en Base de datos .
2. Haga clic en Crear base de datos en el panel de Cloud Firestore.
3. Seleccione la opción Iniciar en modo de prueba , luego haga clic en Habilitar después de leer el descargo de responsabilidad sobre las reglas de seguridad.

El código de inicio de este laboratorio de programación incluye reglas más seguras. Los implementaremos más tarde en el codelab.

Habilitar almacenamiento en la nube

La aplicación web usa Cloud Storage para Firebase para almacenar, cargar y compartir imágenes.

Deberá habilitar el almacenamiento en la nube:

1. En la sección Desarrollar de la consola Firebase, haga clic en Almacenamiento .
2. Haga clic en Comenzar .
3. Lea el descargo de responsabilidad sobre las reglas de seguridad para su proyecto de Firebase y luego haga clic en Entendido .

El código inicial incluye una regla de seguridad básica, que implementaremos más adelante en el laboratorio de código.

4. Instala la interfaz de línea de comandos de Firebase

La interfaz de línea de comandos (CLI) de Firebase le permite usar Firebase Hosting para servir su aplicación web localmente, así como para implementar su aplicación web en su proyecto de Firebase.

1. Instale la CLI siguiendo estas instrucciones en los documentos de Firebase.
2. Verifique que la CLI se haya instalado correctamente ejecutando el siguiente comando en una terminal:

firebase --version

Asegúrese de que su versión de Firebase CLI sea v8.0.0 o posterior.

3. Autorice Firebase CLI ejecutando el siguiente comando:

firebase login

Configuramos la plantilla de la aplicación web para extraer la configuración de su aplicación para Firebase Hosting desde el directorio local de su aplicación (el repositorio que clonó anteriormente en el laboratorio de programación). Pero para obtener la configuración, debemos asociar su aplicación con su proyecto de Firebase.

4. Asegúrese de que su línea de comando esté accediendo al directorio performance-monitoring-start local de su aplicación.
5. Asocie su aplicación con su proyecto de Firebase ejecutando el siguiente comando:

firebase use --add

6. Cuando se le solicite, seleccione su ID de proyecto y luego asigne un alias a su proyecto de Firebase.

Un alias es útil si tiene varios entornos (producción, puesta en escena, etc.). Sin embargo, para este laboratorio de código, solo usemos el alias de default .

7. Siga las instrucciones restantes en su línea de comando.

5. Integrar con Firebase Performance Monitoring

Hay varias formas de integrarse con Firebase Performance Monitoring SDK para web (consulte la documentación para obtener más detalles). En este laboratorio de programación, habilitaremos la supervisión del rendimiento desde las URL de hospedaje .

Agregue monitoreo de rendimiento e inicialice Firebase

1. Abra el archivo src/index.js , luego agregue la siguiente línea debajo de TODO para incluir el SDK de Firebase Performance Monitoring.

índice.js

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

2. También necesitamos inicializar el SDK de Firebase con un objeto de configuración que contenga información sobre el proyecto de Firebase y la aplicación web que queremos usar. Como usamos Firebase Hosting, puede importar un script especial que hará esta configuración por usted. Para este laboratorio de código, ya agregamos la siguiente línea en la parte inferior del archivo public/index.html , pero verifique que esté allí.

índice.html

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

3. En el archivo src/index.js , agregue la siguiente línea debajo de TODO para inicializar la supervisión del rendimiento.

índice.js

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

Performance Monitoring ahora recopilará automáticamente las métricas de carga de la página y solicitud de red para usted cuando los usuarios usen su sitio. Consulte la documentación para obtener más información sobre los seguimientos de carga automática de páginas.

Agregue la primera biblioteca de polyfill de retardo de entrada

El retraso de la primera entrada es útil ya que el navegador que responde a una interacción del usuario les da a los usuarios sus primeras impresiones sobre la capacidad de respuesta de su aplicación.

El primer retraso de entrada comienza cuando el usuario interactúa por primera vez con un elemento en la página, como hacer clic en un botón o hipervínculo. Se detiene inmediatamente después de que el navegador puede responder a la entrada, lo que significa que el navegador no está ocupado cargando o analizando su contenido.

Esta biblioteca de polyfill es opcional para la integración de la supervisión del rendimiento.

Abra el archivo public/index.html , luego elimine el comentario de la siguiente línea.

índice.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>

¡En este punto, ha terminado la integración con Firebase Performance Monitoring en su código!

En los siguientes pasos, obtendrá información sobre cómo agregar seguimientos personalizados mediante Firebase Performance Monitoring. Si solo desea recopilar las trazas automáticas, vaya a la sección "Desplegar y comenzar a enviar imágenes".

6. Agregue un seguimiento personalizado a su aplicación

Performance Monitoring le permite crear seguimientos personalizados . Un seguimiento personalizado es un informe de la duración de un bloque de ejecución en su aplicación. Defina el inicio y el final de un seguimiento personalizado mediante las API proporcionadas por el SDK.

1. En el archivo src/index.js , obtenga un objeto de rendimiento y luego cree un seguimiento personalizado para cargar un mensaje de imagen.

índice.js

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

2. Para registrar un seguimiento personalizado, debe especificar el punto de inicio y el punto de finalización del seguimiento. Puedes pensar en un rastro como un temporizador.

índice.js

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

 ...

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

¡Ha definido con éxito un seguimiento personalizado! Después de implementar su código, la duración del seguimiento personalizado se registrará si un usuario envía un mensaje de imagen. Esto le dará una idea de cuánto tardan los usuarios del mundo real en enviar imágenes en su aplicación de chat.

7. Agregue una métrica personalizada a su aplicación.

Además, puede configurar un seguimiento personalizado para registrar métricas personalizadas para eventos relacionados con el rendimiento que ocurren dentro de su alcance. Por ejemplo, puede usar una métrica para investigar si el tiempo de carga se ve afectado por el tamaño de una imagen para el seguimiento personalizado que definimos en el último paso.

1. Localice el seguimiento personalizado del paso anterior (definido en su archivo src/index.js ).
2. Agregue la siguiente línea debajo de TODO para registrar el tamaño de la imagen cargada.

índice.js

 ...

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

 ...

Esta métrica permite que la supervisión del rendimiento registre la duración del seguimiento personalizado, así como el tamaño de la imagen cargada.

8. Agregue un atributo personalizado a su aplicación

Sobre la base de los pasos anteriores, también puede recopilar atributos personalizados en sus seguimientos personalizados . Los atributos personalizados pueden ayudar a segmentar los datos por categorías específicas de su aplicación. Por ejemplo, puede recopilar el tipo MIME del archivo de imagen para investigar cómo podría afectar el tipo MIME al rendimiento.

1. Utilice el seguimiento personalizado definido en su archivo src/index.js .
2. Agregue la siguiente línea debajo de TODO para registrar el tipo MIME de la imagen cargada.

índice.js

 ...

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

 ...

Este atributo permite que la supervisión del rendimiento clasifique la duración del seguimiento personalizado según el tipo de imagen cargada.

9. [Extender] Agregue un seguimiento personalizado con la API de sincronización del usuario

El SDK de Firebase Performance Monitoring se diseñó para que pudiera cargarse de forma asíncrona y para que no afectara negativamente el rendimiento de las aplicaciones web durante la carga de la página. Antes de que se cargue el SDK, la API de Firebase Performance Monitoring no está disponible. En este escenario, aún puede agregar seguimientos personalizados mediante la API de sincronización del usuario . El SDK de rendimiento de Firebase tomará las duraciones de la medida () y las registrará como seguimientos personalizados.

Vamos a medir la duración de la carga de secuencias de comandos de estilo de aplicación utilizando la API de sincronización de usuario.

1. En el archivo public/index.html , agregue la siguiente línea para marcar el inicio de la carga de los scripts de estilo de la aplicación.

índice.html

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

2. Agregue las siguientes líneas para marcar el final de la carga de los scripts de estilo de la aplicación y para medir la duración entre el inicio y el final.

índice.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>

Firebase Performance Monitoring recopilará automáticamente la entrada que ha creado aquí. Podrá encontrar un seguimiento personalizado llamado loadStyling en Firebase Performance Console más adelante.

10. Implementar y comenzar a enviar imágenes

Implementar en Firebase Hosting

Después de agregar Firebase Performance Monitoring a su código, siga estos pasos para implementar su código en Firebase Hosting:

1. Asegúrese de que su línea de comando esté accediendo al directorio performance-monitoring-start local de su aplicación.
2. Implemente sus archivos en su proyecto de Firebase ejecutando el siguiente comando:

firebase deploy

3. La consola debe mostrar lo siguiente:

=== 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 su aplicación web que ahora está completamente alojada con Firebase Hosting en dos de sus propios subdominios de Firebase: https://<projectId>.firebaseapp.com y https://<projectId>.web.app .

Verifique que la supervisión del rendimiento esté habilitada

Abra la consola Firebase y vaya a la pestaña Rendimiento . Si ve un mensaje de bienvenida que muestra "SDK detectado", ¡entonces se ha integrado correctamente con Firebase Performance Monitoring!

Enviar mensaje de imagen

Genere algunos datos de rendimiento enviando imágenes en su aplicación de chat.

1. Después de iniciar sesión en su aplicación de chat, haga clic en el botón de carga de imágenes .
2. Seleccione un archivo de imagen usando el selector de archivos.
3. Intente enviar varias imágenes (algunas muestras se almacenan en public/images/ ) para que pueda probar la distribución de métricas personalizadas y atributos personalizados.

Los mensajes nuevos deben mostrarse en la interfaz de usuario de la aplicación junto con las imágenes seleccionadas.

11. Monitorea el tablero

Después de implementar su aplicación web y enviar mensajes de imagen como usuario, puede revisar los datos de rendimiento en el panel de control de rendimiento (en la consola de Firebase).

Accede a tu panel

1. En Firebase console , seleccione el proyecto que tiene su aplicación Friendly Chat .
2. En el panel izquierdo, busque la sección Calidad y haga clic en Rendimiento .

Revisar datos en el dispositivo

Después de que la supervisión del rendimiento haya procesado los datos de su aplicación, verá pestañas en la parte superior del panel. Asegúrese de volver a consultar más tarde si aún no ve ningún dato o pestaña.

1. Haz clic en la pestaña En el dispositivo .

• La tabla de cargas de la página muestra las diversas métricas de rendimiento que la supervisión del rendimiento recopila automáticamente mientras se carga la página.
• La tabla Duraciones muestra cualquier seguimiento personalizado que haya definido en el código de su aplicación.

2. Haga clic en saveImageMessage en la tabla Duraciones para revisar las métricas específicas del seguimiento.

3. Haga clic en Agregar para revisar la distribución de tamaños de imagen. Puede ver la métrica que agregó para medir el tamaño de la imagen para este seguimiento personalizado.

4. Haga clic en A lo largo del tiempo , que se encuentra junto a Agregado en el paso anterior. También puede ver la Duración del seguimiento personalizado. Haga clic en Ver más para revisar los datos recopilados con más detalle.

5. En la página que se abre, puede segmentar los datos de duración por tipo MIME de imagen haciendo clic en imageType . Estos datos específicos se registraron debido al atributo imageType que agregó a su seguimiento personalizado.

Revisar los datos de la red

Una solicitud de red HTTP/S es un informe que captura el tiempo de respuesta y el tamaño de la carga útil de las llamadas de red.

1. Vuelva a la pantalla principal del panel de control de rendimiento.
2. Haga clic en la pestaña Red para ver una lista de entradas de solicitud de red para su aplicación web.
3. Navegue a través de ellos para identificar solicitudes lentas y comience a trabajar en una solución para mejorar el rendimiento de su aplicación.

12. ¡Felicitaciones!

¡Habilitó el SDK de Firebase para monitorear el rendimiento y recopiló seguimientos automáticos y personalizados para medir el rendimiento real de su aplicación de chat!

Lo que hemos cubierto:

• Agregar el SDK de Firebase Performance Monitoring a su aplicación web.
• Agregar rastros personalizados a su código.
• Registro de métricas personalizadas vinculadas al seguimiento personalizado.
• Segmentación de datos de rendimiento utilizando atributos personalizados.
• Comprender cómo usar el panel de monitoreo de rendimiento para obtener información sobre el rendimiento de su aplicación.

Aprende más:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/rápido/