El servicio Sentry permite monitorear errores de forma remota en aplicaciones frontend escritas en JavaScript.
Intentar resolver problemas en aplicaciones frontend en JavaScript puede ser un desafío complicado, ya que ocurren en el navegador del usuario, al que, a menudo, no tienes acceso. Sin embargo, Sentry ofrece la posibilidad de monitorear errores de forma remota.
puedes descargar las soluciones que se discutieron en este artículo.
Qué necesitas
Si deseas utilizar estos ejemplos, necesitarás:
- : Una herramienta multifuncional para el desarrollo que no es parte de la aplicación. Descargamos la última versión LTS (8.12.0)
- Sentry: Ya sea una cuenta en el servicio Sentry (puedes registrar hasta 10,000 errores al mes de forma gratuita) o un Sentry local instalado —
Instalación en tu servidor
Para instalar Sentry On-Premise en tu servidor, hay dos caminos que puedes seguir
Compilar rpm e instalarlos —
Utilizar el instalador oficial:
Instalar docker y docker-compose en el servidor git clone https://github.com/getsentry/onpremise.git ./install.sh
Uso estándar
Para comenzar, agrega un nuevo Sentry-proyecto para la aplicación desde el sitio del servicio. Después de seleccionar el idioma necesario, recibirás la documentación correspondiente. En nuestro caso, elegimos JavaScript.
El primer ejemplo es el estándar JavaScript. Aquí hay dos botones: «Hello» (Hola) y «Error» (Error).
Después de hacer clic en el botón «Hello», la pantalla se actualizará y el bloque intentar detectará y capturará el error. Una vez que el error sea «capturado», el informe del error se envía manualmente al servicio Sentry.
El botón «Error» permite simplemente detectar el error.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Hola</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>Notas:
- Sentry se instala desde CDN y se muestra como una variable global
- Un poco antes iniciamos Sentry en nuestro JavaScript
Para probar este ejemplo, podemos utilizar una plataforma de servidor web estático Node.js: servidor http. Accede a la carpeta donde se encuentra el archivo index.html, y escribe (la opción con desactiva la caché) la siguiente línea para abrir en el navegador la dirección .
Cómo se muestran los errores capturados
Primero, hacemos clic en el botón «Hello».
Capturamos un error, por lo que no subirá por la pila de llamadas y no se monitorea en la consola. Sin embargo, como estamos enviando Sentry el informe del error manualmente, veremos un mensaje sobre él en la cuenta.
Notas:
- Podemos rastrear en qué línea (24) se produjo el error
- Además, la cadena de navegación muestra las acciones del navegador que llevaron al error.
Cómo se muestran los errores no capturados
Hacemos clic en el botón «Error».
El error se eleva 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 necesidad de acciones adicionales.
Notas:
- Podemos ver en qué línea (30) se ha perdido el error
- No se previó una cadena de navegación (no entiendo muy bien por qué)
Cómo asegurar la seguridad del proyecto
Es posible que haya notado cómo controlamos las páginas que pueden enviar informes de errores a nuestro proyecto Sentry; utilizando dsn registros. El problema es que cualquiera que vea el código fuente de su página puede ver la entrada.
Para evitar esto, es necesario limitar la cantidad de dominios que pueden enviar informes de errores a nuestro proyecto. En este ejemplo, utilizamos localhost (localhost). Esta opción se configura en la pestaña de configuración Sentry-del proyecto, Configuración del Proyecto Sentry.
Versiones
Si se piensa en cómo usar Sentry en las diferentes variaciones de nuestra aplicación, se necesita un mecanismo que marque los errores con un número de versión.
No queremos que un error que hemos corregido aparezca de nuevo, mientras pensamos que lo que arreglamos no funcionó. También puede ser que el usuario haya lanzado una versión anterior de la aplicación que se había guardado en caché.
Para resolver el problema, es necesario incluir el identificador el lanzamiento (de la versión) al ejecutar Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Después de esto, todos los nuevos errores se marcarán como release (0.1.0), es decir, estarán vinculados a la versión correcta del código.
Notas:
- Hemos revisado un método simple de cómo usar versiones
- Sentry permite aplicar una , que está estrechamente relacionada con GitHub. Esta función permite rastrear errores antes de realizar ciertas operaciones.
P.D. La segunda parte es más larga, por lo que estará en una publicación aparte.
P.D. Chat de Telegram Sentry
P.D. Olvidé mencionar que esta es una traducción de la publicación
Fuente: habr.com
