🥇Наблюдение на грешки при използване на Sentry в приложения от предния край, написани на JavaScript: Част 1

Обслужване Караул ви позволява отдалечено да наблюдавате бъгове в предни приложения, написани в JavaScript.

Опитвам се да отстраня проблеми в предните приложения на JavaScript могат да бъдат трудни, защото произхождат от браузъра на потребителя, до който често нямате достъп. Въпреки това, Караул дава възможност за дистанционно наблюдение на грешки.

Тук Можете да изтеглите решенията, обсъдени в тази статия.

Каквото е необходимо

Ако искате да използвате тези примери, ще ви трябва:

Node.js: богат на функции инструмент за разработка, който не е част от приложението. Изтеглихме най-новата LTS версия (8.12.0)
Караул: Или акаунт в услугата Sentry (можете да записвате до 10 хиляди грешки на месец безплатно) или инсталиран локален Sentry - https://github.com/getsentry/onpremise

Инсталация на вашия сървър

За да инсталирате Sentry On-Premise на вашия сървър, можете да отидете по 2 начина

Създайте rpm и ги инсталирайте - https://habr.com/ru/post/500632/

Използвайте официалния инсталатор:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

Стандартна употреба

За да започнете, добавете нов от уебсайта на услугата Караул-проект за приложението. След като изберете желания език, ще получите съответната документация. В нашия случай ние избрахме JavaScript.

Първият пример е стандартен JavaScript. Тук има два бутона: "Здравейте" (Здравей) и "Грешка" (Грешка).

След като щракнете върху бутона "Здравейте", екранът ще се рестартира и блокът опитвам ще открие и хване грешката. След като грешката бъде „уловена“, докладът за грешка се изпраща ръчно до услугата Караул.

Бутонът „Грешка“ ви позволява лесно да откриете грешка.

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и въведете (опция с деактивиране на кеширането) на следния ред, за да отворите адреса в браузъра http://localhost:8080.

Как се показват уловените грешки

Първо щракнете върху бутона "Здравейте".

Хванахме грешка, така че няма да изскочи стека за повиквания и следователно не се наблюдава в конзолата. Въпреки това, тъй като изпращаме до Караул докладвайте за грешка ръчно, ще видим съобщение за това във вашия акаунт.

Забележки:

Можем да проследим кой ред (24) съдържа грешката
Освен това навигационната пътека показва действията на браузъра, довели до грешката.

Как се показват неуловените грешки

Щракване върху бутона "Грешка".

Грешката избухва в стека на повикванията и по този начин на конзолата се показва съобщение за грешка. След това Sentry автоматично следи грешката, без никакви допълнителни действия.

Забележки:

Можем да видим в кой ред (30) се губи грешката
Няма пътека за навигация (не разбирам съвсем защо)

Как да гарантираме сигурността на проекта

Може би сте забелязали начина, по който контролираме кои страници могат да съобщават за грешки в нашия проект Караул; с помощ DSn записи. Проблемът е, че въведеното може да бъде видяно от всеки, който види изходния код на вашата страница.

За да избегнем това, трябва да ограничим броя на домейните, които могат да изпращат доклади за грешки към нашия проект. В този пример използвахме Localhost (местен хост). Тази опция е конфигурирана в раздела с настройки Караул-проект, Настройка на проекта Sentry.

Издания

Ако мислите как да използвате Караул в различни варианти на нашето приложение, тогава се нуждаем от някакъв механизъм, който ще маркира грешки с номер на версия.

В края на краищата, ние не искаме грешката, която коригирахме, да изскочи отново и смятаме, че това, което коригирахме, не работи. Възможно е също потребителят да е стартирал по-стара, кеширана версия на приложението.

За да разрешите проблема, трябва да въведете идентификатора пускане (версии) при стартиране Караул.

vanilla/index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

След това всички нови грешки ще бъдат маркирани като освобождаване (0.1.0), тоест те ще бъдат обвързани с правилната версия на кода.

Забележки:

Измислихме лесен начин за използване на версиите
Sentry ви позволява да използвате повече комплекс техен използването на, което е тясно свързано с GitHub. Тази функция дава възможност за проследяване на грешки преди извършване на определени операции.

PS Втората част е по-дълга, така че ще бъде в отделен пост.

PS Telegram чат Sentry https://t.me/sentry_ru

PS Забравих да отбележа, че това е превод на поста https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Източник: www.habr.com

Мониторинг на грешки със Sentry в приложения от предния край, написани на JavaScript: Част 1

Добавяне на нов коментар

Мониторинг на грешки със Sentry в приложения от предния край, написани на JavaScript: Част 1

Добавяне на нов коментар Отказване на отговора

Добавяне на нов коментар