Dienste Sentry ermöglicht das Fernmonitoring von Bugs in Frontend-Anwendungen, die geschrieben sind in JavaScript.
Der Versuch, Probleme in Frontend-Anwendungen auf JavaScript kann eine herausfordernde Aufgabe sein, da sie im Browser des Benutzers auftreten, auf den Sie oft keinen Zugriff haben. Dennoch, Sentry ermöglicht das Fernmonitoring von Bugs.
Sie können Lösungen herunterladen, die in diesem Artikel behandelt wurden.
Was wird benötigt
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 bei Sentry (kostenlos können bis zu 10.000 Bugs pro Monat aufgezeichnet werden) oder ein lokales Sentry, das installiert ist —
Installation auf Ihrem Server
Um Sentry On-Premise auf Ihren Servern zu installieren, gibt es zwei Ansätze
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 eine neue Instanz von der Webseite des Dienstes hinzu Sentry-Projekt für die Anwendung. Nach der Auswahl der gewünschten Sprache erhalten Sie die entsprechende Dokumentation. In unserem Fall haben wir ausgewählt JavaScript.
Das erste Beispiel ist ein Standard- 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 erkennt und fängt den Fehler. Sobald der Fehler „gefangen“ wurde, wird der Fehlerbericht manuell an den Dienst Sentry.
Die Schaltfläche „Fehler“ ermöglicht es einfach, den Fehler 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 von CDN bereitgestellt und als globale Variable angezeigt
- Vorher haben wir Sentry in unserem JavaScript aktiviert
Um dieses Beispiel zu testen, können wir eine statische Webserver-Plattform Node.js: HTTP-Server. Gehen Sie in den Ordner, in dem die Datei gespeichert ist, und geben Sie (die Option deaktiviert den Cache) die folgende Zeile ein, um die Adresse im Browser zu öffnen index.htmlWie gefangene Fehler angezeigt werden .
Zuerst klicken wir auf die Schaltfläche
Wir haben einen Fehler gefangen, daher wird er nicht nach oben im Aufrufstapel angezeigt und nicht in der Konsole überwacht. Da wir jedoch den „Hallo“.
Fehlerbericht manuell senden, sehen wir die Meldung darüber in unserem Konto. Sentry Wir können nachverfolgen, in welcher Zeile (24) sich der Fehler versteckt hat.
Hinweise:
- Wir können nachverfolgen, in welcher Zeile (24) sich der Fehler eingeschlichen hat
- Darüber hinaus zeigt die Navigationskette die Aktionen des Browsers an, die zu einem Fehler geführt haben.
So werden nicht gefangene Bugs angezeigt
Wir klicken auf die Schaltfläche „Error“.
Der Bug wird im Aufrufstapel nach oben geschoben und somit wird eine Fehlermeldung in der Konsole angezeigt. Danach überwacht Sentry den Bug automatisch, ohne dass weitere Maßnahmen erforderlich sind.
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
Vielleicht haben Sie bereits bemerkt, wie wir die Seiten überwachen, die Fehlerberichte an unser Projekt senden können. Sentry; mithilfe von dsn -Einträgen. Das Problem dabei ist, dass jeder, der den Quellcode Ihrer Seite einsehen kann, Zugriff darauf hat.
Um dies zu verhindern, müssen wir die Anzahl der Domänen begrenzen, die Fehlerberichte in unser Projekt eintragen können. In diesem Beispiel haben wir localhost (localhost) verwendet. Diese Option wird im Einstellungsbereich Sentry-Projekt Sentry-Projekteinstellungen.
Releases
Wenn man darüber nachdenkt, wie man Sentry In verschiedenen Varianten unserer Anwendung ist ein Mechanismus erforderlich, der Fehler mit einer Versionsnummer kennzeichnet.
Es sollte nicht passieren, dass ein von uns behobener Fehler erneut auftritt, während wir dachten, dass das, was wir behoben haben, nicht funktioniert hat. Möglicherweise hat der Benutzer auch eine ältere, zwischengespeicherte Version der Anwendung gestartet.
Um das Problem zu lösen, muss die Identifikationsnummer Release (der Version) beim Start eingetragen werden. 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), also an die richtige Codeversion gebunden, markiert.
Hinweise:
- Wir haben eine einfache Möglichkeit behandelt, wie man Releases nutzen kann.
- Sentry ermöglicht die Anwendung einer , die eng mit GitHubverknüpft ist. Diese Funktion ermöglicht es, Bugs bis zu bestimmten Operationen zu verfolgen.
P.S. Der zweite Teil ist länger, daher wird er in einem separaten Beitrag veröffentlicht.
P.S. Telegram-Chat zu Sentry
P.S. Ich habe vergessen zu erwähnen, dass dies eine Übersetzung des Beitrags ist.
Quelle: habr.com
