Serwis Sentry umożliwia zdalne monitorowanie błędów w aplikacjach frontendowych napisanych w JavaScript.
Próba rozwiązania problemów w aplikacjach frontendowych na JavaScript może być niełatwym zadaniem, ponieważ występują one w przeglądarkach użytkowników, do których często nie macie dostępu. Jednak Sentry umożliwia zdalne monitorowanie błędów.
można pobrać rozwiązania, które zostały omówione w tym artykule.
Co potrzebne
Jeśli chcesz skorzystać z tych przykładów, będziesz potrzebować:
- : Wielofunkcyjne narzędzie do tworzenia, które nie jest częścią aplikacji. Pobieraliśmy ostatnią wersję LTS (8.12.0)
- Sentry: Możesz albo zarejestrować konto w serwisie Sentry (możesz za darmo zgłaszać do 10 tys. błędów miesięcznie) albo zainstalować lokalnie Sentry —
Instalacja na swoim serwerze
Aby zainstalować Sentry On-Premise na swoim serwerze, można podjąć dwie drogi
Zbudować rpm i je zainstalować —
Skorzystać z oficjalnego instalatora:
Zainstalować na serwerze docker i docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardowe użycie
Aby rozpocząć, dodaj nowy Sentry-projekt dla aplikacji. Po wyborze odpowiedniego języka otrzymasz właściwą dokumentację. W naszym przypadku wybraliśmy JavaScript.
Pierwszy przykład — standardowy JavaScript. Oto dwie przyciski: „Hello” (Cześć) i „Error” (Błąd).
Po kliknięciu przycisku „Hello”, ekran zostanie przeładowany, a blok try wykryje i złapie błąd. Po złapaniu błędu raport o błędzie zostaje ręcznie przesłany do serwisu Sentry.
Przycisk „Error” pozwala po prostu wykryć błąd.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Cześć</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 wyświetlany jako zmienna globalna
- Trochę wcześniej uruchomiliśmy Sentry w naszym JavaScript
Aby przetestować ten przykład, możemy skorzystać z platformy statycznego serwera internetowego Node.js: serwera http. Wchodzimy do folderu, w którym znajduje się plik index.html, i wprowadzamy (opcja z wyłączeniem cache’owania) następującą linię, aby otworzyć w przeglądarce adres .
Jak wyświetlane są złapane błędy
Najpierw klikamy przycisk „Hello”.
Złapaliśmy błąd, więc nie pojawi się on na górze stosu wywołań, dlatego nie jest monitorowany w konsoli. Jednak, ponieważ ręcznie wysyłamy Sentry raport o błędzie, to zobaczymy o nim komunikat w koncie.
Uwagi:
- Możemy zobaczyć, w którym wierszu (24) wystąpił błąd
- Ponadto, łańcuch nawigacji wyświetla działania przeglądarki, które doprowadziły do błędu.
Jak wyświetlane są nieuchwycone błędy
Klikamy przycisk „Błąd”.
Błąd pojawia się w górnej części stosu wywołań, a zatem na konsoli wyświetlane jest komunikat o błędzie. Po tym Sentry automatycznie monitoruje błąd, bez żadnych dodatkowych działań.
Uwagi:
- Możemy zobaczyć, w którym miejscu (30) zniknął błąd
- Nie przewidziano łańcucha nawigacyjnego (nie do końca rozumiem dlaczego)
Jak zapewnić bezpieczeństwo projektu
Być może zauważyłeś sposób, w jaki kontrolujemy strony, które mogą wysyłać raporty o błędach do naszego projektu Sentry; za pomocą dsn rejestrów. Problem w tym, że dostęp może mieć każdy, kto przegląda kod źródłowy twojej strony.
Aby temu zapobiec, należy ograniczyć liczbę domen, które mogą wysyłać raporty o błędach do naszego projektu. W tym przykładzie użyliśmy localhost (localhost). Ta opcja jest konfigurowana na karcie ustawień Sentry-projektu, Ustawienia Projektu Sentry.
Wydania
Jeśli pomyślimy o tym, jak używać Sentry w różnych wariantach naszej aplikacji, potrzebny jest jakiś mechanizm, który będzie oznaczać błędy numerem wersji.
Nie chcemy, aby naprawiony przez nas błąd znowu się pojawił, a my myśleliśmy, że to, co naprawiliśmy, nie zadziałało. Może się zdarzyć, że użytkownik uruchomił starszą, pamiętaną wersję aplikacji.
Aby rozwiązać problem, należy wpisać identyfikator wydania (wersja) przy uruchomieniu Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Po tym wszystkim nowe błędy będą oznaczane jako release (0.1.0), co oznacza, że będą powiązane z właściwą wersją kodu.
Uwagi:
- Omówiliśmy prosty sposób użycia wydania
- Sentry pozwala stosować bardziej , co jest ściśle związane z GitHub. Ta funkcjonalność pozwala śledzić błędy przed podjęciem określonych działań.
P.S. Druga część jest dłuższa, dlatego zostanie opublikowana w oddzielnym poście.
P.S. Czatu Telegram Sentry
P.S. Zapomniałem dodać, że to jest tłumaczenie posta
Źródło: habr.com
