Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

хизматрасонӣ щаравул ба шумо имкон медиҳад, ки хатогиҳоро дар барномаҳои фронтӣ, ки дар он навишта шудаанд, назорат кунед JavaScript.

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Кӯшиш кунед, ки мушкилотро дар барномаҳои фронталӣ ҳал кунед JavaScript метавонад душвор бошад, зеро онҳо дар браузери корбар пайдо мешаванд, ки шумо аксар вақт ба он дастрасӣ надоред. Бо вуҷуди ин, щаравул имкон медихад, ки хатогихо аз масофаи дур назорат карда шаванд.

Ин аст, Шумо метавонед роҳҳои ҳалли дар ин мақола муҳокимашударо зеркашӣ кунед.

Чӣ лозим аст

Агар шумо хоҳед, ки ин мисолҳоро истифода баред, ба шумо лозим меояд:

  • Node.js: Асбоби таҳияи дорои хусусиятҳо, ки қисми барнома нест. Мо версияи охирини LTS-ро зеркашӣ кардем (8.12.0)
  • щаравул: Ё ҳисоб дар хидмати Sentry (шумо метавонед то 10 ҳазор хатоҳоро дар як моҳ ройгон сабт кунед) ё Sentry маҳаллӣ насбшуда - https://github.com/getsentry/onpremise

Насбкунӣ дар сервери шумо

Барои насб кардани Sentry On-Premise дар сервери худ шумо метавонед бо ду роҳ равед

  1. rpm созед ва онҳоро насб кунед - https://habr.com/ru/post/500632/

  2. Насбкунандаи расмиро истифода баред:

    Установить на сервер 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.

Чӣ гуна хатогиҳои дастгиршуда нишон дода мешаванд

Аввал тугмаро пахш кунед "Салом".

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Мо хатогиро гирифтем, аз ин рӯ он стеки зангҳоро наменамояд ва аз ин рӯ дар консол назорат карда намешавад. Аммо, азбаски мо ба щаравул дар бораи хато дастӣ хабар диҳед, мо дар бораи он дар ҳисоби шумо паём мебинем.

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Эзоҳ:

  • Мо метавонем пайгирӣ кунем, ки кадом сатр (24) хатогиро дар бар мегирад
  • Илова бар ин, пайраҳаи нонрезаҳо амалҳои браузерро нишон медиҳад, ки ба хатогӣ оварда расониданд.

Чӣ гуна хатогиҳои дастгирнашуда нишон дода мешаванд

Пахш кардани тугма "Хатогӣ".

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Хатогӣ стеки зангҳоро боло мебарад ва аз ин рӯ дар консол паёми хато нишон дода мешавад. Пас аз ин, Sentry ба таври худкор хаторо бидуни ягон амали иловагӣ назорат мекунад.

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Эзоҳ:

  • Мо мебинем, ки дар кадом сатр (30) хато гум шудааст
  • Роҳи нонреза нест (ман намефаҳмам, ки чаро)

Чӣ тавр таъмини амнияти лоиҳа

Шумо шояд пай бурдед, ки мо чӣ гуна назорат мекунем, ки кадом саҳифаҳо метавонанд хатогиҳоро ба лоиҳаи мо гузориш диҳанд щаравул; бо ёрии dsn сабтҳо. Мушкилот дар он аст, ки вурудро ҳар касе, ки рамзи сарчашмаи саҳифаи шуморо дидааст, дида метавонад.

Барои пешгирӣ кардани ин, мо бояд шумораи доменҳоро маҳдуд кунем, ки метавонанд ба лоиҳаи мо гузоришҳои хатогӣ пешниҳод кунанд. Дар ин мисол мо истифода бурдем localhost (мизбони маҳаллӣ). Ин хосият дар ҷадвали танзимот танзим карда шудааст щаравул-лоиҳа, Танзимоти лоиҳаи Sentry.

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Варақаҳои

Агар шумо дар бораи чӣ гуна истифода бурдани он фикр кунед щаравул дар вариантҳои гуногуни замимаи мо, он гоҳ ба мо як навъ механизм лозим аст, ки хатогиҳоро бо рақами версия қайд кунад.

Дар ниҳоят, мо намехоҳем, ки хатогие, ки мо ислоҳ кардем, дубора пайдо шавад ва мо фикр мекунем, ки он чизе, ки ислоҳ карда будем, кор накард. Инчунин мумкин аст, ки корбар версияи кӯҳна ва кэшшудаи барномаро оғоз кардааст.

Барои ҳалли мушкилот шумо бояд идентификаторро ворид кунед озод кардан (версияҳо) ҳангоми оғозёбӣ щаравул.

vanilla/index.html

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

Пас аз ин, ҳамаи хатогиҳои нав ҳамчун қайд карда мешаванд озод кардан (0.1.0), яъне онҳо ба версияи дурусти код баста мешаванд.

Мониторинги хатогиҳо бо Sentry дар барномаҳои Front-End, ки дар JavaScript навишта шудаанд: Қисми 1

Эзоҳ:

  • Мо роҳи оддии истифодаи релизҳоро фаҳмидем
  • Sentry ба шумо имкон медиҳад, ки бештар истифода баред мураккаб онҳо истифодаи, ки бо он зич алокаманд аст GitHub. Ин функсия имкон медиҳад, ки пеш аз иҷрои амалҳои муайян хатогиҳоро пайгирӣ кунед.

PS Қисми дуюм дарозтар аст, бинобар ин он дар як мақолаи алоҳида хоҳад буд.

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

PS Ман фаромӯш кардаам, ки ин тарҷумаи паём аст https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Манбаъ: will.com

Илова Эзоҳ