Dienst Sentry ermöglicht die Fernüberwachung von Bugs in Frontend-Anwendungen, die in JavaScript.
Der Versuch, Probleme in Frontend-Anwendungen auf JavaScript kann eine schwierige Aufgabe sein, da sie im Browser des Benutzers auftreten, auf den Sie oft keinen Zugriff haben. Dennoch Sentry bietet die Möglichkeit, Bugs fernzuwarnen.
können die Lösungen heruntergeladen werden, die in diesem Artikel behandelt wurden.
Was benötigt wird
Wenn Sie diese Beispiele nutzen möchten, benötigen Sie:
- : Ein vielseitiges Entwicklungstool, das nicht Teil der Anwendung ist. Wir haben die neueste LTS-Version (8.12.0) heruntergeladen.
- Sentry: Entweder ein Konto im Sentry-Service (man kann kostenlos bis zu 10.000 Bugs pro Monat melden) oder ein installiertes lokales Sentry -
Installation auf Ihrem Server
Um Sentry On-Premise auf Ihren Server zu installieren, können Sie zwei Wege gehen
rpm paketieren und installieren -
Den offiziellen Installer verwenden:
Docker und docker-compose auf dem Server installieren git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardnutzung
Um zu beginnen, fügen Sie ein neues Sentry-Projekt für die Anwendung von der Website des Dienstes hinzu. Nach Auswahl der gewünschten Sprache erhalten Sie die entsprechende Dokumentation. In unserem Fall haben wir JavaScript.
Das erste Beispiel ist standardmäßig JavaScript. Hier gibt es zwei Schaltflächen: „Hallo“ (Hallo) und „Fehler“ (Fehler).
Nachdem Sie auf die Schaltfläche geklickt haben „Hallo“, wird der Bildschirm neu geladen und der Block try wird den Bug erkennen und erfassen. Nachdem der Bug „erfasst“ wurde, wird der Fehlerbericht manuell an den Dienst gesendet Sentry.
Die Schaltfläche „Fehler“ ermöglicht es einfach, den Bug zu erkennen.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Hallo</button>
<button id="error">Fehler</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>Hinweise:
- Sentry wird über CDN installiert und als globale Variable angezeigt
- Vorher haben wir Sentry in unserem JavaScript gestartet.
Um dieses Beispiel zu testen, können wir eine statische Webserver-Plattform nutzen Node.js: HTTP-Server. Gehen Sie in das Verzeichnis, in dem sich die Datei index.htmlbefindet, und geben Sie (Option zum Deaktivieren der Speicherung) die folgende Zeile ein, um die Adresse im Browser zu öffnen .
Wie erfasste Bugs angezeigt werden
Zuerst klicken wir auf die Schaltfläche „Hallo“.
Wir haben einen Bug erfasst, daher wird er nicht nach oben im Aufrufstapel erscheinen und wird nicht in der Konsole überwacht. Da wir jedoch in Sentry den Fehlerbericht manuell senden, werden wir eine Nachricht über denselben in unserem Konto sehen.
Hinweise:
- Wir können verfolgen, in welcher Zeile (24) der Bug aufgetaucht ist.
- Außerdem zeigt die Navigationskette die Aktionen des Browsers, die zu einem Fehler geführt haben.
Wie nicht gefangene Bugs angezeigt werden
Wir klicken auf die Schaltfläche „Fehler“.
Der Bug taucht im Call-Stack auf und somit wird die Fehlermeldung in der Konsole angezeigt. Danach überwacht Sentry den Bug automatisch, ohne zusätzliche Maßnahmen.
Hinweise:
- Wir können sehen, in welcher Zeile (30) der Bug verloren gegangen ist
- Die Navigationskette ist nicht vorgesehen (ich verstehe nicht ganz, warum)
Wie man die Sicherheit des Projekts gewährleistet
Sie haben vielleicht bemerkt, wie wir die Seiten kontrollieren, die Berichte über Fehler in unser Projekt senden können Sentry; mit Hilfe von dsn Einträgen. Das Problem ist, dass jeder, der den Quellcode Ihrer Seite einsehen kann, den Zugang sehen kann.
Um dies zu vermeiden, sollten wir die Anzahl der Domains beschränken, die Berichte über Fehler in unser Projekt eintragen können. In diesem Beispiel haben wir localhost (localhost) verwendet. Diese Option wird im Bereich Einstellungen Sentry-Projekt, Sentry-Projekteinstellungen.
Versionen
Wenn man darüber nachdenkt, wie man Sentry in verschiedenen Varianten unserer Anwendung verwenden kann, dann benötigt man einen Mechanismus, der Fehler mit einer Versionsnummer kennzeichnet.
Es sollte nicht so sein, dass ein von uns behobener Bug erneut auftritt, und wir denken, dass das Fix nicht funktioniert hat. Es kann auch sein, dass der Benutzer eine ältere, zwischengespeicherte Version der Anwendung gestartet hat.
Um das Problem zu lösen, muss man die ID der Veröffentlichung (Version) beim Start Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Nach diesem Schritt werden alle neuen Fehler als release (0.1.0), das heißt, sie werden der richtigen Codeversion zugeordnet.
Hinweise:
- Wir haben einen einfachen Weg besprochen, um Releases zu verwenden
- Sentry ermöglicht kompliziertere . Diese Funktion ermöglicht es, Bugs bis zu bestimmten Operationen zu verfolgen. GitHubP.S. Der zweite Teil ist länger, daher wird er in einem separaten Beitrag veröffentlicht.
P.S. Telegram-Chat Sentry
P.S. Ich habe vergessen zu erwähnen, dass dies eine Übersetzung des Beitrags ist
P.S. Ich habe ganz vergessen zu erwähnen, dass dies eine Übersetzung des Beitrags ist
Quelle: habr.com
