This content originally appeared on DEV Community and was authored by Eduardo Mitkus
Monitorar aplicações de página única (SPAs) é um desafio comum no desenvolvimento frontend moderno.
Em ambientes de produção, é difícil compreender de forma precisa como os usuários estão realmente experimentando a aplicação, especialmente porque as ferramentas de auditoria locais, como Lighthouse ou DevTools, refletem apenas cenários simulados.
Para obter uma visão real da comportamento do usuário final, é possível utilizar uma combinação de ferramentas voltadas para observabilidade no frontend: RUM.js, Elastic APM e Kibana.
Estes juntos tornam possivel coletar, processar e visualizar métricas diretamente do Browser.
O que é o RUM (Real User Monitoring)
RUM é a coleta de métricas reais de uso diretamente do navegador do usuário e mede o que acontece em produção: dispositivos, redes, rotas e interações reais.
Quando o RUM está ativo e integrado ao APM, o Kibana mostra diferentes tipos de transações, que representam o que está acontecendo no app.
Principais tipos:
page-load: mede o tempo de carregamento inicial da página ou rota. Ideal para avaliar a experiência do primeiro acesso.
http-request: monitora chamadas de rede (APIs, fetch, Axios, etc.), exibindo latência, status e falhas.
user-interaction: representa ações do usuário, como cliques ou interações que disparam renderizações parciais.
authentication: rastreia o processo de login e autenticação, útil para detectar lentidão em fluxos críticos.
Além desses, o Kibana também pode exibir outras categorias, como route-change, resource e error, dependendo do comportamento da aplicação.
APM
O Elastic APM é quem recebe e organiza os dados enviados pelo RUM.
Ele deixa tudo no formato certo pra o Kibana conseguir montar gráficos, relatórios e filtros.
Em resumo, ele faz a ponte entre o navegador e o banco de dados.
Kibana
O Kibana é a parte visual onde é possível ver:
- Transações: cada tipo de evento capturado
- Comparações: dá pra comparar períodos (ex.: “hoje vs ontem”) e ver se a performance melhorou ou piorou.
- Filtros: é possível filtrar por ambiente, versão do app, tipo de dispositivo ou navegador.
- Criação e Configuração de Dashboards e Views.
Envio dos dados pro Elastic APM
O RUM coleta os dados no navegador e envia pro APM, que armazena e organiza tudo.
O fluxo é simples: Navegador (RUM.js) → APM Server → Elasticsearch → Kibana
Exemplo:
// monitoring/rum.js
import { init as initRUM } from '@elastic/apm-rum'
export const startRUM = () => {
const apm = initRUM({
serviceName: "my-app",
serverUrl: "<seu_apm_server_url>",
environment: "development",
})
apm.setInitialPageLoadName('App Loaded')
return apm
}
Visualização do RUM no Kibana
Após configurar o RUM, as métricas começam a aparecer no Kibana, dentro de APM → Services.
É possível ver as transações do frontend, como page-load, http-request e longtask, e acompanhar o tempo de execução de cada etapa do carregamento.
A imagem abaixo mostra exatamente quanto tempo cada parte da aplicação levou, desde o carregamento inicial até requisições de rede, scripts e interações do usuário.
Captura de casos reais
Além das métricas automáticas, é possível enriquecer os dados enviados pro APM adicionando labels personalizadas.
try {
await fetch('/api/login')
} catch (err) {
apm.captureError(err)
}
Labels permitem acompanhar casos reais com mais precisão.
Por exemplo, entender se uma lentidão ocorre em um módulo específico ou para um tipo de usuário:
apm.addLabels({
module: 'checkout',
user_plan: 'premium'
})
Considerações finais
Monitorar o frontend com RUM.js, Elastic APM e Kibana é uma forma simples e eficaz de entender o que realmente acontece em produção.
Com poucos ajustes, é possível sair de uma visão genérica de “está lento” para identificar qual rota, qual usuário e em que contexto o problema aparece.
Essas ferramentas não servem só pra medir performance, mas pra enxergar a experiência do usuário como ela é de verdade.
_Foto do Artigo: [Elastic Observability Docs](https://www.elastic.co/pt/blog/performing-real-user-monitoring-rum-with-elastic-apm)_
This content originally appeared on DEV Community and was authored by Eduardo Mitkus
Eduardo Mitkus | Sciencx (2025-10-21T04:39:24+00:00) Monitoramento de aplicações frontend com RUM.js e Kibana. Retrieved from https://www.scien.cx/2025/10/21/monitoramento-de-aplicacoes-frontend-com-rum-js-e-kibana-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.