La relecture de session dans ClickStack capture et reconstitue les interactions des utilisateurs dans votre application web, ce qui vous permet de rejouer visuellement exactement ce qu’un utilisateur a vu et fait pendant sa session. Plutôt qu’un enregistrement vidéo, le SDK enregistre les modifications du DOM, les mouvements de souris, les clics, les défilements, les saisies au clavier, les console logs, les requêtes réseau (XHR, Fetch, WebSocket) et les exceptions JavaScript — puis reconstitue l’expérience dans le navigateur.
Comme les relectures de session sont stockés dans ClickHouse aux côtés de vos logs, traces et métriques, vous pouvez passer du visionnage de l’expérience d’un utilisateur à l’inspection des traces backend et des requêtes de base de données qui l’ont alimentée — le tout en quelques clics. La relecture de session est donc utile pour le debugging des problèmes de production, comprendre le comportement des utilisateurs, identifier les points de friction UX et confirmer visuellement les problèmes signalés au support.
Instrumenter votre application
@hyperdx/browser), qui étend le SDK OpenTelemetry avec l’enregistrement de session, la capture de la console et la capture des requêtes réseau. Si vous avez seulement besoin de traces, sans relecture de session, n’importe quel SDK navigateur compatible OTel fonctionnera avec ClickStack.
Les exemples ci-dessous utilisent le Browser SDK de ClickStack. Ajouter la relecture de session à votre application ne prend que trois étapes : installer le paquet, initialiser le SDK, puis toutes les interactions utilisateur sont capturées automatiquement — aucune autre modification du code n’est nécessaire.
Initialisez le SDK à un emplacement dont le chargement est garanti au démarrage de votre application. Par exemple, dans une application Next.js, il peut s’agir de votre layout.js racine. Cela garantit que l’enregistrement de session commence immédiatement et capture l’intégralité de l’expérience utilisateur.
NPM
Yarn
Balise de script
npm install @hyperdx/browser
import HyperDX from '@hyperdx/browser';
HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // omettre pour 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', // omettre pour Managed ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
Pour les applications qui n’utilisent pas de bundler, incluez directement le SDK via une balise de script. La variable globale HyperDX est alors exposée et peut être utilisée de la même manière que le paquet 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', // omettre pour Managed ClickStack
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
</script>
L’option tracePropagationTargets est essentielle pour relier les relectures de session aux traces backend — définissez-la sur votre domaine API pour activer un traçage distribué complet du frontend au backend. Pour obtenir la liste complète des options du SDK, y compris les contrôles de confidentialité, les actions personnalisées, les limites d’erreur React et les source maps, consultez la référence du Browser SDK. Visualisation des relectures de session
tracePropagationTargets relie les spans du navigateur aux spans du server via l’en-tête traceparent, créant ainsi une trace distribuée continue depuis le clic de l’utilisateur jusqu’à la base de données. Pour une présentation détaillée de sa mise en œuvre, y compris l’instrumentation du frontend et du backend, consultez Instrumenter votre application NextJS avec OpenTelemetry et ClickStack.
La corrélation fonctionne aussi dans l’autre sens. Lorsque vous consultez une trace dans la vue Search, cliquez dessus pour ouvrir son détail, puis sélectionnez l’onglet Relecture de session pour voir exactement ce que l’utilisateur faisait au moment de cette trace. C’est particulièrement utile pour analyser des erreurs ou des requêtes lentes : vous pouvez partir d’un problème backend et voir immédiatement le point de vue de l’utilisateur.
Les données de relecture de session sont stockées dans une table dédiée hyperdx_sessions dans ClickHouse, distincte des logs et des traces. Chaque événement de session correspond à une ligne, avec un champ Body contenant la charge utile de l’événement et une map LogAttributes qui stocke les métadonnées de l’événement. Les colonnes Body et LogAttributes contiennent ensemble les détails des événements de session utilisés pour reconstituer la relecture.
Pour des informations complètes sur le schéma de la table, consultez Tables et schémas utilisés par ClickStack.
Il existe deux façons de voir la relecture de session en action :
- Démo relecture de session — application de démonstration locale interactive avec des instructions pas à pas
- Référence du Browser SDK — toutes les options du SDK, les source maps, les custom actions et la configuration avancée
- Search — syntaxe de recherche pour filtrer les sessions et les événements
- Dashboards — créez des visualisations et des tableaux de bord à partir des données de session et de trace
- Alerts — configurez des alertes sur les erreurs, la latence et d’autres signaux
- Architecture de ClickStack — comment ClickHouse, HyperDX et l’OTel collector s’articulent
