Szolgáltatás Sentry lehetővé teszi a hibák távoli nyomon követését a frontend alkalmazásokban, amelyeket JavaScript.
A frontend alkalmazások hibáinak elhárítása JavaScript nem mindig egyszerű feladat, mivel ezek a felhasználó böngészőjében jelentkeznek, amelyhez gyakran nincs hozzáférésed. Ugyanakkor, Sentry lehetővé teszi a hibák távoli nyomon követését.
lehet letölteni a cikkben bemutatott megoldásokat.
Amire szükség van
Ha szeretnéd használni ezeket a példákat, akkor szükséged lesz:
- : Olyan multifunkcionális fejlesztői eszköz, amely nem része az alkalmazásnak. Mi az utolsó LTS-verziót (8.12.0) töltöttük le.
- Sentry: Vagy fiók a Sentry szolgáltatásban (ingyenesen rögzíthető havi 10 ezer hiba) vagy egy telepített helyi Sentry —
Telepítés a szerveredre
A Sentry On-Premise telepítéséhez a szerveredre két utat választhatsz
RPM csomagokat gyűjteni és telepíteni —
Használj hivatalos telepítőt:
Telepítsd a szerverre a dockert és a docker-compose-t git clone https://github.com/getsentry/onpremise.git ./install.sh
Alapvető használat
Az indításhoz adj hozzá egy új projektet a szolgáltatás website-járól. SentryA megfelelő nyelv kiválasztása után megkapod a vonatkozó dokumentációt. A mi esetünkben JavaScript.
Az első példa - standard JavaScript. Itt két gomb található: "Hello" (Helló) és "Error" (Hiba).
Miután rákattintottál a gombra "Hello", a képernyő újratöltődik, és a blokk try észleli és elkapja a hibát. Miután a hiba "elkapva" van, a hiba jelentése kézzel kerül továbbításra a szolgáltatásra. Sentry.
Az "Error" gomb egyszerűen csak a hiba észlelésére szolgál.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Helló</button>
<button id="error">Hiba</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>Megjegyzések:
- A Sentry CDN-ből települ, és globális változóként jelenik meg.
- Kicsit korábban elindítottuk a Sentry-t a JavaScriptünkben.
Ennek a példa tesztelésére használhatunk statikus webszerver platformot Node.js: http-szervert. Menjünk abba a mappába, ahol a fájl található, és írjunk be (a lehetőség a gyorsítótár letiltására) a következő sort annak érdekében, hogy a böngészőben megnyissuk a címet index.htmlHogyan jelennek meg a elkapott hibák .
Először rákattintunk a gombra
Elkaptuk a hibát, így nem fog felemelkedni a hívási veremben, ezért nem kerül nyomon követésre a konzolban. Azonban mivel kézileg elküldjük a "Hello".
hibajelentést, látni fogjuk az üzenetet a fiókban. Sentry Nyomon követhetjük, hogy melyik sorban (24) bújt meg a hiba.
Megjegyzések:
- Ezenkívül a navigációs lánc megjeleníti a böngésző által végrehajtott cselekvéseket, amelyek a hibához vezettek.
- Hogyan jelennek meg a nem elkapott hibák
Hogyan jelennek meg a meg nem fogott hibák
Kattints a gombra «Hiba».
A hiba felugrik a hívási veremben, így a konzolon megjelenik a hibaüzenet. Ezt követően a Sentry automatikusan figyeli a hibát, további lépések nélkül.
Megjegyzések:
- Láthatjuk, hogy melyik sorban (30) tűnt el a hiba
- Nincs előirányzott navigációs lánc (nem igazán értem, miért)
Hogyan biztosítsuk a projekt biztonságát
Valószínűleg észrevetted, hogyan ellenőrizzük azokat az oldalakat, amelyek hibajelentéseket küldhetnek a projektünkbe Sentry; ennek segítségével dsn rekordok. A probléma az, hogy bárki, aki megnézi az oldalad forráskódját, láthatja a bejegyzéseket.
Ennek elkerülése érdekében korlátozni kell azokat a domaineket, amelyek hibajelentéseket küldhetnek a projektünkbe. Ebben a példában localhost (helyi hoszt) használtuk. Ez az opció a beállítások fülön konfigurálható Sentry-projektek, Sentry Projekt Beállítás.
Kiadások
Ha arra gondolunk, hogyan használhatjuk Sentry különböző változataiban a alkalmazásunknak, szükség van egy mechanizmusra, amely a hibák verziószámmal való jelölését végzi.
Nem szeretnénk, ha a javított hiba újra megjelenne, míg mi azt gondoljuk, hogy az, amit javítottunk, nem működött. Az is lehet, hogy a felhasználó egy régebbi, gyorsítótárazott verziót indított el.
A probléma megoldásához a kiadási azonosítót kell felírni kiadás (verzió) induláskor Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Ezt követően minden új hiba úgy lesz megjelölve, mint release (0.1.0), vagyis a megfelelő kódverzióhoz lesznek kötve.
Megjegyzések:
- Megbeszéltük az egyszerű módját a kiadások használatának
- A Sentry lehetővé teszi, hogy bonyolultabb . Ez a funkció lehetővé teszi a hibák nyomon követését bizonyos műveletek előtt. GitHubP.S. A második rész hosszabb, ezért külön bejegyzésben lesz.
P.S Sentry Telegram csoport
P.S. Elfelejtettem megemlíteni, hogy ez egy fordítás poszt
A Sentry szolgáltatás lehetővé teszi a hibák távoli megfigyelését JavaScript alapú frontend alkalmazásokban.
Forrás: habr.com
