Servizo sentinela permítelle controlar de forma remota os erros nas aplicacións front-end escritas JavaScript.
Tentando solucionar problemas nas aplicacións front-end activadas JavaScript poden ser complicados porque se orixinan no navegador do usuario, ao que moitas veces non tes acceso. Non obstante, sentinela permite controlar de forma remota os erros.
Podes descargar as solucións discutidas neste artigo.
O necesario
Se queres usar estes exemplos, necesitarás:
- : Unha ferramenta de desenvolvemento rica en funcións que non forma parte da aplicación. Descargamos a última versión de LTS (8.12.0)
- sentinela: Ou unha conta no servizo Sentry (podes rexistrar ata 10 mil erros ao mes de balde) ou un Sentry local instalado -
Instalación no teu servidor
Para instalar Sentry On-Premise no teu servidor podes ir de dúas formas
-
Crea rpm e instálalos -
-
Use o instalador oficial:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Uso estándar
Para comezar, engade un novo desde o sitio web do servizo sentinela-proxecto para a solicitude. Despois de seleccionar o idioma desexado, recibirá a documentación correspondente. No noso caso escollemos JavaScript.
O primeiro exemplo é estándar JavaScript. Aquí hai dous botóns: "Ola" (Ola) e "Erro" (Erro).
Despois de facer clic no botón "Ola", a pantalla reiniciarase e o bloqueo intentar detectará e atrapará o erro. Despois de que o erro sexa "captado", o informe de erro envíase manualmente ao servizo sentinela.
O botón "Erro" permítelle detectar facilmente un erro.
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>Notas:
- Sentry instálase desde unha CDN e exponse como unha variable global
- Un pouco antes lanzamos Sentry no noso JavaScript
Para probar este exemplo, podemos usar unha plataforma de servidor web estática Nodo.js: servidor http. Vaia ao cartafol onde se almacena o ficheiro index.html, e introduza (opción con desactivación do caché) a seguinte liña para abrir o enderezo no navegador .
Como se mostran os erros capturados
Primeiro fai clic no botón "Ola".
Detectamos un erro, polo que non aparecerá na pila de chamadas e, polo tanto, non se supervisa na consola. Non obstante, xa que enviamos a sentinela informar dun erro manualmente, veremos unha mensaxe ao respecto na túa conta.
Notas:
- Podemos rastrexar que liña (24) contén o erro
- Ademais, a ruta de navegación mostra as accións do navegador que provocaron o erro.
Como se mostran os erros non detectados
Fai clic no botón "Erro".
O erro fai burbullas na pila de chamadas e, polo tanto, móstrase unha mensaxe de erro na consola. Despois diso, Sentry supervisa automaticamente o erro, sen ningunha acción adicional.
Notas:
- Podemos ver en que liña (30) se perde o erro
- Non hai ruta de miga de pan (non entendo moi ben por que)
Como garantir a seguridade do proxecto
Quizais teñades contado como controlamos que páxinas poden informar de erros no noso proxecto sentinela; con axuda dsn rexistros. O problema é que a entrada pode ser vista por calquera que vexa o código fonte da túa páxina.
Para evitar isto, temos que limitar o número de dominios que poden enviar informes de erros ao noso proxecto. Neste exemplo usamos localhost (anfitrión local). Esta opción está configurada na pestana de configuración sentinela-proxecto, Configuración do proxecto Sentry.
Lanzamentos
Se pensas en como usar sentinela en diferentes variacións da nosa aplicación, necesitamos algún tipo de mecanismo que marque os erros cun número de versión.
Despois de todo, non queremos que o erro que arranxamos volva aparecer e pensamos que o que arranxamos non funcionou. Tamén pode ser que o usuario iniciou unha versión máis antiga da aplicación en caché.
Para resolver o problema, cómpre introducir o identificador liberación (versións) ao inicio sentinela.
vainilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Despois disto, todos os novos erros marcaranse como versión (0.1.0), é dicir, estarán vinculados á versión correcta do código.
Notas:
- Descubrimos un xeito sinxelo de usar as versións
- Sentry permítelle usar máis , que está intimamente relacionado con GitHub. Esta función permite rastrexar erros antes de realizar determinadas operacións.
PD A segunda parte é máis longa, polo que estará nunha publicación aparte.
PS Telegram chat Sentry
PD Esquecín indicar que esta é unha tradución do post
Fonte: www.habr.com