The latest articles on DEV Community by Pedro Soares (@soares_pedro). https://dev.to/soares_pedro https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1708392%2Ff3d21f61-b351-47b7-b411-5601c9e3b8ed.jpeg https://dev.to/soares_pedro en Pedro Soares Sun, 30 Jun 2024 21:32:44 +0000 https://dev.to/soares_pedro/o-que-aprendi-sobre-monitoramento-de-aplicacoes-front-end-nos-ultimos-meses-18ol https://dev.to/soares_pedro/o-que-aprendi-sobre-monitoramento-de-aplicacoes-front-end-nos-ultimos-meses-18ol <p>Acredito que todo Programador Front-End já se deparou com algum bug reportado pelo cliente e teve dificuldades para tentar reproduzir.</p> <ul> <li>O usuário não conseguiu baixar uma planilha. </li> <li>A tela de detalhes de pedido ficou em branco. </li> <li>O botão de adicionar ao carrinho não funcionou como deveria. </li> <li>O carregamento da página está muito lento.</li> </ul> <p>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.</p> <p>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 <a href="https://largeapps.dev/" rel="noopener noreferrer">BUILDING LARGE SCALES WEB APPS</a>.</p> <h2> Use uma solução centralizada de Logs </h2> <p>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 <a href="https://www.splunk.com/" rel="noopener noreferrer">Splunk</a>, <a href="https://www.datadoghq.com/" rel="noopener noreferrer">Datadog</a> e <a href="https://sentry.io/welcome/" rel="noopener noreferrer">Sentry</a>. Usarei o <strong>Datadog</strong> para alguns exemplos a seguir.</p> <h2> Faça o upload dos Source Maps </h2> <p>De forma resumida, aplicações modernas feitas em <strong>Angular</strong>, <strong>Next</strong> 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 <strong>minificação</strong> de arquivos, <strong>otimização</strong> de assets e agrupamento (<strong>Bundling</strong>) da aplicação. Durante o processo de build, também é possível gerar os <a href="https://web.dev/articles/source-maps?hl=pt-br" rel="noopener noreferrer">Sources Maps</a>, 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 <a href="https://docs.datadoghq.com/real_user_monitoring/guide/upload-javascript-source-maps/?tab=webpackjs" rel="noopener noreferrer">upload dos sources maps</a> para ferramentas de monitoramento com o intuito de desofuscar diferentes <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack" rel="noopener noreferrer">stack traces</a> 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. </p> <h2> Inclua contextos nos seus logs </h2> <p>Suponha que você esteja monitorando um <a href="https://blog.rocketseat.com.br/desenvolvimento-de-saas-conceito-e-exemplos-de-softwares/" rel="noopener noreferrer">SaaS</a>. 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. <a href="https://docs.datadoghq.com/logs/log_collection/javascript/#usage" rel="noopener noreferrer">Contextos</a> servem para incluir mais informações nos seus logs, como por exemplo o <strong>ID da organização</strong>, <strong>ID do usuário</strong>, <strong>versão da aplicação</strong>, 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</p> <h2> Por último, monitore seus logs </h2> <p>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 <strong>alertas</strong> para comportamentos não esperados no uso da sua aplicação e análise da <strong>performance</strong> da aplicação quando uma nova release for feita. </p> webdev monitoring javascript devops