O Sentry é uma plataforma de rastreamento de bugs que permite monitorar problemas em implantações de produção. Ele suporta os frameworks e linguagens de programação mais populares.
O 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 visualizar os erros capturados. Neste artigo, usaremos os dois serviços para acompanhar os problemas em um aplicativo React.
índice
- Preparando-se
- Adicione o Sentry à sua base de código
- captura de erro
- limites de erro
- Integração do GitLab adicionada
- Desativação do Sentinela em desenvolvimento
- Ativando o perfil de desempenho
- Conclusão
Preparando-se
O GitLab é o Sentinel, ambos têm opções de auto-hospedagem e SaaS. As etapas neste guia se aplicam a ambas as variantes. Digamos que você já tenha um projeto React pronto para ser usado em sua instância do GitLab.
Faça login no Sentry e clique no botão "Criar projeto" no canto superior direito. Clique em "Reagir" sob o cabeçalho "Escolha uma plataforma". Isso permite que o Sentry adapte trechos de código de amostra ao seu projeto.
Escolha quando receber alertas usando as opções em "Definir configurações de alerta padrão". Selecione "Notifique-me sobre quaisquer novos problemas" para receber um e-mail sempre que um bug for registrado. A opção "Quando mais de" filtra o ruído criado por eventos duplicados em uma determinada janela de tempo.
Dê um nome ao seu projeto no campo "Nome do projeto". Clique em "Criar projeto" para concluir a configuração.
Adicione o Sentry à sua base de código
Agora você precisa integrar o Sentry com seu código React. Adicione a biblioteca Sentry às dependências do seu projeto usando npm:
npm instala @sentry/react
Você deve 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 inicialização Sentry antes da primeira chamada ReactDOM.render() . Isso geralmente está em index.js :
importar App de "./App.js" ; importe Reagir de "reagir" ; importe ReactDOM de "react-dom" ; import * como Sentinela de "@sentry/react" ; Sentinela. init({dsn: "meu-dsn"}); React DOM. render (< App />, document.getElementById("react"));
Substitua my-dsn pelo DSN exibido pelo Sentry na tela de criação do projeto. O DSN identifica exclusivamente seu projeto para que o serviço possa atribuir eventos corretamente.
captura de erro
O Sentry detectará e relatará automaticamente erros de JavaScript não tratados. Mesmo que você não consiga evitar o travamento, ele permite que você saiba que algo deu errado antes que o usuário o relate.
Aqui está um exemplo App.js :
importe Reagir de "reagir" ; export default() => { const data = null ; data de retorno. map((val, chave) => { < h1 chave = { chave } > { val } </ h1 >; } ); };
Este código está quebrado, os data são definidos como null , portanto, a propriedade do map será undefined . Vamos tentar chamar data.map() independentemente de como o aplicativo trava. Você deve ver um problema exibido no Sentry.
Os problemas do Sentinel incluem o máximo de dados de erro possível. Você pode visualizar a URL da página e informações sobre o dispositivo do usuário. O Sentry mesclará automaticamente os problemas duplicados. Isso ajuda você a ver se um evento foi um evento único ou um evento regular que afetou vários usuários.
O Sentry recupera automaticamente os mapas de origem JavaScript quando eles estão disponíveis. Se você estiver usando create-react-app , os mapas de origem serão gerados automaticamente a partir de npm run build . Certifique-se de copiá-los para o seu servidor web para que o Sentry possa encontrá-los. Visualize rastreamentos de pilha em vez do código-fonte original em vez da pilha ofuscada produzida pela saída de compilação minificada.
Você pode marcar os bugs do Sentinela como resolvidos ou ignorados assim que forem resolvidos. Você encontrará esses botões abaixo do título do problema e na página Visão geral do problema. Use Fixo quando tiver certeza de que um problema foi corrigido. Ignorado é para casos em que a causa raiz não deve ser tratada. Em sites React, esse pode ser o caso de erros causados por versões mais antigas do navegador.
limites de erro
Os limites de erro do React permitem renderizar uma interface de usuário alternativa quando ocorre um erro em um componente. O Sentry fornece seu próprio wrapper de limites de erro. Isso gera uma interface do usuário alternativa e registra o erro encontrado no Sentry.
import * as Sentry from "sentry" ; export default() => { const data = null ; return ( < Sentry. ErrorBoundary fallback = { < h1 > Algo deu errado. </ h1 > } > { data. map ( ( ( val , key ) => { < h1 key = { key } > { val } </ h1 > ;} ) ;} </ Sentry.ErrorBoundary > ) ; };
Agora você pode exibir um aviso aos usuários quando ocorrer um erro. Continue recebendo o relatório de bug em seu projeto Sentry.
Integração do GitLab adicionada
Existem dois aspectos na integração do GitLab e do Sentry. Primeiro, os projetos do GitLab têm uma função "Rastreador de Bugs" que exibe a lista de bugs do Sentry. Você pode marcar bugs como resolvidos ou ignorados pelo GitLab. A segunda parte trata de vincular o Sentry ao GitLab. Isso permite que o Sentry crie automaticamente problemas do GitLab quando um novo bug é registrado.
Vamos primeiro dar uma olhada na tela de rastreamento de bugs do GitLab. Você deve criar uma chave de Sentinela de API. Clique no seu nome de usuário no canto superior esquerdo da IU do Sentinela e clique em Chaves de API no menu. Clique em "Criar novo token" no canto superior direito.
Adicione os seguintes escopos de token:
-
alerts:read -
alerts:write -
event:admin -
event:read -
event:write -
project:read
Isso permite que o GitLab leia e atualize seus bugs do Sentry.
Em seguida, vá para o seu projeto GitLab. Clique em Configurações no menu lateral e clique em Operações. Expanda a seção "Monitoramento de erros". Cole seu token de autenticação Sentry no campo "Authentication Token" e pressione "Connect". Se você estiver usando uma instância do Sentry auto-hospedada, também precisará alterar o campo "URI da API do Sentinela" para corresponder ao URI do seu servidor.
O menu suspenso "Projeto" será preenchido 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 bugs no GitLab.
Clique em Operações > Monitoramento de Erros na barra lateral esquerda. Veja a lista de bugs do Sentinela. Por padrão, ele é filtrado por problemas não resolvidos. Isso pode ser alterado usando os menus suspensos no canto superior direito. Clique em um bug para ver o rastreamento de pilha detalhado sem sair do GitLab. Existem botões para ignorar, corrigir e converter para um problema do GitLab. Depois de abrir um problema com o GitLab, você pode atribuir esse item a um membro da equipe para corrigir o bug.
Agora você pode adicionar o segundo componente de integração, um link do Sentry para o GitLab. Clique em Configurações na barra lateral do Sentinela e clique em Integrações. Encontre o GitLab na lista e clique no botão roxo "Adicionar instalação" no canto superior direito. Clique em "Next" para ver as informações de configuração.
De volta ao GitLab, clique no ícone do usuário no canto superior direito, seguido de "Preferências". Clique em "Aplicativos" no menu à esquerda e adicione um novo aplicativo. Use os detalhes que o Sentry exibe no pop-up de instalação.
O GitLab exibirá um ID de aplicativo e uma chave secreta. Volte para o pop-up Sentinela e insira esses valores. Adicione a URL do seu servidor GitLab ( gitlab.com para GitLab SaaS) e insira o caminho da URL relativa ao seu grupo GitLab (por exemplo my-group ). 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 junto com seus erros. Isso inclui o commit que introduziu o erro e os rastreamentos de pilha que apontam para os arquivos do GitLab. Os usuários do Sentry em planos pagos podem associar problemas do GitLab e do Sentry entre si.
Desativação do Sentinela em desenvolvimento
Você não quer necessariamente usar o Sentry ao executar seu aplicativo localmente em desenvolvimento. não chame o Sentry.init() se você quiser rodar com o Sentry desabilitado. Você pode procurar uma variável de ambiente local e desabilitar o Sentry se estiver configurado.
if ( process. env . NODE_ENV === "produção" ) { Sentinela. init({dsn: "meu-dsn"}); }
NODE_ENV é definido automaticamente por create-react-app . Production cria o hardcode variável para production . Você pode usá-lo para habilitar seletivamente o Sentry.
Ativando o perfil de desempenho
O Sentry também pode traçar o perfil do 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 ao inicializar a biblioteca Sentry:
npm install @sentry/tracing
importe { Integrações } de "@sentry/tracing" ; Sentinela. init ( { dsn : "my-dsn" , integrações : [ new Integrations.BrowserTracing() ] , tracesSampleRate : 1.0 } ) ;
Agora você poderá ver os dados de desempenho em seu projeto Sentry. Isso pode ajudá-lo a identificar o código de execução lenta na produção.
Conclusão
O Sentry permite que você encontre e corrija bugs antes que os usuários os reportem. Você pode receber alertas em tempo real quando surgirem problemas de produção. Os rastreamentos de pilha e os dados do navegador aparecem alinhados com cada problema, fornecendo um ponto de partida imediato para a resolução.
A combinação do Sentry com o GitLab oferece 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 bugs do Sentry.
- FUJIFILM desliga a rede após suspeita de ataque de ransomware
- O antivírus Norton 360 agora permite minerar a criptomoeda Ethereum
descubra mais conteúdo
O que é um amplificador integrado?
Google Pixel Watch também tem detecção de queda, mas não até o próximo ano
As melhores xícaras de café aquecidas de 2022
Como automatizar seu iPhone com base na hora, atividade ou localização
"Isso deve ter sido antes do meu tempo"
Por que a NASA enviou Snoopy para a Lua? – Revisão geek
Deixe uma resposta Cancelar resposta
O Sentry é um sistema de monitoramento automatizado para impactos de asteroides na Terra, constantemente escaneando o catálogo de asteroides, mantendo-o atualizado pelos próximos 100 anos.
O que é Sentinela e para que serve?
O que é Sentinela ? O Sentry fornece um rastreador de erros de código aberto para monitorar e responder a erros e falhas em qualquer lugar do seu aplicativo em tempo real.
O que é o Software Sentinela?
Uma das maiores dores de cabeça no gerenciamento de aplicativos se concentra em como gerenciar e monitorar todos os erros de nosso aplicativo nos ambientes em que o temos disponível; o principal e mais importante: o ambiente de produção.