Shërbim Rojë ju lejon të monitoroni në distancë gabimet në aplikacionet e përparme të shkruara në JavaScript.
Përpjekja për të rregulluar problemet në aplikacionet e përparme aktive JavaScript mund të jenë të ndërlikuara sepse e kanë origjinën në shfletuesin e përdoruesit, tek i cili shpesh nuk keni akses. Megjithatë, Rojë bën të mundur monitorimin në distancë të gabimeve.
Ju mund të shkarkoni zgjidhjet e diskutuara në këtë artikull.
Çfarë është e nevojshme
Nëse dëshironi të përdorni këta shembuj, do t'ju duhet:
- : Një mjet zhvillimi i pasur me veçori që nuk është pjesë e aplikacionit. Shkarkuam versionin më të fundit LTS (8.12.0)
- Rojë: Ose një Llogari në shërbimin Sentry (mund të regjistroni deri në 10 mijë gabime në muaj falas) ose një Sentry lokal të instaluar -
Instalimi në serverin tuaj
Për të instaluar Sentry On-Premise në serverin tuaj mund të shkoni në 2 mënyra
-
Ndërtoni rpm dhe instaloni ato -
-
Përdorni instaluesin zyrtar:
Установить на сервер docker и 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 internetit e shërbimit Rojë-projekt për aplikim. Pasi të zgjidhni gjuhën e dëshiruar, do të merrni dokumentacionin përkatës. Në rastin tonë ne zgjodhëm JavaScript.
Shembulli i parë është standard JavaScript. Këtu ka dy butona: "Përshëndetje" (Përshëndetje) dhe "Gabim" (Gabim).
Pasi të klikoni butonin "Përshëndetje", ekrani do të rindizet dhe bllokohet përpjekje do të zbulojë dhe kap defektin. Pasi defekti është "kapur", raporti i gabimit dërgohet manualisht në shërbim Rojë.
Butoni "Gabim" ju lejon të zbuloni lehtësisht një gabim.
vanilje/indeks.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>Shenime:
- Sentry është instaluar nga një CDN dhe ekspozohet si një ndryshore globale
- Pak më herët lançuam Sentry në JavaScript-in tonë
Për të testuar këtë shembull, ne mund të përdorim një platformë statike të serverit në internet Node.js: server http. Shkoni te dosja ku është ruajtur skedari index.html, dhe futni (opsionin me çaktivizimin e memorizimit) rreshtin e mëposhtëm për të hapur adresën në shfletues .
Si shfaqen defektet e kapura
Fillimisht klikoni butonin "Përshëndetje".
Kemi kapur një gabim, kështu që nuk do të shfaqet në grupin e thirrjeve, dhe për këtë arsye nuk monitorohet në tastierë. Megjithatë, pasi ne dërgojmë në Rojë raportoni një gabim manualisht, ne do të shohim një mesazh në lidhje me të në llogarinë tuaj.
Shenime:
- Ne mund të gjurmojmë se cila rresht (24) përmban gabimin
- Përveç kësaj, gjurmët e bukës shfaq veprimet e shfletuesit që çuan në gabim.
Si shfaqen gabimet e pakapura
Duke klikuar butonin "Gabim".
Defekti flluskon grupin e thirrjeve dhe kështu një mesazh gabimi shfaqet në tastierë. Pas kësaj, Sentry monitoron automatikisht gabimin, pa ndonjë veprim shtesë.
Shenime:
- Mund të shohim se në cilën rresht (30) gabimi ka humbur
- Nuk ka asnjë gjurmë buke (nuk e kuptoj fare pse)
Si të sigurohet siguria e projektit
Ju mund të keni vënë re mënyrën se si ne kontrollojmë se cilat faqe mund të raportojnë gabime në projektin tonë Rojë; me ndihme dsn rekorde. Problemi është se hyrja mund të shihet nga kushdo që shikon kodin burimor të faqes tuaj.
Për të shmangur këtë, ne duhet të kufizojmë numrin e domeneve që mund të paraqesin raporte gabimesh në projektin tonë. Në këtë shembull kemi përdorur localhost (pritës lokal). Ky opsion është konfiguruar në skedën e cilësimeve Rojë-projekt, Cilësimi i projektit të rojës.
Liron
Nëse mendoni se si ta përdorni Rojë në variacione të ndryshme të aplikacionit tonë, atëherë na duhet një lloj mekanizmi që do të shënojë gabimet me një numër versioni.
Në fund të fundit, ne nuk duam që defekti që rregulluam të shfaqet përsëri dhe mendojmë se ajo që rregulluam nuk funksionoi. Mund të ndodhë gjithashtu që përdoruesi të lansojë një version më të vjetër, të ruajtur në memorie të aplikacionit.
Për të zgjidhur problemin, duhet të futni identifikuesin lirim (versionet) në fillim Rojë.
vanilje/indeks.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Pas kësaj, të gjitha gabimet e reja do të shënohen si lëshimi (0.1.0), domethënë, ato do të lidhen me versionin e saktë të kodit.
Shenime:
- Ne kemi gjetur një mënyrë të thjeshtë për të përdorur versionet
- Sentry ju lejon të përdorni më shumë , e cila është e lidhur ngushtë me GitHub. Ky funksion bën të mundur gjurmimin e gabimeve përpara se të kryeni disa operacione.
PS Pjesa e dytë është më e gjatë, kështu që do të jetë në një postim të veçantë.
PS Telegram chat Sentry
PS Kam harruar të tregoj se ky është një përkthim i postimit
Burimi: www.habr.com