Clona el repositorio
Clona [HackerNews Analyzer](https://github.com/ClickHouse/hn-news-analyzer), instala las dependencias y copia la plantilla de variables de entorno: ```bash theme={null} git clone https://github.com/ClickHouse/hn-news-analyzer.git cd hn-news-analyzer npm install cp .env.example .env ``` Completarás el archivo `.env` en los siguientes pasos y, después, instrumentarás la aplicación desde este directorio.Instrumentar la aplicación
En este punto, la aplicación está en ejecución, pero no está instrumentada. ClickStack no muestra datos: está a la espera de telemetría.
Instala el SDK de Node
```bash theme={null} npm install @hyperdx/node-opentelemetry ```Habilita el envoltorio en run.sh
Al final de `run.sh` hay dos líneas `exec`. Comenta la línea de `node` sin instrumentación y descomenta la instrumentada: ```diff theme={null} # ANTES: node sin instrumentación: -exec node scripts/entrypoint.js +# exec node scripts/entrypoint.js # DESPUÉS: mismo código fuente, envuelto por opentelemetry-instrument: -# exec npx opentelemetry-instrument scripts/entrypoint.js +exec npx opentelemetry-instrument scripts/entrypoint.js ``` Sigue iniciando la aplicación mediante `scripts/entrypoint.js`. Este shim llama a `require('console')` para que la captura de consola envuelva `console.log`. Si apuntas `opentelemetry-instrument` directamente a `dist/server/index.js`, se enviarán traces, pero los logs se descartarán silenciosamente.Habilita el SDK para navegador
```bash theme={null} npm install @hyperdx/browser ``` En `src/web/telemetry.ts`, descomenta la importación, el bloque `HyperDX.init({...})` y `HyperDX.addAction` en `recordAction()`: ```diff theme={null} -// import HyperDX from '@hyperdx/browser'; +import HyperDX from '@hyperdx/browser'; export function initTelemetry(): void { - // HyperDX.init({ - // url: __OTLP_ENDPOINT__, - // apiKey: __OTLP_AUTH_TOKEN__, - // service: 'hn-analyzer-web', - // tracePropagationTargets: [/localhost:5001/i, /\/api\//i], - // consoleCapture: true, - // advancedNetworkCapture: true, - // }); + HyperDX.init({ + url: __OTLP_ENDPOINT__, + apiKey: __OTLP_AUTH_TOKEN__, + service: 'hn-analyzer-web', + tracePropagationTargets: [/localhost:5001/i, /\/api\//i], + consoleCapture: true, + advancedNetworkCapture: true, + }); } ``` `__OTLP_ENDPOINT__` y `__OTLP_AUTH_TOKEN__` son constantes de tiempo de compilación que `vite.config.ts` inyecta a partir de los mismos valores `OTEL_EXPORTER_OTLP_*` que usa el backend.
2. Haga clic en una solicitud y recorra el trace hacia arriba. Verá el span del handler de Express, un span HTTP hijo que apunta a `sql-clickhouse.clickhouse.com` con una duración de red real y registros de `console.log` correlacionados en el mismo trace.
3. Abra **Session Replay** para reproducir un video navegable de una sesión del navegador, sincronizado con la línea de tiempo del trace.
Los logs, las métricas, los traces y las reproducciones de sesión llegan a la misma UI, comparten el mismo lenguaje de consulta y se correlacionan automáticamente.