Сервіс Годинниковою дозволяє віддалено моніторити баги у фронтенд-додатках, написаних на 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,
});
...Після цього все нові помилки будуть відмічені як випуск (0.1.0), тобто будуть прив'язані до правильної версії коду.
Примітки:
- Ми розібрали простий спосіб використання релізів
- Sentry дозволяє застосовувати більше , яке тісно пов'язане з GitHub. Така функція дає можливість відстежувати баги до здійснення певних операцій.
PS Друга частина довша, тому вона буде в окремому пості.
PS Телеграм чат Sentry
PS Забув вказати, що це переклад посту
Джерело: habr.com