Highlight.io: monitoramento de aplicativos de código aberto para desenvolvedores

O sucesso nos mercados digitais atuais depende do fornecimento de uma experiência de usuário simples e integrada. Mas mesmo os aplicativos mais bem escritos e testados podem apresentar problemas, e pode ser difícil determinar a causa raiz para que esses problemas possam ser resolvidos. A observabilidade tornou-se um requisito, mas pode ser difícil relacionar os vários tipos de dados que podem ser coletados de um aplicativo em uma ferramenta coesa que possa rastrear uma interação desde o clique no botão em um navegador da Web até o log downstream.

Esse é o objetivo do Highlight.io, uma poderosa ferramenta de monitoramento de aplicativos de código aberto desenvolvida para desenvolvedores modernos. O projeto faz isso combinando a reprodução de sessão – uma tecnologia que permite aos desenvolvedores reproduzir interações do usuário e logs do lado do cliente – com ferramentas mais tradicionais de monitoramento de erros e registro.

O que é Destaque.io?

Highlight.io é uma ferramenta que ajuda os desenvolvedores a depurar e monitorar suas aplicações web de uma maneira mais coesa do que com ferramentas de monitoramento tradicionais. Dada a recente popularidade dos padrões de aplicativos “full-stack” (NextJS, Remix, etc.), os autores do projeto construíram uma plataforma de monitoramento que usa essas propriedades para fornecer aos desenvolvedores uma visão “full-stack” de todo o seu aplicativo web, permitindo que as equipes depurem com mais rapidez e detalhes do que nunca.

Quando totalmente integrado, o Highlight.io oferece aos engenheiros a capacidade de rastrear um erro desde um clique de botão até um log downstream. Suas três ofertas principais são:

• Repetição da sessão
• Monitoramento de erros
• Exploração madeireira

Abaixo está uma animação de como é a “coesão” entre essas três ofertas:

O que diferencia o destaque?

Ao contrário de outras ferramentas de monitoramento de código aberto que oferecem apenas aos engenheiros uma visão panorâmica das métricas de saúde e uso de recursos, o Highlight.io se concentra em fornecer às equipes uma visão holística de como um usuário é afetado por um problema. Considerando a crescente expectativa de experiência do usuário nas aplicações web atuais, os autores do projeto conquistaram com sucesso um nicho entre os desenvolvedores atuais.

Do ponto de vista técnico, como o Highlight emprega repetição de sessão para capturar as nuances da jornada do usuário, os engenheiros podem ter acesso a todas as interações que levam a quaisquer problemas identificados, o que facilita a depuração de problemas do usuário ou a compreensão das necessidades do cliente em relação a um inseto.

A Highlight também usa OpenTelemetry para todos os seus SDKs, que é um projeto de código aberto que facilita a captura de dados de telemetria em tempo real. Isso permite que o projeto seja extensível para que os engenheiros possam usar a instrumentação de monitoramento existente para se conectar ao Highlight.

Session Replay como ferramenta de monitoramento

A reprodução de sessão é uma tecnologia desenvolvida inicialmente para ajudar as equipes de marketing a obter insights sobre o comportamento do usuário em sites estáticos. Ao analisar esses padrões de uso, os profissionais de marketing conseguiram otimizar frases de chamariz e outros recursos importantes para melhorar o engajamento e as taxas de conversão.

Highlight.io, no entanto, encontrou um caso de uso diferente para reprodução de sessão. O projeto está usando essa tecnologia para dar aos engenheiros visibilidade sobre aplicações web mais dinâmicas, ajudando os engenheiros a descobrir os motivos pelos quais os problemas acontecem e vinculando esses dados às ferramentas tradicionais de registro e exceções.

Como funciona a repetição da sessão?

A reprodução da sessão usa a API MutationObserver para capturar e registrar alterações feitas na IU do navegador (também conhecido como modelo de objeto de documento ou DOM). O MutationObserver permite que os desenvolvedores ouçam as modificações no DOM e reajam de acordo. Aqui está um exemplo de JavaScript que instrumentará a API para registrar alterações em um destino específico.

Ao configurar um MutationObserver para observar os elementos DOM desejados, quaisquer alterações, como adições de elementos, exclusões ou modificações de atributos, podem ser detectadas e enviadas a um servidor para serem reproduzidas após o fato.

É exatamente assim que o Highlight.io funciona e, nos bastidores, a equipe do Highlight usa um projeto de código aberto chamado Rrweb como uma abstração sobre as APIs MutationObserver. Dado que o projeto Highlight é de código aberto, você pode encontrar o uso do Rrweb na lógica de gravação no GitHub.

OpenTelemetry: um conjunto simples e extensível de SDKs

Para seus SDKs do lado do servidor, a Highlight usa OpenTelemetry (OTEL), um projeto de código aberto que fornece uma estrutura e especificação para capturar dados de telemetria (métricas, rastreamentos e logs). Dado que o OTEL foi amplamente adotado entre os desenvolvedores, os engenheiros podem conectar sua instrumentação de monitoramento existente ao Highlight, em vez de instrumentar um SDK totalmente novo do zero. E se os engenheiros não tiverem uma configuração OTEL existente, eles sempre terão a opção de usar os SDKs da Highlight. Abaixo está um exemplo da aparência da instrumentação do Highlight para Golang (ou Go).

Nos bastidores, por exemplo, o SDK usa a especificação OTEL acordada para relatar erros. No geral, a integração do OpenTelemetry do Highlight reflete uma abordagem inovadora para a construção de uma solução de monitoramento extensível, permitindo que os desenvolvedores “ejetem” em uma configuração OTEL pura ou, alternativamente, usem os SDKs do Highlight para uma ótima experiência de desenvolvedor.

Como os desenvolvedores podem começar a usar o Highlight.io?

Na próxima vez que você se deparar com um problema importante de suporte ao cliente ou um bug difícil de reproduzir, Highlight.io pode ajudá-lo a se colocar no lugar de seus usuários e rastrear um problema desde um clique de botão até um log de erros downstream.

Para começar, os desenvolvedores simplesmente instalam o SDK. Assim que a instalação for concluída, o Highlight registra as sessões do usuário, erros e logs à medida que eles passam pela plataforma. Aqui está um exemplo de como é a instrumentação para reprodução de sessão e monitoramento de erros em um aplicativo NextJS.

Retirado dos documentos NextJS.

A repetição da sessão é a próxima evolução na resolução de problemas

A solução de problemas de aplicativos da Web, especialmente aqueles com grandes volumes de tráfego de usuários, costumava ser difícil. Highlight.io simplifica esse processo, facilitando a identificação de quais ações do usuário estão causando problemas e quais podem reduzir o tempo para recriar o problema e, assim, reduzir o tempo de resolução. A natureza de código aberto do Highlight (e sua integração com OpenTelemetry) significa que os desenvolvedores têm muitas opções ao personalizar a ferramenta de monitoramento de acordo com suas necessidades específicas.

O post Highlight.io: Monitoramento de aplicativos de código aberto para desenvolvedores apareceu pela primeira vez em The New Stack.