Orodja Sentry omogoča oddaljeno spremljanje hroščev v sprednjih aplikacijah, napisanih v JavaScript.
Poskušam odpraviti težave v sprednjih aplikacijah na JavaScript so lahko zapleteni, ker izvirajo iz uporabnikovega brskalnika, do katerega pogosto nimate dostopa. vendar Sentry omogoča oddaljeno spremljanje hroščev.
Rešitve, obravnavane v tem članku, lahko prenesete.
Kar je potrebno
Če želite uporabiti te primere, boste potrebovali:
- : Razvojno orodje z bogatimi funkcijami, ki ni del aplikacije. Prenesli smo najnovejšo različico LTS (8.12.0)
- Sentry: Račun v storitvi Sentry (brezplačno lahko posnamete do 10 tisoč hroščev na mesec) ali nameščen lokalni Sentry -
Namestitev na vaš strežnik
Za namestitev Sentry On-Premise na vaš strežnik lahko uporabite dva načina
-
Zgradite rpm in jih namestite -
-
Uporabite uradni namestitveni program:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardna uporaba
Za začetek dodajte novega s spletnega mesta storitve Sentry- projekt za prijavo. Po izbiri želenega jezika boste prejeli pripadajočo dokumentacijo. V našem primeru smo izbrali JavaScript.
Prvi primer je standarden JavaScript. Tukaj sta dva gumba: "Zdravo" (Pozdravljeni) in "Napaka" (Napaka).
Ko kliknete gumb "Zdravo", se bo zaslon znova zagnal in blokiral poskusite bo zaznal in ujel hrošča. Ko je napaka "ujeta", se poročilo o napaki ročno pošlje storitvi Sentry.
Gumb »Napaka« vam omogoča enostavno odkrivanje hrošča.
vanilla/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>Opombe:
- Sentry je nameščen iz CDN in izpostavljen kot globalna spremenljivka
- Malo prej smo zagnali Sentry v našem JavaScriptu
Za preizkus tega primera lahko uporabimo statično platformo spletnega strežnika Node.js: http strežnik. Pojdite v mapo, kjer je shranjena datoteka index.html, in vnesite (možnost z onemogočenim predpomnjenjem) naslednjo vrstico, da odprete naslov v brskalniku .
Kako so prikazani ujeti hrošči
Najprej kliknite gumb "Zdravo".
Ujeli smo napako, zato se ne bo prikazal v skladu klicev in se zato ne spremlja v konzoli. Ker pa pošiljamo na Sentry ročno prijavite hrošč, bomo v vašem računu videli sporočilo o tem.
Opombe:
- Izsledimo lahko, v kateri vrstici (24) je hrošč
- Poleg tega sled prikazuje dejanja brskalnika, ki so privedla do napake.
Kako so prikazani neulovljeni hrošči
S klikom na gumb "Napaka".
Napaka se dvigne v sklad klicev in tako se na konzoli prikaže sporočilo o napaki. Po tem Sentry samodejno spremlja hrošč, brez dodatnih dejanj.
Opombe:
- Vidimo lahko, v kateri vrstici (30) je hrošč izgubljen
- Ni sledi sledi (ne razumem čisto zakaj)
Kako zagotoviti varnost projekta
Morda ste opazili, kako nadziramo, katere strani lahko prijavijo napake našemu projektu Sentry; s pomočjo dsn zapisi. Težava je v tem, da lahko vnos vidi vsak, ki si ogleda izvorno kodo vaše strani.
Da bi se temu izognili, moramo omejiti število domen, ki lahko pošiljajo poročila o napakah našemu projektu. V tem primeru smo uporabili localhost (lokalni gostitelj). Ta možnost je konfigurirana v zavihku z nastavitvami Sentry-projekt, Nastavitev projekta Sentry.
Izpusti
Če razmišljate o tem, kako uporabiti Sentry v različnih različicah naše aplikacije, potem potrebujemo nekakšen mehanizem, ki bo napake označil s številko različice.
Konec koncev ne želimo, da se napaka, ki smo jo popravili, znova pojavi, in menimo, da tisto, kar smo popravili, ni delovalo. Lahko se tudi zgodi, da je uporabnik zagnal starejšo, predpomnjeno različico aplikacije.
Če želite rešiti težavo, morate vnesti identifikator sprostitev (različice) ob zagonu Sentry.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Po tem bodo vse nove napake označene kot izdaja (0.1.0), to pomeni, da bodo vezani na pravilno različico kode.
Opombe:
- Poiskali smo preprost način za uporabo izdaj
- Sentry vam omogoča uporabo več , ki je tesno povezana z GitHub. Ta funkcija omogoča sledenje napakam pred izvedbo določenih operacij.
PS Drugi del je daljši, zato bo v ločeni objavi.
PS Telegram klepet Sentry
PS Pozabil sem navesti, da je to prevod objave
Vir: www.habr.com