Platforma Wartownik umożliwia zdalne monitorowanie błędów w aplikacjach front-end napisanych w JAVASCRIPT.
Próbuję rozwiązać problemy w aplikacjach front-endowych JAVASCRIPT może być trudnym zadaniem, ponieważ mają miejsce w przeglądarce użytkownika, do której często nie masz dostępu. Jednakże, Wartownik umożliwia zdalne monitorowanie błędów.
Możesz pobrać rozwiązania omówione w tym artykule.
Co jest konieczne
Jeśli chcesz skorzystać z tych przykładów, będziesz potrzebować:
- :Wielofunkcyjne narzędzie programistyczne, które nie jest częścią aplikacji. Pobraliśmy najnowszą wersję LTS (8.12.0)
- Wartownik: Albo konto w usłudze Sentry (możesz bezpłatnie rejestrować do 10 tysięcy błędów miesięcznie), albo lokalnie zainstalowany Sentry —
Instalacja na Twoim serwerze
Aby zainstalować Sentry On-Premise na swoim serwerze, możesz skorzystać z 2 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 języka otrzymasz odpowiednią dokumentację. W naszym przypadku wybraliśmy JAVASCRIPT.
Pierwszy przykład jest standardowy. JAVASCRIPT. Znajdują się tutaj dwa przyciski: "Cześć" (Cześć) i "Błąd" (Błąd).
Po kliknięciu przycisku "Cześć", ekran uruchomi się ponownie i zablokuje próbować wykryje i złapie błąd. Po wykryciu błędu raport o błędzie jest ręcznie przesyłany do usługi Wartownik.
Przycisk „Błąd” ułatwia wykrycie błędu.
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://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>Uwagi:
- Sentry jest instalowany z CDN i udostępniany jako zmienna globalna
- 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 znajduje się plik index.htmli wprowadź (opcja z wyłącza buforowanie) następujący wiersz, aby otworzyć adres w przeglądarce .
W jaki sposób wyświetlane są złapane błędy?
Najpierw kliknij przycisk "Cześć".
Wykryliśmy błąd, więc nie będzie on umieszczany w stosie wywołań i w związku z tym nie będzie monitorowany w konsoli. Ponieważ jednak wysyłamy Wartownik Jeśli ręcznie zgłosisz błąd, na Twoim koncie pojawi się komunikat informujący o tym fakcie.
Uwagi:
- Możemy prześledzić, w którym wierszu (24) wkradł się błąd
- Ponadto ścieżka nawigacyjna wyświetla działania przeglądarki, które doprowadziły do błędu.
Jak wyświetlane są niezauważone błędy
Kliknij przycisk "Błąd".
Błąd jest wykrywany w stosie wywołań, a na konsoli wyświetlany jest komunikat o błędzie. Następnie Sentry automatycznie monitoruje błąd bez konieczności podejmowania dodatkowych działań.
Uwagi:
- Możemy zobaczyć, w którym wierszu (30) ukryty jest błąd
- Nie ma śladu (nie do końca rozumiem dlaczego)
Jak zapewnić bezpieczeństwo projektu
Być może zauważyłeś/aś sposób, w jaki kontrolujemy, które strony mogą przesyłać raporty o błędach do naszego projektu. 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 temu zapobiec, 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ę można skonfigurować w zakładce ustawień. Wartownik-projekt, Ustawienia projektu Sentry.
Wydania
Jeśli myślisz o tym, jak używać Wartownik w różnych wariantach naszej aplikacji potrzebny jest tutaj jakiś mechanizm, który będzie oznaczał błędy numerem wersji.
Nie chcemy, aby naprawiony przez nas błąd pojawił się ponownie i uznaliśmy, że to, co naprawiliśmy, nie zadziałało. Możliwe również, że użytkownik uruchomił starszą, zapisaną w pamięci podręcznej wersję aplikacji.
Aby rozwiązać problem należy wprowadzić identyfikator wydanie (wersje) przy uruchomieniu Wartownik.
wanilia/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Po tym wszystkie nowe błędy będą oznaczane jako uwolnienie (0.1.0), czyli będą powiązane z poprawną wersją kodu.
Uwagi:
- Omówiliśmy prosty sposób korzystania z wydań.
- Sentry pozwala na korzystanie z większej ilości , który jest ściśle powiązany z GitHub. Funkcja ta umożliwia śledzenie błędów przed wykonaniem pewnych operacji.
PS. Część druga jest dłuższa, więc będzie w osobnym poście.
PS. Czat telegramowy Sentry
PS. Zapomniałem dodać, że to tłumaczenie posta
Źródło: www.habr.com
