> ## Documentation Index > Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8c05c8a2.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Logs, trazas y métricas de ejemplo > Primeros pasos con ClickStack y un conjunto de datos de ejemplo con logs, sesiones, trazas y métricas export const Image = ({img, alt, size}) => { return {alt} ; }; Esta guía presenta tanto ClickStack Open Source como Managed ClickStack con un conjunto de datos de ejemplo. La siguiente guía asume que ha completado la [Guía de introducción para Managed ClickStack](/es/clickstack/deployment/managed) y que tiene las [credenciales de conexión anotadas](/es/clickstack/getting-started/managed#next-steps). ### Selecciona tu servicio Selecciona el servicio con Managed ClickStack en la página principal de ClickHouse Cloud. Seleccionar servicio ### Ve a la UI de ClickStack (HyperDX) Selecciona `ClickStack` en el menú de la izquierda para ir a la UI de ClickStack, donde se te autenticará automáticamente. UI de ClickStack ### Descargar datos de ejemplo Para cargar la UI con datos de ejemplo, descargue el siguiente archivo: [Datos de ejemplo](https://storage.googleapis.com/hyperdx/sample.tar.gz) ```shell theme={null} # curl curl -O https://storage.googleapis.com/hyperdx/sample.tar.gz # o # wget https://storage.googleapis.com/hyperdx/sample.tar.gz ``` Este archivo contiene logs, métricas y trazas de ejemplo de nuestra [demo pública de OpenTelemetry](https://github.com/ClickHouse/opentelemetry-demo), una sencilla tienda en línea con microservicios. Copia este archivo en el directorio que prefieras. ### Cargar datos de ejemplo Para cargar estos datos, simplemente los enviamos al endpoint HTTP del OTel collector de OpenTelemetry ya desplegado. Ejecute el siguiente comando para enviar los datos al OTel collector: ```shell theme={null} for filename in $(tar -tf sample.tar.gz); do endpoint="http://localhost:4318/v1/${filename%.json}" echo "loading ${filename%.json}" tar -xOf sample.tar.gz "$filename" | while read -r line; do printf '%s\n' "$line" | curl -s -o /dev/null -X POST "$endpoint" \ -H "Content-Type: application/json" \ -H "authorization: ${CLICKSTACK_API_KEY}" \ --data-binary @- done done ``` Esto simula fuentes OTLP de logs, trazas y métricas que envían datos al OTel collector. En producción, estas fuentes pueden ser clientes en distintos lenguajes o incluso otros OTel collectors. Al volver a la vista `Search`, deberías ver que los datos han empezado a cargarse (ajusta el marco temporal a `Last 1 hour` si los datos no aparecen): Búsqueda de HyperDX La carga de datos tardará unos minutos. Espera a que finalice antes de pasar a los siguientes pasos. ### Explorar sesiones Supongamos que hemos recibido informes de que nuestros usuarios están teniendo problemas para pagar sus compras. Podemos ver su experiencia usando la función de session replay de HyperDX. Selecciona `Client Sessions` en el menú de la izquierda. Sesiones Esta vista nos permite ver las sesiones del front-end de nuestra tienda de comercio electrónico. Las sesiones permanecen como Anonymous hasta que los usuarios pasan por caja e intentan completar una compra. Ten en cuenta que algunas sesiones con correos electrónicos tienen un error asociado, lo que podría confirmar los informes de transacciones fallidas. Selecciona una traza con un fallo y un correo electrónico asociado. La vista siguiente nos permite reproducir la sesión del usuario y revisar el problema. Pulsa play para ver la sesión. Reproducción de sesión La reproducción muestra al usuario navegando por el sitio y añadiendo artículos al carrito. Si quieres, puedes avanzar hasta un punto posterior de la sesión donde intenta completar el pago. Los errores aparecen anotados en rojo en la línea de tiempo. El usuario no pudo realizar el pedido, sin que hubiera ningún error evidente. Desplázate hasta la parte inferior del panel izquierdo, que contiene los eventos de red y de consola del navegador del usuario. Verás que se produjo un error 500 al hacer una llamada a `/api/checkout`. Error en la sesión Selecciona este error `500`. Ni `Overview` ni `Column Values` indican el origen del problema, más allá de que el error es inesperado, lo que provoca un `Internal Error`. ### Explorar trazas Ve a la pestaña `Trace` para ver la traza distribuida completa. Traza de la sesión Desplázate hacia abajo en la traza para ver el origen del error: el span del servicio `checkout`. Selecciona el span del servicio `Payment`. Span Selecciona la pestaña `Column Values` y desplázate hacia abajo. Podemos ver que el problema está asociado a que la caché está llena. Valores de columna Al volver a subir y regresar a la traza, podemos ver que los logs están correlacionados con el span gracias a la configuración anterior. Esto aporta más contexto. Log correlacionado Hemos determinado que la caché se está llenando en el servicio de pagos, lo que impide que los pagos se completen. ### Explorar logs Para obtener más detalles, podemos volver a `Search`: Selecciona `Logs` en las fuentes y aplica un filtro al servicio `payment`. Logs Podemos ver que, aunque el problema es reciente, el número de pagos afectados es elevado. Además, parece que una caché relacionada con los pagos con Visa está causando problemas. ### Métricas del gráfico Aunque claramente se ha introducido un error en el código, podemos usar métricas para confirmar el tamaño de la caché. Ve a la vista `Chart Explorer`. Selecciona `Metrics` como fuente de datos. Completa el generador de gráficos para representar el `Maximum` de `visa_validation_cache.size (Gauge)` y pulsa el botón `play`. La caché fue aumentando claramente hasta alcanzar un tamaño máximo, tras lo cual se generaron errores. Métricas El siguiente ejemplo asume que ha iniciado Open Source ClickStack siguiendo las [instrucciones para la imagen todo en uno](/es/clickstack/getting-started/oss) y se ha conectado a la [instancia local de ClickHouse](/es/clickstack/getting-started/oss#complete-connection-credentials). ### Ve a la UI de ClickStack (HyperDX) Visita [http://localhost:8080](http://localhost:8080) para acceder a la UI de ClickStack. UI de ClickStack ### Copiar la API key de ingesta Ve a [`Team Settings`](http://localhost:8080/team) y copia la `Ingestion API Key` de la sección `API Keys`. Esta API key garantiza que la ingestión de datos a través del collector de OpenTelemetry sea segura. Copiar API key ### Descargar datos de ejemplo Para cargar la UI con datos de ejemplo, descargue el siguiente archivo: [Datos de ejemplo](https://storage.googleapis.com/hyperdx/sample.tar.gz) ```shell theme={null} # curl curl -O https://storage.googleapis.com/hyperdx/sample.tar.gz # o # wget https://storage.googleapis.com/hyperdx/sample.tar.gz ``` Este archivo contiene logs, métricas y trazas de ejemplo de nuestra [demo pública de OpenTelemetry](https://github.com/ClickHouse/opentelemetry-demo), una sencilla tienda en línea con microservicios. Copia este archivo en el directorio que prefieras. ### Cargar datos de ejemplo Para cargar estos datos, basta con enviarlos al endpoint HTTP del collector de OpenTelemetry (OTel) desplegado. Primero, exporte la API key que copió anteriormente. ```shell theme={null} # exportar API key export CLICKSTACK_API_KEY= ``` Ejecute el siguiente comando para enviar los datos al OTel collector: ```shell theme={null} for filename in $(tar -tf sample.tar.gz); do endpoint="http://localhost:4318/v1/${filename%.json}" echo "loading ${filename%.json}" tar -xOf sample.tar.gz "$filename" | while read -r line; do printf '%s\n' "$line" | curl -s -o /dev/null -X POST "$endpoint" \ -H "Content-Type: application/json" \ -H "authorization: ${CLICKSTACK_API_KEY}" \ --data-binary @- done done ``` Esto simula fuentes OTLP de logs, trazas y métricas que envían datos al OTel collector. En producción, estas fuentes pueden ser clientes en distintos lenguajes o incluso otras instancias de OTel collector. Al volver a la vista `Search`, deberías ver que los datos han empezado a cargarse (ajusta el intervalo de tiempo a `Last 1 hour` si los datos no se muestran): Búsqueda de HyperDX La carga de datos tardará unos minutos. Espera a que termine antes de continuar con los siguientes pasos. ### Explorar sesiones Supongamos que hemos recibido informes de usuarios que tienen problemas para pagar sus compras. Podemos ver su experiencia usando las capacidades de session replay de HyperDX. Selecciona [`Client Sessions`](http://localhost:8080/sessions?from=1747312320000\&to=1747312920000\&sessionSource=l1324572572) en el menú de la izquierda. Sesiones Esta vista nos permite ver las sesiones del front-end de nuestra tienda de comercio electrónico. Las sesiones permanecen como Anonymous hasta que los usuarios pasan por caja e intentan completar una compra. Ten en cuenta que algunas sesiones con direcciones de correo electrónico tienen un error asociado, lo que podría confirmar los informes de transacciones fallidas. Selecciona un trace con un fallo y una dirección de correo electrónico asociada. La vista siguiente nos permite reproducir la sesión del usuario y revisar su problema. Pulsa play para ver la sesión. Session replay La reproducción muestra al usuario navegando por el sitio y añadiendo artículos al carrito. No dudes en avanzar hasta un punto posterior de la sesión, donde intenta completar el pago. Los errores se anotan en rojo en la línea de tiempo. El usuario no pudo completar el pedido, sin ningún error evidente. Desplázate hasta la parte inferior del panel izquierdo, que contiene los eventos de `Network` y `Console` del navegador del usuario. Verás que se produjo un error 500 al hacer una llamada a `/api/checkout`. Error en la sesión Selecciona este error `500`. Ni `Overview` ni `Column Values` indican el origen del problema, más allá de que el error es inesperado y provoca un `Internal Error`. ### Explorar trazas Ve a la pestaña `Trace` para ver la traza distribuida completa. Traza de sesión Desplázate por la traza hasta ver el origen del error: el span del servicio `checkout`. Selecciona el span del servicio `Payment`. Span Selecciona la pestaña `Column Values` y desplázate hacia abajo. Podemos ver que el problema está relacionado con una caché llena. Valores de columna Al volver hacia arriba en la traza, vemos que los logs están correlacionados con el span gracias a la configuración anterior. Esto aporta más contexto. Log correlacionado Hemos comprobado que se está llenando una caché en el servicio `Payment`, lo que impide que los pagos se completen. ### Explorar logs Para obtener más detalles, podemos volver a la vista [`Search`](http://localhost:8080/search): Selecciona `Logs` entre las fuentes y aplica un filtro al servicio `payment`. Logs Podemos ver que, aunque la incidencia es reciente, el número de pagos afectados es alto. Además, una cache relacionada con los pagos con Visa parece estar causando problemas. ### Métricas del gráfico Aunque claramente se ha introducido un error en el código, podemos usar métricas para verificar el tamaño de la caché. Vaya a la vista `Chart Explorer`. Seleccione `Metrics` como fuente de datos. Complete el creador de gráficos para representar el `Maximum` de `visa_validation_cache.size (Gauge)` y pulse el botón `play`. La caché iba aumentando claramente hasta alcanzar un tamaño máximo, a partir del cual se generaron errores. Métricas