sirvizziu U centru permette di monitorà remotamente i bug in l'applicazioni front-end scritte in JavaScript.
Pruvate di risolve i prublemi in l'applicazioni front-end JavaScript pò esse difficiule perchè sò urigginati in u navigatore di l'utilizatori, chì spessu ùn avete micca accessu. Tuttavia, U centru permette di monitorà remotamente i bug.
Pudete scaricà i suluzioni discututi in stu articulu.
Ciò chì hè necessariu
Se vulete usà questi esempi, avete bisognu:
- : Un strumentu di sviluppu riccu di funziunalità chì ùn hè micca parte di l'applicazione. Avemu scaricatu l'ultima versione LTS (8.12.0)
- U centru: O un Contu in u serviziu Sentry (pudete registrà finu à 10 mila bug à u mese gratuitamente) o un Sentry locale installatu -
Installazione nantu à u vostru servitore
Per installà Sentry On-Premise in u vostru servitore pudete andà in 2 manere
-
Custruite rpm è installate -
-
Aduprate l'installatore ufficiale:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Usu standard
Per cumincià, aghjunghje un novu da u situ web di serviziu U centru- prughjettu per l'applicazione. Dopu avè sceltu a lingua desiderata, riceverete a documentazione currispundente. In u nostru casu avemu sceltu JavaScript.
U primu esempiu hè standard JavaScript. Ci sò dui buttoni quì: "Bonghjornu" (Salutu) è "Errore" (Errore).
Dopu à cliccà u buttone "Bonghjornu", u screnu riavviarà è u bloccu pruvà detectarà è catturà u bug. Dopu chì u bug hè "catturatu", u rapportu d'errore hè mandatu manualmente à u serviziu U centru.
U buttone "Errore" permette di detect facilmente un bug.
vaniglia/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>Noti:
- Sentry hè stallatu da una CDN è esposta cum'è una variabile globale
- Un pocu prima avemu lanciatu Sentry in u nostru JavaScript
Per pruvà stu esempiu, pudemu usà una piattaforma di servitore web staticu Node.js: servitore http. Andà à u cartulare induve u schedariu hè cullucatu index.html, è entre (opzione cù disattiva a cache) a seguente linea per apre l'indirizzu in u navigatore .
Cumu i bug catturati sò visualizati
Prima cliccate u buttone "Bonghjornu".
Avemu chjappu un bug, perchè ùn hà micca pop up a pila di chjama, è per quessa ùn hè micca monitoratu in a cunsola. Tuttavia, postu chì avemu mandatu à U centru segnalate un bug manualmente, vedemu un missaghju nantu à questu in u vostru contu.
Noti:
- Pudemu traccia quale linea (24) cuntene u bug
- Inoltre, a traccia di breadcrumb mostra l'azzioni di u navigatore chì hà purtatu à l'errore.
Cume i bugs uncaught sò visualizati
Cliccate u buttone "Errore".
U bug bubbles up the call stack è cusì un missaghju d'errore hè visualizatu nantu à a cunsola. Dopu questu, Sentry monitoreghja automaticamente u bug, senza alcuna azzione supplementaria.
Noti:
- Pudemu vede in quale linea (30) u bug hè persu
- Ùn ci hè micca traccia di pane (ùn capiscu micca bè perchè)
Cumu assicurà a sicurità di u prugettu
Puderete avè nutatu a manera di cuntrullà quali pagine ponu signalà errori à u nostru prughjettu U centru; cun aiutu dsn records. U prublema hè chì l'input pò esse vistu da qualchissia chì vede u codice fonte di a vostra pagina.
Per evitari, avemu bisognu di limità u nùmeru di duminii chì ponu mandà rapporti d'errore à u nostru prughjettu. In questu esempiu avemu usatu localhost (host locale). Questa opzione hè cunfigurata in a tabulazione di paràmetri U centru- prughjettu, Sentry Project Setting.
Libera
Se pensate à cumu utilizà U centru in diverse variazioni di a nostra applicazione, allora avemu bisognu di qualchì tipu di mecanismu chì marcarà l'errore cù un numeru di versione.
Dopu tuttu, ùn vulemu micca chì l'errore chì avemu riparatu torna torna, è pensemu chì ciò chì avemu riparatu ùn hà micca travagliatu. Pò esse ancu chì l'utilizatore hà lanciatu una versione più vechja di l'applicazione in cache.
Per risolve u prublema, avete bisognu di entre in l'identificatore liberazione (versioni) à l'iniziu U centru.
vaniglia/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Dopu questu, tutti i novi errori seranu marcati cum'è liberazione (0.1.0), vale à dì, seranu ligati à a versione curretta di u codice.
Noti:
- Avemu scupertu un modu simplice per utilizà e versioni
- Sentry permette di utilizà più , chì hè strettamente ligata à GitHub. Sta funzione permette di seguità i bug prima di fà certe operazioni.
PS A seconda parte hè più longa, cusì serà in un postu separatu.
PS Telegram chat Sentry
PS Aghju scurdatu di indicà chì questu hè una traduzzione di u post
Source: www.habr.com