Tjänsten Sentry låter dig fjärrövervaka buggar i front-end-applikationer inskrivna JavaScript.
Försöker fixa problem i front-end-applikationer på JavaScript kan vara knepiga eftersom de har sitt ursprung i användarens webbläsare, som man ofta inte har tillgång till. Dock, Sentry gör det möjligt att fjärrövervaka buggar.
Du kan ladda ner lösningarna som diskuteras i den här artikeln.
Vad är nödvändigt
Om du vill använda dessa exempel behöver du:
- : Ett funktionsrikt utvecklingsverktyg som inte ingår i applikationen. Vi laddade ner den senaste LTS-versionen (8.12.0)
- Sentry: Antingen ett konto i Sentry-tjänsten (du kan spela in upp till 10 tusen buggar per månad gratis) eller en installerad lokal Sentry -
Installation på din server
För att installera Sentry On-Premise på din server kan du gå på två sätt
-
Bygg varvtal och installera dem -
-
Använd det officiella installationsprogrammet:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardanvändning
För att komma igång, lägg till en ny från tjänstens webbplats Sentry-projekt för ansökan. När du har valt önskat språk får du motsvarande dokumentation. I vårt fall valde vi JavaScript.
Det första exemplet är standard JavaScript. Det finns två knappar här: "Hej" (Hej och "Fel" (Fel).
När du har klickat på knappen "Hej", kommer skärmen att starta om och blockeringen prova kommer att upptäcka och fånga felet. Efter att felet har "fångats" skickas felrapporten manuellt till tjänsten Sentry.
Med knappen "Fel" kan du enkelt upptäcka en bugg.
vanilj/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>Anmärkningar:
- Sentry installeras från ett CDN och exponeras som en global variabel
- Lite tidigare lanserade vi Sentry i vår JavaScript
För att testa detta exempel kan vi använda en statisk webbserverplattform node.js: http-server. Gå till mappen där filen är lagrad index.html, och skriv in (alternativ med inaktiverar cachning) följande rad för att öppna adressen i webbläsaren .
Hur fångade buggar visas
Klicka först på knappen "Hej".
Vi fångade en bugg, så den dyker inte upp samtalsstacken och övervakas därför inte i konsolen. Men eftersom vi skickar till Sentry rapportera ett fel manuellt, kommer vi att se ett meddelande om det på ditt konto.
Anmärkningar:
- Vi kan spåra vilken rad (24) som innehåller felet
- Dessutom visar brödsmulans spår webbläsarens åtgärder som ledde till felet.
Hur ofångade buggar visas
Klicka på knappen "Fel".
Felet bubblar upp samtalsstacken och därför visas ett felmeddelande på konsolen. Efter detta övervakar Sentry automatiskt felet, utan några ytterligare åtgärder.
Anmärkningar:
- Vi kan se på vilken rad (30) felet är förlorat
- Det finns inget brödsmulespår (jag förstår inte riktigt varför)
Hur man säkerställer projektsäkerhet
Du kanske har märkt hur vi kontrollerar vilka sidor som kan rapportera fel till vårt projekt Sentry; med hjälp dsn uppgifter. Problemet är att ingången kan ses av alla som tittar på källkoden för din sida.
För att undvika detta måste vi begränsa antalet domäner som kan skicka felrapporter till vårt projekt. I det här exemplet använde vi lokalvärd (lokal värd). Det här alternativet konfigureras på fliken Inställningar Sentry-projekt, Sentry-projektinställning.
Släpp
Om du tänker på hur du använder Sentry i olika varianter av vår applikation, då behöver vi någon form av mekanism som markerar fel med ett versionsnummer.
När allt kommer omkring vill vi inte att buggen vi fixade ska dyka upp igen, och vi tror att det vi fixade inte fungerade. Det kan också vara så att användaren har startat en äldre, cachad version av applikationen.
För att lösa problemet måste du ange identifieraren frisättning (versioner) vid start Sentry.
vanilj/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Efter detta kommer alla nya fel att markeras som släpp (0.1.0), det vill säga de kommer att kopplas till den korrekta versionen av koden.
Anmärkningar:
- Vi har kommit på ett enkelt sätt att använda utgåvor
- Sentry låter dig använda mer , vilket är nära besläktat med GitHub. Denna funktion gör det möjligt att spåra buggar innan vissa operationer utförs.
PS Den andra delen är längre, så den kommer i ett separat inlägg.
PS Telegram chatt Sentry
PS Jag glömde att ange att detta är en översättning av inlägget
Källa: will.com