Dienst Schildwacht Hiermee kunt u op afstand bugs monitoren in front-end-applicaties die zijn geschreven JavaScript.
Proberen problemen in front-end-applicaties op te lossen JavaScript kunnen lastig zijn omdat ze afkomstig zijn uit de browser van de gebruiker, waartoe u vaak geen toegang heeft. Echter, Schildwacht maakt het mogelijk om bugs op afstand te monitoren.
U kunt de oplossingen downloaden die in dit artikel worden besproken.
Wat is er nodig?
Als u deze voorbeelden wilt gebruiken, heeft u het volgende nodig:
- : een functierijke ontwikkeltool die geen deel uitmaakt van de applicatie. We hebben de nieuwste LTS-versie (8.12.0) gedownload
- Schildwacht: Ofwel een account in de Sentry-service (u kunt gratis maximaal 10 bugs per maand registreren) of een geïnstalleerde lokale Sentry -
Installatie op uw server
Om Sentry On-Premise op uw server te installeren kunt u op 2 manieren te werk gaan
-
Bouw rpm en installeer ze -
-
Gebruik het officiële installatieprogramma:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standaard gebruik
Voeg om te beginnen een nieuwe toe vanaf de servicewebsite Schildwacht-project voor de toepassing. Nadat u de gewenste taal heeft geselecteerd, ontvangt u de bijbehorende documentatie. In ons geval hebben we gekozen JavaScript.
Het eerste voorbeeld is standaard JavaScript. Er zijn hier twee knoppen: "Hallo" (Hallo en "Fout" (Fout).
Nadat u op de knop hebt geklikt "Hallo", het scherm zal opnieuw opstarten en het blok proberen zal de bug detecteren en opvangen. Nadat de bug is ‘opgevangen’, wordt het foutenrapport handmatig naar de service verzonden Schildwacht.
Met de knop “Error” kunt u eenvoudig een bug detecteren.
vanille/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>Opmerkingen:
- Sentry wordt geïnstalleerd vanaf een CDN en weergegeven als een globale variabele
- Iets eerder lanceerden we Sentry in ons JavaScript
Om dit voorbeeld te testen, kunnen we een statisch webserverplatform gebruiken Node.js: http-server. Ga naar de map waarin het bestand is opgeslagen index.htmlen voer (optie waarbij caching wordt uitgeschakeld) de volgende regel in om het adres in de browser te openen .
Hoe gevangen bugs worden weergegeven
Klik eerst op de knop "Hallo".
We hebben een bug ontdekt, waardoor deze niet in de call-stack verschijnt en daarom niet in de console wordt gemonitord. Echter, aangezien we sturen naar Schildwacht meld een bug handmatig, we zien er een bericht over in uw account.
Opmerkingen:
- We kunnen traceren welke regel (24) de bug bevat
- Bovendien geeft het broodkruimelspoor de browseracties weer die tot de fout hebben geleid.
Hoe niet-opgevangen bugs worden weergegeven
Klikken op de knop "Fout".
De bug borrelt op in de call-stack en er wordt dus een foutmelding weergegeven op de console. Hierna monitort Sentry de bug automatisch, zonder aanvullende acties.
Opmerkingen:
- We kunnen zien in welke regel (30) de bug verloren gaat
- Er is geen kruimelspoor (ik begrijp niet helemaal waarom)
Hoe u projectveiligheid kunt garanderen
Het is je misschien opgevallen hoe we bepalen welke pagina's fouten aan ons project kunnen melden Schildwacht; met hulp dsn records. Het probleem is dat de invoer zichtbaar is voor iedereen die de broncode van uw pagina bekijkt.
Om dit te voorkomen, moeten we het aantal domeinen beperken dat foutrapporten kan indienen bij ons project. In dit voorbeeld hebben we gebruikt localhost (lokale gastheer). Deze optie wordt geconfigureerd op het tabblad Instellingen Schildwacht-project, Sentry-projectinstelling.
Releases
Als je nadenkt over hoe je het moet gebruiken Schildwacht in verschillende varianten van onze applicatie, dan hebben we een soort mechanisme nodig dat fouten markeert met een versienummer.
We willen tenslotte niet dat de bug die we hebben opgelost opnieuw opduikt, en we denken dat wat we hebben opgelost niet heeft gewerkt. Het kan ook zijn dat de gebruiker een oudere, in de cache opgeslagen versie van de applicatie heeft gestart.
Om het probleem op te lossen, moet u de identificatie invoeren vrijlating (versies) bij het opstarten Schildwacht.
vanille/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Hierna worden alle nieuwe fouten gemarkeerd als vrijgeven (0.1.0), dat wil zeggen dat ze aan de juiste versie van de code worden gekoppeld.
Opmerkingen:
- We hebben een eenvoudige manier bedacht om releases te gebruiken
- Met Sentry kunt u meer gebruiken , die nauw verwant is GitHub. Deze functie maakt het mogelijk om bugs op te sporen voordat bepaalde handelingen worden uitgevoerd.
PS Het tweede deel is langer en komt daarom in een aparte post.
PS Telegram-chat Sentry
PS Ik vergat aan te geven dat dit een vertaling van het bericht is
Bron: www.habr.com