Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

servo Gardisto permesas al vi malproksime monitori cimojn en antaŭfinaj aplikaĵoj skribitaj enen JavaScript.

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

Provante ripari problemojn en antaŭfinaj aplikoj JavaScript povas esti malfacilaj ĉar ili originas en la retumilo de la uzanto, al kiu vi ofte ne havas aliron. Tamen, Gardisto ebligas malproksime monitori cimojn.

estas Vi povas elŝuti la solvojn diskutitajn en ĉi tiu artikolo.

Kio necesas

Se vi volas uzi ĉi tiujn ekzemplojn, vi bezonos:

  • node.js: Karakterriĉa evoluilo, kiu ne estas parto de la aplikaĵo. Ni elŝutis la lastan LTS-version (8.12.0)
  • Gardisto: Aŭ Konto en la servo Sentry (vi povas registri ĝis 10 mil cimojn monate senpage) aŭ instalita loka Sentry - https://github.com/getsentry/onpremise

Instalado sur via servilo

Por instali Sentry On-Premise sur via servilo vi povas iri laŭ 2 manieroj

  1. Konstruu rpm kaj instalu ilin - https://habr.com/ru/post/500632/

  2. Uzu la oficialan instalilon:

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

Norma Uzo

Por komenci, aldonu novan el la servo retejo Gardisto-projekto por la aplikaĵo. Elektinte la deziratan lingvon, vi ricevos la respondan dokumentadon. En nia kazo ni elektis JavaScript.

La unua ekzemplo estas norma JavaScript. Estas du butonoj ĉi tie: "Saluton" (Saluton) kaj "Eraro" (Eraro).

Post kiam vi klakas la butonon "Saluton", la ekrano rekomencos kaj la bloko provu detektos kaj kaptos la cimon. Post kiam la cimo estas "kaptita", la erara raporto estas mane sendita al la servo Gardisto.

La butono "Eraro" permesas vin facile detekti cimon.

vanilo/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>

Notoj:

  • Gardostaranto estas instalita de CDN kaj elmontrita kiel tutmonda variablo
  • Iom pli frue ni lanĉis Sentry en nia JavaScript

Por testi ĉi tiun ekzemplon, ni povas uzi statikan retservilan platformon node.js: http servilo. Iru al la dosierujo kie la dosiero estas konservita index.html, kaj enigu (opcio kun malŝaltas kaŝmemoron) la sekvan linion por malfermi la adreson en la retumilo http://localhost:8080.

Kiel kaptitaj cimoj estas montrataj

Unue alklaku la butonon "Saluton".

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

Ni kaptis cimon, do ĝi ne aperos la voka stako, kaj tial ne estas monitorita en la konzolo. Tamen, ĉar ni sendas al Gardisto raportu cimon permane, ni vidos mesaĝon pri ĝi en via konto.

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

Notoj:

  • Ni povas spuri kiu linio (24) enhavas la cimon
  • Krome, la panorando montras la agojn de la retumilo, kiuj kaŭzis la eraron.

Kiel nekaptitaj cimoj montriĝas

Alklaku la butonon "Eraro".

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

La cimo bobeligas la vokon kaj tiel erarmesaĝo estas montrata sur la konzolo. Post tio, Sentry aŭtomate kontrolas la cimon, sen aldonaj agoj.

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

Notoj:

  • Ni povas vidi en kiu linio (30) la cimo estas perdita
  • Ne estas panetovojo (mi ne tute komprenas kial)

Kiel certigi projektan sekurecon

Vi eble rimarkis, kiel ni kontrolas, kiuj paĝoj povas raporti erarojn al nia projekto Gardisto; kun helpo dsn rekordoj. La problemo estas, ke la enigo povas esti vidita de ĉiu, kiu rigardas la fontkodon de via paĝo.

Por eviti ĉi tion, ni devas limigi la nombron da domajnoj kiuj povas sendi erarajn raportojn al nia projekto. En ĉi tiu ekzemplo ni uzis localhost (loka gastiganto). Ĉi tiu opcio estas agordita en la langeto de agordoj Gardisto-projekto, Agordo de Projekto Gardostaranto.

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

Eldonoj

Se vi pensas pri kiel uzi Gardisto en malsamaj variaĵoj de nia aplikaĵo, tiam ni bezonas ian mekanismon, kiu markos erarojn per versio-numero.

Post ĉio, ni ne volas, ke la cimo, kiun ni riparis, aperu denove, kaj ni pensas, ke tio, kion ni riparis, ne funkciis. Povas ankaŭ esti ke la uzanto lanĉis pli malnovan, kaŝmemorigitan version de la aplikaĵo.

Por solvi la problemon, vi devas enigi la identigilon liberigo (versioj) ĉe ekfunkciigo Gardisto.

vanilo/index.html

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

Post ĉi tio, ĉiuj novaj eraroj estos markitaj kiel eldono (0.1.0), tio estas, ili estos ligitaj al la ĝusta versio de la kodo.

Monitorado de Eraroj kun Sentry en Front-End-Aplikoj Skribitaj en JavaScript: Parto 1

Notoj:

  • Ni eltrovis simplan manieron uzi eldonojn
  • Sentry permesas uzi pli kompleksa ilia la uzo de, kiu estas proksime rilata al GitHub. Ĉi tiu funkcio ebligas spuri cimojn antaŭ ol plenumi iujn operaciojn.

PS La dua parto estas pli longa, do ĝi estos en aparta afiŝo.

PS Telegram-babilejo Sentry https://t.me/sentry_ru

PS Mi forgesis indiki, ke tio estas traduko de la afiŝo https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

fonto: www.habr.com

Aldoni komenton