Como usar o Sentry e o GitLab para capturar erros de reação

Sentry é uma plataforma de rastreamento de erros que permite monitorar problemas em suas implantações de produção. Suporta as linguagens de programação e estruturas mais populares.

GitLab é uma plataforma DevOps baseada em Git para gerenciar todo o ciclo de vida de desenvolvimento de software. O GitLab pode ser integrado ao Sentry para exibir os erros capturados. Neste artigo, usaremos os dois serviços para ficar à frente dos problemas em um aplicativo React.

Preparação

O GitLab e o Sentry têm opções auto-hospedadas e SaaS. As etapas neste guia se aplicam a ambas as variantes. Assumiremos que você já tem um projeto React pronto para usar em sua instância do GitLab.

Faça login no Sentry e clique no link “ Criar projeto ” botão no canto superior direito. Clique em “ Reagir ” na seção “ Escolha uma plataforma ” cabeçalho. Isso permite que o Sentry personalize trechos de código de exemplo para o seu projeto.

Escolha quando receber alertas usando as opções abaixo de “ Definir suas configurações de alerta padrão. ” Selecione “ Alertar-me sobre cada novo problema ” para obter um e-mail sempre que um erro for registrado. O “ Quando houver mais de ” opção filtra o ruído criado por eventos duplicados em uma determinada janela de tempo.

Dê ao seu projeto um nome no campo “ Nome do projeto ” campo. Clique em “ Criar projeto ” para terminar sua configuração.

Adicionando Sentinela ao seu código-base

Agora, você precisa integrar o Sentry ao seu código React. Adicione a biblioteca Sentry às dependências do seu projeto usando npm:

 npm install @ sentry / react 

Você precisará inicializar o Sentry o mais rápido possível no JavaScript do seu aplicativo. Isso dá ao Sentry visibilidade dos erros que ocorrem no início do ciclo de vida do React. Adicione o script de bootstrap do Sentry antes de sua primeira chamada ReactDOM. render (). Normalmente está em index. js:

importar App de " ./ App. js & quot ;; importar React de " react & quot ;; importar ReactDOM de " react-dom & quot ;; importar * as Sentry de " @ sentry / react & quot ;;   Sentry. init & # 40; & # 123; dsn: " my-dsn " & # 125; & # 41 ;;   ReactDOM. render & # 40; < App / & gt ;, document. getElementById & # 40; " react " & # 41; & # 41 ;;

Substitua my-dsn pelo DSN que o Sentry exibe na tela de criação do projeto. O DSN identifica exclusivamente seu projeto para que o serviço possa atribuir eventos corretamente.

Erros de captura

O Sentry irá capturar e relatar automaticamente erros de JavaScript não tratados. Embora não possa evitar a falha, permite que você saiba que algo deu errado antes que o relatório do usuário chegue.

Aqui está um exemplo de App. js:

importar React de " react & quot ;;   exportdefault & # 40; & # 41; = > & # 123; const data = null; return data. map & # 40; & # 40; val, key & # 41; = > & # 123; < h1 key = & # 123; chave & # 125; > & # 123; val & # 125; < / h1 & gt ;; & # 125; & # 41 ;; & # 125 ;;

Este código está corrompido — os dados estão definidos como nulos, portanto, a propriedade do mapa será indefinida. Tentamos chamar data. map () independentemente, para que o aplicativo trave. Você deve ver um problema aparecer no Sentry.

Os problemas do Sentry incluem o máximo possível de dados sobre o erro. Você pode ver o URL da página, bem como informações sobre o dispositivo do usuário. O Sentry combinará automaticamente os problemas duplicados. Isso ajuda você a ver se um evento foi único ou uma ocorrência regular que está afetando vários usuários.

O Sentry busca automaticamente os mapas de origem do JavaScript quando eles estão disponíveis. Se você estiver usando o create-react-app, os mapas de origem serão gerados automaticamente pelo npm run build. Certifique-se de copiá-los para o seu servidor web para que o Sentry possa localizá-los. Você verá lindos rastreamentos de pilha do código-fonte original em vez da pilha ofuscada produzida pela saída de compilação minimizada.

Você pode marcar os erros do Sentry como Resolvidos ou Ignorados assim que eles forem resolvidos. Você encontrará esses botões abaixo do título do problema e na página de visão geral dos problemas. Use Resolvido quando tiver certeza de que um problema foi corrigido. Ignorado é para casos em que você não pretende resolver a causa raiz. Em sites React, pode ser o caso de erros causados ​​por versões antigas do navegador.

Limites de erro

Limites de erro de reação permitem renderizar uma IU substituta quando um erro é lançado em um componente. O Sentry fornece seu próprio invólucro de limite de erro. Isso renderiza uma IU substituta e registra o erro detectado no Sentry.

importar * como Sentinela de " sentinela & quot ;;   exportdefault & # 40; & # 41; = > & # 123; const data = null; return & # 40; < Sentry. ErrorBoundary fallback = & # 123; < h1 > Algo deu errado. < / h1 > & # 125; > & # 123; data. map & # 40; & # 40; val, key & # 41; = > & # 123; < h1 key = & # 123; key & # 125; > & # 123; val & # 125; < / h1 & gt ;; & # 125; & # 41 ;; & # 125; < /Sentry. ErrorBoundary> & # 41 ;; & # 125 ;;

Agora, você pode exibir um aviso aos usuários quando ocorrer um erro. Você ainda receberá o relatório de erro em seu projeto Sentry.

Adicionando integração GitLab

Existem dois lados na integração do GitLab e do Sentry. Primeiro, os projetos GitLab têm um “ Rastreamento de erros ” recurso que exibe sua lista de erros do Sentry. Você pode marcar os erros como resolvidos ou ignorados no GitLab. A segunda parte envolve conectar o Sentry ao GitLab. Isso permite que o Sentry crie automaticamente problemas no GitLab quando um novo erro for registrado.

Vejamos primeiro a tela de rastreamento de erros do GitLab. Você precisará criar uma chave de API Sentry. Clique em seu nome de usuário no canto superior esquerdo da IU do Sentry e, em seguida, em Chaves de API no menu. Clique em “ Criar novo token ” no canto superior direito.

Adicione os seguintes escopos de token:

• alertas: ler
• alertas: escrever
• evento: admin
• evento: ler
• evento: escrever
• projeto: leia

Isso permite que o GitLab leia e atualize seus erros do Sentry.

Em seguida, vá para o seu projeto GitLab. Clique em Configurações no menu lateral e depois em Operações. Expanda a seção “ Rastreamento de erros ” seção. Cole seu token de autenticação do Sentry no “ Auth Token ” campo e pressione “ Conectar. ” Se você estiver usando uma instância do Sentry auto-hospedada, também precisará ajustar o “ URI da API do Sentry ” campo para corresponder ao URI do seu servidor.

O “ Projeto ” A lista suspensa irá preencher com uma lista de seus projetos Sentry. Selecione o projeto correto e pressione “ Salvar alterações. ” Agora você está pronto para usar o rastreamento de erros no GitLab.

Clique em Operações > Rastreamento de erro na barra lateral esquerda. Você verá sua lista de erros do Sentry. Ele é filtrado para Problemas não resolvidos por padrão. Isso pode ser alterado usando os menus suspensos no canto superior direito. Clique em um erro para ver seu rastreamento de pilha detalhado sem sair do GitLab. Existem botões para ignorar, resolver e converter em um problema do GitLab. Depois de abrir um problema do GitLab, você pode atribuir esse item a um membro da equipe para que o bug seja resolvido.

Agora, você pode adicionar o segundo componente de integração — um link do Sentry de volta ao GitLab. Clique em Configurações na barra lateral do Sentry e depois em Integrações. Encontre GitLab na lista e clique no botão roxo “ Adicionar instalação ” botão no canto superior direito. Clique em “ Avançar ” para ver as informações de configuração.

De volta ao GitLab, clique no ícone do seu usuário no canto superior direito, seguido por “ Preferências. ” Clique em “ Aplicativos ” no menu do lado esquerdo e adicione um novo aplicativo. Use os detalhes mostrados pelo Sentry no pop-up de configuração da instalação.

O GitLab exibirá um ID do aplicativo e uma chave secreta. Retorne ao pop-up do Sentry e insira esses valores. Adicione o URL do servidor GitLab (gitlab. com para GitLab SaaS) e insira o caminho do URL relativo para o seu grupo GitLab (por exemplo, meu-grupo). A integração não funciona com projetos pessoais.

Clique no botão roxo Enviar para criar a integração. O Sentry agora poderá exibir informações do GitLab ao lado de seus erros. Isso inclui a confirmação que introduziu o erro e os rastreamentos de pilha que vinculam de volta aos arquivos GitLab. Os usuários do Sentry em planos pagos podem associar os problemas do GitLab e do Sentry entre si.

Desativando Sentry em desenvolvimento

Você não vai querer necessariamente usar o Sentry ao executar seu aplicativo localmente em desenvolvimento. Não chame Sentry. init () se quiser correr com o Sentry desativado. Você pode verificar a presença de uma variável de ambiente local e desativar o Sentinela, se estiver definido.

se & # 40; process. env. NODE_ENV === " produção " & # 41; & # 123; Sentry. init & # 40; & # 123; dsn: " my-dsn " & # 125; & # 41 ;; & # 125;

NODE_ENV é definido automaticamente por create-react-app. Produção constrói hardcode a variável para produção. Você pode usar isso para ativar seletivamente o Sentry.

Habilitando a criação de perfis de desempenho

O Sentry também pode avaliar o desempenho do navegador do seu aplicativo. Embora este não seja o foco principal deste artigo, você pode configurar o rastreamento com algumas linhas extras na inicialização da sua biblioteca Sentry:

 instalação npm @ sentry / tracing 

importar & # 123; Integrações & # 125; de " @ sentry / tracing & quot ;;   Sentry. init & # 40; & # 123; dsn: " my-dsn & quot ;, integrações: & # 91; new Integrations. BrowserTracing & # 40; & # 41; & # 93 ;, tracesSampleRate: 1.0 & # 125; & # 41 ;;

Agora, você poderá ver os dados de desempenho do seu projeto Sentry. Isso pode ajudá-lo a identificar código de execução lenta na produção.

Conclusão

O Sentry permite que você encontre e corrija erros antes que os usuários os relatem. Você pode obter alertas em tempo real conforme surgem problemas na produção. Os rastreamentos de pilha e os dados do navegador são exibidos em linha em cada problema, oferecendo a você um ponto de partida imediato para a resolução.

A combinação do Sentry com o GitLab fornece uma integração ainda mais estreita com o processo de desenvolvimento de software. Se você já estiver usando o GitLab para gerenciamento de projetos, adicionar a integração do Sentry permite gerenciar alertas no GitLab e criar problemas do GitLab para novos erros do Sentry.