La reproducción de sesiones en ClickStack captura y reconstruye las interacciones de los usuarios en tu aplicación web, lo que te permite reproducir visualmente con exactitud lo que un usuario vio e hizo durante su sesión. En lugar de una grabación de video, el SDK registra cambios en el DOM, movimientos del mouse, clics, desplazamientos, pulsaciones de teclado, logs de la consola, solicitudes de red (XHR, Fetch, WebSocket) y excepciones de JavaScript, y luego reconstruye la experiencia en el navegador.
Como las reproducciones de sesiones se almacenan en ClickHouse junto con tus logs, trazas y métricas, puedes pasar de ver la experiencia de un usuario a inspeccionar las trazas del backend y las consultas a la base de datos que la sustentan, todo en unos pocos clics. Esto hace que la reproducción de sesiones sea útil para depurar problemas en producción, comprender el comportamiento de los usuarios, identificar puntos de fricción en la UX y confirmar visualmente los problemas reportados al equipo de soporte.
Instrumentar su aplicación
@hyperdx/browser), que amplía el SDK de OpenTelemetry con grabación de sesiones, captura de consola y captura de solicitudes de red. Si solo necesita trazas sin reproducción de sesiones, cualquier SDK de navegador compatible con OTel funcionará con ClickStack.
Los ejemplos siguientes usan el SDK para navegador de ClickStack. Añadir la reproducción de sesiones a su aplicación solo requiere tres pasos: instalar el paquete, inicializar el SDK y capturar automáticamente todas las interacciones de los usuarios; no se necesitan más cambios de código.
Inicialice el SDK en un lugar que con seguridad se cargue al iniciar la aplicación. Por ejemplo, en una aplicación Next.js, podría ser su archivo layout.js raíz. Esto garantiza que la grabación de sesiones comience de inmediato y capture toda la experiencia del usuario.
npm install @hyperdx/browser
import HyperDX from '@hyperdx/browser';
HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // omitir para Managed ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
yarn add @hyperdx/browser
import HyperDX from '@hyperdx/browser';
HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // omitir para Managed ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
Para las aplicaciones que no usan un empaquetador, incluya el SDK directamente mediante una etiqueta script. Esto expone la variable global HyperDX, que puede usarse igual que el paquete de NPM.<script src="https://unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>
<script>
window.HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // omitir para Managed ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
</script>
La opción tracePropagationTargets es clave para conectar las reproducciones de sesiones con las trazas del backend: configúrela con el dominio de su API para habilitar la trazabilidad distribuida completa del frontend al backend. Para ver la lista completa de opciones del SDK, incluidos los controles de privacidad, las acciones personalizadas, los error boundaries de React y los source maps, consulte la referencia del SDK para navegador. Ver reproducciones de sesiones
tracePropagationTargets vincula los spans del navegador con los spans del servidor mediante el encabezado traceparent, creando una traza distribuida conectada desde el clic del usuario hasta la base de datos. Para ver un recorrido detallado de cómo funciona esto en la práctica, incluida la instrumentación tanto del frontend como del backend, consulta Instrumenting your NextJS application with OpenTelemetry and ClickStack.
La correlación también funciona en sentido inverso. Al ver una traza en la vista de Búsqueda, haz clic en ella para abrir los detalles de la traza y luego selecciona la pestaña Reproducción de sesiones para ver exactamente lo que estaba experimentando el usuario en el momento de esa traza. Esto resulta especialmente útil al investigar errores o solicitudes lentas: puedes partir del problema en el backend y ver de inmediato la perspectiva del usuario.
Cómo se almacenan los datos de sesión
hyperdx_sessions de ClickHouse, independiente de los logs y las trazas. Cada evento de sesión es una fila con un campo Body que contiene el payload del evento y un mapa LogAttributes que almacena los metadatos del evento. En conjunto, las columnas Body y LogAttributes contienen los detalles de los eventos de sesión propiamente dichos que se utilizan para reconstruir la reproducción.
Para consultar toda la información sobre el esquema de la tabla, consulta Tablas y esquemas usados por ClickStack.
Hay dos formas de ver cómo funciona la reproducción de sesiones:
