Työkalut Vartiomies mahdollistaa etävalvonnan sisäänkirjoitetuissa käyttöliittymäsovelluksissa JavaScript.
Yritetään korjata käyttöliittymäsovellusten ongelmia JavaScript voivat olla hankalia, koska ne ovat peräisin käyttäjän selaimesta, johon sinulla ei useinkaan ole pääsyä. Kuitenkin, Vartiomies mahdollistaa vikojen etävalvonnan.
Voit ladata tässä artikkelissa käsitellyt ratkaisut.
Mikä on välttämätöntä
Jos haluat käyttää näitä esimerkkejä, tarvitset:
- : Monipuolinen kehitystyökalu, joka ei ole osa sovellusta. Latasimme uusimman LTS-version (8.12.0)
- Vartiomies: Joko tili Sentry-palvelussa (voit tallentaa jopa 10 tuhatta bugia kuukaudessa ilmaiseksi) tai asennettu paikallinen Sentry -
Asennus palvelimellesi
Voit asentaa Sentry On-Premisen palvelimellesi kahdella tavalla
-
Rakenna rpm ja asenna ne -
-
Käytä virallista asennusohjelmaa:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Normaali käyttö
Aloita lisäämällä uusi palvelun verkkosivustolta Vartiomies- hakemuksen projekti. Kun olet valinnut haluamasi kielen, saat vastaavat asiakirjat. Meidän tapauksessamme valitsimme JavaScript.
Ensimmäinen esimerkki on vakio JavaScript. Tässä on kaksi painiketta: "Hei" (Hei) ja "Virhe" (Virhe).
Kun olet napsauttanut painiketta "Hei", näyttö käynnistyy uudelleen ja estetään yrittää havaitsee ja saa kiinni vian. Kun vika on "kiinnitty", virheraportti lähetetään manuaalisesti palveluun Vartiomies.
"Error"-painikkeella voit helposti havaita vian.
vanilja/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>Huomautuksia:
- Sentry asennetaan CDN:stä ja esitetään globaalina muuttujana
- Hieman aikaisemmin julkaisimme Sentryn JavaScriptissämme
Tämän esimerkin testaamiseen voimme käyttää staattista verkkopalvelinalustaa Node.js: http-palvelin. Siirry kansioon, johon tiedosto on tallennettu index.html, ja kirjoita (vaihtoehto, jossa välimuistin tallentaminen ei ole käytössä) seuraava rivi avataksesi osoitteen selaimessa .
Kuinka pyydetyt viat näytetään
Napsauta ensin painiketta "Hei".
Havaitsimme virheen, joten se ei ponnahdu puhelupinoon, eikä sitä siksi valvota konsolissa. Kuitenkin, koska lähetämme Vartiomies ilmoita virheestä manuaalisesti, näemme siitä viestin tililläsi.
Huomautuksia:
- Voimme jäljittää, mikä rivi (24) sisältää virheen
- Lisäksi navigointipolku näyttää selaimen toimet, jotka johtivat virheeseen.
Kuinka havaitsemattomat viat näytetään
Napsauttamalla painiketta "Virhe".
Virhe kuplittaa puhelupinoa ja siten virheilmoitus näytetään konsolissa. Tämän jälkeen Sentry tarkkailee vikaa automaattisesti ilman lisätoimenpiteitä.
Huomautuksia:
- Näemme, millä rivillä (30) vika on kadonnut
- Ei ole leivänmurupolkua (en oikein ymmärrä miksi)
Kuinka varmistaa projektin turvallisuus
Olet ehkä huomannut tavan, jolla hallitsemme, mitkä sivut voivat raportoida virheistä projektiimme Vartiomies; avulla DSN levyjä. Ongelmana on, että syötteen voi nähdä kuka tahansa, joka katselee sivusi lähdekoodia.
Tämän välttämiseksi meidän on rajoitettava niiden verkkotunnusten määrää, jotka voivat lähettää virheraportteja projektiimme. Tässä esimerkissä käytimme localhost (paikallinen isäntä). Tämä vaihtoehto on määritetty Asetukset-välilehdessä Vartiomies-projekti, Sentry-projektin asetukset.
Julkaisut
Jos mietit kuinka käyttää Vartiomies sovelluksemme eri muunnelmissa, tarvitsemme jonkinlaisen mekanismin, joka merkitsee virheet versionumerolla.
Loppujen lopuksi emme halua korjaamamme virheen ilmestyvän uudelleen, ja uskomme, että korjasimme ei toiminut. Saattaa myös olla, että käyttäjä käynnisti sovelluksesta vanhemman välimuistiversion.
Ongelman ratkaisemiseksi sinun on syötettävä tunniste julkaisu (versiot) käynnistyksen yhteydessä Vartiomies.
vanilja/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Tämän jälkeen kaikki uudet virheet merkitään vapauttaa (0.1.0), eli ne sidotaan oikeaan koodiversioon.
Huomautuksia:
- Olemme keksineet yksinkertaisen tavan käyttää julkaisuja
- Sentry antaa sinun käyttää enemmän , joka liittyy läheisesti GitHub. Tämä toiminto mahdollistaa virheiden jäljittämisen ennen tiettyjen toimintojen suorittamista.
PS Toinen osa on pidempi, joten se julkaistaan erillisessä postauksessa.
PS Telegram-chat Sentry
PS Unohdin ilmoittaa, että tämä on käännös viestistä
Lähde: will.com