Service Sentry giver mulighed for fjernafsøgning af fejl i frontend-applikationer skrevet i JavaScript.
Forsøg på at løse problemer i frontend-applikationer på JavaScript kan vise sig at være en udfordring, da de opstår i brugerens browser, som man ofte ikke har adgang til. Dog, Sentry giver mulighed for fjernafsøgning af fejl.
kan downloades løsninger, der blev diskuteret i denne artikel.
Hvad der er nødvendigt
Hvis du vil bruge disse eksempler, vil du have brug for:
- : Et multifunktionelt udviklingsværktøj, der ikke er en del af applikationen. Vi downloadede den seneste LTS-version (8.12.0)
- Sentry: Enten en konto i Sentry-tjenesten (man kan gratis registrere op til 10.000 fejl om måneden) eller en installeret lokal Sentry -
Installation på din server
For at installere Sentry On-Premise på dine servere kan man følge 2 veje
Samle rpm-filer og installere dem -
Brug den officielle installationsprogram:
Installer Docker og docker-compose på serveren git clone https://github.com/getsentry/onpremise.git ./install.sh
Standard brug
For at komme i gang, tilføj et nyt Sentry-projekt til applikationen. Efter valg af det relevante sprog vil du modtage dokumentation. I vores tilfælde valgte vi JavaScript.
Det første eksempel - standard JavaScript. Her er der to knapper: «Hello» (Hej) og «Error» (Fejl).
Efter at du har klikket på knappen «Hello», vil skærmen genindlæse, og blokken try vil opdage og fange fejlen. Efter fejlen er «fanget», sendes fejloplysningerne manuelt til tjenesten Sentry.
Knapperne «Error» tillader simpelthen at opdage fejlen.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Hej</button>
<button id="error">Fejl</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>Bemærkninger:
- Sentry installeres fra CDN og vises som en global variabel
- Tidligere kørte vi Sentry i vores JavaScript
For at teste dette eksempel kan vi bruge en statisk webserverplatform Node.js: http-server. Gå ind i mappen, der indeholder filen index.html, og indtast (denne mulighed deaktiverer caching) følgende linje for at åbne adressen i browseren .
Hvordan fangede fejl vises
Først klikker vi på knappen «Hello».
Vi fangede en fejl, så den vil ikke stige op ad kaldestakken og derfor ikke overvåges i konsollen. Men da vi sender en Sentry fejlrapport manuelt, vil vi se en besked om den i kontoen.
Bemærkninger:
- Vi kan følge, hvilken linje (24) fejlen optrådte i
- Desuden viser navigationskæden browserens handlinger, der førte til fejlen.
Hvordan fangede fejl vises
Vi klikker på knappen «Fejl».
Fejlen bobler op gennem opkaldshierarkiet og dermed vises fejlhåndteringsbeskeden på konsollen. Herefter monitorerer Sentry automatisk fejlen uden yderligere handling.
Bemærkninger:
- Vi kan se, hvilken linje (30) fejlen gik tabt i
- Der er ikke forudset en navigationskæde (jeg forstår ikke helt hvorfor)
Hvordan sikrer man projektets sikkerhed
Måske har du bemærket måden, vi kontrollerer sider, der kan sende fejllogs til vores projekt Sentry; ved hjælp af dsn optegnelser. Problemet er, at enhver, der ser kildekoden på din side, kan se dette.
For at undgå dette skal antallet af domæner, der kan sende fejllogs til vores projekt, begrænses. I dette eksempel har vi brugt localhost (localhost). Denne mulighed kan konfigureres i indstillingsfanen Sentry-projektet, Sentry Projektindstilling.
Udgivelser
Hvis vi tænker på, hvordan man bruger Sentry i forskellige variationer af vores ansøgning, kræves der en slags mekanisme, der markerer fejl med versionsnummer.
Det er ikke hensigtsmæssigt, hvis en fejl, vi har rettet, dukker op igen, mens vi tror, at det, vi har rettet, ikke fungerede. Der kan også være tilfældigt, at brugeren har kørt en ældre, cachet version af ansøgningen.
For at løse problemet skal identifikatoren for udgivelsen (versionen) skrives ved opstart Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...Herefter vil alle nye fejl blive markeret som release (0.1.0), hvilket betyder, at de vil blive knyttet til den rette kodeversion.
Bemærkninger:
- Vi har gennemgået en simpel måde at bruge udgivelser på
- Sentry giver mulighed for at anvende mere , som er tæt knyttet til GitHub. Denne funktion muliggør overvågning af fejl før bestemte handlinger udføres.
P.S. Den anden del er længere, så den vil blive i et separat indlæg.
P.S. Telegram chat Sentry
P.S. Jeg glemte at nævne, at dette er en oversættelse af indlægget
Kilde: habr.com
