Teenus Tunnimees võimaldab teil kaugjuhtimisega jälgida sisse kirjutatud esiotsa rakenduste vigu JavaScript.
Püüab lahendada sisselülitatud esiotsa rakenduste probleeme JavaScript võivad olla keerulised, kuna need pärinevad kasutaja brauserist, millele teil sageli juurdepääsu pole. Kuid, Tunnimees võimaldab kaugjälgida vigu.
Saate alla laadida selles artiklis käsitletud lahendused.
Mis on vajalik
Kui soovite neid näiteid kasutada, vajate:
- : funktsioonirikas arendustööriist, mis ei ole rakenduse osa. Laadisime alla uusima LTS-i versiooni (8.12.0)
- Tunnimees: kas konto teenuses Sentry (saate salvestada kuni 10 tuhat viga kuus) või installitud kohalik Sentry -
Installimine teie serverisse
Sentry On-Premise installimiseks oma serverisse saate teha kahte võimalust
-
Ehitage pööret minutis ja installige need -
-
Kasutage ametlikku installijat:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Standardkasutus
Alustamiseks lisage teenuse veebisaidilt uus Tunnimees-taotluse projekt. Pärast soovitud keele valimist saate vastava dokumentatsiooni. Meie puhul valisime JavaScript.
Esimene näide on standardne JavaScript. Siin on kaks nuppu: "Tere" (Tere) ja "Viga" (Viga).
Pärast nupu klõpsamist "Tere", ekraan taaskäivitub ja blokeeritakse püüdma tuvastab ja püüab vea. Pärast vea tabamist saadetakse veaaruanne käsitsi teenindusele Tunnimees.
Nupp "Error" võimaldab teil vea hõlpsalt tuvastada.
vanilje/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>Märkused:
- Sentry installitakse CDN-ist ja kuvatakse globaalse muutujana
- Veidi varem käivitasime Sentry oma JavaScriptis
Selle näite testimiseks saame kasutada staatilist veebiserveri platvormi Node.js: http server. Minge kausta, kuhu fail on salvestatud index.htmlja sisestage (valik koos vahemällu salvestamise keelamisega) brauseris aadressi avamiseks järgmine rida .
Kuidas püütud vead kuvatakse
Kõigepealt klõpsake nuppu "Tere".
Leidsime vea, mistõttu see ei ilmu kõnepinu ja seetõttu ei jälgita seda konsoolis. Kuna aga saadame Tunnimees teatage veast käsitsi, näeme teie kontol selle kohta teadet.
Märkused:
- Saame jälgida, milline rida (24) sisaldab viga
- Lisaks kuvatakse tõrkeni viinud brauseri toimingud.
Kuidas tabamata vigu kuvatakse
Klõpsates nuppu "Viga".
Viga mullitab kõnepinu ja seega kuvatakse konsoolil veateade. Pärast seda jälgib Sentry viga automaatselt ilma lisatoiminguteta.
Märkused:
- Näeme, millisel real (30) viga on kadunud
- Riivsaia rada pole (ma ei saa täpselt aru, miks)
Kuidas tagada projekti turvalisus
Võib-olla olete märganud, kuidas me kontrollime, millised lehed võivad meie projektile vigadest teatada Tunnimees; abiga dsn rekordid. Probleem on selles, et sisendit näevad kõik, kes teie lehe lähtekoodi vaatavad.
Selle vältimiseks peame piirama nende domeenide arvu, mis saavad meie projektile veateateid esitada. Selles näites kasutasime localhost (kohalik host). See suvand on konfigureeritud seadete vahekaardil Tunnimees- projekt, Sentry projekti seadistus.
Väljaanded
Kui mõelda, kuidas kasutada Tunnimees meie rakenduse erinevates variantides, siis vajame mingit mehhanismi, mis märgib vead versiooninumbriga.
Lõppude lõpuks ei taha me, et parandatud viga uuesti ilmuks, ja arvame, et see, mille parandasime, ei töötanud. Samuti võib juhtuda, et kasutaja käivitas rakenduse vanema, vahemällu salvestatud versiooni.
Probleemi lahendamiseks peate sisestama identifikaatori vabastama (versioonid) käivitamisel Tunnimees.
vanilje/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Pärast seda märgitakse kõik uued vead kui väljalase (0.1.0), see tähendab, et need seotakse koodi õige versiooniga.
Märkused:
- Oleme välja mõelnud lihtsa viisi väljalasete kasutamiseks
- Sentry võimaldab kasutada rohkem , mis on tihedalt seotud GitHub. See funktsioon võimaldab enne teatud toimingute tegemist vigu jälgida.
PS Teine osa on pikem, seega tuleb see eraldi postituses.
PS Telegrami vestlus Sentry
PS Unustasin märkida, et see on postituse tõlge
Allikas: www.habr.com