Shërbimi Sentry lejon që të monitoroni të dhënat për probleme në aplikacionet frontend të shkruara në JavaScript.
përpjekja për të zgjidhur problemet në aplikacionet frontend JavaScript mund të jetë një detyrë e vështirë, pasi ato ndodhin në shfletuesin e përdoruesit, për të cilin shpesh nuk keni qasje. Megjithatë, Sentry ofron mundësinë për të monitoruar të dhënat për problemet nga larg.
mund të shkarkoni zgjidhjet që u diskutuan në këtë artikull.
ĂfarĂ« nevojitet
Nëse dëshironi të përdorni këto shembuj, do t'ju nevojiten:
- : Një mjet shumëfunksional për zhvillim, i cili nuk është pjesë e aplikacionit. Ne shkarkuam versionin më të fundit LTS (8.12.0)
- Sentry: Ose njĂ« llogari nĂ« shĂ«rbimin Sentry (mund tĂ« regjistroni deri nĂ« 10 mijĂ« probleme nĂ« muaj falas) ose njĂ« Sentry tĂ« instaluar lokalisht â
Instalimi në serverin tuaj
Për të instaluar Sentry On-Premise në serverin tuaj, mund të zgjidhni 2 rrugë
TĂ« mbledhni rpm dhe tâi instaloni ato â
Të përdorni instaluesin zyrtar:
Instaloni docker dhe docker-compose në server git clone https://github.com/getsentry/onpremise.git ./install.sh
PĂ«rdorimi Standard
Për të filluar, shtoni një Sentry-projekt të ri për aplikacionin. Pas zgjedhjes së gjuhës përkatëse, do të merrni dokumentacionin përkatës. Në rastin tonë, ne zgjodhëm JavaScript.
Shembulli i parĂ« â standardi JavaScript. KĂ«tu ka dy butona: «Hello» (PĂ«rshĂ«ndetje) dhe «Error» (Gabim).
Pas klikuar butonin «Hello», ekrani do të rinovohet, dhe blloku përpiqem do të identifikojë dhe kapë gabimin. Pasi gabimi të «kapet», raporti për gabimin dërgohet manualisht në shërbimin Sentry.
Butoni «Error» lejon thjesht të identifikoni gabimin.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilë</title>
</head>
<body>
<button id="hello">Përshëndetje</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>VĂ«rejtje:
- Sentry instalohet nga CDN dhe shfaqet si një variabël globale
- Pak më parë ne aktivizuam Sentry në JavaScript tonë
Për të testuar këtë shembull, mund të përdorim një platformë statike të shërbimit të uebit Node.js: server http. Hyjmë në dosjen ku ndodhet skedari index.html, dhe shkruajmë (opsioni zgjidh ndalon memorien) vijën e mëposhtme për të hapur në shfletues adresën .
Si shfaqen gabimet e kapura
Fillimisht klikojmë butonin «Hello».
Ne kapëm një gabim, prandaj ai nuk do të ngjitet lart në stakën e thirrjeve, kështu që nuk monitorohet në konsolë. Megjithatë, pasi të dërgojmë Sentry raportin për gabimin manualisht, do ta shohim mesazhin për të në llogarinë tonë.
VĂ«rejtje:
- Mund të ndjekim se në cilin rresht (24) është furrikuar gabimi
- Për më tepër, zinxhiri i navigimit tregon veprimet e shfletuesit që çuan në gabim.
Si shfaqen gabimet e pa kapura
Klikoni butonin «Gabim».
Buga shfaqet lart në grumbullin e thirrjeve dhe kështu mesazhi i gabimit shfaqet në konsolë. Pas kësaj, Sentry monitoron automatikisht bugun, pa asnjë veprim të mëtejshëm.
VĂ«rejtje:
- Mund të shohim se në cilin rresht (30) është humbur bug-u
- Nuk është parashikuar një zinxhir navigimi (nuk e kuptoj shumë pse)
Si të sigurojmë projektin
Mund të keni vënë re mënyrën se si ne kontrollojmë faqet që mund të dërgojnë raporte gabimesh në projektin tonë Sentry; me anë të dsn shkresave. Problemi është se hyrja mund të shihet nga çdo kush që shikon kodin burimor të faqes suaj.
Për të shmangur këtë, duhet të kufizojmë 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 mundësi konfigurohet në skedën 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ë, është e nevojshme një mekanizëm që do të shënojë gabimet me numrin e versionit.
Nuk Ă«shtĂ« e nevojshme qĂ« njĂ« bug i rregulluar nga ne tĂ« shfaqet pĂ«rsĂ«ri, ndĂ«rsa ne mendojmĂ« se ajo qĂ« kemi rregulluar nuk ka funksionuar. ĂshtĂ« e mundur qĂ« pĂ«rdoruesi tĂ« ketĂ« hapur njĂ« version mĂ« tĂ« vjetĂ«r, tĂ« ruajtur nĂ« cache tĂ« aplikacionit.
Për të zgjidhur problemin, duhet të shënoni identifikuesin lëshimit (versionit) kur filloni 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ënohen si lëshim (0.1.0), pra do të lidhen me versionin e duhur të kodit.
VĂ«rejtje:
- Kemi shqyrtuar një mënyrë të thjeshtë se si të përdorim lëshimet
- Sentry lejon aplikimin e më shumë , e cila është ngushtësisht e lidhur me GitHub. Kjo funksionalitet ofron mundësinë për të ndjekur buga 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 Telegram grup Sentry
P.S. Harrova të përmend që kjo është një përkthim i postimit
Burimi: habr.com
