O que aprendi sobre Monitoramento de Aplicações Front-End nos últimos meses.
Tags: webdev, monitoring, javascript, devops
Published: 2024-06-30 21:32:44

Acredito que todo Programador Front-End já se deparou com algum bug reportado pelo cliente e teve dificuldades para tentar reproduzir.
- O usuário não conseguiu baixar uma planilha. 
- A tela de detalhes de pedido ficou em branco. 
- O botão de adicionar ao carrinho não funcionou como deveria. 
- O carregamento da página está muito lento.

Bugs e issues são coisas comuns no dia a dia de qualquer Engenheiro de Software e identificar e diagnosticar esses problemas rapidamente, ou até mesmo antes de um ticket ser aberto é algo crucial.

O monitoramento da performance e da saúde da aplicação junto com o uso de ferramentas de logs facilitam muito no diagnóstico de issues de performance, erros e outros problemas que impactam a experiência do usuário. Pensando nisso, vou deixar algumas dicas e boas práticas baseadas na minha experiência e no Livro [BUILDING LARGE SCALES WEB APPS](https://largeapps.dev/).

## Use uma solução centralizada de Logs

Usar uma ferramenta centralizada de logs ajuda a coletar e armazenar logs de várias partes da sua aplicação. Isso vai facilitar a pesquisa e a análise dos logs, o que é essencial para as depurações e monitoramento da sua aplicação. Existem várias ferramentas populares hoje no mercado, incluindo o [Splunk](https://www.splunk.com/), [Datadog](https://www.datadoghq.com/) e [Sentry](https://sentry.io/welcome/). Usarei o **Datadog** para alguns exemplos a seguir.

## Faça o upload dos Source Maps

De forma resumida, aplicações modernas feitas em **Angular**, **Next** ou qualquer outra ferramenta moderna passam por um processo de build, que serve basicamente para transformar o código que você desenvolveu utilizando uma dessas Frameworks para um código que o browser consegue interpretar, além de outros processos como **minificação** de arquivos, **otimização** de assets e agrupamento (**Bundling**) da aplicação. Durante o processo de build, também é possível gerar os [Sources Maps](https://web.dev/articles/source-maps?hl=pt-br), que são arquivos que mapeiam o código fonte original para o código transpilado, minificado ou agrupado que está sendo executado no navegador. É possível fazer o [upload dos sources maps](https://docs.datadoghq.com/real_user_monitoring/guide/upload-javascript-source-maps/?tab=webpackjs) para ferramentas de monitoramento com o intuito de desofuscar diferentes [stack traces](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack) em erros. Para qualquer tipo de erro, você pode acessar o caminho do arquivo, o número da linha e o snippet do código onde o erro aconteceu. 

## Inclua contextos nos seus logs

Suponha  que você esteja monitorando um [SaaS](https://blog.rocketseat.com.br/desenvolvimento-de-saas-conceito-e-exemplos-de-softwares/). que é dividido entre várias organizações e quer encontrar um log para uma determinada organização. Se nos seus logs não foram incluídos nenhuma informação relacionada a organização, você vai provavelmente tentar aplicar filtros de horários para tentar encontrar o problema mais rapidamente, porém esse processo pode ainda continuar sendo bastante custoso. [Contextos](https://docs.datadoghq.com/logs/log_collection/javascript/#usage) servem para incluir mais informações nos seus logs, como por exemplo o **ID da organização**, **ID do usuário**, **versão da aplicação**, entre outras informações que sejam relevantes para o seu contexto. Isso vai ajudar a encontrar a raiz do problema muito mais rápido, pois vai ser possível filtrar os logs pelos atributos que foram adicionados no contexto. Apenas tenha em mente considerações de privacidade e segurança nas informações contidas no contexto

## Por último, monitore seus logs

Monitorar seus logs em tempo real podem ajudar  a encontrar problemas rapidamente antes que eles tenham um impacto significativo na experiência do usuário. Isso inclui também a criação de **alertas** para comportamentos não esperados no uso da sua aplicação e análise da **performance** da aplicação quando uma nova release for feita.