Introdução a Observabilidade Front-End
Observabilidade Front-End (Front-End Observability ou Front-End O11y) é um assunto que ao longo do tempo tem ganhado cada vez mais espaço dentro do ciclo de desenvolvimento de aplicações web.
E por isso, neste post, quero introduzir você a esse tema com base nos meus aprendizados até aqui, pois acredito que precisamos começar a debater mais sobre isso para entender melhor o que esse campo de trabalho no contexto do Front-End tem a nos oferecer.
Dito isso, bora pro conteúdo…
Mas calma… O que é Observabilidade?
Conceitualmente, em desenvolvimento de software, Observabilidade (Observability ou O11y) são processos que permitem determinar quão confiáveis estão as funcionalidades de uma aplicação ou sistema baseado nos estados (dados) produzidos por essa mesma aplicação ou sistema.
Mas o que são esses estados de uma aplicação que estamos falando?
São fontes de informações telemétricas que, no contexto de Observabilidade, a indústria comumente os define como os Pilares da Observabilidade (Pillars of Observability).
Os três pilares da Observabilidade
Atualmente, Observabilidade possui três pilares fundamentais, conhecidos como Metrics, Logs e Distributed Traces (ou somente Traces).
Existem discussões e soluções de mercado que abordam até mais pilares e variações dos três pilares fundamentais l, porém os principais, e ponto de partida para qualquer introdução do tema Observabilidade, são esses três que mencionei.
E para evitar confundir as coisas para você, ao invés de dar uma definição geral (ou seja, fora do contexto Front-End) de cada um desses pilares, mais adiante no post irei conceituar eles no contexto do desenvolvimento Front-End a fim de dar mais objetividade ao que quero falar neste post.
De todo modo, se quiser ver definições gerais, basta consultar a seção no fim do post com mais referências.
E antes de encerrarmos esse tópico, quero destacar que, independente do contexto de desenvolvimento, somente obter e exibir em algum lugar os estados de uma aplicação a fim de torná-la observável, por si só, não define o que é e nem garante Observabilidade.
Observabilidade é sobre dar coesão aos estados das aplicações para determinar quão confiáveis estão as funcionalidades da mesma.
Observabilidade vs. monitoramento
Talvez você nem saiba que esse dilema existe, mas sim, ele existe, e como parte da proposta deste post é oferecer um panorama inicial sobre o que é (e por consequência, o que não é) Observabilidade, é importante saber distinguir a diferença entre Observabilidade e Monitoramento (Monitoring) desde já. Deste modo, por definição:
- Monitoramento: É a coleta e análise de dados de uma aplicação visando comparar essas informações com padrões preestabelecidos pela organização ou pela indústria a fim de identificar cenários anômalos, ou baseados em algum modelo estratégico institucional.
- Observabilidade: É um processo que permite compreender e gerenciar uma aplicação, e que não envolve somente a coleta e análise de dados de uma aplicação, mas também o desenvolvimento de um completo entendimento sobre como uma aplicação se comporta em diferentes níveis de complexidade, e principalmente, como estes níveis de complexidade em uma mesma aplicação interagem entre si.
Portanto, Observabilidade é um processo para entendermos uma aplicação, e Monitoramento é somente um dos recursos utilizados para se alcançar Observabilidade em uma aplicação.
Bacana… Mas, por que Observabilidade é importante?
Confiabilidade (Reliability) é um objetivo diretamente conectado com as definições de qualidade de qualquer aplicação, e não à toa, 87% das organizações estão contratando pessoas que exclusivamente trabalham para garantir isso, e é no foco desse objetivo que o processo de Observabilidade é usado para oferecer direções estruturadas que visam tornar as aplicações cada vez mais confiáveis.
Portanto, adotar esse tipo de processo permite que uma organização, no contexto de desenvolvimento de uma aplicação, ofereça um melhor suporte aos agentes interessados (stakeholders) no sucesso da aplicação, para que assim, a aplicação possa atingir os níveis esperados de confiabilidade e qualidade que os usuários esperam. Observabilidade se torna importante por oferecer benefícios como:
- Melhor Visibilidade: Observabilidade permite que times possam identificar e agir agilmente sobre mudanças no estado de um sistema ou aplicação independente dos seus níveis de envolvimento e conhecimento.
- Melhor Comunicação: Observabilidade permite criar notificações para que mudanças anormais ou estratégicas no estado de uma aplicação sejam recebidas por quem precisa recebê-las.
- Melhor Fluxo de trabalho: Observabilidade permite monitorar uma aplicação de ponta-a-ponta, e não somente suas camadas de forma isoladas, possibilitando que situações anormais ou estratégicas sejam agilmente investigadas.
- Mais autonomia e velocidade de desenvolvimento: Observabilidade permite tomar decisões com base em dados, reduzindo assim em muitos casos o escopo de recursos para que uma decisão seja tomada, e assim, tornando os processos de desenvolvimento mais rápidos.
E quem são os agentes interessados (stakeholders) em Observabilidade numa organização?
Bom, eu poderia resumir dizendo que toda entidade numa organização deveria ser direta ou indiretamente interessada em Observabilidade, porém, gostaria de destacar algumas entidades organizacionais a fim de dar direção sobre isso.
Times
Observabilidade permite que times possam ter uma visão compartilhada e compreensão macro da aplicação, o que acaba por reduzir as dificuldades em se identificar e endereçar comportamentos anômalos ou oportunidades de melhorias.
Gestores
Observabilidade garante que Gestores possam planejar e definir mudanças estratégicas na aplicação sem se preocupar com em comprometer a estabilidade da mesma.
Software Engineers
Observabilidade permite que Software Engineers, independente do seu papel, possam entender a arquitetura da aplicação de ponta-a-ponta, tornando várias camadas de desenvolvimento mais ágeis, escaláveis, estratégicas e consistentes. E é justamente nesse contexto que vamos seguir adiante para o tópico principal desse post, que é realçar onde e como Observabilidade beneficia o Desenvolvimento Front-End.
Observabilidade Front-End
Por definição, Observabilidade Front-End foca na coleta de dados que permitem compreender a integridade de uma aplicação na ótica do usuário final.
Porém, infelizmente, a atual indústria ainda falha em tratar o tema com a seriedade devida. Há pouco debate relevante no meio Front-End sobre o tema, apesar de que nos últimos anos isso tenha melhorado significativamente, mas a verdade é que o suporte ainda é imaturo quando comparado ao mesmo cenário de problema do lado do Back-End e Infraestrutura.
E foi exatamente esse o motivo que me faz escrever esse post, pois com ele pretendo oferecer um ponto de partida para que vocês possam começar a explorar, compartilhar, e eventualmente, desenvolver esse assunto na comunidade e/ou nos projetos que estejam envolvidos.
Afinal, no desenvolvimento Front-End, enfrentamos desafios tão complexos quanto qualquer outra área da engenheira de software, e por isso, eventualmente necessitamos também ser incluídos nas melhores práticas para desenvolvimento de software.
Dito isso, vamos então agora conhecer os Três Pilares da Observabilidade no contexto Front-End.
Três Pilares da Observabilidade no Front-End
Métricas (Metrics)
Métricas, dentro do contexto Front-End, fornecem uma visão quantitativa da aplicação sobre desempenho, segurança, e até mesmo comportamento da aplicação como, por exemplo, tempos de carregamento de página, latência média de chamadas de API, contagem de erros de JavaScript, taxas de conversão, entre outros.
Web Vitals como First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) entre outras métricas, fornecem direções sobre a experiência do usuário ao carregar e interagir com uma aplicação em relação à usabilidade e estabilidade.
No aspecto segurança, métricas que registram tentativas de acessos mal-intencionados, violações de políticas de segurança de conteúdo (CSP) ou outras atividades suspeitas podem ajudar equipes a identificar, mapear tendências e traçar planos contra ameaças.
Por fim, quanto mais métricas você conseguir coletar, e mais significado você atribuir a elas no contexto da sua aplicação, e principalmente em conjunto com outros pilares, melhor será a sua adesão à Observabilidade Front-End.
Logs
No contexto Front-End, em geral, Logs são mensagens ou erros de console gerados pelo JavaScript, ou evocados por outros processos do lado do cliente, que por sua vez, são úteis para que desenvolvedores possam identificar erros de código, problemas de compatibilidade, falhas em chamadas de API, eventos acionados entre outros cenários.
Logs estão sendo cada vez mais utilizados para ajudar na identificação de recorrência de problemas e debugging por meio de abordagens como Real User Monitoring (RUM), que por sua vez, foca o monitoramento na coleta de dados a partir da experiência real dos usuários, ao invés de focar somente em dados gerados por meio de testes sintéticos em ambientes isolados ou simulados.
Rastreamento (Traces ou Tracing)
Traces no Front-End possibilitam que desenvolvedores tenham a compreensão completa de jornadas do usuário e/ou da própria aplicação.
Existem diversas abordagens específicas para Tracing, que podem ou não envolver outros tipos de pilares de Observabilidade como, por exemplo, rastrear, capturar e analisar a profundidade que alguma ação do usuário acarretou dentro da aplicação ao combinar uma janela de tempo com Logs de Exceções e/ou Logs de Eventos.
Usando soluções de tracing específicas, é possível até mesmo gravar e reproduzir sessões de usuário inteiras, capturando cliques, funções e chamadas internas, movimentos de mouse, navegação entre páginas, entre outras interações com a página em tempo real para que assim, equipes de desenvolvimento vejam exatamente como os usuários interagem com a aplicação, identificando problemas de UX, bugs ou outras áreas de preocupação.
Outra abordagem de uso de Traces é por meio de soluções da coleta de dados de Profiling, que permitem, por exemplo, rastrear a utilização da CPU, da memória, do fluxo de execução do JavaScript, entre outros tipos de informações geradas numa determinada jornada de uso da aplicação, para que esse conjunto de dados possam servir como fontes de consulta quando necessário identificar oportunidades de otimizações na aplicação com um todo, como em animações, na reatividade da página, entre outras possibilidades.
Ferramentas de Observabilidade Front-End
E agora que você sabe alguns dos principais tipos de dados telemétricos que você pode coletar numa aplicação Front-End, é importante realizar estudos sobre a necessidade de cada um deles dentro do contexto das suas aplicações, a fim de compreendê-la melhor, e principalmente, garantir integridade da experiência de seus usuários.
Para tal tarefa, entram as ferramentas, que por sua vez, abstraem as altas complexidades de instrumentação para quando você de fato quer tornar uma aplicação Front-End observável, e não confiar apenas no `console.log` :)
Dito isso, a seguir, apontarei algumas ferramentas que tenho conhecimento, porém é importante entender que a escolha dentre elas (ou outras não mencionadas) DEVE ser sempre baseado no seu contexto, no seu orçamento, e nas funcionalidades que cada uma oferece para os objetivos que você quer alcançar.
Vale destacar que nem todas as ferramentas abaixo oferecem suporte completo a Observabilidade Front-End. Em alguns casos, são ferramentas que seguem direções mais opinativas e independentes da indústria, criando novas interpretações dos fundamentos da Observabilidade.
Sendo assim, tome as sugestões abaixo apenas como pontos de partida. Uma análise aprofundada, inteligente e estratégica é necessária para ver se somente uma ferramenta lhe atenderá ou se você precisará complementar com alguma outra ou alguma plataforma de Observabilidade.
Grafana Faro Web SDK
Criado pela Grafana Labs Grafana Faro Web SDK é uma solução open source que entrega um SDK simples de usar, altamente configurável e poderoso.
Com apenas 2 linhas de código é possível começar a monitorar o desempenho da aplicação através da captura de métricas Web Vitals, coletar logs, rastrear erros, capturar sessões e eventos de usuário, e muito mais.
Outro grande diferencial do Grafana Faro é sua integração com a plataforma de Observabilidade da Grafana Labs, que uma vez adotada, permite que você aplique Observabilidade de ponta-a-ponta, ou seja, em todas as camadas da sua aplicação.
Sentry
Sentry é uma plataforma de monitoramento focada na captura de erros e desempenho de aplicações.
Dentre os principais diferenciais do Sentry está sua alta capacidade de integração com recursos complementares como, por exemplo, o Session Replay. Outro diferencial é o amplo suporte a diferentes tipos plataformas, além do próprio Front-End.
Datadog RUM
Datadog RUM permite que times de Front-End monitorem a experiência do usuário final em tempo real, capturando métricas como latência, erros de JavaScript e muito mais.
Datadog RUM oferece alta integração com o ecossistema da plataforma de Observabilidade da Datadog, o que torna ele uma ótima escolha caso sua stack seja baseado nessa empresa.
FullStory
FullStory é uma revolucionária abordagem sobre como registrar sessões de usuários em tempo real.
Com essa ferramenta é possível monitorar exatamente como os usuários interagem com sua aplicação, identificando pontos de atrito, erros de fluxo e oportunidades de melhoria.
Mais do que somente métricas, FullStory oferece uma narrativa visual e interativa da jornada do usuário, facilitando entender e otimizar a experiência do usuário final.
New Relic Browser
O New Relic Browser fornece detalhes sobre o desempenho da aplicação, erros de JavaScript, e interações do usuário.
Como no Grafana Faro e no Datadog RUM, a principal vantagem do New Relic Browser é a fácil integração com a plataforma de Observabilidade da New Relic, que também provê soluções de Observabilidade ponta-a-ponta para aplicações.
Honeycomb
Honeycomb é uma ferramenta de Observabilidade focada em ajudar equipes a entender e depurar softwares complexos por meio de dados relativos a como o código está sendo executado, onde os gargalos dele estão ocorrendo e/ou como melhorar a aplicação em termos de eficiência.
RudderStack
RudderStack é uma ferramenta de Observabilidade direcionado a ser um Customer Data Platform (CDP) que pode ser utilizada para coletar diferentes tipos dados de diferentes tipos de plataformas, até mesmo dispositivos de IoT.
O maior diferencial do RudderStack pra mim é que, por meio de uma gama enorme de integrações com outras ferramentas, ele permite encaminhar os dados coletados para diferentes destinações, como data warehouses, data lakes, plataformas de Observabilidade como algumas que mencionei no post, e plataformas de BI.
OpenTelemetry.js
OpenTelemetry é um framework de Observabilidade mantido pela Cloud Native Computing Foundation (CNCF) cuja proposta é estabelecer um padrão para criação e gestão de dados telemétricos.
OpenTelemetry é open source e uma organização independente, o que significa que ele pode ser usado e/ou suportado por qualquer ferramenta do mercado, sendo inclusive utilizados e suportado pela maioria das ferramentas que citei até aqui.
Sua SDK em JavaScript chama-se OpenTelemetry.js, e diferente de outras soluções que segmentam métricas, logs e traces em diferentes ferramentas ou interfaces, OpenTelemetry.js oferece uma abordagem unificada, garantindo que você tenha uma visão coesa de todo o sistema que o utiliza.
Mesmo que você escolha outra ferramenta, OpenTelemetry é uma ferramenta que você precisa dar atenção se quer adentrar no mundo da Observabilidade. Porém, por hora, não vou me aprofundar no seu uso ou detalhes técnicos, mas prometo que futuramente farei um artigo detalhado sobre o OpenTelemtry.js, onde vou mostrar na prática como usá-lo.
Mas pessoal, agora que conhecemos algumas das ferramentas que podem ajudar a adotar Observabilidade Front-End na sua aplicação, fica claro que, apesar de ainda em ascensão, existe sim um ecossistema aquecido e sólido suportando o tema, sendo assim, agora cabe a você adotar esse processo nos seus projetos, ou melhor, cabe a você criar uma cultura de Observabilidade na sua organização.
Criando uma cultura de Observabilidade
Bom, para darmos direção a isso, é importante entender que, primeiro, Observabilidade é para todos, não apenas para o time de SRE ou de Front-End ou de Back-End ou Infra, e segundo, para se ter uma aplicação observável, é preciso ter uma aplicação feita para ser observável.
Dito isso, geralmente, para tornar uma aplicação Front-End observável, começamos atacando quatro aspectos principais do problema, que são:
Instrumentação
Se sua aplicação ainda não coleta nenhuma métrica, principalmente as que mencionei no decorrer do post, deveria começar a partir de agora a coletar.
E para resolver isso, você pode comprar, criar e até utilizar software open source, mas o fato é que, você precisará de, invariavelmente, utilizar instrumentos que te permitam coletar, rastrear, e mensurar o máximo de dados gerados a partir de sua aplicação ou interações dos seus usuários com a aplicação.
Correlação de Dados
De nada adianta uma montanha de dados, se os mesmos não são processados e correlacionados para criar contexto baseado nas necessidades e objetivos da sua aplicação, que por sua vez, permitirão a visualização e manipulação de tais dados para fins exploratórios como, por exemplo, visualizações de dados por meio de gráficos de séries temporais (time series).
É fundamental, no momento em que se decide instrumentar uma determinada coleta de dados, que se desenhe um entendimento específico do que aquele dado, dentro do contexto da aplicação, representará para a organização.
Estratégia para Resposta a Incidentes
Esse é sem dúvidas outro tópico que irei trazer aqui no blog futuramente, pois existem diversas maneiras e estratégias para que isso seja feito de forma correta, mas por hora, é importante entender que, por definição, resposta a incidentes é um fator essencial para que em uma aplicação observável, seja possível que os stakeholders saibam como agir e o que fazer na ocorrência de situações anômalas ou estratégicas.
Soluções de inteligência artificial para Observabilidade (AIOps)
Inteligência artificial não é hype ou experimento no mundo da Observabilidade, é solução prática, e já faz tempo.
Eu mesmo já estive envolvido em projetos que envolviam esse campo, e é realmente fascinante o impacto que pode ser gerado quando esse tipo de técnica é bem utilizada.
Desse modo, soluções AIOps surgem como uma "amarração” para os aspectos anteriores que por natureza, eventualmente, fazem surgir “problemas bons” dentro do contexto de observação como, por exemplo, priorização, correlação e agregação de altos volumes de dados coletados pelos instrumentos, que por sua vez, aumentam o volume de incidentes, que por sua vez, demandam novas estratégias de resposta a incidentes.
Com soluções AIOps, através de aprendizado de máquina é possível eliminar alertas falso-positivos de anomalias, proativamente detectar problemas na aplicação, acelerar o tempo de resolução de problemas (MTTR), entre outras coisas que somente a criatividade e a necessidade precisar.
Dito isso, você tem agora uma estratégia, para não só começar ou melhorar a cultura Observabilidade Front-End adotada na sua aplicação, mas também sobre Observabilidade por princípio. E como qualquer regra tem exceções, esses são apenas quatro aspectos fundamentais a se considerar ao estabelecer uma cultura de Observabilidade, mas existem mais como, por exemplo, Service-Level Objectives, mas esse também é outro assunto que futuramente abordarei aqui no blog.
Conclusão
Bom, espero que tenham gostado do conteúdo como eu gostei de escrevê-lo, sem dúvida alguma, faltou muuuuuita coisa para incluir e desenvolver, mas por hora, focando numa introdução ao tema, acredito ter contemplado tudo o que eu queria.
Aliás, eu mencionei no post já, mas relembrando, para conteúdos complementares, não deixe de conferir as referências abaixo, realmente tem muita coisa boa lá.
E agora sim para concluir, quero que saibam que daqui para frente pretendo escrever mais vezes sobre Observabilidade aqui no blog, pois esse assunto por si só é fascinante, mas também porque como eu disse no começo, sinto que ele é de extrema importância no contexto atual de desenvolvimento de software, principalmente considerando a complexidade das aplicações e sistemas que estamos lidando nos últimos anos no contexto Front-End.
Outra motivação que me faz querer explorar e escrever ainda mais sobre Observabilidade, é que esse ainda é um tema inexplicavelmente muito pouco explorado e aderido pela comunidade Front-End.
Mas minha esperança é que, depois desse post, e uma enxurrada de informações para vocês processarem, vamos começar a mudar isso, não é? ;)