Сервиз Sentry позволява отдалечено да мониторите бъгове в фронтенд приложения, написани на JavaScript.
Опитът да отстраните проблемите във фронтенд приложенията на JavaScript може да се окаже трудна задача, тъй като те възникват в браузъра на потребителя, до който често нямате достъп. Въпреки това, Sentry предлага възможност за отдалечен мониторинг на бъгове.
можете да изтеглите решенията, разглеждани в тази статия.
Какво е необходимо
Ако искате да се възползвате от тези примери, ще ви трябват:
- : Многофункционален инструмент за разработка, който не е част от приложението. Изтеглихме последната LTS версия (8.12.0)
- Sentry: Или акаунт в услугата Sentry (можете безплатно да записвате до 10 000 бъга на месец) или инсталиран локален Sentry —
Инсталиране на вашия сървър
За да инсталирате Sentry On-Premise на вашия сървър, можете да следвате 2 пътища
Съберете rpm и ги инсталирайте —
Използвайте официалния инсталатор:
Инсталирайте на сървъра docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Стандартно използване
За да започнете, добавете нов Sentry-проект за приложението. След избор на необходимия език ще получите съответната документация. В нашия случай избрахме JavaScript.
Першият пример е стандартният JavaScript. Има две бутони: „Hello“ (Здравей) и „Error“ (Грешка).
След като кликнете на бутона „Hello“, екранът ще се презареди, а блокът try ще открие и прихване бъга. След като бъгът е „приготвен“, отчетът за грешка се изпраща ръчно на услугата Sentry.
Бутонът „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">Грешка</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://b5bf359072254626aba8e64368e77b7d@sentry.io/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, и въвеждаме (опцията с деактивиране на кеширането) следния ред, за да отворим адреса в браузъра .
Как се показват улавяните бъгове
Първо кликваме на бутона „Hello“.
Уловихме бъг, затова той няма да се появи нагоре по стека от повиквания, затова не се следи в конзолата. Въпреки това, тъй като ръчно изпращаме в Sentry отчет за бъга, ще видим съобщение за него в акаунта.
Бележки:
- Можем да проследим в кой ред (24) се е появил бъгът
- Освен това, навигационната верига показва действията на браузъра, които водят до грешката.
Как се показват непойманите бъгове
Кликнете върху бутона «Грешка».
Багът се появява нагоре по стека с повиквания и по този начин съобщението за грешка се показва в консолата. След това Sentry автоматично следи за бага без допълнителни действия.
Бележки:
- Можем да видим в кой ред (30) е загубен багът
- Не е предвидена навигационна верига (не съвсем разбирам защо)
Как да осигурим безопасността на проекта
Вие, вероятно, сте обърнали внимание на начина, по който контролирахме страниците, които могат да изпращат отчети за грешки в нашия проект Sentry; с помощта на dsn записи. Проблемът е, че всеки, който разглежда изходния код на вашата страница, може да види това.
За да не се случи това, трябва да ограничим броя на домейните, които могат да записват отчети за грешки в нашия проект. В този пример използвахме localhost (локален хост). Тази опция се настройва в раздела за настройки Sentry-проект, Настройки на проекта в Sentry.
Релиза
Ако помислим как да използваме Sentry в различни вариации на нашето приложение, тук е необходим механизъм, който ще маркира грешките с номер на версия.
Не искаме, нали, поправеният от нас баг да се появи отново, а ние да си мислим, че не е сработило това, което сме поправили. Може да се случи потребителят да е стартирал по-стара, кеширана версия на приложението.
За да решим проблема, трябва да добавим идентификатор на пускането (версия) при стартиране Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...След това всички нови грешки ще бъдат маркирани като release (0.1.0), т.е. ще бъдат привързани към правилната версия на кода.
Бележки:
- Разгледахме прост начин как да използваме релизите
- Sentry позволява прилагането на по , който е тясно свързан с GitHub. Тази функция позволява да се следят баговете преди извършването на определени операции.
P.S. Втората част е по-дълга, затова ще бъде в отделен пост.
P.S Чат в Telegram за Sentry
P.S. Забравих да спомена, че това е превод на поста
Източник: habr.com
