Servicio Sentry le permite monitorear de forma remota errores en aplicaciones front-end escritas en JavaScript.
Intentando solucionar problemas en las aplicaciones front-end en JavaScript Puede ser complicado porque se originan en el navegador del usuario, al que a menudo no se tiene acceso. Sin embargo, Sentry hace posible monitorear errores de forma remota.
Puede descargar las soluciones analizadas en este artículo.
Lo que se necesita
Si desea utilizar estos ejemplos, necesitará:
- : una herramienta de desarrollo rica en funciones que no forma parte de la aplicación. Descargamos la última versión LTS (8.12.0)
- Sentry: Ya sea una cuenta en el servicio Sentry (puede registrar hasta 10 mil errores por mes de forma gratuita) o un Sentry local instalado -
Instalación en su servidor
Para instalar Sentry On-Premise en su servidor, puede hacerlo de 2 maneras
-
Construya rpm e instálelos.
-
Utilice el instalador oficial:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Uso estándar
Para comenzar, agregue uno nuevo desde el sitio web del servicio. Sentry-proyecto para la aplicación. Tras seleccionar el idioma deseado, recibirás la documentación correspondiente. En nuestro caso elegimos JavaScript.
El primer ejemplo es estándar. JavaScript. Hay dos botones aquí: "Hola" (Hola y "Error" (Error).
Después de hacer clic en el botón "Hola", la pantalla se reiniciará y el bloque try detectará y atrapará el error. Una vez que se "detecta" el error, el informe de error se envía manualmente al servicio Sentry.
El botón "Error" le permite detectar fácilmente 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>Notas:
- Sentry se instala desde una CDN y se expone como una variable global
- Un poco antes lanzamos Sentry en nuestro JavaScript.
Para probar este ejemplo, podemos utilizar una plataforma de servidor web estático. Node.js: servidor http. Vaya a la carpeta donde está almacenado el archivo. index.htmle ingrese (opción con deshabilita el almacenamiento en caché) la siguiente línea para abrir la dirección en el navegador .
Cómo se muestran los errores detectados
Primero haga clic en el botón "Hola".
Detectamos un error, por lo que no aparecerá en la pila de llamadas y, por lo tanto, no se monitorea en la consola. Sin embargo, dado que enviamos a Sentry Si informa un error manualmente, veremos un mensaje al respecto en su cuenta.
Notas:
- Podemos rastrear qué línea (24) contiene el error.
- Además, la ruta de navegación muestra las acciones del navegador que provocaron el error.
Cómo se muestran los errores no detectados
Haciendo clic en el botón "Error".
El error aparece en la pila de llamadas y, por lo tanto, se muestra un mensaje de error en la consola. Después de esto, Sentry monitorea automáticamente el error, sin ninguna acción adicional.
Notas:
- Podemos ver en que linea (30) se pierde el bug
- No hay rastro de ruta de navegación (no entiendo muy bien por qué)
Cómo garantizar la seguridad del proyecto
Es posible que hayas notado la forma en que controlamos qué páginas pueden reportar errores a nuestro proyecto. Sentry; Con ayuda DSN registros. El problema es que cualquier persona que vea el código fuente de su página puede ver la entrada.
Para evitar esto, debemos limitar la cantidad de dominios que pueden enviar informes de errores a nuestro proyecto. En este ejemplo utilizamos localhost (anfitrión local). Esta opción se configura en la pestaña de configuración. Sentry-proyecto, Configuración del proyecto Sentry.
Lanzamientos
Si piensas en cómo utilizar Sentry en diferentes variaciones de nuestra aplicación, entonces necesitamos algún tipo de mecanismo que marque los errores con un número de versión.
Después de todo, no queremos que el error que solucionamos vuelva a aparecer y creemos que lo que solucionamos no funcionó. También puede ser que el usuario haya iniciado una versión anterior almacenada en caché de la aplicación.
Para resolver el problema, debe ingresar el identificador. liberar (versiones) al inicio Sentry.
vainilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Después de esto, todos los errores nuevos se marcarán como liberación (0.1.0), es decir, estarán vinculados a la versión correcta del código.
Notas:
- Hemos descubierto una forma sencilla de utilizar los lanzamientos.
- Sentry te permite usar más , que está estrechamente relacionado con GitHub. Esta función permite rastrear errores antes de realizar determinadas operaciones.
PD: La segunda parte es más larga, por lo que estará en una publicación aparte.
Centinela de chat de PS Telegram
PD: Olvidé indicar que esta es una traducción del post.
Fuente: habr.com