Service Sentry ermöglicht Ihnen die Fernüberwachung von Fehlern in geschriebenen Front-End-Anwendungen JavaScript.
Ich versuche, Probleme in Front-End-Anwendungen zu beheben JavaScript können schwierig sein, da sie ihren Ursprung im Browser des Benutzers haben, auf den Sie oft keinen Zugriff haben. Jedoch, Sentry ermöglicht die Fernüberwachung von Fehlern.
Sie können die in diesem Artikel besprochenen Lösungen herunterladen.
Was benötigt wird
Wenn Sie diese Beispiele verwenden möchten, benötigen Sie:
- : Ein funktionsreiches Entwicklungstool, das nicht Teil der Anwendung ist. Wir haben die neueste LTS-Version (8.12.0) heruntergeladen.
- Sentry: Entweder ein Konto im Sentry-Dienst (Sie können bis zu 10 Bugs pro Monat kostenlos aufzeichnen) oder ein installierter lokaler Sentry –
Installation auf Ihrem Server
Um Sentry On-Premise auf Ihrem Server zu installieren, haben Sie zwei Möglichkeiten
-
Erstellen Sie RPM und installieren Sie sie -
-
Verwenden Sie das offizielle Installationsprogramm:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardgebrauch
Fügen Sie zunächst ein neues von der Service-Website hinzu Sentry-Projekt für die Anwendung. Nach Auswahl der gewünschten Sprache erhalten Sie die entsprechende Dokumentation. In unserem Fall haben wir uns entschieden JavaScript.
Das erste Beispiel ist Standard JavaScript. Hier gibt es zwei Schaltflächen: "Hallo" (Hallo und "Fehler" (Fehler).
Nachdem Sie auf die Schaltfläche geklickt haben "Hallo", der Bildschirm wird neu gestartet und der Block versuchen wird den Fehler erkennen und abfangen. Nachdem der Fehler „erkannt“ wurde, wird der Fehlerbericht manuell an den Dienst gesendet Sentry.
Mit der Schaltfläche „Fehler“ können Sie einen Fehler leicht erkennen.
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 wird von einem CDN installiert und als globale Variable bereitgestellt
- Etwas früher haben wir Sentry in unserem JavaScript gestartet
Um dieses Beispiel zu testen, können wir eine statische Webserverplattform verwenden Node.js: http-Server. Gehen Sie zu dem Ordner, in dem die Datei gespeichert ist index.htmlund geben Sie (Option mit deaktiviertem Caching) die folgende Zeile ein, um die Adresse im Browser zu öffnen .
Wie gefangene Fehler angezeigt werden
Klicken Sie zunächst auf die Schaltfläche "Hallo".
Da uns ein Fehler aufgefallen ist, wird er nicht im Aufrufstapel angezeigt und daher nicht in der Konsole überwacht. Da wir jedoch an senden Sentry Wenn Sie einen Fehler manuell melden, wird in Ihrem Konto eine entsprechende Meldung angezeigt.
Notes:
- Wir können nachvollziehen, welche Zeile (24) den Fehler enthält
- Darüber hinaus zeigt der Breadcrumb-Trail die Browseraktionen an, die zum Fehler geführt haben.
Wie nicht erkannte Fehler angezeigt werden
Klicken Sie auf die Schaltfläche "Fehler".
Der Fehler führt zu Blasenbildung im Aufrufstapel und daher wird eine Fehlermeldung auf der Konsole angezeigt. Danach überwacht Sentry den Fehler automatisch, ohne dass weitere Maßnahmen erforderlich sind.
Notes:
- Wir können sehen, in welcher Zeile (30) der Fehler verloren geht
- Es gibt keine Breadcrumb-Spur (ich verstehe nicht ganz, warum)
So gewährleisten Sie die Projektsicherheit
Möglicherweise ist Ihnen aufgefallen, wie wir steuern, welche Seiten Fehler an unser Projekt melden können Sentry; mittels dsn Aufzeichnungen. Das Problem besteht darin, dass die Eingabe für jeden sichtbar ist, der sich den Quellcode Ihrer Seite ansieht.
Um dies zu vermeiden, müssen wir die Anzahl der Domänen begrenzen, die Fehlerberichte an unser Projekt senden können. In diesem Beispiel haben wir verwendet localhost (lokaler Host). Diese Option wird auf der Registerkarte „Einstellungen“ konfiguriert Sentry-Projekt, Einstellung des Sentry-Projekts.
Veröffentlichungen
Wenn Sie darüber nachdenken, wie Sie es verwenden Sentry In verschiedenen Variationen unserer Anwendung benötigen wir einen Mechanismus, der Fehler mit einer Versionsnummer markiert.
Schließlich möchten wir nicht, dass der Fehler, den wir behoben haben, erneut auftritt, und wir denken, dass das, was wir behoben haben, nicht funktioniert hat. Es kann auch sein, dass der Benutzer eine ältere, zwischengespeicherte Version der Anwendung gestartet hat.
Um das Problem zu lösen, müssen Sie die Kennung eingeben freigeben (Versionen) beim Start Sentry.
vanille/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Danach werden alle neuen Fehler mit markiert Freigabe (0.1.0), das heißt, sie werden an die richtige Version des Codes gebunden.
Notes:
- Wir haben eine einfache Möglichkeit gefunden, Releases zu verwenden
- Mit Sentry können Sie mehr nutzen , was eng damit zusammenhängt GitHub. Diese Funktion ermöglicht es, Fehler zu verfolgen, bevor bestimmte Vorgänge ausgeführt werden.
PS: Der zweite Teil ist länger und wird daher in einem separaten Beitrag veröffentlicht.
PS Telegram-Chat Sentry
PS: Ich habe vergessen anzugeben, dass es sich um eine Übersetzung des Beitrags handelt
Source: habr.com