Platforma Wartownik pozwala na zdalne monitorowanie błędów w napisanych aplikacjach front-endowych JAVASCRIPT.
Próbuję rozwiązać problemy w aplikacjach front-end na JAVASCRIPT może być trudne, ponieważ pochodzą z przeglądarki użytkownika, do której często nie masz dostępu. Jednakże, Wartownik umożliwia zdalne monitorowanie błędów.
Rozwiązania omówione w tym artykule możesz pobrać.
Co jest konieczne
Jeśli chcesz skorzystać z tych przykładów, będziesz potrzebować:
- : Bogate w funkcje narzędzie programistyczne, które nie jest częścią aplikacji. Pobraliśmy najnowszą wersję LTS (8.12.0)
- Wartownik: Albo Konto w serwisie Sentry (możesz zarejestrować do 10 tysięcy błędów miesięcznie za darmo) lub zainstalowany lokalny Sentry -
Instalacja na Twoim serwerze
Aby zainstalować Sentry On-Premise na swoim serwerze, możesz skorzystać z dwóch sposobów
-
Zbuduj RPM i zainstaluj je -
-
Użyj oficjalnego instalatora:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardowe zastosowanie
Aby rozpocząć, dodaj nowy ze strony internetowej usługi Wartownik-projekt aplikacji. Po wybraniu żądanego języka otrzymasz odpowiednią dokumentację. W naszym przypadku wybraliśmy JAVASCRIPT.
Pierwszy przykład jest standardowy JAVASCRIPT. Znajdują się tu dwa przyciski: "Cześć" (Cześć i "Błąd" (Błąd).
Po kliknięciu przycisku "Cześć", ekran uruchomi się ponownie i blok próbować wykryje i złapie błąd. Po „wyłapaniu” błędu raport o błędzie jest ręcznie wysyłany do usługi Wartownik.
Przycisk „Błąd” pozwala łatwo wykryć błąd.
wanilia/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>Uwagi:
- Sentry jest instalowany z CDN i udostępniany jako zmienna globalna
- Nieco wcześniej uruchomiliśmy Sentry w naszym JavaScript
Aby przetestować ten przykład, możemy użyć statycznej platformy serwera WWW node.js: serwer http. Przejdź do folderu, w którym przechowywany jest plik index.htmli wprowadź (opcja z wyłączeniem buforowania) następujący wiersz, aby otworzyć adres w przeglądarce .
Sposób wyświetlania wyłapanych błędów
Najpierw kliknij przycisk "Cześć".
Wyłapaliśmy błąd, więc nie pojawi się on na stosie wywołań i dlatego nie jest monitorowany w konsoli. Ponieważ jednak wysyłamy do Wartownik zgłoś błąd ręcznie, zobaczymy o tym wiadomość na Twoim koncie.
Uwagi:
- Możemy prześledzić, która linia (24) zawiera błąd
- Ponadto ścieżka nawigacyjna wyświetla działania przeglądarki, które doprowadziły do błędu.
Sposób wyświetlania nieprzechwyconych błędów
Kliknięcie przycisku "Błąd".
Błąd powoduje zapełnienie stosu wywołań, przez co na konsoli wyświetlany jest komunikat o błędzie. Następnie Sentry automatycznie monitoruje błąd, bez żadnych dodatkowych działań.
Uwagi:
- Widzimy, w której linii (30) błąd został utracony
- Nie ma ścieżki nawigacyjnej (nie do końca rozumiem dlaczego)
Jak zapewnić bezpieczeństwo projektu
Być może zauważyłeś, w jaki sposób kontrolujemy, które strony mogą zgłaszać błędy w naszym projekcie Wartownik; z pomocą DSN dokumentacja. Problem polega na tym, że wprowadzone dane może zobaczyć każdy, kto przegląda kod źródłowy Twojej strony.
Aby tego uniknąć musimy ograniczyć liczbę domen, które mogą przesyłać raporty o błędach do naszego projektu. W tym przykładzie użyliśmy localhost (Lokalny Gospodarz). Opcję tę konfiguruje się w zakładce ustawień Wartownik-projekt, Ustawienia projektu Sentry.
Wydania
Jeśli myślisz o tym, jak używać Wartownik w różnych odmianach naszej aplikacji, wówczas potrzebny jest jakiś mechanizm, który będzie oznaczał błędy numerem wersji.
Przecież nie chcemy, aby naprawiony przez nas błąd pojawił się ponownie i uważamy, że to, co naprawiliśmy, nie zadziałało. Może się również zdarzyć, że użytkownik uruchomił starszą, buforowaną wersję aplikacji.
Aby rozwiązać problem, musisz wprowadzić identyfikator wydanie (wersje) przy uruchomieniu Wartownik.
wanilia/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Następnie wszystkie nowe błędy zostaną oznaczone jako uwolnienie (0.1.0), czyli będą powiązane z poprawną wersją kodu.
Uwagi:
- Wymyśliliśmy prosty sposób wykorzystania wydań
- Sentry pozwala na wykorzystanie więcej , z którym jest ściśle powiązany GitHub. Funkcja ta umożliwia śledzenie błędów przed wykonaniem określonych operacji.
PS Druga część jest dłuższa, więc będzie w osobnym poście.
Czat PS Telegram Sentry
PS Zapomniałem zaznaczyć, że jest to tłumaczenie posta
Źródło: www.habr.com