Tools Nagbabantay nagbibigay-daan sa iyong malayuang subaybayan ang mga bug sa mga front-end na application na nakasulat JavaScript.
Sinusubukang ayusin ang mga problema sa mga front-end na application na naka-on JavaScript maaaring nakakalito dahil nagmula ang mga ito sa browser ng user, na madalas ay wala kang access. gayunpaman, Nagbabantay ginagawang posible na malayuang subaybayan ang mga bug.
Maaari mong i-download ang mga solusyon na tinalakay sa artikulong ito.
Kung ano ang kailangan
Kung gusto mong gamitin ang mga halimbawang ito, kakailanganin mo:
- : Isang tool sa pag-develop na mayaman sa tampok na hindi bahagi ng application. Na-download namin ang pinakabagong bersyon ng LTS (8.12.0)
- Nagbabantay: Alinman sa isang Account sa serbisyo ng Sentry (maaari kang magtala ng hanggang 10 libong mga bug bawat buwan nang libre) o isang naka-install na lokal na Sentry -
Pag-install sa iyong server
Upang i-install ang Sentry On-Premise sa iyong server maaari kang pumunta sa 2 paraan
-
Bumuo ng rpm at i-install ang mga ito -
-
Gamitin ang opisyal na installer:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ docker ΠΈ docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Karaniwang Paggamit
Upang makapagsimula, magdagdag ng bago mula sa website ng serbisyo Nagbabantay-proyekto para sa aplikasyon. Pagkatapos piliin ang nais na wika, makakatanggap ka ng kaukulang dokumentasyon. Sa aming kaso kami ang pumili JavaScript.
Ang unang halimbawa ay pamantayan JavaScript. Mayroong dalawang mga pindutan dito: "Kamusta" (Maligayang pagbati at "Error" (Error).
Pagkatapos mong i-click ang pindutan "Kamusta", magre-reboot ang screen at i-block sumubok makikita at mahuli ang bug. Pagkatapos "nahuli" ang bug, manu-manong ipinapadala ang ulat ng error sa serbisyo Nagbabantay.
Ang "Error" na button ay nagbibigay-daan sa iyong madaling makakita ng 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>remarks:
- Naka-install ang sentry mula sa isang CDN at nakalantad bilang isang global variable
- Medyo mas maaga ay inilunsad namin ang Sentry sa aming JavaScript
Upang subukan ang halimbawang ito, maaari kaming gumamit ng isang static na platform ng web server node.js: http server. Pumunta sa folder kung saan naka-imbak ang file index.html, at ipasok ang (opsyon na hindi pinapagana ang pag-cache) sa sumusunod na linya upang buksan ang address sa browser .
Paano ipinapakita ang mga nahuli na bug
I-click muna ang button "Kamusta".
Nakakuha kami ng bug, kaya hindi ito mag-pop up sa call stack, at samakatuwid ay hindi sinusubaybayan sa console. Gayunpaman, dahil nagpadala kami sa Nagbabantay manu-manong mag-ulat ng bug, makakakita kami ng mensahe tungkol dito sa iyong account.
remarks:
- Maaari naming subaybayan kung aling linya (24) ang naglalaman ng bug
- Bilang karagdagan, ipinapakita ng breadcrumb trail ang mga pagkilos ng browser na humantong sa error.
Paano ipinapakita ang mga hindi nahuli na mga bug
Ang pag-click sa pindutan "Error".
Bubula ang bug sa call stack at sa gayon ay ipinapakita ang isang mensahe ng error sa console. Pagkatapos nito, awtomatikong sinusubaybayan ng Sentry ang bug, nang walang anumang karagdagang pagkilos.
remarks:
- Makikita natin kung saang linya (30) nawala ang bug
- Walang breadcrumb trail (hindi ko masyadong maintindihan kung bakit)
Paano masisiguro ang seguridad ng proyekto
Maaaring napansin mo ang paraan ng pagkontrol namin kung aling mga pahina ang maaaring mag-ulat ng mga error sa aming proyekto Nagbabantay; sa tulong dsn mga tala. Ang problema ay ang input ay makikita ng sinumang tumitingin sa source code ng iyong page.
Upang maiwasan ito, kailangan naming limitahan ang bilang ng mga domain na maaaring magsumite ng mga ulat ng error sa aming proyekto. Sa halimbawang ito ginamit namin localhost (lokal na host). Naka-configure ang opsyong ito sa tab na mga setting Nagbabantay-proyekto, Setting ng Sentry Project.
Mga release
Kung iniisip mo kung paano gamitin Nagbabantay sa iba't ibang mga pagkakaiba-iba ng aming aplikasyon, pagkatapos ay kailangan namin ng ilang uri ng mekanismo na magmarka ng mga error na may numero ng bersyon.
Pagkatapos ng lahat, hindi namin gustong mag-pop up muli ang bug na naayos namin, at sa tingin namin ay hindi gumana ang aming naayos. Maaaring naglunsad din ang user ng mas lumang, naka-cache na bersyon ng application.
Upang malutas ang problema, kailangan mong ipasok ang identifier pakawalan (mga bersyon) sa pagsisimula Nagbabantay.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Pagkatapos nito, ang lahat ng mga bagong error ay mamarkahan bilang release (0.1.0), ibig sabihin, iuugnay sila sa tamang bersyon ng code.
remarks:
- Naisip namin ang isang simpleng paraan para magamit ang mga release
- Nagbibigay-daan sa iyo ang sentry na gumamit ng higit pa , na malapit na nauugnay sa GitHub. Ginagawang posible ng function na ito na subaybayan ang mga bug bago magsagawa ng ilang partikular na operasyon.
PS Ang pangalawang bahagi ay mas mahaba, kaya ito ay nasa isang hiwalay na post.
PS Telegram chat Sentry
PS Nakalimutan kong ipahiwatig na ito ay pagsasalin ng post
Pinagmulan: www.habr.com