Szolgáltatás Őrszem lehetővé teszi a beírt előtér-alkalmazások hibáinak távoli megfigyelését JavaScript.
Megpróbálja kijavítani a bekapcsolt előtér-alkalmazások problémáit JavaScript trükkösek lehetnek, mert a felhasználó böngészőjéből származnak, amelyhez gyakran nem fér hozzá. Azonban, Őrszem lehetővé teszi a hibák távoli megfigyelését.
Letöltheti az ebben a cikkben tárgyalt megoldásokat.
Mi szükséges
Ha ezeket a példákat szeretné használni, szüksége lesz:
- : Funkciókban gazdag fejlesztőeszköz, amely nem része az alkalmazásnak. Letöltöttük a legújabb LTS verziót (8.12.0)
- Őrszem: Vagy egy fiók a Sentry szolgáltatásban (akár 10 ezer hibát rögzíthet havonta ingyen), vagy egy telepített helyi Sentry -
Telepítés a szerveren
A Sentry On-Premise kétféleképpen telepíthető a szerverére
-
Építsd fel a fordulatszámot és telepítsd őket -
-
Használja a hivatalos telepítőt:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Normál használat
A kezdéshez adjon hozzá egy újat a szolgáltatás webhelyéről Őrszem-projekt a pályázathoz. A kívánt nyelv kiválasztása után megkapja a megfelelő dokumentációt. Esetünkben mi választottunk JavaScript.
Az első példa szabványos JavaScript. Itt két gomb található: "Szia" (Helló és "Hiba" (Hiba).
Miután rákattintott a gombra "Szia", a képernyő újraindul, és a blokk megpróbál észleli és elkapja a hibát. A hiba „elkapása” után a hibajelentést manuálisan elküldjük a szerviznek Őrszem.
Az „Error” gomb lehetővé teszi a hiba egyszerű észlelését.
vanília/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>Megjegyzések:
- A Sentry CDN-ről van telepítve, és globális változóként jelenik meg
- Kicsit korábban elindítottuk a Sentry-t JavaScriptünkben
A példa teszteléséhez statikus webszerver-platformot használhatunk node.js: http szerver. Lépjen abba a mappába, ahol a fájl tárolva van index.html, és írja be (az opció letiltja a gyorsítótárazást) a következő sort a cím megnyitásához a böngészőben .
Hogyan jelennek meg a fogott hibák
Először kattintson a gombra "Szia".
Elkaptunk egy hibát, ezért nem jelenik meg a hívási veremben, ezért nem figyeli a konzol. Mivel azonban küldjük Őrszem manuálisan jelentse be a hibát, akkor erről üzenetet fogunk látni a fiókjában.
Megjegyzések:
- Nyomon követhetjük, hogy melyik sor (24) tartalmazza a hibát
- Ezenkívül a navigációs útvonal megjeleníti a hibához vezető böngészőműveleteket.
Hogyan jelennek meg a nem elkapott hibák
A gombra kattintva "Hiba".
A hiba felbuborékolja a hívásveremet, és így hibaüzenet jelenik meg a konzolon. Ezt követően a Sentry automatikusan figyeli a hibát, minden további művelet nélkül.
Megjegyzések:
- Láthatjuk, hogy melyik sorban (30) veszett el a hiba
- Nincs zsemlemorzsa nyom (nem egészen értem, miért)
Hogyan biztosítható a projekt biztonsága
Lehet, hogy észrevette, hogyan szabályozzuk, mely oldalak jelenthetnek hibákat projektünknek Őrszem; segítséggel dsn rekordokat. A probléma az, hogy a bemenetet bárki láthatja, aki megtekinti az oldalad forráskódját.
Ennek elkerülése érdekében korlátoznunk kell azon tartományok számát, amelyek hibajelentéseket küldhetnek projektünkbe. Ebben a példában használtuk localhost (helyi kiszolgáló). Ez az opció a beállítások lapon konfigurálható Őrszem- projekt, Sentry projekt beállítása.
Kiadások
Ha arra gondol, hogyan kell használni Őrszem alkalmazásunk különböző változataiban, akkor szükségünk van valamiféle mechanizmusra, amely verziószámmal jelöli a hibákat.
Végül is nem akarjuk, hogy újra felbukkanjon a javított hiba, és úgy gondoljuk, hogy amit kijavítottunk, az nem működött. Előfordulhat az is, hogy a felhasználó az alkalmazás egy régebbi, gyorsítótárazott verzióját indította el.
A probléma megoldásához meg kell adnia az azonosítót kioldó (verziók) indításkor Őrszem.
vanília/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Ezt követően minden új hiba megjelölésre kerül kiadás (0.1.0), azaz a kód megfelelő verziójához lesznek kötve.
Megjegyzések:
- Kitaláltunk egy egyszerű módot a kiadások használatára
- A Sentry lehetővé teszi, hogy többet használjon , amely szorosan összefügg GitHub. Ez a funkció lehetővé teszi a hibák nyomon követését bizonyos műveletek végrehajtása előtt.
PS A második rész hosszabb, így külön bejegyzésben lesz.
PS Telegram chat Sentry
PS Elfelejtettem jelezni, hogy ez a bejegyzés fordítása
Forrás: will.com