Servei Sentinella us permet supervisar de forma remota els errors a les aplicacions frontals escrites JavaScript.
S'està intentant solucionar problemes a les aplicacions frontals activades JavaScript poden ser complicats perquè s'originen al navegador de l'usuari, al qual sovint no teniu accés. Malgrat això, Sentinella permet controlar de forma remota els errors.
Podeu descarregar les solucions que es discuteixen en aquest article.
El que és necessari
Si voleu utilitzar aquests exemples, necessitareu:
- : una eina de desenvolupament rica en funcions que no forma part de l'aplicació. Hem baixat la darrera versió de LTS (8.12.0)
- Sentinella: Ja sigui un compte al servei Sentry (podeu registrar fins a 10 mil errors al mes de forma gratuïta) o un Sentry local instal·lat -
Instal·lació al vostre servidor
Per instal·lar Sentry On-Premise al vostre servidor podeu anar de dues maneres
-
Creeu rpm i instal·leu-los -
-
Utilitzeu l'instal·lador oficial:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Ús estàndard
Per començar, afegiu-ne un de nou des del lloc web del servei Sentinella-projecte per a l'aplicació. Després de seleccionar l'idioma desitjat, rebràs la documentació corresponent. En el nostre cas vam triar JavaScript.
El primer exemple és estàndard JavaScript. Aquí hi ha dos botons: "Hola" (Hola) i «Error ' (Error).
Després de fer clic al botó "Hola", la pantalla es reiniciarà i es bloquejarà tractar de detectarà i detectarà l'error. Després de "captar l'error", l'informe d'error s'envia manualment al servei Sentinella.
El botó "Error" us permet detectar fàcilment un error.
vainilla/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>Notes:
- Sentry s'instal·la des d'un CDN i s'exposa com a variable global
- Una mica abans vam llançar Sentry al nostre JavaScript
Per provar aquest exemple, podem utilitzar una plataforma de servidor web estàtica NODE.JS: servidor http. Aneu a la carpeta on s'emmagatzema el fitxer index.html, i introduïu (opció amb desactiva la memòria cau) la línia següent per obrir l'adreça al navegador .
Com es mostren els errors capturats
Primer feu clic al botó "Hola".
Hem detectat un error, de manera que no apareixerà a la pila de trucades i, per tant, no es supervisa a la consola. Tanmateix, des que enviem a Sentinella Informeu un error manualment, veurem un missatge al respecte al vostre compte.
Notes:
- Podem rastrejar quina línia (24) conté l'error
- A més, la ruta de navegació mostra les accions del navegador que van provocar l'error.
Com es mostren els errors no detectats
Fent clic al botó "Error".
L'error fa bombolles a la pila de trucades i, per tant, es mostra un missatge d'error a la consola. Després d'això, Sentry supervisa automàticament l'error, sense cap acció addicional.
Notes:
- Podem veure en quina línia (30) es perd l'error
- No hi ha cap rastre de ruta (no entenc gaire per què)
Com garantir la seguretat del projecte
És possible que hàgiu notat la manera com controlem quines pàgines poden informar d'errors al nostre projecte Sentinella; amb ajuda dsn registres. El problema és que qualsevol persona que vegi el codi font de la vostra pàgina pot veure l'entrada.
Per evitar-ho, hem de limitar el nombre de dominis que poden enviar informes d'error al nostre projecte. En aquest exemple hem utilitzat localhost (localhost). Aquesta opció es configura a la pestanya de configuració Sentinella- projecte, Configuració del projecte Sentry.
Alliberaments
Si penseu en com utilitzar-lo Sentinella en diferents variacions de la nostra aplicació, necessitem algun tipus de mecanisme que marcarà els errors amb un número de versió.
Després de tot, no volem que l'error que hem corregit torni a aparèixer i creiem que el que hem corregit no ha funcionat. També pot ser que l'usuari hagi llançat una versió antiga de l'aplicació en memòria cau.
Per resoldre el problema, cal introduir l'identificador alliberament (versions) a l'inici Sentinella.
vainilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Després d'això, tots els errors nous es marcaran com a llançament (0.1.0), és a dir, estaran vinculats a la versió correcta del codi.
Notes:
- Hem descobert una manera senzilla d'utilitzar les versions
- Sentry us permet utilitzar més , que està molt relacionat amb GitHub. Aquesta funció permet fer un seguiment d'errors abans de realitzar determinades operacions.
PS La segona part és més llarga, així que estarà en una publicació a part.
PS Telegram xat Sentry
PS M'he oblidat d'indicar que es tracta d'una traducció del post
Font: www.habr.com