Shërbimi Sentry lejon i të monitoroni problema në aplikacionet frontend, të shkruara në JavaScript.
Përpjekja për të zgjidhur problemet në aplikacionet frontend në JavaScript mund të jetë një sfidë e vështirë, pasi ato ndodhin në shfletuesin e përdoruesit, për të cilin shpeshherë nuk keni qasje. Megjithatë, Sentry ofron mundësinë për të monitoruar probleme nga larg.
mund të shkarkoni zgjidhjet që u trajtuan në këtë artikull.
Çfarë nevojitet
Nëse dëshironi të përfitoni nga këto shembuj, do t'ju nevojiten:
- : Një mjet multifunksional për zhvillim, që nuk është pjesë e aplikacionit. Ne shkarkuam versionin e fundit LTS (8.12.0)
- Sentry: Ose një llogari në shërbimin Sentry (mund të regjistroni deri në 10 mijë probleme falas në muaj) ose një Sentry të instaluar lokal —
Instalimi në serverin tuaj
Për të instaluar Sentry On-Premise në serverin tuaj, mund të ndiqni 2 rrugë
Të grumbulloni rpm dhe t'i instaloni ato —
Të përdorni installer-in zyrtar:
Të instaloni në server docker dhe docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Përdorimi standard
Për të filluar, shtoni një të re nga faqja e shërbimit Sentry-projekti për aplikacionin. Pas zgjedhjes së gjuhës së dëshiruar, do të merrni dokumentacionin përkatës. Në rastin tonë, kemi zgjedhur JavaScript.
Shembulli i parë — standard JavaScript. Këtu ka dybutona: «Hello» (Përshëndetje) dhe «Error» (Gabim).
Pas klikimit mbi butonin «Hello», ekrani do të rifreskohet, dhe blloku provo do të zbulojë dhe kapë gabimin. Pas kapjes së gabimit, raporti i gabimit dërgohet manualisht në shërbimin Sentry.
Butoni «Error» lejon thjesht të zbulohet gabimi.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Hello</button>
<button id="error">Gabim</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>Shënime:
- Sentry instalohet nga CDN dhe shfaqet si një variabël globale
- Pak më parë ne e lançuam Sentry në JavaScript-in tonë
Për të testuar këtë shembull, mund të shfrytëzojmë një platformë serveri web statike Node.js: server http. Shkëmbejmë në dosjen ku mbahet skedari index.html, dhe shkruajmë (opsioni me ndalimin e caching) rreshtin e mëposhtëm për të hapur në shfletues adresën .
Si shfaqen gabimet e kapura
Së pari klikojmë mbi butonin «Hello».
Ne kapëm një gabim, prandaj ai nuk do të ngjitet lart në grackën e thirrjeve, duke mos u monitoruar në konsolë. Megjithatë, pasi e dërgojmë në Sentry raportin e gabimit manualisht, do ta shohim mesazhin e tij në llogarinë tonë.
Shënime:
- Mund të ndjekim se në cilin rresht (24) u përfshi gabimi
- Për më tepër, sinnja e navigimit tregon veprimet e shfletuesit që çuan në gabim.
Si shfaqen gabimet e pa kapura
Klikojmë butonin «Gabim».
Gabimi ngjitet në majë të stack-ut të thirrjeve dhe, kështu, shfaqet një mesazh gabimi në konsolë. Pas kësaj, Sentry monitoron automatikisht gabimin pa asnjë veprim shtesë.
Shënime:
- Mund të shohim se në cilën rresht (30) humbi gabimi
- Nuk është parashikuar sinnja e navigimit (nuk e kuptoj plotësisht pse)
Si të sigurojmë projektin
Ndoshta keni vënë re se si kontrollojmë faqet që mund të dërgojnë raporte gabimesh në projektin tonë Sentry; përmes dsn shënimeve. Problemi është se çdo kush që shikon kodin burimor të faqes tuaj mund ta shohë hyrjen.
Që të mos ndodhë kjo, duhet të kufizoni numrin e domain-eve që mund të dërgojnë raporte gabimesh në projektin tonë. Në këtë shembull, ne përdorëm localhost (localhost). Kjo opsion konfigurimi është në seksionin e cilësimeve Sentry-të projektit, Cilësimi i Projektit Sentry.
Lëshimet
Nëse mendojmë se si të përdorim Sentry në variacione të ndryshme të aplikacionit tonë, ne kemi nevojë për një mekanizëm që do të shënojë gabimet me numrin e versionit.
Nuk duhet që një bug të korrigjuar prej nesh të dalë përsëri, ndërsa ne të mendojmë se nuk funksionoi ajo që e kemi rregulluar. Mund të ndodhë që përdoruesi të ketë nisur një version më të vjetër, të кешuar të aplikacionit.
Për të zgjidhur problemin, duhet të shkruani identifikuesin e rrethit (versionit) në fillim Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Pas kësaj, të gjitha gabimet e reja do të shënoheshin si version (0.1.0), që do të thotë se do të lidhen me versionin e duhur të kodit.
Shënime:
- Ne shqyrtuam një mënyrë të thjeshtë se si të përdorim rrethin
- Sentry lejon të aplikojmë më , e cila është e lidhur ngushtë me GitHub. Ky funksion ofron mundësinë për të ndjekur gabimet deri në kryerjen e operacioneve të caktuara.
P.S. Pjesa e dytë është më e gjatë, prandaj do të jetë në një postim të veçantë.
P.S Grupi Telegram Sentry
P.S. Harrova të përmend që ky është një përkthim i postit
Burimi: habr.com
