Služba Hlídka umožňuje vzdáleně sledovat chyby v napsaných front-end aplikacích JavaScript.
Pokoušíte se opravit problémy ve front-end aplikacích JavaScript mohou být složité, protože pocházejí z prohlížeče uživatele, ke kterému často nemáte přístup. Nicméně, Hlídka umožňuje vzdáleně sledovat chyby.
Můžete si stáhnout řešení popsaná v tomto článku.
Co je nutné
Pokud chcete použít tyto příklady, budete potřebovat:
- : Vývojový nástroj bohatý na funkce, který není součástí aplikace. Stáhli jsme nejnovější verzi LTS (8.12.0)
- Hlídka: Buď Účet ve službě Sentry (můžete zdarma zaznamenat až 10 tisíc chyb měsíčně) nebo nainstalovaný místní Sentry -
Instalace na váš server
Chcete-li nainstalovat Sentry On-Premise na váš server, můžete jít dvěma způsoby
-
Sestavte otáčky za minutu a nainstalujte je -
-
Použijte oficiální instalační program:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardní použití
Chcete-li začít, přidejte nový z webu služby Hlídka- projekt pro aplikaci. Po výběru požadovaného jazyka obdržíte odpovídající dokumentaci. V našem případě jsme si vybrali JavaScript.
První příklad je standardní JavaScript. Jsou zde dvě tlačítka: "Ahoj" (Dobrý den) a "Chyba" (Chyba).
Po kliknutí na tlačítko "Ahoj", obrazovka se restartuje a zablokuje se vyzkoušet zjistí a zachytí chybu. Poté, co je chyba „odchycena“, je hlášení o chybě ručně odesláno službě Hlídka.
Tlačítko „Chyba“ umožňuje snadno odhalit chybu.
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>Poznámky:
- Sentry je nainstalován z CDN a vystaven jako globální proměnná
- O něco dříve jsme spustili Sentry v našem JavaScriptu
K otestování tohoto příkladu můžeme použít platformu statického webového serveru Node.js: http server. Přejděte do složky, kde je soubor uložen index.htmla zadejte (volba s deaktivuje ukládání do mezipaměti) následující řádek pro otevření adresy v prohlížeči .
Jak se zobrazují zachycené chyby
Nejprve klikněte na tlačítko "Ahoj".
Zachytili jsme chybu, takže nevyskočí zásobník volání, a proto není monitorován v konzole. Nicméně, protože posíláme do Hlídka nahlaste chybu ručně, ve vašem účtu se o ní zobrazí zpráva.
Poznámky:
- Můžeme vysledovat, který řádek (24) obsahuje chybu
- Stezka drobečkové navigace navíc zobrazuje akce prohlížeče, které vedly k chybě.
Jak se zobrazují nezachycené chyby
Klepnutím na tlačítko "Chyba".
Chyba probublává v zásobníku volání, a proto se na konzole zobrazí chybová zpráva. Poté Sentry automaticky sleduje chybu bez jakýchkoli dalších akcí.
Poznámky:
- Vidíme, ve kterém řádku (30) se chyba ztratila
- Neexistuje žádná drobečková stezka (nerozumím docela proč)
Jak zajistit bezpečnost projektu
Možná jste si všimli způsobu, jakým kontrolujeme, které stránky mohou hlásit chyby našemu projektu Hlídka; s pomocí dsn evidence. Problém je v tom, že vstup může vidět každý, kdo si prohlíží zdrojový kód vaší stránky.
Abychom tomu zabránili, musíme omezit počet domén, které mohou do našeho projektu odesílat chybová hlášení. V tomto příkladu jsme použili localhost (místní hostitel). Tato možnost se konfiguruje na kartě nastavení Hlídka-projekt, Nastavení projektu Sentry.
Vydání
Pokud přemýšlíte o tom, jak používat Hlídka v různých variantách naší aplikace, pak potřebujeme nějaký mechanismus, který označí chyby číslem verze.
Koneckonců nechceme, aby se znovu objevila chyba, kterou jsme opravili, a myslíme si, že to, co jsme opravili, nefungovalo. Může se také stát, že uživatel spustil starší verzi aplikace uloženou v mezipaměti.
Chcete-li problém vyřešit, musíte zadat identifikátor vydání (verzí) při spuštění Hlídka.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Poté budou všechny nové chyby označeny jako uvolnit (0.1.0), to znamená, že budou vázány na správnou verzi kódu.
Poznámky:
- Vymysleli jsme jednoduchý způsob použití vydání
- Sentry vám umožňuje používat více , která úzce souvisí GitHub. Tato funkce umožňuje sledovat chyby před provedením určitých operací.
PS Druhý díl je delší, takže bude v samostatném příspěvku.
PS Telegram chat Sentry
PS Zapomněl jsem uvést, že se jedná o překlad příspěvku
Zdroj: www.habr.com