Serviciu Sentry permite monitorizarea de la distanță a bug-urilor în aplicațiile front-end scrise în JavaScript.
Încercarea de a remedia problemele în aplicațiile front-end pe JavaScript poate fi o provocare, deoarece acestea apar în browserul utilizatorului, la care, adesea, nu aveți acces. Totuși, Sentry oferă posibilitatea de a monitoriza bug-urile de la distanță.
puteți descărca soluțiile discutate în acest articol.
Ce este necesar
Dacă doriți să utilizați aceste exemple, veți avea nevoie de:
- : Un instrument multifuncțional de dezvoltare care nu face parte din aplicație. Noi am descărcat ultima versiune LTS (8.12.0)
- Sentry: Un cont în serviciul Sentry (puteți înregistra gratuit până la 10.000 de bug-uri pe lună) sau un Sentry local instalat —
Instalarea pe serverul dvs.
Pentru a instala Sentry On-Premise pe serverul dvs., puteți urma 2 căi
Să colectați rpm-urile și să le instalați —
Utilizați installerul oficial:
Instalați pe server docker și docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Utilizarea standard
Pentru a începe, adăugați un nou Sentry-proiect pentru aplicație. După selectarea limbajului dorit, veți primi documentația corespunzătoare. În cazul nostru, am ales JavaScript.
Primul exemplu — standardul JavaScript. Aici sunt două butoane: «Hello» (Salut) și «Error» (Eroare).
După ce ați dat clic pe buton «Hello», ecranul se va reîncărca, iar blocul try va detecta și va captura bug-ul. După ce bug-ul este «capturat», raportul de eroare este trimis manual către serviciu Sentry.
Butonul «Error» permite doar descoperirea bug-ului.
vanilla / 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://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>Observații:
- Sentry este instalat din CDN și este afișat ca o variabilă globală
- Cu puțin timp în urmă, am lansat Sentry în JavaScript-ul nostru
Pentru a testa acest exemplu, putem folosi o platformă de server web static Node.js: server HTTP. Accesați folderul unde este stocat fișierul index.html, și introduceți (opțiunea cu dezactivarea cache-ului) următoarea linie pentru a deschide în browser adresa .
Cum sunt afișate bug-urile capturate
În primul rând, dăm clic pe buton «Hello».
Am capturat un bug, așa că acesta nu va urca înapoi în stiva de apeluri, prin urmare nu este monitorizat în consolă. Cu toate acestea, deoarece trimitem Sentry raportul despre bug manual, vom vedea un mesaj despre acesta în contul nostru.
Observații:
- Putem urmări în ce linie (24) s-a strecurat bug-ul
- În plus, lanțul de navigație afișează acțiunile browserului care au dus la eroare.
Cum sunt afișate bug-urile necapturate
Facem clic pe buton „Eroare”.
Buga apare în sus în stiva de apeluri și, astfel, pe consolă apare mesajul de eroare. După aceasta, Sentry monitorizează automat bugul, fără alte acțiuni suplimentare.
Observații:
- Putem vedea în ce linie (30) s-a pierdut bugul
- Nu este prevăzută o lanț de navigare (nu înțeleg exact de ce)
Cum să asigurăm securitatea proiectului
Probabil ați observat cum controlăm paginile care pot trimite rapoarte de erori în proiectul nostru Sentry; prin intermediul dsn înregistrărilor. Problema este că oricine poate vedea intrarea, care vizualizează codul sursă al paginii dvs.
Pentru a evita acest lucru, trebuie limitat numărul de domenii care pot trimite rapoarte de erori în proiectul nostru. În acest exemplu, am folosit localhost (localhost). Această opțiune se configurează în tab-ul de setări Sentry-proiectului, Setarea Proiectului Sentry.
Lansări
Dacă ne gândim la modul în care să folosim Sentry în diferite variante ale aplicației noastre, este necesar un mecanism care să marcheze erorile cu un număr de versiune.
Nu dorim ca bugul pe care l-am corectat să reapară, iar noi să credem că ceea ce am rezolvat nu a funcționat. Este posibil ca utilizatorul să fi lansat o versiune mai veche, memorizată a aplicației.
Pentru a rezolva problema, trebuie să introducem identificatorul lansare (versiunii) la pornire Sentry.
vanilla / index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
release: RELEASE,
});
...După aceasta, toate erorile noi vor fi marcate ca release (0.1.0), adică vor fi legate de versiunea corectă a codului.
Observații:
- Am discutat o modalitate simplă de a folosi lansările
- Sentry permite aplicarea unui mod mai , care este strâns legat de GitHub. Această funcție oferă posibilitatea de a urmări bugurile înainte de a efectua anumite operațiuni.
P.S. A doua parte este mai lungă, prin urmare va fi într-o postare separată.
P.S. Grupul Telegram Sentry
P.S. Am uitat să menționez că acesta este un traducere a postării
Sursa: habr.com
