SA-Frontend Sentry umožňuje vzdáleně sledovat chyby v frontendových aplikacích napsaných na JavaScript.
Pok attempt to resolve issues in frontend applications on JavaScript může být nelehkým úkolem, protože se objevují v prohlížeči uživatele, ke kterému často nemáte přístup. Nicméně, Sentry umožňuje vzdáleně sledovat chyby.
můžete si stáhnout řešení, která byla projednána v tomto článku.
Co je potřeba
Pokud chcete využít tyto příklady, budete potřebovat:
- : Multifunkční nástroj pro vývoj, který není součástí aplikace. Stahovali jsme poslední verzi LTS (8.12.0)
- Sentry: Buď účet ve službě Sentry (můžete zdarma zaznamenávat až 10 tisíc chyb měsíčně) nebo nainstalovaný lokální Sentry —
Instalace na váš server
Pro instalaci Sentry On-Premise na váš server máte dvě možnosti
Sestavit rpm a nainstalovat je —
Využít oficiálního instalátoru:
Nainstalujte na server docker a docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardní použití
Abychom začali, přidejte z webu služby nový Sentry-projekt pro aplikaci. Po výběru požadovaného jazyka obdržíte odpovídající dokumentaci. V našem případě jsme vybrali JavaScript.
První příklad — standardní JavaScript. Zde jsou dvě tlačítka: „Hello“ (Ahoj) a „Error“ (Chyba).
Po kliknutí na tlačítko „Hello“, obrazovka se znovu načte a blok catch (Exception) objeví a zachytí chybu. Jakmile je chyba „zachycena“, zpráva o chybě se ručně přeposílá na službu Sentry.
Tlačítko „Error“ jednoduše umožňuje odhalit chybu.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</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 je nainstalován z CDN a zobrazuje se jako globální proměnná
- O něco dříve jsme spustili Sentry v našem JavaScriptu
Pro testování tohoto příkladu můžeme využít statickou webovou serverovou platformu Node.js: http-server. Přejděte do složky, kde se nachází soubor index.html, a zadejte (možnost s zakázaným ukládáním do mezipaměti) následující řádek, abyste otevřeli v prohlížeči adresu .
Jak se zobrazují zachycené chyby
Nejprve klikneme na tlačítko „Hello“.
Zachytili jsme chybu, takže se neobjeví nahoře ve stacku volání, a proto není monitorována v konzoli. Nicméně, protože posíláme do Sentry zprávu o chybě ručně, uvidíme oznámení o ní ve svém účtu.
Poznámky:
- Můžeme sledovat, na kterém řádku (24) se chyba vkradla
- Kromě toho navigační řetězec zobrazuje akce prohlížeče, které vedly k chybě.
Jak se zobrazují nezachycené chyby
Klikněte na tlačítko „Error“.
Chyba se zobrazuje výše ve zásobníku volání, a tak se na konzoli zobrazí zpráva o chybě. Poté Sentry automaticky monitoruje chybu bez jakýchkoliv dalších akcí.
Poznámky:
- Můžeme vidět, v jakém řádku (30) se chyba ztratila
- Není předpokládán navigační řetězec (zcela nerozumím, proč)
Jak zajistit bezpečnost projektu
Možná jste si všimli způsobu, jakým kontrolujeme stránky, které mohou posílat zprávy o chybách do našeho projektu Sentry; pomocí dsn záznamů. Problém spočívá v tom, že přístup může vidět každý, kdo si prohlédne zdrojový kód vaší stránky.
Aby k tomu nedocházelo, je třeba omezit počet domén, které mohou zasílat zprávy o chybách do našeho projektu. V tomto příkladu jsme použili localhost (localhost). Tato možnost se nastavuje na kartě nastavení Sentry-projektu, Nastavení projektu Sentry.
Verze
Když přemýšlíme o tom, jak používat Sentry v různých variantách naší aplikace, potřebujeme mechanismus, který bude označovat chyby číslem verze.
Nechceme přece, aby opravená chyba znovu vyvstala, zatímco budeme myslet, že to, co jsme opravili, nefungovalo. Mohlo by být také možné, že uživatel spustil starší, vyrovnanou verzi aplikace.
K vyřešení problému je třeba napsat identifikátor verze (verze) při spuštění Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Poté budou všechny nové chyby označeny jako release (0.1.0), to znamená, že budou spojeny se správnou verzí kódu.
Poznámky:
- Probrali jsme jednoduchý způsob, jak používat verze
- Sentry umožňuje aplikovat složitější . Tato funkce umožňuje sledovat chyby před provedením určitých operací. GitHubP.S. Druhá část bude delší, takže bude v samostatném příspěvku.
P.S. Telegram chat Sentry
P.S. Zapomněl jsem uvést, že toto je překlad příspěvku
Verze volného systému finančního účetnictví GnuCash 4.0
Zdroj: habr.com
