Eduardo Mitkus for uMov.me

Posted on Oct 21

Monitoramento de aplicações frontend com RUM.js e Kibana

#vue #frontend #rumjs #kibana

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)_

DEV Community