Service Sentry giver dig mulighed for at fjernovervåge fejl i frontend-applikationer skrevet ind JavaScript.
Forsøger at løse problemer i front-end applikationer på JavaScript kan være tricky, fordi de stammer fra brugerens browser, som du ofte ikke har adgang til. Imidlertid, Sentry gør det muligt at fjernovervåge fejl.
Du kan downloade de løsninger, der er diskuteret i denne artikel.
Hvad er nødvendigt
Hvis du vil bruge disse eksempler, skal du bruge:
- : Et funktionsrigt 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 (du kan optage op til 10 fejl om måneden gratis) eller en installeret lokal Sentry -
Installation på din server
For at installere Sentry On-Premise på din server kan du gå på 2 måder
-
Byg rpm og installer dem -
-
Brug det officielle installationsprogram:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standard brug
For at komme i gang skal du tilføje en ny fra tjenestens websted Sentry-projekt for ansøgningen. Når du har valgt det ønskede sprog, modtager du den tilhørende dokumentation. I vores tilfælde valgte vi JavaScript.
Det første eksempel er standard JavaScript. Der er to knapper her: "Hej" (Hej) og "Fejl" (Fejl).
Når du har klikket på knappen "Hej", genstarter skærmen og blokeringen prøv vil opdage og fange fejlen. Efter fejlen er "fanget", sendes fejlrapporten manuelt til tjenesten Sentry.
"Fejl"-knappen giver dig mulighed for nemt at opdage en fejl.
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>Bemærkninger:
- Sentry installeres fra et CDN og eksponeres som en global variabel
- Lidt tidligere lancerede vi Sentry i vores JavaScript
For at teste dette eksempel kan vi bruge en statisk webserverplatform node.js: http server. Gå til den mappe, hvor filen er gemt index.html, og indtast (indstilling med deaktiverer caching) følgende linje for at åbne adressen i browseren .
Hvordan fangede fejl vises
Klik først på knappen "Hej".
Vi fangede en fejl, så den dukker ikke op i opkaldsstakken og overvåges derfor ikke i konsollen. Men da vi sender til Sentry rapporter en fejl manuelt, vil vi se en besked om det på din konto.
Bemærkninger:
- Vi kan spore hvilken linje (24) der indeholder fejlen
- Derudover viser brødkrummesporet de browserhandlinger, der førte til fejlen.
Hvordan ufangede fejl vises
Ved at klikke på knappen "Fejl".
Fejlen bobler op i opkaldsstakken og dermed vises en fejlmeddelelse på konsollen. Herefter overvåger Sentry automatisk fejlen uden yderligere handlinger.
Bemærkninger:
- Vi kan se i hvilken linje (30) fejlen er tabt
- Der er ingen brødkrummespor (jeg forstår ikke helt hvorfor)
Sådan sikrer du projektsikkerhed
Du har måske bemærket den måde, vi kontrollerer, hvilke sider der kan rapportere fejl til vores projekt Sentry; med hjælp DSN optegnelser. Problemet er, at inputtet kan ses af alle, der ser kildekoden på din side.
For at undgå dette skal vi begrænse antallet af domæner, der kan indsende fejlrapporter til vores projekt. I dette eksempel brugte vi localhost (lokal vært). Denne mulighed er konfigureret på fanen Indstillinger Sentry-projekt, Sentry-projektindstilling.
Udgivelser
Hvis du tænker på, hvordan du bruger Sentry i forskellige varianter af vores applikation, så har vi brug for en form for mekanisme, der markerer fejl med et versionsnummer.
Vi ønsker jo ikke, at den fejl, vi rettede, dukker op igen, og vi tror, at det, vi rettede, ikke virkede. Det kan også være, at brugeren har startet en ældre, cachelagret version af applikationen.
For at løse problemet skal du indtaste identifikatoren frigivelse (versioner) ved opstart Sentry.
vanilje/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Herefter vil alle nye fejl blive markeret som frigivelse (0.1.0), det vil sige, at de vil være bundet til den korrekte version af koden.
Bemærkninger:
- Vi har fundet ud af en enkel måde at bruge udgivelser på
- Sentry giver dig mulighed for at bruge mere , som er nært beslægtet med GitHub. Denne funktion gør det muligt at spore fejl, før visse handlinger udføres.
PS Anden del er længere, så den kommer i et separat indlæg.
PS Telegram chat Sentry
PS Jeg glemte at angive, at dette er en oversættelse af indlægget
Kilde: www.habr.com