Conheça o Sentry/raven.js, uma ferramenta para monitorar erros no frontend de aplicações web

O problema

Para qualquer aplicação, seja ela web, mobile, desktop, é fundamental a configuração de uma boa ferramenta de log para monitorar e ter o controle de erros e exceções que ocorrem em seu sistema.

Quem nunca passou por aquele problema que acontece somente com o usuário em produção? Como identificar um erro específico que em seu ambiente de desenvolvimento não acontece? Para tal, existem ferramentas de log que facilitam a identificação de erros e monitoramento da aplicação como um todo. Para o backend de aplicações web no mundo Java, por exemplo, as mais conhecidas são o Logback e o Log4j.

Entretanto, com a grande ascensão do Javascript, com grandes frameworks web como Angular.js, Vue.js, React (só para citar os queridinhos do momento), as aplicações web passam a ter mais e mais código no frontend. Com muito código no lado do cliente, eventualmente erros passam a ocorrer também no frontend e não somente no backend da aplicação. Como o cenário de frontend é muito dinâmico, com problemas de compatibilidade entre browsers, demora por parte de distribuidores de navegadores web para adoção/implementação de novas features, usuários com navegadores desatualizados,etc..., realizar testes de interface, seja ele automatizado ou manual, para todos os browsers e todas as versões de browsers se torna uma tarefa quase impossível.

Diante de toda essa situação, vez ou outra pode acontecer um erro com seus usuários devido a uma versão específica de browser, ou erros dado um caminho específico de uso da aplicação pelo usuário.

Ficávamos até então de mãos atadas para encontrar e solucionar esses erros obscuros no frontend de nossos sistemas, já que as ferramentas usuais de log são voltadas somente para o backend das aplicações. Não tínhamos controle e conhecimento dos eventuais erros que estouram no console do browser do usuário.

O que é o Sentry/raven.js?

Se você já passou por algo parecido, saiba que existe uma solução para esse problema! Conheça o Sentry e o raven.js, uma ferramenta de monitoramento e report de erros e exceções não tratadas que ocorrem no browser do usuário de seu sistema, usado por grandes empresas como Airbnb, Dropbox, Uber, dentre outras. Para os times do LEMAF que queiram usar a ferramenta, temos ela self hosted disponível aqui.

A plataforma Sentry, que por sinal é open-source, possui suporte para monitoramento de sistemas construídos em diversas linguagens, como C#, Java, Elixir, Go, PHP, Python, Ruby, Perl, mas nesse post falaremos especificamente do Sentry com o plugin raven.js, focado no monitoramento de problemas com seu código Javascript.

Funcionalidades

  • Visualizar a exceção lançada no console do usuário;
  • Visualizar o browser e SO usado por ele;
  • Visualizar o caminho que levou o usuário até o erro: qual tela ele estava, qual botão ele clicou, permitindo adicionar contexto do usuário logado. É possível que uma exceção no Raven informe nome do usuário logado, por exemplo, ou qualquer informação relevante para identificação do usuário;
  • Notificações via email, SMS;
  • Integração com Github e Gitlab para criar issues automaticamente no projeto, além de outras integrações, como por exemplo com Slack, Trello, Jira, Heroku, Taiga.

Como instalar e configurar:

O primeiro passo para a instalação da ferramenta é a criação de sua conta na plataforma Sentry.
Após a criação de sua conta, em sua aplicação, importe o script raven.js. Para vinculação de sua conta no Sentry com sua aplicação, é gerada uma chave única, que pode ser obtida no Dashboard do Sentry. Pegue essa chave e instâncie o Raven em sua aplicação, usando a chave obtida:

Raven.config('https://urtnci_sua_chave@sentry.io/171830')  
    .addPlugin(Raven.Plugins.Angular).install();

Em nosso caso, estamos usando também o plugin para AngularJS.

Para adicionar contexto de usuário logado, após o login do usuário em sua aplicação, faça:

Raven.setUserContext({  
Empreendimento: dadosUsuarioLogado.empreendimento,  
CNPJ: dadosUsuarioLogado.empreendimento,  
Nome: dadosUsuarioLogado.nome,  
Perfil: dadosUsuarioLogado.perfil.nome,  
Login: dadosUsuarioLogado.login});  

Feito isso, o Raven já irá monitorar os erros que eventualmente ocorram em sua aplicação e enviá-los para sua conta no Sentry.

Telas dos erros exibidos

Em sua conta no Sentry, é possível acompanhar os erros que estão acontecendo em sua aplicação.
Abaixo, tela com o stack trace de um erro. Temos o sistema operacional do usuário, o navegador usado, assim como seu IP, além da linha no Javascript em que houve o erro:

Nesse trecho, temos o caminho percorrido pelo usuário até que houve o erro. Vemos qual botão ele clicou, quais requisições foram feitas ao servidor, além de navegação entre diferentes telas no sistema:

Aqui podemos ver o contexto do usuário, setado quando ele realizou login em nosso sistema:

Finalizando...

O Sentry/raven.js se mostra uma ótima opção para monitoramento de exceções não tratadas no frontend de aplicações Web, dando ao time de desenvolvimento uma ferramenta poderosa para análise e depuração de erros.

Referências