Service Sentinelle vous permet de surveiller à distance les bugs dans les applications frontales écrites en JavaScript.
Essayer de résoudre les problèmes dans les applications frontales sur JavaScript peuvent être délicats car ils proviennent du navigateur de l'utilisateur, auquel vous n'avez souvent pas accès. Cependant, Sentinelle permet de surveiller les bugs à distance.
Vous pouvez télécharger les solutions évoquées dans cet article.
Ce qui est nécessaire
Si vous souhaitez utiliser ces exemples, vous aurez besoin de :
- : Un outil de développement riche en fonctionnalités qui ne fait pas partie de l'application. Nous avons téléchargé la dernière version LTS (8.12.0)
- Sentinelle: Soit un compte dans le service Sentry (vous pouvez enregistrer jusqu'à 10 XNUMX bugs par mois gratuitement) soit un Sentry local installé -
Installation sur votre serveur
Pour installer Sentry On-Premise sur votre serveur, vous pouvez procéder de 2 manières
-
Construisez des RPM et installez-les -
-
Utilisez l'installateur officiel :
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Utilisation standard
Pour commencer, ajoutez-en un nouveau depuis le site Web du service. Sentinelle-projet pour l'application. Après avoir sélectionné la langue souhaitée, vous recevrez la documentation correspondante. Dans notre cas nous avons choisi JavaScript.
Le premier exemple est standard JavaScript. Il y a deux boutons ici : "Bonjour" (Bonjour et "Erreur" (Erreur).
Après avoir cliqué sur le bouton "Bonjour", l'écran redémarrera et le blocage Essai détectera et attrapera le bug. Une fois le bug « détecté », le rapport d’erreur est envoyé manuellement au service Sentinelle.
Le bouton « Erreur » permet de détecter facilement un bug.
vanille/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 est installé à partir d'un CDN et exposé en tant que 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ù le fichier est stocké index.html, et saisissez (option avec désactivation de la mise en cache) la ligne suivante pour ouvrir l'adresse dans le navigateur .
Comment les bugs détectés sont affichés
Cliquez d'abord sur le bouton "Bonjour".
Nous avons détecté un bug, il n'apparaîtra donc pas dans la pile d'appels et n'est donc pas surveillé dans la console. Cependant, puisque nous envoyons à Sentinelle signalez un bug manuellement, nous verrons un message à ce sujet dans votre compte.
Notes:
- Nous pouvons tracer quelle ligne (24) contient le bug
- De plus, le fil d'Ariane affiche les actions du navigateur qui ont conduit à l'erreur.
Comment les bugs non détectés sont affichés
En cliquant sur le bouton "Erreur".
Le bug remonte dans la pile d'appels et un message d'erreur s'affiche donc sur la console. Après cela, Sentry surveille automatiquement le bug, sans aucune action supplémentaire.
Notes:
- On voit dans quelle ligne (30) le bug est perdu
- Il n'y a pas de fil d'Ariane (je ne comprends pas très bien pourquoi)
Comment assurer la sécurité du projet
Vous avez peut-être remarqué la façon dont nous contrôlons quelles pages peuvent signaler des erreurs à notre projet Sentinelle; Avec de l'aide dsn enregistrements. Le problème est que l’entrée peut être vue par toute personne consultant le code source de votre page.
Pour éviter cela, nous devons limiter le nombre de domaines pouvant soumettre des rapports d'erreurs à notre projet. Dans cet exemple, nous avons utilisé localhost (hôte local). Cette option est configurée dans l'onglet paramètres Sentinelle-projet, Paramètre du projet Sentry.
Communiqués
Si vous réfléchissez à la façon d'utiliser Sentinelle dans différentes variantes de notre application, nous avons alors besoin d'une sorte de mécanisme qui marquera les erreurs avec un numéro de version.
Après tout, nous ne voulons pas que le bug que nous avons corrigé réapparaisse, et nous pensons que ce que nous avons corrigé n’a pas fonctionné. Il se peut également que l'utilisateur ait lancé une ancienne version mise en cache de l'application.
Pour résoudre le problème, vous devez saisir l'identifiant libération (versions) au démarrage Sentinelle.
vanille/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Après cela, toutes les nouvelles erreurs seront marquées comme libération (0.1.0), c'est-à-dire qu'ils seront liés à la version correcte du code.
Notes:
- Nous avons trouvé un moyen simple d'utiliser les versions
- Sentry vous permet d'utiliser davantage , qui est étroitement lié à GitHub. Cette fonction permet de suivre les bugs avant d'effectuer certaines opérations.
PS La deuxième partie est plus longue, elle sera donc dans un article séparé.
Chat PS Telegram Sentinelle
PS j'ai oublié d'indiquer qu'il s'agit d'une traduction du post
Source: habr.com