nga pag-alagad Sentry nagtugot kanimo sa layo nga pag-monitor sa mga bug sa mga front-end nga aplikasyon nga gisulat sa JavaScript.
Pagsulay sa pag-ayo sa mga problema sa atubangan-katapusan aplikasyon sa JavaScript Mahimong malisud tungod kay kini naggikan sa browser sa gumagamit, nga kanunay nimo walaβy access. Apan, Sentry nagpaposible sa layo nga pag-monitor sa mga bug.
Mahimo nimong i-download ang mga solusyon nga gihisgutan sa kini nga artikulo.
Unsa ang kinahanglan
Kung gusto nimo gamiton kini nga mga pananglitan, kinahanglan nimo:
- : Usa ka himan sa pagpalambo nga puno sa feature nga dili bahin sa aplikasyon. Among gi-download ang pinakabag-o nga bersyon sa LTS (8.12.0)
- Sentry: Bisan usa ka Account sa serbisyo sa Sentry (mahimo nimong irekord ang hangtod sa 10 ka libo nga mga bug matag bulan nga libre) o usa ka na-install nga lokal nga Sentry -
Pag-instalar sa imong server
Aron ma-install ang Sentry On-Premise sa imong server mahimo ka moadto sa 2 nga mga paagi
-
Paghimo rpm ug i-install kini -
-
Gamita ang opisyal nga installer:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ docker ΠΈ docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standard nga Paggamit
Aron makasugod, pagdugang usa ka bag-o gikan sa website sa serbisyo Sentry-proyekto alang sa aplikasyon. Human sa pagpili sa gitinguha nga pinulongan, kamo makadawat sa katugbang nga dokumentasyon. Sa among kaso among gipili JavaScript.
Ang una nga pananglitan mao ang sumbanan JavaScript. Adunay duha ka buton dinhi: "Kumusta" (Hello) ug "Sayup" (Sayop).
Human nimo i-klik ang buton "Kumusta", ang screen mag-reboot ug ang block pagsulay makamatikod ug makadakop sa bug. Pagkahuman sa bug "nasakpan", ang taho sa sayup mano-mano nga gipadala sa serbisyo Sentry.
Ang buton nga "Error" nagtugot kanimo nga dali nga makit-an ang usa ka bug.
vanilla/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>Mahinumduman:
- Gi-install ang sentry gikan sa usa ka CDN ug gibutyag ingon usa ka global variable
- Usa ka gamay nga sayo nga gilusad namon ang Sentry sa among JavaScript
Aron sulayan kini nga pananglitan, mahimo namong gamiton ang usa ka static nga platform sa web server Node.js: http server. Lakaw ngadto sa folder diin ang file gitipigan index.html, ug pagsulod (kapilian nga adunay dili pagpugong sa pag-cache) sa mosunod nga linya aron maablihan ang adres sa browser .
Giunsa gipakita ang mga nadakpan nga mga bug
Una i-klik ang buton "Kumusta".
Nakuha namon ang usa ka bug, mao nga dili kini mo-pop up sa call stack, ug busa dili mamonitor sa console. Bisan pa, tungod kay nagpadala kami sa Sentry mano-mano nga i-report ang usa ka bug, makakita kami usa ka mensahe bahin niini sa imong account.
Mahinumduman:
- Atong masubay kung unsang linya (24) ang adunay bug
- Dugang pa, ang agianan sa breadcrumb nagpakita sa mga aksyon sa browser nga misangpot sa sayup.
Giunsa gipakita ang wala madakpi nga mga bug
I-klik ang buton "Error".
Ang bug nagbula sa call stack ug sa ingon usa ka mensahe sa sayup ang gipakita sa console. Pagkahuman niini, awtomatiko nga gibantayan sa Sentry ang bug, nga walaβy dugang nga mga aksyon.
Mahinumduman:
- Atong makita kung asa nga linya (30) nawala ang bug
- Walay breadcrumb trail (wala ko kasabot kung ngano)
Giunsa pagsiguro ang seguridad sa proyekto
Tingali nakamatikod ka sa paagi nga among gikontrol kung unsang mga panid ang maka-report sa mga sayup sa among proyekto Sentry; uban sa tabang dsn mga rekord. Ang problema kay ang input makita ni bisan kinsa nga motan-aw sa source code sa imong page.
Aron malikayan kini, kinahanglan natong limitahan ang gidaghanon sa mga domain nga makasumite sa mga taho sa sayup sa atong proyekto. Sa kini nga pananglitan among gigamit localhost (lokal nga host). Kini nga opsyon gi-configure sa tab sa mga setting Sentry-proyekto, Pagpahimutang sa Proyekto sa Sentry.
Nagpagawas
Kung maghunahuna ka kung unsaon paggamit Sentry sa lain-laing mga kalainan sa atong aplikasyon, nan kita nagkinahanglan sa usa ka matang sa mekanismo nga magtimaan sa mga sayop sa usa ka bersyon nga numero.
Human sa tanan, dili namo gusto nga ang bug nga among giayo mo-pop up pag-usab, ug kami naghunahuna nga ang among giayo wala molihok. Mahimo usab nga ang tiggamit naglansad sa usa ka karaan, naka-cache nga bersyon sa aplikasyon.
Aron masulbad ang problema, kinahanglan nimo nga mosulod sa identifier pagpagawas (mga bersyon) sa pagsugod Sentry.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Pagkahuman niini, ang tanan nga bag-ong mga sayup markahan ingon pagpagawas (0.1.0), nga mao, sila ihigot sa husto nga bersyon sa code.
Mahinumduman:
- Nakahunahuna kami usa ka yano nga paagi sa paggamit sa mga pagpagawas
- Gitugotan ka sa sentry nga magamit ang labi pa , nga suod nga nalangkit sa GitHub. Kini nga function nagpaposible sa pagsubay sa mga bug sa dili pa ipahigayon ang pipila ka mga operasyon.
PS Ang ikaduha nga bahin mas taas, mao nga kini sa usa ka bulag nga post.
PS Telegram chat Sentry
PS Nakalimot ko nga ipasabot nga hubad ni sa post
Source: www.habr.com