🥇Veamonitorimine Sentry abil JavaScriptis kirjutatud frontend-rakendustes: Osa 1

Teenuseid Sentry võimaldab kaugtasandil jälgida vigu veebirakendustes, mis on kirjutatud JavaScript.

Probleemide lahendamine veebirakendustes võib olla keeruline, kuna need ilmnevad kasutaja brauseris, millele teil sageli puudub juurdepääs. Siiski JavaScript annab võimaluse kaugtasandil jälgida vigu. Sentry saate alla laadida lahendused, mida selles artiklis käsitleti.

Siin Mida on vaja

Kui soovite neid näiteid kasutada, vajate:

: Multifunktsionaalne arendustööriist, mis ei kuulu rakenduse alla. Me laadisime alla viimase LTS-versiooni (8.12.0)

Node.js: Kas Sentry teenuses konto (kuni 10 tuhat viga kuus saab tasuta salvestada) või installitud kohalik Sentry —
SentryPaigaldamine teie serverisse https://github.com/getsentry/onpremise

Sentry On-Premise paigaldamiseks oma serverisse on kaks teed

Koostada rpm ja installida need —

Kasutage ametlikku installerit: https://habr.com/ru/post/500632/
Installeerida serverisse docker ja docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
```
Standardsed kasutusviisid
```

Alustamiseks lisage teenuse veebisaidilt uus

-projekt rakendusele. Pärast vajaliku keele valimist saate vastava dokumentatsiooni. Meie juhul valisime SentryEsimene näide — standardne JavaScript.

. Siin on kaks nuppu: JavaScript„Tere” (Hello) ja „Viga” (Error). Pärast nuppu klõpsamist

, ekraan laaditakse uuesti ja plokk (Hello) jatugevdab ja püüab vea. Pärast vea „püüdmist” saadetakse vea aruanne hoolikalt Sentry teenusesse proovige Nupp „Viga” võimaldab lihtsalt tuvastada vea. Sentry.

vanilla / index.html

Sentry installitakse CDN-ist ja kuvatakse kui globaalne muutuja

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Tere</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://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>

Märkused:

Veidi varem käivitasime Sentry oma JavaScriptis
Selle näite testimiseks võime kasutada staatilist veebiserveri platvormi

http-server. Node.js: Siseneme kausta, kus fail asub, ja sisestame (valik häirib vahemälu) järgmise rea, et avada brauseris aadress index.htmlKuidas kuvatakse püütud vead http://localhost:8080.

Esmalt klõpsame nuppu

Me püüdsime vea, seega ei ilmu see ülemisse virnasse, mistõttu seda ka ei jälgita konsoolis. Siiski, kuna saadame (Hello) ja.

vea aruande käsitsi, näeme teavet sellest oma kontol. Sentry Saame jälgida, millises ridu (24) see viga asub

Märkused:

Lisaks näitab navigeerimise ahel brauseri tegevusi, mis viisid veani.
Kuidas kuvatakse püüdmatud vead

Kuidas kuvatakse püüdmatud vead

Klõpsame nuppu «Viga».

Bugi tõuseb tagasi kutsumise tõukide kaudu ja seega kuvatakse veateade konsoolis. Pärast seda jälgib Sentry automaatselt viga, ilma et oleks vaja täiendavaid toiminguid.

Märkused:

Me saame näha, millises reas (30) viga kaotas.
Navigatsiooniahelat pole ette nähtud (ma ei saa päris aru, miks).

Kuidas tagada projekti turvalisus

Olete ehk tähele pannud, kuidas me kontrollime lehti, mis võivad meie projekti veateateid saata. Sentry; selle abil dsn kirjed. Probleem on selles, et igaüks, kes vaatab lehe lähtekoodi, saab seda näha.

Selle vältimiseks tuleb piirata domeenide arvu, mis saavad meie projekti veateateid saata. Sellisel juhul kasutasime localhost (kohalik host). See valik seadistatakse projektide seadete vahekaartidel. Sentry-projekt, Sentry Projekti Seadistus.

Väljalaske

Kui mõelda, kuidas kasutada Sentry meie rakenduse erinevates variatsioonides, on vajalik mehhanism, mis tähistab vead versiooninumbriga.

Me ei taha, et meie parandatud viga ilmuks uuesti ja me arvaksime, et see, mida me fikseerisime, ei töötanud. On võimalik, et kasutaja käivitas vanema, vahemälus oleva rakenduse versiooni.

Probleemi lahendamiseks tuleb käivitamisel kirjutada väljalaske (versioon) identifikaator Sentry.

Sentry installitakse CDN-ist ja kuvatakse kui globaalne muutuja

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
  release: RELEASE,
});
...

Pärast seda märgitakse kõik uued vead kui väljalase (0.1.0), see tähendab, et need seotakse õige koodi versiooniga.

Märkused:

Me tutvustasime lihtsat viisi väljalaskmise kasutamiseks.
Sentry võimaldab rakendada komplekse keerukamaid nende omandi resize., mis on tihedalt seotud GitHub. Selline funktsioon võimaldab jälgida vigu enne teatud toimingute tegemist.

P.S. Teine osa on pikem, seega on see eraldi postitus.

P.S Sentry Telegrami vestlus https://t.me/sentry_ru

P.S. Unustasin mainida, et see on postituse tõlge. https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Allikas: habr.com

Veaparav kaamid Sentry abil JavaScripti põhiste frontend rakenduste vigade jälgimiseks: Osa 1