Tratamento de erros em produção
Como aumentar a qualidade de sua aplicação monitorando o JavaScript em produção
Todo mundo que trabalha com web sabe que erros em produção são inevitáveis, e vão acabar acontecendo uma hora ou outra. Hoje em dia existem práticas cada vez mais elaboradas pra evitá-los, mas certamente será impossível evitar 100% deles.
Se você ainda depende que os usuários avisem, com aquele famoso screenshot do DevTools do Chrome, quando algo não estiver funcionando como esperado, meu amigo… a chance deles te abandonarem é bem alta!
Por isso, temos que estar sempre atentos e sermos ágeis para resolver os problemas. Garantindo que os usuários fiquem o menor tempo possível sem conseguir concluir seus objetivos.
Afinal, deixar um usuário bloqueado por um erro desconhecido pode ser extremamente frustrante.
TL;DR
Primeiro passo
Ter um monitoramento de exceções ativo no ambiente de produção, tanto do back-end quanto do front-end, é o primeiro passo. Isso vai garantir que você sempre seja avisado de qualquer problema em produção no mesmo momento em que as exceções acontecerem.
E pra facilitar, você pode escolher ser avisado direto no Slack do seu time.
Vou utilizar Airbrake como referência, mas existem muitas outras ferramentas de monitoramento.
Detalhes da exceção
A exceção vai chegar na ferramenta de monitoramento cheia de informações relevantes pro problema ser encontrado e resolvido, muitas vezes esse problema pode estar escancarado e ser muito simples de resolver.
Em outros momentos, pode estar escondido e tomar muito tempo até ser encontrado e solucionado. Por isso, é importante enviar o máximo de informações possível pro monitoramento.
Informações que podemos encontrar no Airbrake:
- Tipo e mensagem da exceção;
- Hora e dia em que aconteceu;
- Browser que o usuário estava utilizando;
- Página que o usuário estava navegando;
- Arquivo — com linha e coluna — de onde foi lançada a exceção.
Detalhes ainda mais minuciosos:
- Backtrace da exceção;
- Histórico de acontecimentos como: clicks do usuário e HTTP Requests.
Informação bônus
Hoje em dia trabalhamos com aplicações e frameworks cada vez mais preparados pra lidar com erros. É o caso do Vue.js, por exemplo, que quando tem um problema dentro do rendering chama a config errorHandler.
E quando o Vue.js chama o handler de erro, três parâmetros são passados:
- error: o erro gerado pelo JavaScript, com mensagem e stack trace;
- vm: a instância do app Vue.js no momento do erro;
- info: em qual hook do ciclo de vida o erro foi encontrado.
Com essas informações disponíveis, podemos notificar a nossa ferramenta de monitoramento e passar todos os detalhes do app no momento do crash. Inclusive, qual era o estado dos dados do app no exato momento do erro!
Reproduzindo
A partir de agora, sempre que algo de errado acontecer dentro do nosso app em produção, vamos ficar sabendo imediatamente. Se for algo grave, podemos entrar em contato com o cliente e ajudá-lo. Ou então, podemos pegar todas essas informações do Airbrake e usar a nosso favor.
Por exemplo, podemos copiar o estado dos dados do app que mandamos pro Airbrake, e iniciar o app já com a combinação de dados que potencialmente quebra o sistema. Se for algum problema relacionado a inconsistência dos dados, vai ser muito fácil de reproduzir e corrigir.
Concluindo
Já passamos da fase de receber reclamações dos clientes com um screenshot da tela com erro, ou então esperar que alguém xingue no Twitter reclamando de um problema.
Nós podemos — e devemos! — monitorar o nosso app em todos os momentos, pra tomar alguma ação antes mesmo que o usuário perceba que algo não está funcionando como esperado.
Sem contar, que a qualidade do software entregue será absurdamente maior e nenhuma exceção de erro vai conseguir se esconder por muito tempo.
E você, monitora a sua aplicação em produção? Se tiver alguma dúvida, deixe nos comentários.
