Servizio Sentinella ti consente di monitorare in remoto i bug nelle applicazioni front-end scritte in JavaScript.
Tentativo di risolvere i problemi nelle applicazioni front-end su JavaScript possono essere complicati perché hanno origine nel browser dell'utente, al quale spesso non hai accesso. Tuttavia, Sentinella rende possibile monitorare da remoto i bug.
È possibile scaricare le soluzioni discusse in questo articolo.
Ciò che è necessario
Se vuoi utilizzare questi esempi, avrai bisogno di:
- : uno strumento di sviluppo ricco di funzionalità che non fa parte dell'applicazione. Abbiamo scaricato l'ultima versione LTS (8.12.0)
- Sentinella: Un account nel servizio Sentry (puoi registrare gratuitamente fino a 10mila bug al mese) o un Sentry locale installato -
Installazione sul tuo server
Per installare Sentry On-Premise sul tuo server puoi procedere in 2 modi
-
Costruisci RPM e installali -
-
Utilizza il programma di installazione ufficiale:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Uso standard
Per iniziare, aggiungine uno nuovo dal sito Web del servizio Sentinella-progetto per l'applicazione. Dopo aver selezionato la lingua desiderata, riceverai la documentazione corrispondente. Nel nostro caso abbiamo scelto JavaScript.
Il primo esempio è standard JavaScript. Ci sono due pulsanti qui: "Ciao" (Ciao e "Errore" (Errore).
Dopo aver fatto clic sul pulsante "Ciao", lo schermo si riavvierà e si bloccherà prova rileverà e catturerà il bug. Dopo che il bug è stato “catturato”, la segnalazione di errore viene inviata manualmente al servizio Sentinella.
Il pulsante “Errore” consente di rilevare facilmente un bug.
vaniglia/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>Osservazioni:
- Sentry viene installato da una CDN ed esposto come variabile globale
- Poco prima abbiamo lanciato Sentry nel nostro JavaScript
Per testare questo esempio, possiamo utilizzare una piattaforma server web statica Node.js: server http. Vai alla cartella in cui è archiviato il file index.htmle inserisci (opzione con disabilita la memorizzazione nella cache) la riga seguente per aprire l'indirizzo nel browser .
Come vengono visualizzati i bug rilevati
Per prima cosa fare clic sul pulsante "Ciao".
Abbiamo riscontrato un bug, quindi non verrà visualizzato nello stack di chiamate e pertanto non viene monitorato nella console. Tuttavia, poiché inviamo a Sentinella segnala un bug manualmente, vedremo un messaggio a riguardo nel tuo account.
Osservazioni:
- Possiamo tracciare quale riga (24) contiene il bug
- Inoltre, il percorso breadcrumb mostra le azioni del browser che hanno portato all'errore.
Come vengono visualizzati i bug non rilevati
Facendo clic sul pulsante "Errore".
Il bug fa gonfiare lo stack di chiamate e quindi sulla console viene visualizzato un messaggio di errore. Successivamente, Sentry monitora automaticamente il bug, senza alcuna azione aggiuntiva.
Osservazioni:
- Possiamo vedere in quale riga (30) il bug è stato perso
- Non c'è traccia di breadcrumb (non capisco bene il motivo)
Come garantire la sicurezza del progetto
Potresti aver notato il modo in cui controlliamo quali pagine possono segnalare errori al nostro progetto Sentinella; con aiuto DSN record. Il problema è che l'input può essere visto da chiunque visualizzi il codice sorgente della tua pagina.
Per evitare ciò, dobbiamo limitare il numero di domini che possono inviare segnalazioni di errori al nostro progetto. In questo esempio abbiamo utilizzato localhost (ospite locale). Questa opzione è configurata nella scheda Impostazioni Sentinella-progetto, Impostazione del progetto Sentinella.
Rilasci
Se pensi a come utilizzare Sentinella in diverse varianti della nostra applicazione, abbiamo bisogno di una sorta di meccanismo che contrassegnerà gli errori con un numero di versione.
Dopotutto, non vogliamo che il bug che abbiamo corretto ricompaia e pensiamo che ciò che abbiamo corretto non abbia funzionato. È anche possibile che l'utente abbia avviato una versione precedente dell'applicazione memorizzata nella cache.
Per risolvere il problema, è necessario inserire l'identificatore rilascio (versioni) all'avvio Sentinella.
vaniglia/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Successivamente, tutti i nuovi errori verranno contrassegnati come rilascio (0.1.0), cioè saranno legati alla versione corretta del codice.
Osservazioni:
- Abbiamo trovato un modo semplice per utilizzare le versioni
- Sentry ti consente di usarne di più , che è strettamente correlato a GitHub. Questa funzione consente di tenere traccia dei bug prima di eseguire determinate operazioni.
PS La seconda parte è più lunga, quindi sarà in un post separato.
PS Telegram chat Sentinella
PS Ho dimenticato di indicare che questa è una traduzione del post
Fonte: habr.com