Serviciu Pază vă permite să monitorizați de la distanță erorile din aplicațiile front-end scrise în JavaScript.
Încercarea de a remedia problemele din aplicațiile front-end activată JavaScript pot fi dificile, deoarece își au originea în browserul utilizatorului, la care adesea nu aveți acces. In orice caz, Pază face posibilă monitorizarea de la distanță a erorilor.
Puteți descărca soluțiile discutate în acest articol.
Ceea ce este nevoie
Dacă doriți să folosiți aceste exemple, veți avea nevoie de:
- : Un instrument de dezvoltare bogat în funcții care nu face parte din aplicație. Am descărcat cea mai recentă versiune LTS (8.12.0)
- Pază: fie un cont în serviciul Sentry (puteți înregistra până la 10 mii de bug-uri pe lună gratuit), fie un Sentry local instalat -
Instalare pe serverul dvs
Pentru a instala Sentry On-Premise pe serverul dvs. puteți merge în 2 moduri
-
Construiește rpm și instalează-le -
-
Utilizați programul de instalare oficial:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Utilizare standard
Pentru a începe, adăugați unul nou de pe site-ul web al serviciului Pază-proiect pentru aplicație. După selectarea limbii dorite, veți primi documentația corespunzătoare. În cazul nostru am ales JavaScript.
Primul exemplu este standard JavaScript. Există două butoane aici: "Buna ziua" (Buna si "Eroare" (Eroare).
După ce faceți clic pe butonul "Buna ziua", ecranul se va reporni și se va bloca încerca va detecta și prinde bug-ul. După ce eroarea este „prinsă”, raportul de eroare este trimis manual către serviciu Pază.
Butonul „Eroare” vă permite să detectați cu ușurință o eroare.
vanilie/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>Note:
- Sentry este instalat dintr-un CDN și expus ca o variabilă globală
- Puțin mai devreme, am lansat Sentry în JavaScript
Pentru a testa acest exemplu, putem folosi o platformă de server web statică Node.js: server http. Accesați folderul în care este stocat fișierul index.html, și introduceți (opțiune cu dezactivează memorarea în cache) următoarea linie pentru a deschide adresa în browser .
Cum sunt afișate bug-urile prinse
Mai întâi faceți clic pe butonul "Buna ziua".
Am prins o eroare, așa că nu va apărea în stiva de apeluri și, prin urmare, nu este monitorizat în consolă. Cu toate acestea, din moment ce trimitem către Pază raportați o eroare manual, vom vedea un mesaj despre aceasta în contul dvs.
Note:
- Putem urmări ce linie (24) conține bug-ul
- În plus, traseul breadcrumb afișează acțiunile browserului care au condus la eroare.
Cum sunt afișate erorile neprinse
Făcând clic pe butonul "Eroare".
Bug-ul urcă în stiva de apeluri și astfel este afișat un mesaj de eroare pe consolă. După aceasta, Sentry monitorizează automat bug-ul, fără acțiuni suplimentare.
Note:
- Putem vedea în ce linie (30) bug-ul este pierdut
- Nu există un traseu pesmet (nu prea înțeleg de ce)
Cum se asigură securitatea proiectului
Este posibil să fi observat modul în care controlăm ce pagini pot raporta erori în proiectul nostru Pază; cu ajutor DSN înregistrări. Problema este că intrarea poate fi văzută de oricine care vede codul sursă al paginii dvs.
Pentru a evita acest lucru, trebuie să limităm numărul de domenii care pot trimite rapoarte de eroare la proiectul nostru. În acest exemplu am folosit localhost (gazdă locală). Această opțiune este configurată în fila de setări Pază-proiect, Setarea Proiectului Sentry.
Lansări
Dacă te gândești cum să folosești Pază în diferite variante ale aplicației noastre, atunci avem nevoie de un fel de mecanism care va marca erorile cu un număr de versiune.
La urma urmei, nu vrem ca eroarea pe care am remediat-o să apară din nou și credem că ceea ce am remediat nu a funcționat. De asemenea, este posibil ca utilizatorul să lanseze o versiune mai veche, stocată în cache a aplicației.
Pentru a rezolva problema, trebuie să introduceți identificatorul eliberare (versiuni) la pornire Pază.
vanilie/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...După aceasta, toate erorile noi vor fi marcate ca eliberare (0.1.0), adică vor fi legate de versiunea corectă a codului.
Note:
- Am descoperit o modalitate simplă de a folosi versiunile
- Sentry vă permite să folosiți mai mult , care este strâns legat de GitHub. Această funcție face posibilă urmărirea erorilor înainte de a efectua anumite operațiuni.
PS A doua parte este mai lungă, așa că va fi într-o postare separată.
PS Telegram chat Sentry
PS Am uitat să spun că aceasta este o traducere a postării
Sursa: www.habr.com