Servizio Sentry permette di monitorare da remoto i bug nelle applicazioni frontend scritte in JavaScript.
Cercare di risolvere i problemi nelle applicazioni frontend su JavaScript può rivelarsi un compito impegnativo, poiché si verificano nel browser dell'utente, al quale spesso non si ha accesso. Tuttavia, Sentry offre la possibilità di monitorare i bug da remoto.
è possibile scaricare le soluzioni discusse in questo articolo.
Cosa è necessario
Se si desidera utilizzare questi esempi, sarà necessario:
- : Uno strumento multifunzionale per lo sviluppo che non fa parte dell'applicazione. Abbiamo scaricato l'ultima versione LTS (8.12.0)
- Sentry: O un account nel servizio Sentry (si possono registrare gratuitamente fino a 10.000 bug al mese) o un Sentry locale installato —
Installazione sul tuo server
Per installare Sentry On-Premise sul tuo server, ci sono 2 opzioni
Compilare il rpm e installarlo —
Utilizzare l'installer ufficiale:
Installare sul server docker e docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Utilizzo standard
Per iniziare, aggiungi un nuovo Sentry-progetto per l'applicazione. Dopo aver scelto la lingua desiderata, riceverai la documentazione corrispondente. Nel nostro caso, abbiamo scelto JavaScript.
Il primo esempio è il standard JavaScript. Qui ci sono due pulsanti: "Hello" (Ciao) e "Error" (Errore).
Una volta che clicchi sul pulsante "Hello", lo schermo si ricaricherà e il blocco try intercetterà e raccoglierà il bug. Dopo che il bug è stato "catturato", il report dell'errore viene inviato manualmente al servizio Sentry.
Il pulsante "Error" permette semplicemente di rilevare il bug.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Ciao</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://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>Note:
- Sentry viene installato da CDN e appare come variabile globale
- Poco prima abbiamo avviato Sentry nel nostro JavaScript
Per testare questo esempio, possiamo utilizzare una piattaforma di server web statico Node.js: server http. Accediamo alla cartella dove si trova il file index.html, e inseriamo (quest'opzione disabilita la cache) la seguente riga per aprire nel browser l'indirizzo .
Come vengono visualizzati i bug catturati
Iniziamo cliccando sul pulsante "Hello".
Abbiamo catturato un bug, quindi non si alzerà in cima allo stack delle chiamate e non verrà monitorato nella console. Tuttavia, poiché lo inviamo in Sentry il report del bug manualmente, vedremo un messaggio a riguardo nel nostro account.
Note:
- Possiamo seguire quale linea (24) ha avuto il bug
- Inoltre, la catena di navigazione mostra le azioni del browser che hanno portato all'errore.
Come vengono visualizzati i bug non catturati
Clicchiamo sul pulsante «Errore».
Il bug appare in cima allo stack delle chiamate e, in questo modo, viene visualizzato un messaggio di errore nella console. Dopo ciò, Sentry monitora automaticamente il bug senza alcuna azione aggiuntiva.
Note:
- Possiamo vedere in quale riga (30) si è perso il bug
- Non è prevista una catena di navigazione (non capisco esattamente perché)
Come garantire la sicurezza del progetto
Forse avete notato il modo in cui controlliamo le pagine che possono inviare report di errore al nostro progetto Sentry; tramite dsn record. Il problema è che chiunque visualizzi il codice sorgente della vostra pagina può vedere l'input.
Per evitare che ciò accada, è necessario limitare il numero di domini che possono inviare report di errore al nostro progetto. In questo esempio abbiamo utilizzato localhost (localhost). Questa opzione è configurabile nella scheda delle impostazioni Sentry-progetto, Impostazione Progetto Sentry.
Rilasci
Se pensiamo a come utilizzare Sentry in diverse varianti della nostra applicazione, abbiamo bisogno di un meccanismo che contrassegnerà gli errori con un numero di versione.
Non vogliamo che un bug che abbiamo corretto riappaia, mentre pensiamo che quello che abbiamo sistemato non abbia funzionato. Potrebbe anche succedere che l'utente avvii una versione più vecchia e memorizzata nella cache dell'applicazione.
Per risolvere il problema, è necessario specificare l'identificatore pubblicazione (versione) all'avvio Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Dopo di che, tutti i nuovi errori saranno contrassegnati come release (0.1.0), cioè saranno collegati alla versione corretta del codice.
Note:
- Abbiamo esaminato un modo semplice per utilizzare i rilasci
- Sentry consente di applicare un approccio più . Questa funzione consente di tracciare i bug fino a specifiche operazioni. GitHubP.S. La seconda parte è più lunga, quindi sarà in un post separato.
P.S. Chat Telegram di Sentry
P.S. Ho dimenticato di specificare che questa è la traduzione di un post
Il servizio Sentry consente di monitorare da remoto i bug nelle applicazioni frontend scritte in JavaScript.
Fonte: habr.com
