Monitoramento e Observabilidade no Frontend

Transcript

1. Monitoramento e Observabilidade no Frontend PrograMaria Summit 2022
2. Desenvolvedora a 10 anos Graduada em Jogos Digitais Sênior Software Engineer na Creditas Apoiadora do PHPWomenBR Esposa do Valter e Mãe do Joaquim eu sou a Tais Prazer,
3. Nossa Agenda O cenário da tecnologia Observabilidade Monitoramento Pilares da Observabilidade Métricas para o frontend Ferramentas
4. da Tecnologia O cenário
5. Nossas aplicações estão cada vez mais distribuídas, dinâmicas e complexas. micro serviços, micro frontends, cloud e etc... Surgiram novos conceitos e formas de se criar sistemas
6. Como podemos saber onde foi que quebrou? micro serviço A, micro serviço B, o frontend... Quem está com lentidão? Qual a performance das minhas aplicações? Quanto tempo leva para o meu usuário ver a página?
7. Foi para responder essas questões que surgiu a Observabilidade
8. Observabilidade? O que é
9. Observabilidade é a capacidade de entender o comportamento e o estado interno das suas aplicações observando as suas saídas. O quê?, Onde? e Por quê? Reponde as perguntas
10. Monitoramento? O que é
11. Monitoramento é a forma de saber quando algo está errado a partir de um conjunto de métricas conhecidas e ele faz parte da Obsevabilidade. O quê? e Por quê? Reponde as perguntas
12. Os Pilares da Observabilidade As saídas das suas aplicações
13. Os pilares da Observabilidade (telemetria) são dados que utilizamos para reunir informações sobre as aplicações. Logs São eles: Métricas Rastreamento
14. Logs Um Log é um registro do evento que aconteceu na sua aplicação. Geralmente ele possuí data, hora e especifica onde e o que aconteceu. fonte: como escrever bons logs
15. Rastreamento (Trace) Como o nome diz, faz o rastremento de ponta a ponta de uma requisição dentro de uma arquitetura distribuída. fonte: Datadog
16. Métricas São a representação numérica de dados quantitativos que com o tempo nos permitem a analisar a ocorrência de eventos, falhas, desempenho do ambiente e performance. fonte: Cristallize frontend performance
17. no Frontend? Quais métricas monitorar
18. Mas porque eu deveria obeservar e monitorar o frontend?
19. Basicamente porque as aplicações frontend são por onde o usuário vai interagir com o seu produto/negócio
20. "Research suggests that 25% of people will abandon a website that takes longer than 4 seconds to load" Fonte: Forbs
21. A média de 50 mil sites pesquisados mostra que o tempo de rendering acontece 87% no front-end Fonte: Steve Souders
22. Por isso é de grande importância monitorar e observar o frontend. Agora vamos para quais métricas olhar.
23. Core Web Vitals Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) Conjunto de métricas anunciadas pelo Google que medem a qualidade da experiencia do usuário no seu web site:
24. Além da performance Framework-specific Problems JavaScript Errors Network Request Failures User Experience Issues como rage clicks Além de performance precisamos olhar também: image source
25. Ferramentas Observabilidade
26. Sentry Core Web Vitals Logs automáticos Stack trace Ratreamento de erros e http requests Métricas customizadas Integração com outras ferramentas Com opção gratutíta para Devs reune tanto Frontend quanto Backend permitindo um rastreamento entre as aplicações: image source
27. image source
28. LogRocket Session Replay Frontend performance monitoring Métricas customizadas Error tracking, stack trace e network requests Performance data Alerts Referência para monitoramento e observabilidade no frontend: image source
29. image source
30. Datadog RUM - Real User Monitoring Sessions & Replays Logs Trace end-to-end Métricas customizadas Error trancking e stack traces Synthetic browser tests Observabilidade completa e de ponta a ponta em toda a sua arquitetura distribuída: image source
31. image source
32. Dúvidas?
33. Referências e para saber mais Qual a diferença entre monitoramento e observabilidade? Observabilidade AWS Monitoramento e observabilidade Google APM Is Not Enough: Don’t Forget Frontend Monitoring How To Remove the Observability Silos Between Frontend and Backend Engineers O que é observabilidade? Your Guide to Page Speed Metrics – Learn What Matters Frontend Monitoring Tools Frontend Monitoring Madness Frontend Performance Measuring & KPIs Why Is Website Performance Important And Tricks To Improve Front End Performance
34. Obrigada! Qualquer dúvida pode me procurar nas redes sociais @taisreis67