Serviço Sentry permite monitorar remotamente bugs em aplicativos front-end escritos em JavaScript.
Tentando corrigir problemas em aplicativos front-end em JavaScript podem ser complicados porque se originam no navegador do usuário, ao qual você geralmente não tem acesso. No entanto, Sentry torna possível monitorar bugs remotamente.
Você pode baixar as soluções discutidas neste artigo.
O que é necessário
Se quiser usar esses exemplos, você precisará de:
- : uma ferramenta de desenvolvimento rica em recursos que não faz parte do aplicativo. Baixamos a versão LTS mais recente (8.12.0)
- Sentry: Ou uma conta no serviço Sentry (você pode registrar até 10 mil bugs por mês gratuitamente) ou um Sentry local instalado -
Instalação em seu servidor
Para instalar o Sentry On-Premise em seu servidor você pode seguir 2 maneiras
-
Construa rpm e instale-os -
-
Use o instalador oficial:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Uso padrão
Para começar, adicione um novo no site do serviço Sentry-projeto para o aplicativo. Após selecionar o idioma desejado, você receberá a documentação correspondente. No nosso caso escolhemos JavaScript.
O primeiro exemplo é padrão JavaScript. Existem dois botões aqui: "Olá" (Olá e "Erro" (Erro).
Depois de clicar no botão "Olá", a tela será reiniciada e o bloco tentar irá detectar e capturar o bug. Após o bug ser “detectado”, o relatório de erro é enviado manualmente ao serviço Sentry.
O botão “Erro” permite detectar facilmente um bug.
baunilha/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Hello</button>
<button id="error">Error</button>
<div id="output"></div>
<script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
<script>
(function () {
'use strict';
Sentry.init({ dsn: 'https://[email protected]/1289664' });
var helloEl = document.getElementById('hello');
var errorEl = document.getElementById('error');
var outputEl = document.getElementById('output');
helloEl.addEventListener('click', handleHelloClick);
errorEl.addEventListener('click', handleErrorClick);
function handleHelloClick() {
outputEl.innerHTML = 'Hello World';
try {
throw new Error('Caught');
} catch (err) {
Sentry.captureException(err);
}
}
function handleErrorClick() {
throw new Error('Uncaught');
}
})();
</script>
</body>
</html>Observações:
- O Sentry é instalado a partir de um CDN e exposto como uma variável global
- Um pouco antes lançamos o Sentry em nosso JavaScript
Para testar este exemplo, podemos usar uma plataforma de servidor web estático Node.js: servidor HTTP. Vá para a pasta onde o arquivo está armazenado index.htmle digite (opção com desabilita o cache) a seguinte linha para abrir o endereço no navegador .
Como os bugs detectados são exibidos
Primeiro clique no botão "Olá".
Detectamos um bug, por isso ele não aparecerá na pilha de chamadas e, portanto, não será monitorado no console. No entanto, como enviamos para Sentry reportar um bug manualmente, veremos uma mensagem sobre isso em sua conta.
Observações:
- Podemos rastrear qual linha (24) contém o bug
- Além disso, a trilha de navegação exibe as ações do navegador que levaram ao erro.
Como os bugs não detectados são exibidos
Clicando no botão "Erro".
O bug aparece na pilha de chamadas e, portanto, uma mensagem de erro é exibida no console. Depois disso, o Sentry monitora automaticamente o bug, sem nenhuma ação adicional.
Observações:
- Podemos ver em qual linha (30) o bug está perdido
- Não há trilha de navegação (não entendo muito bem o porquê)
Como garantir a segurança do projeto
Você deve ter notado a maneira como controlamos quais páginas podem reportar erros ao nosso projeto Sentry; com ajuda dsn registros. O problema é que a entrada pode ser vista por qualquer pessoa que visualize o código-fonte da sua página.
Para evitar isso, precisamos limitar o número de domínios que podem enviar relatórios de erros ao nosso projeto. Neste exemplo usamos localhost (anfitrião local). Esta opção é configurada na aba de configurações Sentry-projeto, Configuração do Projeto Sentinela.
Lançamentos
Se você pensar em como usar Sentry em diferentes variações de nosso aplicativo, precisamos de algum tipo de mecanismo que marque os erros com um número de versão.
Afinal, não queremos que o bug que corrigimos apareça novamente e achamos que o que corrigimos não funcionou. Também pode ser que o usuário tenha iniciado uma versão mais antiga do aplicativo em cache.
Para resolver o problema, você precisa inserir o identificador liberação (versões) na inicialização Sentry.
baunilha/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Depois disso, todos os novos erros serão marcados como lançamento (0.1.0), ou seja, eles estarão vinculados à versão correta do código.
Observações:
- Descobrimos uma maneira simples de usar lançamentos
- Sentry permite que você use mais , que está intimamente relacionado com GitHub. Esta função permite rastrear bugs antes de realizar determinadas operações.
PS A segunda parte é mais longa, então ficará em um post separado.
Sentinela de bate-papo do PS Telegram
PS esqueci de indicar que esta é uma tradução do post
Fonte: habr.com