қызмет көрсету Күзетші жазылған фронтальды қолданбалардағы қателерді қашықтан бақылауға мүмкіндік береді JavaScript.
Функционалды қолданбалардағы ақауларды түзету әрекеті JavaScript қиын болуы мүмкін, себебі олар пайдаланушының браузерінде пайда болады, оған сіз жиі кіре алмайсыз. Дегенмен, Күзетші қателерді қашықтан бақылауға мүмкіндік береді.
Осы мақалада талқыланған шешімдерді жүктеп алуға болады.
Не қажет
Осы мысалдарды пайдаланғыңыз келсе, сізге қажет:
- : Қолданбаның бөлігі болып табылмайтын мүмкіндіктерге бай әзірлеу құралы. Біз соңғы LTS нұсқасын жүктеп алдық (8.12.0)
- Күзетші: Sentry қызметіндегі тіркелгі (сіз айына 10 мың қатеге дейін тегін жаза аласыз) немесе орнатылған жергілікті Sentry -
Серверде орнату
Серверге Sentry On-Premise орнату үшін екі жолмен баруға болады
-
Айналым/мин құрастырыңыз және оларды орнатыңыз -
-
Ресми орнатушыны пайдаланыңыз:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Стандартты пайдалану
Бастау үшін қызмет веб-сайтынан жаңасын қосыңыз Күзетші- қолданбаға арналған жоба. Қажетті тілді таңдағаннан кейін сіз тиісті құжаттаманы аласыз. Біздің жағдайда біз таңдадық JavaScript.
Бірінші мысал стандартты JavaScript. Мұнда екі түйме бар: «Сәлеметсіз бе» (Сәлеметсіз бе) және «Қате» (Қате).
Түймені басқаннан кейін «Сәлеметсіз бе», экран қайта жүктеледі және блокталады тырысу қатені анықтайды және ұстайды. Қате «ұсталғаннан» кейін қате туралы есеп қызметке қолмен жіберіледі Күзетші.
«Қате» түймесі қатені оңай анықтауға мүмкіндік береді.
ваниль/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>Ескерту:
- Sentry CDN-ден орнатылады және жаһандық айнымалы ретінде көрсетіледі
- Біраз бұрын біз JavaScript-те Sentry-ді іске қостық
Бұл мысалды тексеру үшін біз статикалық веб-сервер платформасын пайдалана аламыз Node.js: http сервері. Файл сақталған қалтаға өтіңіз index.html, және браузерде мекенжайды ашу үшін келесі жолды енгізіңіз (кэштеуді өшіретін опция). .
Қателер қалай ұсталғаны көрсетіледі
Алдымен түймені басыңыз «Сәлеметсіз бе».
Біз қатені анықтадық, сондықтан ол қоңыраулар стегін ашпайды, сондықтан консольде бақыланбайды. Алайда, біз жібергеннен бері Күзетші қате туралы қолмен хабарлаңыз, ол туралы сіздің тіркелгіңізде хабарды көреміз.
Ескерту:
- Қай жолда (24) қате бар екенін анықтай аламыз
- Бұған қоса, нан үгіндісі ізі қатеге әкелген шолғыш әрекеттерін көрсетеді.
Ұсталмаған қателер қалай көрсетіледі
Түймені басу «Қате».
Қате қоңыраулар стегін жоғарылатады және осылайша консольде қате туралы хабар көрсетіледі. Осыдан кейін Sentry ешқандай қосымша әрекеттерсіз қатені автоматты түрде бақылайды.
Ескерту:
- Қай жолда (30) қате жоғалғанын көреміз
- Ешқандай нан үгіндісі жоқ (мен неге екенін түсінбеймін)
Жоба қауіпсіздігін қалай қамтамасыз ету керек
Сіз біздің жобаға қателер туралы хабарлай алатын беттерді басқаратын жолды байқаған боларсыз Күзетші; көмегімен dsn жазбалар. Мәселе мынада, енгізуді сіздің бетіңіздің бастапқы кодын қарайтын кез келген адам көре алады.
Бұған жол бермеу үшін жобамызға қате туралы есептерді жібере алатын домендердің санын шектеу керек. Бұл мысалда біз қолдандық жергілікті (жергілікті хост). Бұл опция параметрлер қойындысында конфигурацияланған Күзетші- жоба, Sentry жобасының параметрі.
Шығарылымдар
Қалай пайдалану керектігін ойласаңыз Күзетші қолданбамыздың әртүрлі нұсқаларында қателерді нұсқа нөмірімен белгілейтін қандай да бір механизм қажет.
Ақыр соңында, біз түзетілген қатенің қайта пайда болуын қаламаймыз және біз жөндеген нәрсе жұмыс істемеді деп ойлаймыз. Сондай-ақ, пайдаланушы қолданбаның ескі, кэштелген нұсқасын іске қосқан болуы мүмкін.
Мәселені шешу үшін идентификаторды енгізу керек босату (нұсқалары) іске қосу кезінде Күзетші.
ваниль/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Осыдан кейін барлық жаңа қателер келесідей белгіленеді шығару (0.1.0), яғни олар кодтың дұрыс нұсқасына байланыстырылады.
Ескерту:
- Біз шығарылымдарды пайдаланудың қарапайым әдісін анықтадық
- Sentry көбірек пайдалануға мүмкіндік береді , ол тығыз байланысты GitHub. Бұл функция белгілі бір әрекеттерді орындамас бұрын қателерді бақылауға мүмкіндік береді.
PS Екінші бөлім ұзағырақ, сондықтан ол бөлек постта болады.
PS Telegram чаты Sentry
PS Бұл посттың аудармасы екенін көрсетуді ұмытып кетіппін
Ақпарат көзі: www.habr.com