Servizio Sentry consente di monitorare da remoto i bug nelle applicazioni frontend scritte in JavaScript.
Cercare di risolvere i problemi nelle applicazioni frontend può rivelarsi una sfida, poiché si verificano nel browser dell'utente, al quale spesso non si ha accesso. Tuttavia, JavaScript permette di monitorare da remoto i bug. Sentry è possibile scaricare le soluzioni discusse in questo articolo.
Cosa serve
Se desideri utilizzare questi esempi, avrai bisogno di:
: Uno strumento multifunzionale per lo sviluppo che non fa parte dell'applicazione. Abbiamo scaricato l'ultima versione LTS (8.12.0)
- : O un account sul servizio Sentry (puoi registrare gratuitamente fino a 10.000 bug al mese) o un Sentry locale installato —
- SentryInstallazione sul tuo server
Per installare Sentry On-Premise sul tuo server, puoi seguire due strade
Compilare il pacchetto rpm e installarlo —
Utilizzare l'installer ufficiale:
Installare Docker e docker-compose sul server git clone https://github.com/getsentry/onpremise.git ./install.sh
Utilizzo standard
Per iniziare, aggiungi un nuovo
Per iniziare, aggiungi un nuovo sito dal servizio Sentry-progetto per l'applicazione. Dopo aver selezionato la lingua desiderata, riceverai la relativa documentazione. In questo caso abbiamo scelto JavaScript.
Il primo esempio è un standard JavaScript. Qui ci sono due pulsanti: «Hello» (Ciao) e «Error» (Errore).
Dopo aver cliccato sul pulsante «Hello», lo schermo verrà ricaricato e il blocco try scoprirà e catturerà il bug. Una volta che il bug è «catturato», il report dell'errore viene inviato manualmente al servizio Sentry.
Il pulsante «Error» consente semplicemente di rilevare il bug.
vanilla / 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://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 è installato dal CDN e viene visualizzato come variabile globale
- Poco fa abbiamo avviato Sentry nel nostro JavaScript
Per testare questo esempio, possiamo utilizzare una piattaforma server web statica Node.js: server http. Entriamo nella cartella dove si trova il file index.html, e digitiamo (l'opzione con disabilitare la cache) la seguente stringa per aprire nel browser l'indirizzo .
Come vengono visualizzati i bug catturati
Per prima cosa clicchiamo sul pulsante «Hello».
Abbiamo catturato un bug, quindi non salirà nella stack di chiamate, e quindi non viene monitorato nella console. Tuttavia, poiché inviamo il Sentry report sul bug manualmente, vedremo un messaggio al riguardo nel nostro account.
Note:
- Possiamo seguire in quale linea (24) si è nascosto il bug
- Inoltre, il breadcrumb mostra le azioni del browser che hanno portato all'errore.
Come vengono visualizzati i bug non catturati
Clicchiamo sul pulsante «Errore».
Il bug risale nello stack delle chiamate e, di conseguenza, apparirà un messaggio di errore nella console. Dopo di che, Sentry monitora automaticamente il bug, senza ulteriori azioni.
Note:
- Possiamo vedere in quale riga (30) si è perso il bug
- Non è prevista una breadcrumb (non capisco bene il motivo)
Come garantire la sicurezza del progetto
Potresti aver notato il modo in cui controlliamo le pagine che possono inviare segnalazioni di errore al nostro progetto Sentry; tramite dsn record. Il problema è che chiunque possa visualizzare il codice sorgente della tua pagina può vedere l'accesso.
Per evitare ciò, bisogna limitare il numero di domini che possono inviare segnalazioni di errore al nostro progetto. In questo esempio abbiamo usato localhost (localhost). Questa opzione è configurabile nella scheda delle impostazioni Sentry-del progetto, Sentry Project Setting.
Release
Se si pensa a come utilizzare Sentry in diverse varianti della nostra applicazione, è necessaria una sorta di meccanismo che contrassegni gli errori con un numero di versione.
Non vogliamo che un bug che abbiamo corretto ricompaia, mentre pensiamo che ciò che abbiamo sistemato non abbia funzionato. Potrebbe anche succedere che l'utente avvii una versione più vecchia e memorizzata della app.
Per risolvere il problema, è necessario inserire l'identificativo alla versione (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), ovvero saranno associati alla corretta versione del codice.
Note:
- Abbiamo esaminato un metodo semplice per utilizzare le release
- Sentry permette di applicare approcci più , che è strettamente legato a GitHub. Questa funzione consente di monitorare i bug prima di effettuare determinate operazioni.
P.S. La seconda parte è più lunga, quindi sarà in un post separato.
P.S. Chat di Telegram Sentry
P.S. Ho dimenticato di specificare che si tratta di una traduzione del post
Fonte: habr.com
