usluga stražar omogućava vam daljinsko praćenje grešaka u front-end aplikacijama napisanim JavaScript.
Pokušavam riješiti probleme u front-end aplikacijama JavaScript mogu biti zeznute jer potiču iz pretraživača korisnika, kojem često nemate pristup. Kako god, stražar omogućava daljinsko praćenje grešaka.
Možete preuzeti rješenja o kojima se govori u ovom članku.
Šta je potrebno
Ako želite koristiti ove primjere, trebat će vam:
- : Alat za razvoj bogat funkcijama koji nije dio aplikacije. Preuzeli smo najnoviju LTS verziju (8.12.0)
- stražar: Ili račun u servisu Sentry (možete snimiti do 10 hiljada grešaka mjesečno besplatno) ili instalirani lokalni Sentry -
Instalacija na vašem serveru
Da biste instalirali Sentry On-Premise na vaš server, možete ići na 2 načina
-
Napravite rpm i instalirajte ih -
-
Koristite službeni instalater:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardna upotreba
Za početak dodajte novi sa web stranice usluge stražar-projekat za aplikaciju. Nakon odabira željenog jezika, dobićete odgovarajuću dokumentaciju. U našem slučaju smo izabrali JavaScript.
Prvi primjer je standardan JavaScript. Ovdje se nalaze dva dugmeta: "Zdravo" (Zdravo) i "Greška" (Greška).
Nakon što kliknete na dugme "Zdravo", ekran će se ponovo pokrenuti i blokirati pokušati će otkriti i uhvatiti grešku. Nakon što je greška „uhvaćena“, izvještaj o grešci se ručno šalje servisu stražar.
Dugme “Greška” vam omogućava da lako otkrijete grešku.
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>Napomene:
- Sentry je instaliran sa CDN-a i izložen kao globalna varijabla
- Malo ranije smo pokrenuli Sentry u našem JavaScriptu
Za testiranje ovog primjera možemo koristiti statičku web serversku platformu node.js: http server. Idite u folder u kojem je datoteka pohranjena index.html, i unesite (opcija sa onemogućavanjem keširanja) sljedeći red da otvorite adresu u pretraživaču .
Kako se prikazuju uhvaćene greške
Prvo kliknite na dugme "Zdravo".
Uhvatili smo grešku, tako da se neće pojaviti na steku poziva, pa se stoga ne nadgleda u konzoli. Međutim, pošto šaljemo na stražar prijavite grešku ručno, vidjet ćemo poruku o tome na vašem računu.
Napomene:
- Možemo pratiti koji red (24) sadrži grešku
- Osim toga, staza kruha prikazuje radnje pretraživača koje su dovele do greške.
Kako se prikazuju neuhvaćene greške
Kliknite na dugme "Greška".
Greška se pojavljuje u steku poziva i tako se na konzoli prikazuje poruka o grešci. Nakon toga, Sentry automatski prati grešku, bez ikakvih dodatnih radnji.
Napomene:
- Možemo vidjeti u kojem redu (30) je greška izgubljena
- Nema traga od mrvica (ne razumijem baš zašto)
Kako osigurati sigurnost projekta
Možda ste primijetili način na koji kontroliramo koje stranice mogu prijaviti greške našem projektu stražar; uz pomoć dsn evidencije. Problem je što unos može vidjeti svako ko vidi izvorni kod vaše stranice.
Da bismo to izbjegli, moramo ograničiti broj domena koje mogu slati izvještaje o greškama našem projektu. U ovom primjeru smo koristili localhost (lokalni domaćin). Ova opcija je konfigurisana na kartici postavki stražar-projekat, Sentry Project Setting.
Izdanja
Ako razmislite o tome kako koristiti stražar u različitim varijacijama naše aplikacije, tada nam je potrebna neka vrsta mehanizma koji će označavati greške brojem verzije.
Na kraju krajeva, ne želimo da se greška koju smo popravili ponovo pojavi i mislimo da ono što smo popravili nije funkcionisalo. Takođe može biti da je korisnik pokrenuo stariju, keširanu verziju aplikacije.
Da biste riješili problem, morate unijeti identifikator puštanje (verzije) pri pokretanju stražar.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Nakon toga, sve nove greške će biti označene kao izdanje (0.1.0), odnosno bit će vezani za ispravnu verziju koda.
Napomene:
- Shvatili smo jednostavan način korištenja izdanja
- Sentry vam omogućava da koristite više , što je usko povezano sa GitHub. Ova funkcija omogućava praćenje grešaka prije izvođenja određenih operacija.
PS Drugi dio je duži, pa će biti u posebnom postu.
PS Telegram chat Sentry
PS Zaboravio sam naznačiti da je ovo prijevod posta
izvor: www.habr.com