Clone o repositório
Clone o [HackerNews Analyzer](https://github.com/ClickHouse/hn-news-analyzer), instale as dependências e copie o modelo de arquivo de ambiente: ```bash theme={null} git clone https://github.com/ClickHouse/hn-news-analyzer.git cd hn-news-analyzer npm install cp .env.example .env ``` Você preencherá o `.env` nas próximas etapas e, em seguida, instrumentará a aplicação a partir deste diretório.Instrumente a aplicação
Neste ponto, o aplicativo está em execução, mas ainda não está instrumentado. O ClickStack não exibe dados: está aguardando telemetria.
Instale o SDK do Node
```bash theme={null} npm install @hyperdx/node-opentelemetry ```Habilite o wrapper em run.sh
No final de `run.sh`, há duas linhas `exec`. Comente a linha simples de `node` e descomente a instrumentada: ```diff theme={null} # ANTES: node simples, sem instrumentação: -exec node scripts/entrypoint.js +# exec node scripts/entrypoint.js # DEPOIS: mesmo código-fonte, envolvido por opentelemetry-instrument: -# exec npx opentelemetry-instrument scripts/entrypoint.js +exec npx opentelemetry-instrument scripts/entrypoint.js ``` Continue iniciando por `scripts/entrypoint.js`. Esse shim chama `require('console')`, permitindo que a captura do console envolva `console.log`. Apontar `opentelemetry-instrument` diretamente para `dist/server/index.js` envia traces, mas descarta os logs silenciosamente.Habilite o SDK do navegador
```bash theme={null} npm install @hyperdx/browser ``` Em `src/web/telemetry.ts`, descomente a importação, o bloco `HyperDX.init({...})` e `HyperDX.addAction` em `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__` e `__OTLP_AUTH_TOKEN__` são constantes de tempo de compilação injetadas por `vite.config.ts` a partir dos mesmos valores `OTEL_EXPORTER_OTLP_*` usados pelo backend.
2. Clique em uma solicitação e percorra o trace até a origem. Você verá o span do handler do Express, um span HTTP filho apontando para `sql-clickhouse.clickhouse.com` com duração real de rede e registros `console.log` correlacionados no mesmo trace.
3. Abra **Reprodução de sessão** para reproduzir um vídeo de uma sessão do navegador que permite avançar e retroceder, sincronizado com a linha do tempo do trace.
Logs, métricas, traces e reproduções de sessão são exibidos na mesma UI, compartilham a mesma linguagem de consulta e são correlacionados automaticamente.