Υπηρεσίες Φρουρός σας επιτρέπει να παρακολουθείτε εξ αποστάσεως σφάλματα σε εφαρμογές front-end που είναι γραμμένες το JavaScript.
Προσπάθεια επίλυσης προβλημάτων σε εφαρμογές front-end ενεργοποιημένη το JavaScript μπορεί να είναι δύσκολο επειδή προέρχονται από το πρόγραμμα περιήγησης του χρήστη, στο οποίο συχνά δεν έχετε πρόσβαση. Ωστόσο, Φρουρός καθιστά δυνατή την απομακρυσμένη παρακολούθηση σφαλμάτων.
Μπορείτε να κάνετε λήψη των λύσεων που αναφέρονται σε αυτό το άρθρο.
Αυτό που είναι απαραίτητο
Εάν θέλετε να χρησιμοποιήσετε αυτά τα παραδείγματα, θα χρειαστείτε:
- : Ένα εργαλείο ανάπτυξης πλούσιο σε δυνατότητες που δεν αποτελεί μέρος της εφαρμογής. Κατεβάσαμε την πιο πρόσφατη έκδοση LTS (8.12.0)
- Φρουρός: Είτε ένας λογαριασμός στην υπηρεσία Sentry (μπορείτε να καταγράψετε έως και 10 χιλιάδες σφάλματα το μήνα δωρεάν) είτε ένα εγκατεστημένο τοπικό Sentry -
Εγκατάσταση στον διακομιστή σας
Για να εγκαταστήσετε το Sentry On-Premise στον διακομιστή σας, μπορείτε να πάτε με 2 τρόπους
-
Δημιουργήστε rpm και εγκαταστήστε τις -
-
Χρησιμοποιήστε το επίσημο πρόγραμμα εγκατάστασης:
Установить на сервер 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 και εκτίθεται ως καθολική μεταβλητή
- Λίγο νωρίτερα ξεκινήσαμε το Sentry στο JavaScript μας
Για να δοκιμάσουμε αυτό το παράδειγμα, μπορούμε να χρησιμοποιήσουμε μια στατική πλατφόρμα διακομιστή web Node.js: διακομιστή http. Μεταβείτε στο φάκελο όπου είναι αποθηκευμένο το αρχείο index.htmlκαι εισαγάγετε (επιλογή με την απενεργοποίηση της προσωρινής αποθήκευσης) την ακόλουθη γραμμή για να ανοίξετε τη διεύθυνση στο πρόγραμμα περιήγησης .
Πώς εμφανίζονται τα σφάλματα που έχουν εντοπιστεί
Πρώτα κάντε κλικ στο κουμπί "Γεια σας".
Πιάσαμε ένα σφάλμα, επομένως δεν θα εμφανιστεί στη στοίβα κλήσεων και επομένως δεν παρακολουθείται στην κονσόλα. Ωστόσο, αφού στέλνουμε στο Φρουρός αναφέρετε ένα σφάλμα με μη αυτόματο τρόπο, θα δούμε ένα μήνυμα σχετικά με αυτό στον λογαριασμό σας.
Σημειώσεις:
- Μπορούμε να εντοπίσουμε ποια γραμμή (24) περιέχει το σφάλμα
- Επιπλέον, το ίχνος ψίχουλας εμφανίζει τις ενέργειες του προγράμματος περιήγησης που οδήγησαν στο σφάλμα.
Πώς εμφανίζονται τα μη εντοπισμένα σφάλματα
Κάνοντας κλικ στο κουμπί "Λάθος".
Το σφάλμα δημιουργεί φυσαλίδες στη στοίβα κλήσεων και έτσι εμφανίζεται ένα μήνυμα σφάλματος στην κονσόλα. Μετά από αυτό, το Sentry παρακολουθεί αυτόματα το σφάλμα, χωρίς καμία πρόσθετη ενέργεια.
Σημειώσεις:
- Μπορούμε να δούμε σε ποια γραμμή (30) χάνεται το σφάλμα
- Δεν υπάρχει ίχνος ψωμιού (δεν καταλαβαίνω ακριβώς γιατί)
Πώς να διασφαλίσετε την ασφάλεια του έργου
Ίσως έχετε παρατηρήσει τον τρόπο με τον οποίο ελέγχουμε ποιες σελίδες μπορούν να αναφέρουν σφάλματα στο έργο μας Φρουρός; με βοήθεια dsn εγγραφές. Το πρόβλημα είναι ότι η είσοδος μπορεί να δει οποιοσδήποτε βλέπει τον πηγαίο κώδικα της σελίδας σας.
Για να αποφευχθεί αυτό, πρέπει να περιορίσουμε τον αριθμό των τομέων που μπορούν να υποβάλλουν αναφορές σφαλμάτων στο έργο μας. Σε αυτό το παράδειγμα χρησιμοποιήσαμε localhost (τοπικός οικοδεσπότης). Αυτή η επιλογή διαμορφώνεται στην καρτέλα ρυθμίσεων Φρουρός-έργο, Ρύθμιση έργου Sentry.
Κυκλοφορίες
Εάν σκέφτεστε πώς να το χρησιμοποιήσετε Φρουρός σε διαφορετικές παραλλαγές της εφαρμογής μας, τότε χρειαζόμαστε κάποιο είδος μηχανισμού που θα επισημαίνει σφάλματα με έναν αριθμό έκδοσης.
Εξάλλου, δεν θέλουμε να εμφανιστεί ξανά το σφάλμα που διορθώσαμε και πιστεύουμε ότι αυτό που διορθώσαμε δεν λειτούργησε. Μπορεί επίσης να είναι ότι ο χρήστης εκτόξευσε μια παλαιότερη, προσωρινά αποθηκευμένη έκδοση της εφαρμογής.
Για να λύσετε το πρόβλημα, πρέπει να εισαγάγετε το αναγνωριστικό απελευθέρωση (εκδόσεις) κατά την εκκίνηση Φρουρός.
βανίλια/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Μετά από αυτό, όλα τα νέα σφάλματα θα επισημαίνονται ως κυκλοφορία (0.1.0), δηλαδή, θα συνδεθούν με τη σωστή έκδοση του κώδικα.
Σημειώσεις:
- Έχουμε βρει έναν απλό τρόπο χρήσης των εκδόσεων
- Το Sentry σάς επιτρέπει να χρησιμοποιείτε περισσότερα , η οποία σχετίζεται στενά με GitHub. Αυτή η λειτουργία καθιστά δυνατή την παρακολούθηση σφαλμάτων πριν από την εκτέλεση ορισμένων λειτουργιών.
ΥΓ Το δεύτερο μέρος είναι μεγαλύτερο, οπότε θα είναι σε ξεχωριστή ανάρτηση.
PS Telegram chat Sentry
ΥΓ Ξέχασα να αναφέρω ότι πρόκειται για μετάφραση της ανάρτησης
Πηγή: www.habr.com