Service Sentry permet de surveiller à distance les bugs dans les applications front-end écrites en JavaScript.
Tenter de résoudre les problèmes dans les applications front-end sur JavaScript peut s'avérer être un défi, car ils surviennent dans le navigateur de l'utilisateur, auquel vous n'avez souvent pas accès. Cependant, Sentry permet de surveiller à distance les bugs.
vous pouvez télécharger les solutions abordées dans cet article.
Ce qu'il vous faut
Si vous souhaitez utiliser ces exemples, vous aurez besoin de :
- : Un outil de développement multifonction qui ne fait pas partie de l'application. Nous avons téléchargé la dernière version LTS (8.12.0)
- Sentry: Soit un compte sur le service Sentry (vous pouvez enregistrer jusqu'à 10 000 bugs par mois gratuitement), soit un Sentry installé localement —
Installation sur votre serveur
Pour installer Sentry On-Premise sur vos serveurs, vous pouvez suivre 2 voies
Construire des rpm et les installer —
Utiliser l'installateur officiel :
Installer Docker et docker-compose sur le serveur git clone https://github.com/getsentry/onpremise.git ./install.sh
Utilisation standard
Pour commencer, ajoutez un nouveau Sentry-projet pour l'application sur le site du service. Après avoir choisi le langage désiré, vous recevrez la documentation correspondante. Dans notre cas, nous avons choisi JavaScript.
Le premier exemple — standard JavaScript. Ici, il y a deux boutons : «Bonjour» (Hello) et «Erreur» (Error).
Après avoir cliqué sur le bouton «Bonjour», l'écran se rechargera et le bloc try détectera et interceptera le bug. Une fois le bug «intercepté», le rapport d'erreur est envoyé manuellement au service Sentry.
Le bouton «Erreur» permet simplement de détecter le bug.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanille</title>
</head>
<body>
<button id="hello">Bonjour</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>Remarques :
- Sentry est installé depuis le CDN et est affiché comme une variable globale
- Un peu plus tôt, nous avons lancé Sentry dans notre JavaScript
Pour tester cet exemple, nous pouvons utiliser une plateforme de serveur web statique Node.js: serveur http.Accédez au dossier où se trouve le fichier index.html, et tapez (l'option désactive la mise en cache) la ligne suivante pour ouvrir l'adresse dans le navigateur .
Comment les bugs interceptés sont affichés
Tout d'abord, cliquez sur le bouton «Bonjour».
Nous avons intercepté un bug, donc il ne remontera pas dans la pile d'appels, et ne sera donc pas surveillé dans la console. Cependant, comme nous envoyons Sentry le rapport de bug manuellement, nous verrons un message à son sujet dans le compte.
Remarques :
- Nous pouvons suivre dans quelle ligne (24) le bug s'est glissé.
- De plus, le fil d'Ariane affiche les actions du navigateur qui ont conduit à l'erreur.
Comment les bugs non attrapés sont affichés
Cliquons sur le bouton «Erreur».
Le bug remonte dans la pile d'appels et, par conséquent, un message d'erreur est affiché dans la console. Après cela, Sentry surveille automatiquement le bug, sans aucune action supplémentaire.
Remarques :
- Nous pouvons voir à quelle ligne (30) le bug s'est perdu
- Il n'y a pas de fil d'Ariane prévu (je ne comprends pas vraiment pourquoi)
Comment sécuriser le projet
Vous avez peut-être remarqué comment nous contrôlons les pages qui peuvent envoyer des rapports d'erreurs à notre projet Sentry; grâce à dsn enregistrements. Le problème est que l'entrée peut être vue par quiconque regardant le code source de votre page.
Pour éviter cela, il faut limiter le nombre de domaines qui peuvent injecter des rapports d'erreurs dans notre projet. Dans cet exemple, nous avons utilisé localhost (localhost). Cette option se configure dans l'onglet des paramètres Sentry-projet, Paramètre de Projet Sentry.
Releases
En réfléchissant à comment utiliser Sentry dans différentes variations de notre application, un mécanisme est nécessaire pour marquer les erreurs avec un numéro de version.
Il ne faut pas que le bug que nous avons corrigé réapparaisse, alors que nous pensions que notre correctif avait fonctionné. Il peut aussi arriver que l'utilisateur ait lancé une version plus ancienne et mise en cache de l'application.
Pour résoudre le problème, il faut saisir l'identifiant la sortie (version) lors du lancement Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Après cela, toutes les nouvelles erreurs seront marquées comme release (0.1.0), c'est-à-dire qu'elles seront liées à la bonne version du code.
Remarques :
- Nous avons présenté une méthode simple pour utiliser les releases
- Sentry permet d'appliquer des méthodes plus . Cette fonction permet de suivre les bugs avant d'effectuer certaines opérations. GitHubP.S. La deuxième partie est plus longue, elle sera donc dans un post séparé.
P.S. Chat Telegram Sentry
P.S. J'ai oublié de préciser que c'est une traduction de post
Accélérer le développement avec les services Azure : créer des chatbots et des services cognitifs avec la plateforme
Source : habr.com
