Služba Sentry umožňuje vzdialene monitorovať chyby vo frontendových aplikáciách napísaných v JavaScript.
Pokúsiť sa odstrániť problémy v frontendových aplikáciách na JavaScript môže byť náročná úloha, pretože sa vyskytujú v prehliadači používateľa, ku ktorému často nemáte prístup. Avšak, Sentry umožňuje vzdialene monitorovať chyby.
môžete si stiahnuť riešenia, ktoré sa uvádzali v tomto článku.
Čo potrebujete
Ak chcete využiť tieto príklady, budete potrebovať:
- : Multifunkčný nástroj na vývoj, ktorý nie je súčasťou aplikácie. Stiahli sme poslednú LTS verziu (8.12.0)
- Sentry: Buď účet v službe Sentry (môžete bezplatne zaznamenávať až 10 000 chýb za mesiac) alebo nainštalovaný lokálny Sentry —
Inštalácia na váš server
Pre inštaláciu Sentry On-Premise na vaše servery môžete ísť dvoma cestami
Zostaviť rpm a nainštalovať ich —
Využiť oficiálny inštalátor:
Nainštalujte na server docker a docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Štandardné použitie
Aby ste začali, pridajte z webovej stránky služby nový Sentry-projekt pre aplikáciu. Po výbere požadovaného jazyka dostanete zodpovedajúcu dokumentáciu. V našom prípade sme vybrali JavaScript.
Prvý príklad — štandardný JavaScript. Tu sú dve tlačidlá: „Hello“ (Ahoj) a „Error“ (Chyba).
Po kliknutí na tlačidlo „Hello“, obrazovka sa obnovení a blok try nájde a zachytí chybu. Po tom, ako je chyba „zachytená“, sa správa o chybe manuálne posiela na službu Sentry.
Tlačidlo „Error“ umožňuje jednoducho odhaliť chybu.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilka</title>
</head>
<body>
<button id="hello">Ahoj</button>
<button id="error">Chyba</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>Poznámky:
- Sentry sa inštaluje z CDN a zobrazuje sa ako globálna premenná
- Trochu predtým sme spustili Sentry v našom JavaScripte
Aby sme otestovali tento príklad, môžeme využiť statickú webovú serverovú platformu Node.js: http-server. Prejdeme do priečinka, kde sa nachádza súbor index.html, a zadajte (možnosť s vypnutím ukladania do vyrovnávacej pamäte) nasledujúci riadok, aby ste otvorili v prehliadači adresu .
Ako sa zobrazujú zachytené chyby
Najprv klikneme na tlačidlo „Hello“.
Zachytili sme chybu, preto sa neobjaví vyššie v zásobníku volaní, takže nie je monitorovaná v konzole. Avšak, keď posielame Sentry správu o chybe manuálne, uvidíme správu o nej vo svojom účte.
Poznámky:
- Môžeme sledovať, v ktorom riadku (24) sa chyba vyskytla
- Navyše, navigačná reťazec zobrazuje akcie prehliadača, ktoré viedli k chybe.
Ako sa zobrazujú nepodarené chyby
Klikneme na tlačidlo „Chyba“.
Chyba sa zobrazuje na vrchole zásobníka volaní a na konzole sa tak objaví chybové hlásenie. Potom Sentry automaticky sleduje chybu bez akýchkoľvek dodatočných akcií.
Poznámky:
- Môžeme vidieť, v ktorom riadku (30) sa chyba stratila
- Nie je predpokladaná navigačná reťazec (celkom nerozumiem prečo)
Ako zabezpečiť bezpečnosť projektu
Možno ste si všimli, ako kontrolujeme stránky, ktoré môžu odosielať hlásenia o chybách do nášho projektu Sentry; pomocou dsn záznamu. Problém spočíva v tom, že vstup môže vidieť každý, kto si prezerá zdrojový kód vašej stránky.
Aby sa tomu predišlo, je potrebné obmedziť počet domén, ktoré môžu posielať do nášho projektu hlásenia o chybách. V tomto príklade sme použili localhost (lokálny hostiteľ). Táto možnosť sa nastavuje na karte nastavení Sentry-projektu, Nastavenie projektu Sentry.
Vydania
Ak si predstavíme, ako používať Sentry v rôznych variáciách našej aplikácie, je tu potrebný nejaký mechanizmus, ktorý bude označovať chyby číslom verzie.
Predsa len, nechceme, aby sa opravená chyba objavila znova, a mysleli sme si, že to, čo sme opravili, nefungovalo. Môže sa však stať aj to, že užívateľ spustil staršiu, cachovanú verziu aplikácie.
Aby sme problém vyriešili, je potrebné zapísať identifikátor verzie (verzie) pri spustení Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Po tomto všetky nové chyby budú označené ako release (0.1.0), to znamená, že budú viazané na správnu verziu kódu.
Poznámky:
- Prebrali sme jednoduchý spôsob, ako používať verzie
- Sentry umožňuje používať zložitejšie . Táto funkcia umožňuje sledovať chyby pred vykonaním určitých operácií. GitHubP.S. Druhá časť je dlhšia, preto bude v samostatnom príspevku.
P.S. Telegram chat Sentry
P.S. Zabudol som uviesť, že je to preklad príspevku
Služba Sentry umožňuje diaľkové monitorovanie chýb vo frontendových aplikáciách napísaných v JavaScripte.
Zdroj: habr.com
