Verktøy Sentry lar deg fjernovervåke feil i front-end-applikasjoner skrevet inn Javascript.
Prøver å fikse problemer i front-end-applikasjoner på Javascript kan være vanskelige fordi de kommer fra brukerens nettleser, som du ofte ikke har tilgang til. Derimot, Sentry gjør det mulig å fjernovervåke feil.
Du kan laste ned løsningene som er omtalt i denne artikkelen.
Hva er nødvendig
Hvis du vil bruke disse eksemplene, trenger du:
- : Et funksjonsrikt utviklingsverktøy som ikke er en del av applikasjonen. Vi lastet ned den siste LTS-versjonen (8.12.0)
- Sentry: Enten en konto i Sentry-tjenesten (du kan registrere opptil 10 tusen feil per måned gratis) eller en installert lokal Sentry -
Installasjon på serveren din
For å installere Sentry On-Premise på serveren din kan du gå på 2 måter
-
Bygg rpm og installer dem -
-
Bruk det offisielle installasjonsprogrammet:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standard bruk
For å komme i gang, legg til en ny fra tjenestenettstedet Sentry-prosjekt for søknaden. Etter å ha valgt ønsket språk vil du motta den tilhørende dokumentasjonen. I vårt tilfelle valgte vi Javascript.
Det første eksemplet er standard Javascript. Det er to knapper her: "Hallo" (Hei) og "Feil" (Feil).
Etter at du har klikket på knappen "Hallo", vil skjermen starte på nytt og blokkeringen prøve vil oppdage og fange feilen. Etter at feilen er "fanget", sendes feilrapporten manuelt til tjenesten Sentry.
"Feil"-knappen lar deg enkelt oppdage en feil.
vanilje/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>Merknader:
- Sentry er installert fra et CDN og eksponert som en global variabel
- Litt tidligere lanserte vi Sentry i JavaScript
For å teste dette eksemplet kan vi bruke en statisk webserverplattform node.js: http-server. Gå til mappen der filen er lagret index.html, og skriv inn (alternativet med deaktiverer caching) følgende linje for å åpne adressen i nettleseren .
Hvordan fangede feil vises
Klikk først på knappen "Hallo".
Vi fanget en feil, så den vil ikke dukke opp anropsstakken, og blir derfor ikke overvåket i konsollen. Men siden vi sender til Sentry rapporter en feil manuelt, vil vi se en melding om det på kontoen din.
Merknader:
- Vi kan spore hvilken linje (24) som inneholder feilen
- I tillegg viser brødsmulesporet nettleserhandlingene som førte til feilen.
Hvordan ufangede feil vises
Klikk på knappen "Feil".
Feilen bobler opp anropsstakken og dermed vises en feilmelding på konsollen. Etter dette overvåker Sentry automatisk feilen, uten ytterligere handlinger.
Merknader:
- Vi kan se i hvilken linje (30) feilen er tapt
- Det er ingen brødsmulesti (jeg forstår ikke helt hvorfor)
Hvordan sikre prosjektsikkerhet
Du har kanskje lagt merke til måten vi kontrollerer hvilke sider som kan rapportere feil til prosjektet vårt Sentry; med hjelp DSN poster. Problemet er at inndataene kan sees av alle som ser på kildekoden til siden din.
For å unngå dette må vi begrense antall domener som kan sende inn feilrapporter til prosjektet vårt. I dette eksemplet brukte vi localhost (lokal vert). Dette alternativet er konfigurert i innstillingsfanen Sentry-prosjekt, Sentry-prosjektinnstilling.
Utgivelser
Hvis du tenker på hvordan du bruker Sentry i forskjellige varianter av applikasjonen vår, trenger vi en slags mekanisme som markerer feil med et versjonsnummer.
Tross alt vil vi ikke at feilen vi fikset skal dukke opp igjen, og vi tror at det vi fikset ikke fungerte. Det kan også være at brukeren har lansert en eldre, bufret versjon av applikasjonen.
For å løse problemet må du angi identifikatoren utgivelse (versjoner) ved oppstart Sentry.
vanilje/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Etter dette vil alle nye feil bli merket som utgivelse (0.1.0), det vil si at de vil være knyttet til riktig versjon av koden.
Merknader:
- Vi har funnet ut en enkel måte å bruke utgivelser på
- Sentry lar deg bruke mer , som er nært knyttet til GitHub. Denne funksjonen gjør det mulig å spore feil før du utfører visse operasjoner.
PS Den andre delen er lengre, så den kommer i et eget innlegg.
PS Telegram chat Sentry
PS Jeg glemte å angi at dette er en oversettelse av innlegget
Kilde: www.habr.com