Dienst Sentry maakt het mogelijk om bugs op afstand te monitoren in frontend-applicaties geschreven in JavaScript.
Het oplossen van problemen in frontend-applicaties op JavaScript kan een lastige opgave zijn, omdat ze zich in de browser van de gebruiker voordoen, waartoe u vaak geen toegang heeft. Echter, Sentry biedt de mogelijkheid om bugs op afstand te monitoren.
kun je de oplossingen downloaden die in dit artikel zijn besproken.
Wat is nodig
Als je deze voorbeelden wilt gebruiken, heb je nodig:
- : Een multifunctioneel ontwikkelhulpmiddel dat geen onderdeel is van de applicatie. We hebben de laatste LTS-versie (8.12.0) gedownload.
- Sentry: Of een account bij de Sentry-dienst (je kunt tot 10.000 bugs per maand gratis registreren) of een lokale Sentry-installatie —
Installatie op je server
Om Sentry On-Premise op je server te installeren, zijn er 2 paden
De rpm samenstellen en installeren —
Gebruik de officiële installer:
Installeer docker en docker-compose op de server git clone https://github.com/getsentry/onpremise.git ./install.sh
Standaard gebruik
Om te beginnen, voeg een nieuw Sentry-project voor de applicatie toe vanaf de website van de dienst. Na het kiezen van de vereiste taal ontvang je de bijbehorende documentatie. In ons geval hebben we gekozen voor JavaScript.
Het eerste voorbeeld is standaard JavaScript. Hier zijn twee knoppen: „Hallo” (Hello) en „Fout” (Error).
Nadat je op de knop hebt geklikt, „Hallo”zal het scherm opnieuw laden en zal het blok try de bug detecteren en vastleggen. Nadat de bug 'gevangen' is, wordt het foutbericht handmatig naar de dienst verzonden. Sentry.
De knop „Fout” maakt het eenvoudig om een bug te detecteren.
vanilla / index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanille</title>
</head>
<body>
<button id="hello">Hallo</button>
<button id="error">Fout</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>Aantekeningen:
- Sentry wordt geïnstalleerd vanuit de CDN en verschijnt als een globale variabele.
- Eerder hebben we Sentry gestart in onze JavaScript-code.
Om dit voorbeeld te testen, kunnen we gebruik maken van een statisch webserverplatform, Node.js: http-server.Ga naar de map waar het bestand index.htmlis opgeslagen, en voer (de optie met schakel de caching uit) 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 gevangen, daarom komt deze niet omhoog in de oproepstack en wordt deze niet in de console gemonitord. Echter, aangezien we het Sentry foutrapport handmatig verzenden, zullen we de melding ervan in het account zien.
Aantekeningen:
- We can track which line (24) the bug snuck into.
- Moreover, the navigation chain shows the browser actions that led to the error.
How uncaught bugs are displayed.
Click the button. ‘Error.’
The bug bubbles up the call stack and thus an error message is displayed in the console. After this, Sentry automatically monitors the bug without any additional actions.
Aantekeningen:
- We can see which line (30) the bug got lost in.
- No navigation chain is provided (I don't quite understand why).
How to ensure the security of the project.
You may have noticed how we control the pages that can send error reports to our project. Sentry; using dsn records. The problem is that anyone who views the source code of your page can see the input.
To prevent this, you need to limit the number of domains that can submit error reports to our project. In this example, we used localhost (local host). This option is configured in the settings tab of the Sentry-project, Sentry Project Setting.
Releases
If you think about how to use Sentry in various versions of our application, we need some mechanism that will mark errors with a version number.
We wouldn’t want a bug we fixed to reappear, while thinking that what we fixed didn’t work. It could also happen that the user launched an older, cached version of the application.
To solve the problem, you need to enter the identifier of the release (version) when launching Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...After this, all new errors will be marked as release (0.1.0), meaning they will be linked to the correct version of the code.
Aantekeningen:
- We examined a simple way to use releases.
- Sentry allows for a more , which is closely related to GitHub. This feature allows tracking bugs before certain operations are performed.
P.S. The second part is longer, so it will be in a separate post.
P.S. Telegram chat for Sentry.
P.S. I forgot to mention that this is a translation of a post.
Bron: habr.com
