This content originally appeared on DEV Community and was authored by Pedro Soares
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.
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, Datadog e Sentry. 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, 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 para ferramentas de monitoramento com o intuito de desofuscar diferentes stack traces 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. 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 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.
This content originally appeared on DEV Community and was authored by Pedro Soares
Pedro Soares | Sciencx (2024-06-30T21:32:44+00:00) O que aprendi sobre Monitoramento de Aplicações Front-End nos últimos meses.. Retrieved from https://www.scien.cx/2024/06/30/o-que-aprendi-sobre-monitoramento-de-aplicacoes-front-end-nos-ultimos-meses-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.