🥇Veebirakendustes JavaScriptiga tehtud vigade jälgimine Sentry abil: Osa 1

Teenuse Sentry võimaldab kaugelt jälgida vigu frontend-rakendustes, mis on kirjutatud JavaScript.

Katse lahendada probleeme frontend-rakendustes JavaScript võib osutuda keeruliseks, kuna need tekivad kasutaja brauseris, millele teil tihti juurdepääsu pole. Siiski, Sentry pakub võimalust kaugelt jälgida vigu.

Siit on võimalik alla laadida lahendused, mida käsitleti selles artiklis.

Mida on vaja

Kui soovite neid näiteid kasutada, siis vajate:

Node.js: Multifunktsionaalne arendustööriist, mis ei ole rakenduse osa. Me laadisime alla viiend versiooni (8.12.0)
Sentry: Kas Sentry teenuse konto (saate tasuta registreerida kuni 10 tuhat viga kuus) või kohapeal paigaldatud Sentry — https://github.com/getsentry/onpremise

Paigaldamine oma serverisse

Sentry On-Premise paigaldamiseks oma serverisse on kaks võimalust

Koguda rpm ja paigaldada need — https://habr.com/ru/post/500632/

Kasutada ametlikku installerit:

Paigaldada serverisse docker ja docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

Tavakasutus

Alustamiseks lisage teenuse lehelt uus Sentry-rakendusprojekti jaoks. Pärast vajaliku keele valimist saate vastava dokumentatsiooni. Meie puhul valisime JavaScript.

Esimene näide — standardne JavaScript. Siin on kaks nuppu: «Hello» (Tere) ja «Error» (Viga).

Pärast nupu vajutamist «Hello», ekraan laaditakse uuesti ja blokk try tuvastab ja püüab vea. Pärast vea «püüdmist» saadetakse veateade käsitsi teenusele Sentry.

Nupp «Error» võimaldab lihtsalt vea tuvastada.

vanilla / index.html

<!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:

Sentry installeeritakse CDN-ist ja kuvatakse globaalse muutujana
Veidi varem käivitasime Sentry meie JavaScriptis

Käesoleva näite testimiseks võime kasutada staatilist veebiserveri platvormi Node.js: http-serveri. Siseneme kausta, kus fail asub, ja sisestame (valik, mis keelab vahemä cache) järgmise rea, et avada brauseris aadress index.htmlKuidas tuvastatakse püütud vead http://localhost:8080.

Esiteks klõpsame nuppu

Me püüdsime vea, seetõttu ei tõuse see üles kutsumise virnas ja ei jälgita seda konsoolis. Kuid kuna me saadame «Hello».

veateate käsitsi, näeme selle kohta teadet oma kontol. Sentry Saame jälgida, millisel real (24) viga tekkis

Märkused:

Saame jälgida, millises reaas (24) veake seisis
Lisaks näitab navigeerimise ketti brauseri tegevusi, mis on viinud veani.

Kuidas kuvatakse püüdmata vead

Kliki nuppu „Error“.

Viga tõuseb üles kutsumisjärjekorras ja seetõttu kuvatakse veateade konsoolis. Pärast seda jälgib Sentry automaatselt viga, ilma igasuguste täiendavate toiminguteta.

Märkused:

Saame näha, millises reas (30) viga kadus
Navigeerimisketi puudumine (ma ei saa päris aru, miks)

Kuidas tagada projekti turvalisus

Olete võib-olla pannud tähele, kuidas me jälgime lehti, mis võivad saata veateateid meie projekti Sentry; kasutades dsn kirjeid. Probleem on selles, et siseneda saab igaüks, kes vaatab teie lehe allika koodi.

Selle vältimiseks tuleb piirata domeenide arvu, mis saavad saata meie projekti veateateid. Selles näites kasutasime localhost (kohalik host). See valik on seadistatud projekti seadetel Sentry-projekt, Sentry Project Setting.

Väljalasked

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

Ei ole ju soovitav, et meie parandatud viga ilmuks uuesti, samas kui me arvame, et see, mida me fikseerisime, ei töötanud. On ka võimalik, et kasutaja käivitas vanema, vahemälus oleva versiooni rakendusest.

Probleemi lahendamiseks on vajalik identifikaatori kirjutamine väljalaske (versiooni) käivitamisel Sentry.

vanilla / index.html

...
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), mis tähendab, et need seotakse õige koodiversiooniga.

Märkused:

Oleme käsitlenud lihtsat viisi, kuidas kasutada väljalaskeid
Sentry võimaldab rakendada keerukamat nende , mis on tihedalt seotud kasutamine. See funktsioon võimaldab jälgida vigu enne teatud toimingute tegemist. GitHubP.S. Teine osa on pikem, seega tuleb see eraldi postitusse.

P.S. Sentry Telegrami kanal

P.S. Unustasin mainida, et see on postituse tõlge 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

Veakontroll Sentry abil JavaScriptis kirjutatud frontend-rakendustes: Osa 1