🥇Грешки при следење со користење на Sentry во предните апликации напишани во JavaScript: Дел 1

Услуги Sentry ви овозможува далечински да ги следите грешките во предните апликации напишани во Го вклучите Javascript-.

Вклучено се обидува да ги поправи проблемите во предните апликации Го вклучите Javascript- може да биде незгодно бидејќи потекнуваат од прелистувачот на корисникот, до кој често немате пристап. Сепак, Sentry овозможува далечинско следење на грешки.

Тука Можете да ги преземете решенијата дискутирани во оваа статија.

Што е потребно

Ако сакате да ги користите овие примери, ќе ви требаат:

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

Инсталација на вашиот сервер

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

Направете вртежи во минута и инсталирајте ги - https://habr.com/ru/post/500632/

Користете го официјалниот инсталатер:

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

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

За да започнете, додадете нова од веб-локацијата на услугата Sentry-проект за апликацијата. Откако ќе го изберете саканиот јазик, ќе ја добиете соодветната документација. Во нашиот случај ние избравме Го вклучите Javascript-.

Првиот пример е стандарден Го вклучите Javascript-. Тука има две копчиња: "Здраво" (Здраво) и "Грешка" (Грешка).

Откако ќе кликнете на копчето "Здраво", екранот ќе се рестартира и блокот се обиде ќе ја открие и фати бубачката. Откако ќе се „фати грешката“, извештајот за грешка рачно се испраќа до услугата Sentry.

Копчето „Грешка“ ви овозможува лесно да откриете грешка.

ванила/индекс.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.

Како се прикажуваат фатените грешки

Прво кликнете на копчето "Здраво".

Фативме грешка, така што нема да се појави во стекот на повици и затоа не се следи во конзолата. Сепак, бидејќи испраќаме до Sentry пријавете грешка рачно, ќе видиме порака за тоа во вашата сметка.

Забелешки:

Можеме да следиме која линија (24) ја содржи бубачката
Покрај тоа, патеката за лебници ги прикажува дејствата на прелистувачот што доведоа до грешка.

Како се прикажуваат нефатените грешки

Со кликнување на копчето "Грешка".

Грешката го зголемува оџакот на повици и на тој начин се прикажува порака за грешка на конзолата. После ова, Sentry автоматски ја следи грешката, без никакви дополнителни дејства.

Забелешки:

Можеме да видиме во која линија (30) бубачката е изгубена
Нема трага од лебници (не разбирам баш зошто)

Како да се обезбеди безбедност на проектот

Можеби сте забележале како контролираме кои страници можат да пријават грешки на нашиот проект Sentry; со помош dsn рекорди. Проблемот е што внесувањето може да го види секој што го гледа изворниот код на вашата страница.

За да го избегнеме ова, треба да го ограничиме бројот на домени кои можат да поднесуваат извештаи за грешки до нашиот проект. Во овој пример што го користевме localhost (локален домаќин). Оваа опција е конфигурирана во табулаторот за поставки Sentry-проект, Поставување на проектот Sentry.

Изданија

Ако размислувате како да го користите Sentry во различни варијации на нашата апликација, тогаш ни треба некој вид механизам кој ќе означува грешки со број на верзија.

На крајот на краиштата, не сакаме грешката што ја поправивме да се појави повторно и мислиме дека она што го поправивме не функционираше. Исто така, може да биде дека корисникот започнал постара, кеширана верзија на апликацијата.

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

ванила/индекс.html

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

После ова, сите нови грешки ќе бидат означени како ослободување (0.1.0), односно ќе бидат врзани за правилната верзија на кодот.

Забелешки:

Сфативме едноставен начин за користење на изданија
Sentry ви овозможува да користите повеќе комплицирано нивните употребата на, што е тесно поврзано со GitHub. Оваа функција овозможува следење на грешки пред да се извршат одредени операции.

П.С Вториот дел е подолг, па ќе биде во посебен пост.

PS Телеграмски разговор Sentry https://t.me/sentry_ru

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

Извор: www.habr.com

Грешки при следење со Sentry во апликации од предниот дел напишани во JavaScript: Дел 1

Додадете коментар Откажи одговор