¿De qué sirve medir el rendimiento de tu aplicación si no tienes un lugar centralizado donde ver esas métricas?

De nada, esa es la respuesta.

Y al mismo tiempo, por eso OpenReplay ha añadido recientemente la posibilidad de que sus usuarios creen paneles personalizados.

A través de estos paneles, los usuarios pueden crear una única visualización donde obtener un vistazo del estado de toda su aplicación.

Además, puedes crear paneles solo para ti o para todo tu equipo. De esta manera, se elimina la necesidad de duplicar los paneles si más de una persona los necesita.

Veamos cómo pueden hacerlo los usuarios.

Nota: Si quieres un tutorial rápido que te muestre cómo implementar un panel con métricas personalizadas, puedes consultar este video de YouTube.

Haz clic en la sección Dashboards del menú principal para comenzar.

Luego haz clic en el botón “Create Dashboard” que te mira fijamente justo desde el centro de la pantalla:

Una vez que hagas clic en él, se te presentarán todas y cada una de las métricas que OpenReplay está capturando sobre tu aplicación.

Puedes pensar en estas métricas dentro de las siguientes categorías:

• Relacionadas con errores: estas métricas te mostrarán problemas con tu aplicación.
• Relacionadas con el rendimiento: con estas métricas podrás evaluar qué tan bien funciona tu aplicación para tus usuarios.
• Relacionadas con recursos: problemas con imágenes que no cargan, o ralentizaciones debido a archivos JavaScript demasiado grandes son el tipo de problemas que identificarás con estas métricas.
• Web Vitals: Estas son las métricas utilizadas por motores de búsqueda como Google para determinar la calidad de una página/aplicación web.
• Relacionadas con sesiones: Estas son métricas sobre las reproducciones en sí, te dan una idea de cuánto tráfico está teniendo tu aplicación y qué porcentaje de él estás capturando.

Veamos cómo se pueden organizar nuestras métricas dentro de estos grupos y qué significa cada una:

• Errors by Origin: número de errores por día divididos entre errores de terceros y propios (tuyos).
• Errors by Type: número de errores clasificados por código de estado, JavaScript o integración con otros servicios.
• Errors Per Domain: número de errores (agrupados por dominio) durante el período seleccionado.
• Fetch Calls with Errors: Las llamadas/respuestas fetch que tienen 5xx-4xx.
• Sessions Affected by JS Errors: número de sesiones por día afectadas por errores de JS.
• Top Domains with 4XX Fetch Errors: principales dominios con errores de tipo Bad Request
• Top Domains with 5XX Fetch Errors: principales dominios donde los errores provienen del lado del servidor.
• Crashes: número de bloqueos por día de tu aplicación.

• CPU Load: la carga promedio de CPU por día.
• DOM Build Time: el tiempo promedio que tarda en construirse todo el DOM de tu aplicación, distribuido a lo largo del tiempo.
• Slowest Domains: Los dominios desde los cuales se descargaron los recursos más lentos (js, css, imágenes).
• Request Load Time: El tiempo de respuesta de una solicitud http (fetch/xhr/axios).
• Response Time: el tiempo de respuesta promedio a las solicitudes enviadas por tu aplicación.
• Memory Consumption: el consumo promedio de memoria en todas las grabaciones de tu proyecto.
• Sessions impacted by Slow Pages: número de sesiones donde se detectan páginas lentas cada día.
• Frame Rate: la capacidad de respuesta promedio de tu interfaz de usuario.
• Page Load Time: el tiempo promedio que transcurre desde el momento en que tu navegador envía la solicitud al backend y el momento en que la página termina de cargar.
• Pages Response Time: el tiempo promedio que tarda tu servidor en devolver la respuesta desde el navegador.
• Pages Response Time Distribution: La distribución de los tiempos de respuesta (cargas) de las páginas para que puedas detectar

• Breakdown of Loaded Resources: número de recursos cargados por día separados por CSS, imágenes y scripts.
• Missing Resources: Imágenes (principalmente) o fuentes o iconos u hojas de estilo o js que no se pudieron cargar y por lo tanto faltan. Eso significa que las páginas que los renderizan se verán afectadas.
• Resources Fetch Time: el tiempo promedio que tardan en cargar los diferentes recursos
• Slowest Resources: la lista de los recursos más lentos con su tiempo de carga asociado.
• Image Load Time: el tiempo promedio que tardan tus imágenes en cargar.
• Resources Loaded vs. Visually Complete: número de recursos cargados frente a la cantidad de tiempo que tardan en cargarse visualmente (como las imágenes, pero teniendo en cuenta también scripts y CSS).
• Resources loaded vs. Response End: número de recursos cargados mediante XHR (y otros tipos de solicitudes) frente al tiempo que tarda el backend en entregarlos.

• Time to Interactive: la cantidad promedio de tiempo que tarda tu interfaz de usuario en volverse completamente interactiva (sensible a la entrada del usuario).
• Speed Index by Location: el tiempo promedio (por país) que tarda el contenido visible de tu página en poblarse.
• First Paint: el tiempo promedio que tarda el navegador en renderizar el primer píxel de tu interfaz de usuario.
• DOM Content Loaded: el tiempo promedio que tarda el documento HTML inicial en cargarse completamente y ser analizado por el navegador (sin tener en cuenta hojas de estilo, imágenes y subframes).
• Time to Render: El tiempo que tarda el navegador en renderizar el DOM cargado. Sería bueno mostrar la diferencia con DOM Content Loaded.
• Time Till First Byte: el tiempo promedio que tarda el navegador de tu usuario en recibir el primer byte después de solicitar una página.

• Captured Requests: el número de solicitudes realizadas en cada sesión grabada.
• Captured Sessions: el número de sesiones capturadas para un proyecto a lo largo del tiempo.
• No. of Visited Pages: la cantidad promedio de páginas visitadas durante una sesión.
• Sessions Per Browser: Cuántas sesiones se capturaron para un navegador en particular (p. ej., Chrome).
• Session Duration: la duración promedio de sesión por día para tu proyecto.

Tienes 40 métricas para elegir, lo que significa que puedes crear el tipo de panel que necesitas, sin importar lo que estés buscando.

Una vez que se te presente la lista de métricas, todo lo que tienes que hacer es hacer clic en las que quieras, y cuando las tengas todas, hacer clic en el botón “Create” ubicado en la esquina inferior izquierda de la pantalla.

Además de las métricas predefinidas que presenta la plataforma, puedes crear las tuyas propias para personalizar por completo el nivel de detalle que tienes dentro de tus paneles. Dentro de la misma sección Dashboards, en lugar de crear un nuevo panel, haz clic en la opción Metrics en el lado izquierdo de la pantalla y elige “Create Metric”.

Dale un nombre, en mi caso la llamaré “Sessions from Spain” (verás por qué en un minuto). Luego elige el tipo de métrica, tienes:

• Timeseries: esto trazará el número de sesiones que coinciden con los criterios de filtrado de abajo.
• Table of [option]: esto listará lo que selecciones para “option” (puede ser Users, Sessions, JS Errors, Issues, Browsers, Devices, Countries y URLs). Cada elemento de esta lista será clicable y podrás obtener más detalles de él.
• Funnels: creará un embudo basado en los filtros que selecciones (consulta este tutorial para entender cómo aprovechar los embudos).

Si te gustaría saber cómo trabajar con la lista de JSErrors, consulta este otro tutorial.

Para este ejemplo, voy a crear una métrica que liste todas las sesiones de la página del producto que provienen de España. Esto me permitirá ver rápidamente cuántas sesiones obtengo dentro de mi ventana de tiempo elegida y, al mismo tiempo, podré reproducirlas con un simple clic.

Puedes duplicar esta métrica y filtrarla por otros países, de esa manera puedes obtener un vistazo de quién está accediendo a una sección específica de tu sitio desde diferentes países y cómo están interactuando con ella.

Por ejemplo, supongamos que estás intentando crear un panel sencillo que muestre los indicadores de lentitud para entender de dónde provienen los problemas relacionados con la lentitud. Y además de eso, querrás añadir la lista de personas de España que han llegado a la página del producto de tu sitio de comercio electrónico.

Así que optarás por:

• Slowest resources
• Sessions impacted by Slow Pages
• Framerate
• Response time
• Time to Interactive
• Tu métrica personalizada “Sessions from spain”

Dependiendo de tu caso de uso, podrías pensar en añadir otras, pero para este ejemplo, estas métricas nos darán la imagen completa de lo que estamos tratando de entender: si nuestras páginas son lentas y qué lo está causando. El resultado debería verse algo así:

Los widgets que añadiste se pueden mover para asegurarte de ver primero los que más te interesan.

También puedes cambiar la ventana de tiempo utilizada para graficar estas métricas. Por defecto, como puedes ver en la esquina superior derecha del panel, estos widgets te muestran los datos de los últimos 7 días. Puedes cambiar el rango de tiempo a:

• Today, mostrándote solo los datos recopilados hasta ahora hoy.
• Yesterday, mostrándote un resumen del día anterior.
• Past seven days, que es la opción predeterminada seleccionada.
• Past 30 days, mostrándote un rango de tiempo más amplio.
• Custom range, que te permite seleccionar el rango de tiempo que desees.

También puedes seguir añadiendo métricas al nuevo panel usando el botón “Add Metric” en la esquina superior izquierda junto al título.

Puedes crear tantos paneles como quieras; pueden actuar como diferentes vistas de tu sistema y mostrarte un resumen integrado de lo que está sucediendo. Luego puedes usarlos para filtrar las reproducciones y entender qué está pasando en tu aplicación.

Si tienes algún problema configurando un panel personalizado en tu proyecto, ponte en contacto con nosotros en nuestra comunidad de Slack y pregúntale directamente a nuestros desarrolladores.