Služba Hliadka umožňuje vzdialene sledovať chyby v napísaných front-end aplikáciách JavaScript.
Pokúšame sa opraviť problémy v klientskych aplikáciách zapnuté JavaScript môžu byť zložité, pretože pochádzajú z prehliadača používateľa, ku ktorému často nemáte prístup. však Hliadka umožňuje vzdialene sledovať chyby.
Môžete si stiahnuť riešenia uvedené v tomto článku.
Čo je potrebné
Ak chcete použiť tieto príklady, budete potrebovať:
- : Vývojový nástroj bohatý na funkcie, ktorý nie je súčasťou aplikácie. Stiahli sme najnovšiu verziu LTS (8.12.0)
- Hliadka: Buď Účet v službe Sentry (zadarmo môžete zaznamenať až 10 tisíc chýb mesačne) alebo nainštalovaný lokálny Sentry -
Inštalácia na vašom serveri
Ak chcete nainštalovať Sentry On-Premise na váš server, môžete ísť dvoma spôsobmi
-
Zostavte otáčky za minútu a nainštalujte ich -
-
Použite oficiálny inštalátor:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Štandardné použitie
Ak chcete začať, pridajte nový z webovej stránky služby Hliadka- projekt pre aplikáciu. Po výbere požadovaného jazyka dostanete príslušnú dokumentáciu. V našom prípade sme si vybrali JavaScript.
Prvý príklad je štandardný JavaScript. Tu sú dve tlačidlá: "Ahoj" (Dobrý deň) a "Chyba" (Chyba).
Po kliknutí na tlačidlo "Ahoj", obrazovka sa reštartuje a zablokuje sa skúsiť zistí a zachytí chybu. Keď je chyba „zachytená“, chybové hlásenie sa manuálne odošle službe Hliadka.
Tlačidlo „Error“ vám umožňuje jednoducho odhaliť 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 nainštalovaný z CDN a vystavený ako globálna premenná
- O niečo skôr sme spustili Sentry v našom JavaScripte
Na otestovanie tohto príkladu môžeme použiť platformu statického webového servera Node.js: http server. Prejdite do priečinka, v ktorom je súbor uložený index.htmla zadajte (možnosť s deaktivuje ukladanie do vyrovnávacej pamäte) nasledujúci riadok na otvorenie adresy v prehliadači .
Ako sa zobrazujú chytené chyby
Najprv kliknite na tlačidlo "Ahoj".
Zachytili sme chybu, takže nevyskočí zásobník hovorov, a preto nie je monitorovaný v konzole. Keďže však posielame do Hliadka nahláste chybu manuálne, vo vašom účte sa nám o tom zobrazí správa.
Poznámky:
- Môžeme sledovať, ktorý riadok (24) obsahuje chybu
- Okrem toho sa v strúhanke zobrazujú akcie prehliadača, ktoré viedli k chybe.
Ako sa zobrazujú nechytené chyby
Kliknutím na tlačidlo "Chyba".
Chyba prebubláva v zásobníku hovorov, a preto sa na konzole zobrazí chybové hlásenie. Potom Sentry automaticky monitoruje chybu bez akýchkoľvek ďalších akcií.
Poznámky:
- Vidíme, v ktorom riadku (30) sa chyba stratila
- Neexistuje žiadny strúhankový chodník (nie celkom rozumiem prečo)
Ako zabezpečiť bezpečnosť projektu
Možno ste si všimli spôsob, akým kontrolujeme, ktoré stránky môžu hlásiť chyby nášmu projektu Hliadka; s pomocou dsn záznamy. Problém je v tom, že vstup môže vidieť každý, kto si prezerá zdrojový kód vašej stránky.
Aby sme tomu zabránili, musíme obmedziť počet domén, ktoré môžu do nášho projektu odosielať chybové hlásenia. V tomto príklade sme použili localhost (miestny hostiteľ). Táto možnosť sa konfiguruje na karte nastavení Hliadka- projekt, Nastavenie projektu Sentry.
Vydania
Ak premýšľate o tom, ako použiť Hliadka v rôznych variáciách našej aplikácie, potom potrebujeme nejaký mechanizmus, ktorý označí chyby číslom verzie.
Koniec koncov, nechceme, aby sa chyba, ktorú sme opravili, znova objavila, a myslíme si, že to, čo sme opravili, nefungovalo. Môže sa tiež stať, že používateľ spustil staršiu verziu aplikácie uloženú vo vyrovnávacej pamäti.
Ak chcete problém vyriešiť, musíte zadať identifikátor uvoľnenie (verzie) pri spustení Hliadka.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Potom budú všetky nové chyby označené ako uvoľniť (0.1.0), to znamená, že budú viazané na správnu verziu kódu.
Poznámky:
- Prišli sme na jednoduchý spôsob použitia vydaní
- Sentry vám umožňuje použiť viac , ktorá úzko súvisí s GitHub. Táto funkcia umožňuje sledovať chyby pred vykonaním určitých operácií.
PS Druhá časť je dlhšia, preto bude v samostatnom príspevku.
PS Telegram chat Sentry
PS Zabudol som uviesť, že ide o preklad príspevku
Zdroj: hab.com