Övervakning av fel med hjälp av Sentry i frontend-applikationer skrivna i JavaScript: Del 1

Tjänsten Sentry möjliggör fjärrövervakning av buggar i frontend-applikationer som är skrivna i JavaScript.

Försöket att åtgärda problem i frontend-applikationer på JavaScript kan vara en utmanande uppgift, eftersom de uppstår i användarens webbläsare, som ni ofta inte har tillgång till. Men Sentry ger möjlighet till fjärrövervakning av buggar.

Här kan du ladda ner lösningar som diskuterades i denna artikel.

Vad som behövs

Om du vill använda dessa exempel behöver du:

• Node.js: Ett multifunktionellt utvecklingsverktyg som inte är en del av applikationen. Vi laddade ner den senaste LTS-versionen (8.12.0)
• Sentry: Antingen ett konto på Sentry (du kan gratis logga upp till 10 000 buggar i månaden) eller en installerad lokal Sentry - https://github.com/getsentry/onpremise

Installation på din server

För att installera Sentry On-Premise på din server kan du gå två vägar

1. Bygga rpm och installera dem - https://habr.com/ru/post/500632/

2. Använda den officiella installationsprogrammet:

   Installera Docker och docker-compose på servern
   	git clone https://github.com/getsentry/onpremise.git
   	./install.sh

Standardanvändning

För att börja, lägg till ett nytt projekt för applikationen från tjänstens webbplats. Efter att ha valt rätt språk får du motsvarande dokumentation. I vårt fall valde vi SentryDet första exemplet — standard JavaScript.

. Här finns två knappar: JavaScript«Hello» (Hej) och «Error» (Fel). När du klickar på knappen

, kommer skärmen att laddas om, och blocket (Hej) ochupptäcker och fångar buggen. Efter att buggen har blivit "fångad" skickas felrapporten manuellt till tjänsten försök Knappen «Error» gör det enkelt att upptäcka buggar. Sentry.

vanilla / index.html

Sentry installeras från CDN och visas som en global variabel

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

Noteringar:

• Tidigare körde vi Sentry i vår JavaScript
• För att testa detta exempel kan vi använda en statisk webbserverplattform

http-server. Node.js: Vi går in i mappen där filen finns, och skriver (alternativet stänger av caching) följande rad för att öppna i webbläsaren adressen index.htmlHur fångade buggar visas http://localhost:8080.

Vi klickar först på knappen

Vi har fångat en bugg, så den kommer inte att bubbla upp i anropsstacken och därför övervakas den inte i konsolen. Men eftersom vi manuellt skickar in (Hej) och.

felrapporten, kommer vi att se meddelandet om det i vårt konto. Sentry Vi kan följa vilken rad (24) buggen dolde sig i

Noteringar:

• Dessutom visar navigeringskedjan de åtgärder som webbläsaren vidtog som ledde till felet.
• Hur ouppsnappade buggar visas

Hur ouppsnappade buggar visas

Klicka på knappen «Fel».

Felet dyker upp högre i anropsstacken och därmed visas ett felmeddelande i konsolen. Efter detta övervakar Sentry automatiskt felet utan några ytterligare åtgärder.

Noteringar:

• Vi kan se på vilken rad (30) felet gömde sig
• Det finns ingen navigationskedja (jag förstår inte riktigt varför)

Hur man säkerställer projektets säkerhet

Du har kanske noterat hur vi kontrollerar sidor som kan skicka felrapporter till vårt projekt Sentry; med hjälp av dsn plåtar. Problemet är att vem som helst som tittar på din sidas källkod kan se detta.

För att förhindra detta måste antalet domäner som kan logga felrapporter till vårt projekt begränsas. I det här exemplet använde vi localhost (lokal värd). Detta alternativ ställs in i inställningsfliken Sentry-projektet, Sentry Projektinställning.

Releaser

Om man tänker på hur man ska använda Sentry i olika varianter av vår applikation, så behövs en mekanism som markerar fel med versionsnumret.

Det är ju inte så att vi vill att ett fel som vi har rättat ska dyka upp igen, och vi tänker att det vi fixade inte fungerade. Det kan vara så att användaren har kört en äldre, cachad version av applikationen.

För att lösa problemet måste vi ange identifieraren lanseringen (versionen) vid starten Sentry.

Sentry installeras från CDN och visas som en global variabel

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

Efter detta kommer alla nya fel att markeras som release (0.1.0), det vill säga de kommer att kopplas till rätt version av koden.

Noteringar:

• Vi har diskuterat ett enkelt sätt att använda versioner
• Sentry tillåter mer komplexa dem användningen av, som är tätt kopplade till GitHub. Denna funktion möjliggör att spåra fel före vissa operationer.

P.S. Den andra delen är längre, så den kommer att publiceras i ett separat inlägg.

P.S Telegramchatten Sentry https://t.me/sentry_ru

P.S. Jag glömde nämna att detta är en översättning av inlägget https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Källa: habr.com