Сэрвіс Гадзінны дазваляе выдалена маніторыць багі ў фронтэнд-прыкладаннях, напісаных на JavaScript.
Спроба ўхіліць праблемы ў фронтэнд-прыкладаннях на JavaScript можа апынуцца няпростай задачкай, паколькі яны ўзнікаюць у браўзэры карыстача, да чаго, часцяком, у вас няма доступу. Аднак, Гадзінны дае магчымасць выдалена маніторыць багі.
можна спампаваць рашэнні, якія разглядаліся ў гэтым артыкуле.
што неабходна
Калі вы жадаеце скарыстацца гэтымі прыкладамі, то вам спатрэбяцца:
- : Шматфункцыянальны інструмент для распрацоўкі, які не з'яўляецца часткай прыкладання. Мы спампоўвалі апошнюю LTS-версію (8.12.0)
- Гадзінны: Альбо Акаўнт у сэрвісе Sentry (можна бясплатна запісваць да 10 тыс. багаў у месяц) альбо ўсталяваны лакальны Sentry —
Ўстаноўка на ваш сервер
Каб усталяваць Sentry On-Premise на вашыя сервер можна пайсці 2 шляхамі
-
Сабраць rpm і ўсталяваць іх -
-
Скарыстацца афіцыйным усталёўшчыкам:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Стандартнае выкарыстанне
Каб пачаць, дадайце з сайта сэрвісу новы Гадзінны-праект для прыкладання. Пасля выбару патрэбнай мовы вы атрымаеце адпаведную дакументацыю. У нашым выпадку мы выбралі JavaScript.
Першы прыклад - стандартны JavaScript. Тут дзве кнопкі: "Добры дзень" (Прывітанне) і "Памылка" (Памылка).
Пасля таго, як вы клікнеце па кнопцы "Добры дзень", экран перазагрузіцца, а блок старацца выявіць і зловіць баг. Пасля таго, як баг «злоўлены», справаздача аб памылцы ўручную перасылаецца на сэрвіс Гадзінны.
Кнопка "Error" дазваляе проста выявіць баг.
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>Заўвагі:
- Sentry усталёўваецца з CDN і адлюстроўваецца як глабальная зменная
- Крыху раней мы запусцілі Sentry у нашым JavaScript-е
Каб пратэставаць гэты прыклад, можам скарыстацца статычнай вэб-сервернай платформай Node.js: http-серверам. Заходзім у тэчку, дзе захоўваецца файл index.html, і ўводзім (опцыя з адключае кэшаванне) наступны радок, каб адкрыць у браўзэры адрас .
Як адлюстроўваюцца злоўленыя багі
Спачатку клікаем кнопку "Добры дзень".
Мы злавілі баг, таму ён не ўсплыве ўверх па стэку выклікаў, таму і не маніторыцца ў кансолі. Аднак, паколькі мы адсылаем у Гадзінны справаздачу аб багу ўручную, то ўбачым паведамленне аб ім у акаўнце.
Заўвагі:
- Можам прасачыць, у якім радку (24) зачасаўся баг.
- Да таго ж, навігацыйны ланцужок адлюстроўвае дзеянні браўзэра, што прывялі да памылкі.
Як адлюстроўваюцца непайманыя багі
Клікаем кнопку "Памылка".
Баг усплывае ўверх па стэку выклікаў і, такім чынам, на кансолі адлюстроўваецца паведамленне аб памылцы. Пасля гэтага Sentry аўтаматычна маніторыць баг, без якіх-небудзь дадатковых дзеянняў.
Заўвагі:
- Мы можам убачыць, у якім радку (30) згубіўся баг
- Не прадугледжаны навігацыйны ланцужок (не зусім разумею, чаму)
Як гарантаваць бяспеку праекта
Вы, магчыма, звярнулі ўвагу на спосаб, як мы кантралюем старонкі, якія могуць дасылаць справаздачу аб памылках у наш праект Гадзінны; пры дапамозе дсн запісы. Праблема заключаецца ў тым, што ўваход можа ўбачыць кожны, хто прагледзіць зыходны код вашай старонкі.
Каб гэтага не было, трэба абмежаваць колькасць даменаў, якія могуць уносіць у наш праект справаздачы аб памылках. У гэтым прыкладзе мы выкарыстоўвалі лакальны (лакальны хост). Дадзеная опцыя наладжваецца ва ўкладцы налад Гадзінны-праекта, Sentry Project Setting.
рэлізы
Калі падумаць аб тым, як выкарыстоўваць Гадзінны у розных варыяцыях нашага прыкладання, то тут патрэбен нейкі механізм, які будзе адзначаць памылкі нумарам версіі.
Бо не трэба, каб выпраўлены намі баг выплыў зноў, а мы думалі, што не спрацавала тое, што мы пафіксілі. Можа быць бо і такое, што карыстач запусціў больш старую, кэшаваную версію прыкладання.
Каб вырашыць праблему, трэба ўпісаць ідэнтыфікатар рэлізу (версіі) пры запуску Гадзінны.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Пасля гэтага ўсё новыя памылкі будуць адзначаны як release (0.1.0), гэта значыць будуць прывязаны да правільнай версіі кода.
Заўвагі:
- Мы разабралі просты спосаб як выкарыстоўваць рэлізы
- Sentry дазваляе прымяняць больш , якое цесна звязана з GitHub. Такая функцыя дае магчымасць адсочваць багі да здзяйснення вызначаных аперацый.
PS Другая частка даўжэйшая, таму яна будзе ў асобным пасце.
PS Тэлеграм чат Sentry
PS Забыўся паказаць што гэта пераклад посту
Крыніца: habr.com