Serviço Sentry permite monitorar remotamente bugs em aplicações frontend escritas em JavaScript.
Tentar resolver problemas em aplicações frontend em JavaScript pode ser uma tarefa desafiadora, uma vez que eles ocorrem no navegador do usuário, ao qual, muitas vezes, você não tem acesso. No entanto, Sentry oferece a capacidade de monitorar remotamente bugs.
é possível baixar as soluções discutidas neste artigo.
O que é necessário
Se você deseja usar esses exemplos, precisará de:
- : Uma ferramenta multifuncional para desenvolvimento que não faz parte da aplicação. Nós baixamos a última versão LTS (8.12.0)
- Sentry: Ou uma conta no serviço Sentry (é possível registrar até 10 mil bugs por mês gratuitamente) ou um Sentry local instalado —
Instalação no seu servidor
Para instalar o Sentry On-Premise no seu servidor, você pode seguir 2 caminhos
Construir rpm e instalá-los —
Utilizar o instalador oficial:
Instalar docker e docker-compose no servidor git clone https://github.com/getsentry/onpremise.git ./install.sh
Uso padrão
Para começar, adicione um novo Sentry-projeto para a aplicação no site do serviço. Após selecionar o idioma desejado, você receberá a documentação correspondente. Em nosso caso, escolhemos JavaScript.
O primeiro exemplo é o padrão JavaScript. Aqui há dois botões: «Hello» (Olá) e «Error» (Erro).
Após clicar no botão «Hello», a tela será recarregada, e o bloco try detectará e capturará o bug. Depois que o bug for «capturado», o relatório de erro é enviado manualmente para o serviço Sentry.
O botão «Error» permite simplesmente detectar o bug.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Baunilha</title>
</head>
<body>
<button id="hello">Olá</button>
<button id="error">Erro</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://b5bf359072254626aba8e64368e77b7d@sentry.io/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>Notas:
- Sentry é instalado a partir do CDN e aparece como uma variável global
- Mais cedo, executamos o Sentry em nosso JavaScript
Para testar este exemplo, podemos usar uma plataforma de servidor web estático Node.js: servidor http. Vamos para a pasta onde o arquivo index.html, está localizado e digitamos (a opção desativa o cache) a seguinte linha para abrir no navegador o endereço .
Como os bugs capturados são exibidos
Primeiro, clicamos no botão «Hello».
Capturamos um bug, portanto ele não aparecerá no topo da pilha de chamadas, assim não será monitorado no console. No entanto, como estamos enviando Sentry o relatório de bug manualmente, veremos uma mensagem sobre ele na conta.
Notas:
- Podemos verificar em qual linha (24) o bug se infiltrou
- Além disso, a trilha de navegação mostra as ações do navegador que levaram ao erro.
Como erros capturados são exibidos
Clicamos no botão «Erro».
O bug aparece no topo da pilha de chamadas e, assim, a mensagem de erro é exibida no console. Em seguida, o Sentry monitora automaticamente o bug, sem nenhuma ação adicional.
Notas:
- Podemos ver em qual linha (30) o bug se perdeu
- Não está prevista a trilha de navegação (não entendo muito bem o porquê)
Como garantir a segurança do projeto
Você pode ter notado a forma como controlamos as páginas que podem enviar relatórios de erros para nosso projeto Sentry; através de dsn registros. O problema é que qualquer pessoa que visualizar o código-fonte da sua página pode ver a entrada.
Para evitar isso, precisamos limitar o número de domínios que podem enviar relatórios de erros para nosso projeto. Neste exemplo, usamos localhost (localhost). Esta opção é configurada na aba de configurações Sentry-do projeto, Configuração do Projeto Sentry.
Lançamentos
Se pensarmos em como usar Sentry em diferentes variações do nosso aplicativo, precisamos de um mecanismo que irá marcar os erros com o número da versão.
Não queremos que um bug que corrigimos reapareça, enquanto pensamos que aquilo que consertamos não funcionou. Pode acontecer que um usuário tenha iniciado uma versão mais antiga e armazenada em cache do aplicativo.
Para resolver o problema, precisamos inserir o identificador do lançamento (versão) ao iniciar Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Depois disso, todos os novos erros serão marcados como release (0.1.0), ou seja, estarão vinculados à versão correta do código.
Notas:
- Examinamos uma forma simples de usar lançamentos
- O Sentry permite aplicar uma abordagem mais , que está intimamente ligada a GitHub. Essa função permite rastrear bugs antes de certas operações serem realizadas.
P.S. A segunda parte é mais longa, então será em uma postagem separada.
P.S. Chat do Telegram Sentry
P.S. Esqueci de mencionar que esta é a tradução de uma postagem
Fonte: habr.com
