Observabilidade em Aplicações Angular
Em qualquer aplicação, a observabilidade é crucial, e nas aplicações Angular, não é diferente.
Se um erro ocorre, a observabilidade nos permite mergulhar fundo na "stack" do problema. Analisando todo o contexto, desde o navegador utilizado até o aparelho do usuário. Às vezes, descobrimos até problemas relacionados ao próprio framework ou biblioteca que estamos usando.
Trabalho com o sentry a mais de 9 anos e acho uma plataforma formidável e na minha opinião, é excelente para observabilidade. E o melhor? É gratuita e open source (https://github.com/getsentry/self-hosted).
No primeiro print, podemos ver o erro e a stack trace, mas o mais interessante é que sabemos em qual cliente isso aconteceu, quantos clientes afetados, qual navegador estava sendo usado, sistema operacional, e por aí vai.
Ao rolar a página desse erro, chegamos aos "Breadcrumbs" - a sequência de eventos. Isso é ouro, porque se precisarmos reproduzir o erro, temos uma base sólida.
No segundo print, vemos que o Sentry identificou a troca de URLs ({from: '', to: ''}), o clique do usuário em um local específico (ui.click) que acionou uma segunda chamada (xhr). Seguindo a sequência de eventos, chegamos ao final, entendendo toda a jornada que levou ao erro.
Então, vale frisar que conseguimos saber o erro, em qual arquivo/método foi, a sequência de navegação e click que o usuário fez e todo o contexto utilizado, como navegador, Sistema operacional etc. Com essas informações fica mais fácil aplicar ajustes e até mesmo saber que tem erro acontecendo, pois uma vez que você não monitora, em teoria nunca tem problema.
Bônus sentry. Além disso, o Sentry pode ser usado não só para o frontend, bem como para a API. Exemplo para descobrimento de query SQL lentas e após a descoberta, você pode analisar queries, ver todas as métricas, identificar qual método foi responsável por chamar, entre outras coisas.
