Σήμερα θα σας καθοδηγήσω στην παρακολούθηση σφαλμάτων σε πραγματικό χρόνο σε μια εφαρμογή React. Η εφαρμογή frontend δεν χρησιμοποιείται συνήθως για την παρακολούθηση σφαλμάτων. Ορισμένες εταιρείες συχνά παραμερίζουν την παρακολούθηση σφαλμάτων, επιστρέφοντας σε αυτήν μετά από τεκμηρίωση, δοκιμές και ούτω καθεξής. Ωστόσο, εάν μπορείτε να αλλάξετε το προϊόν σας προς το καλύτερο, τότε απλώς κάντε το!
1. Γιατί χρειάζεστε το Sentry;
Υποθέτω ότι ενδιαφέρεστε για την παρακολούθηση σφαλμάτων κατά την παραγωγή.
Πιστεύετε ότι αυτό δεν είναι αρκετό;
Εντάξει, ας δούμε τις λεπτομέρειες.
Κορυφαίοι λόγοι για να χρησιμοποιήσετε το Sentry για προγραμματιστές:
- Σας επιτρέπει να απαλλαγείτε από κινδύνους κατά την ανάπτυξη κώδικα με σφάλματα
- Βοηθήστε το QA στη δοκιμή κώδικα
- Λάβετε γρήγορες ειδοποιήσεις για προβλήματα
- Δυνατότητα γρήγορης διόρθωσης σφαλμάτων
- Λήψη μιας βολικής εμφάνισης σφαλμάτων στον πίνακα διαχείρισης
- Ταξινόμηση σφαλμάτων κατά τμήμα χρήστη/προγράμματος περιήγησης
Κύριοι λόγοι για CEO / Lead project
- Εξοικονομήστε χρήματα (το Sentry μπορεί να εγκατασταθεί στους διακομιστές σας)
- Λάβετε σχόλια χρηστών
- Κατανόηση του τι δεν πάει καλά με το έργο σας σε πραγματικό χρόνο
- Κατανόηση του αριθμού των προβλημάτων που έχουν οι χρήστες με την εφαρμογή σας
- Βοηθήστε να βρείτε μέρη όπου οι προγραμματιστές σας έκαναν λάθος
Νομίζω ότι οι προγραμματιστές θα ενδιαφερθούν για αυτό το άρθρο αρχικά. Μπορείτε επίσης να χρησιμοποιήσετε αυτήν τη λίστα λόγων για να πείσετε το αφεντικό σας να ενσωματώσει το Sentry.
Να είστε προσεκτικοί με το τελευταίο στοιχείο στη λίστα επιχειρήσεων.
Σας ενδιαφέρει ήδη;
Τι είναι το Sentry;
Το Sentry είναι μια εφαρμογή παρακολούθησης σφαλμάτων ανοιχτού κώδικα που βοηθά τους προγραμματιστές να παρακολουθούν και να διορθώνουν σφάλματα σε πραγματικό χρόνο. Μην ξεχνάτε ότι η εφαρμογή σάς επιτρέπει επίσης να αυξήσετε την αποτελεσματικότητα και να βελτιώσετε την εμπειρία χρήστη. Το Sentry υποστηρίζει JavaScript, Node, Python, PHP, Ruby, Java και άλλες γλώσσες προγραμματισμού.
2. Συνδεθείτε και δημιουργήστε ένα έργο
- Ανοίξτε τον λογαριασμό σας Sentry. Ίσως χρειαστεί να συνδεθείτε. (Λάβετε υπόψη ότι το Sentry μπορεί να εγκατασταθεί στους διακομιστές σας)
- Το επόμενο βήμα είναι η δημιουργία ενός έργου
- Επιλέξτε τη γλώσσα σας από τη λίστα. (Θα επιλέξουμε React. Κάντε κλικ στο "Δημιουργία έργου")
Ρυθμίστε την εφαρμογή σας. Μπορείτε να δείτε ένα βασικό παράδειγμα για το πώς να ενσωματώσετε το Sentry σε ένα κοντέινερ παρακάτω:
import * as Sentry from '@sentry/browser';
// Sentry.init({
// dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app
class ExampleBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null };
}
componentDidCatch(error, errorInfo) {
this.setState({ error });
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
if (this.state.error) {
//render fallback UI
return (
<a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
);
} else {
//when there's not an error, render children untouched
return this.props.children;
}
}
}Ο Sentry έχει έναν χρήσιμο οδηγό για να σας βοηθήσει να κατανοήσετε τι πρέπει να κάνετε στη συνέχεια. Μπορείτε να ακολουθήσετε τα παρακάτω βήματα. Θέλω να σας δείξω πώς να δημιουργήσετε το πρώτο πρόγραμμα χειρισμού σφαλμάτων. Μπράβο, δημιουργήσαμε ένα έργο! Ας προχωρήσουμε στο επόμενο βήμα
3. Ενσωμάτωση React και Sentry
Πρέπει να εγκαταστήσετε το πακέτο npm στο έργο σας.
npm i @sentry/browserΑρχικοποιήστε το Sentry στο κοντέινερ σας:
Sentry.init({
// dsn: #dsnUrl,
});Το DSN βρίσκεται στα Έργα -> Ρυθμίσεις -> Κλειδιά πελάτη. Μπορείτε να βρείτε κλειδιά πελάτη στη γραμμή αναζήτησης.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Παρακολούθηση του πρώτου σφάλματος
Για παράδειγμα, χρησιμοποίησα μια απλή εφαρμογή μουσικής με το Deezer API. Μπορείς να το δεις . Πρέπει να δημιουργήσουμε ένα σφάλμα. Ένας τρόπος είναι να αποκτήσετε πρόσβαση στην ιδιότητα "απροσδιόριστη".
Πρέπει να δημιουργήσουμε ένα κουμπί που καλεί αρχείο καταγραφής κονσόλας с user.email. Μετά από αυτήν την ενέργεια, θα πρέπει να λάβουμε ένα μήνυμα σφάλματος: Uncapped TypeError (δεν είναι δυνατή η ανάγνωση της ιδιότητας από undefined email) λόγω απουσίας αντικειμένου χρήστη. Μπορείτε επίσης να χρησιμοποιήσετε εξαίρεση javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Όλο το δοχείο μοιάζει με αυτό:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";
const Search = Input.Search;
const mapState = state => ({
list: state.root.list,
loading: state.root.loading
});
const mapDispatch = {
getList
};
class Container extends Component {
constructor(props) {
super(props);
Sentry.init({
dsn: "https://[email protected]/1417586",
});
}
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
const { list, loading, getList } = this.props;
const user = undefined;
return (
<div className="App">
<button
type="button"
onClick={() => console.log(user.email)}
>
test error1
</button>
<div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
<h1>Music Finder</h1>
<br />
<Search onSearch={value => getList(value)} enterButton />
{loading && <Skeleton avatar title={false} loading={true} active />}
{!loading && (
<List
itemLayout="horizontal"
dataSource={list}
locale={{ emptyText: <div /> }}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.artist.picture} />}
title={item.title}
description={item.artist.name}
/>
</List.Item>
)}
/>
)}
</div>
);
}
}
export default connect(
mapState,
mapDispatch
)(Container);Αφού ενσωματώσετε αυτό το κουμπί, θα πρέπει να το δοκιμάσετε στο πρόγραμμα περιήγησης.
Έχουμε το πρώτο μας λάθος
Ου-ου!
Εάν κάνετε κλικ στο σφάλμα κεφαλίδας, θα δείτε το ίχνος στοίβας.
Τα μηνύματα φαίνονται άσχημα. Φυσικά, έχουμε δει μηνύματα λάθους χωρίς να καταλαβαίνουμε πού βρίσκεται αυτός ο κωδικός. Από προεπιλογή, πρόκειται για χάρτη προέλευσης στο ReactJS, επειδή δεν έχουν ρυθμιστεί.
Θα ήθελα επίσης να δώσω οδηγίες για τη ρύθμιση του χάρτη προέλευσης, αλλά αυτό θα έκανε αυτή την ανάρτηση πολύ μεγαλύτερη από ό,τι ήθελα.
Μπορείτε να μελετήσετε αυτό το θέμα . Εάν ενδιαφέρεστε για αυτό το άρθρο, θα δημοσιεύσει το δεύτερο μέρος σχετικά με την ενοποίηση του χάρτη πηγής. Κάντε λοιπόν κλικ σε περισσότερα likes και εγγραφείτε για να μην χάσετε το δεύτερο μέρος.
5. Χρήση Φρουρός με τελικό σημείο API
ΕΝΤΑΞΕΙ. Καλύψαμε την εξαίρεση javascript στις προηγούμενες παραγράφους. Ωστόσο, τι κάνουμε με τα σφάλματα XHR;
Το Sentry έχει επίσης προσαρμοσμένο χειρισμό σφαλμάτων. Το χρησιμοποίησα για την παρακολούθηση σφαλμάτων api.
Sentry.captureException(err)Μπορείτε να προσαρμόσετε το όνομα σφάλματος, το επίπεδο, να προσθέσετε δεδομένα, μοναδικά δεδομένα χρήστη μέσω της εφαρμογής, του email σας κ.λπ.
superagent
.get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
.set("X-RapidAPI-Key", #id_key)
.end((err, response) => {
if (err) {
Sentry.configureScope(
scope => scope
.setUser({"email": "[email protected]"})
.setLevel("Error")
);
return Sentry.captureException(err);
}
if (response) {
return dispatch(setList(response.body.data));
}
});Θα ήθελα να χρησιμοποιήσω μια γενική συνάρτηση για το catch API.
import * as Sentry from "@sentry/browser";
export const apiCatch = (error, getState) => {
const store = getState();
const storeStringify = JSON.stringify(store);
const { root: { user: { email } } } = store;
Sentry.configureScope(
scope => scope
.setLevel("Error")
.setUser({ email })
.setExtra("store", storeStringify)
);
// Sentry.showReportDialog(); - If you want get users feedback on error
return Sentry.captureException(error);
};Εισαγάγετε αυτήν τη λειτουργία σε κλήση api.
export default query => (dispatch, getState) => {
superagent
.get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
.set("X-RapidAPI-Key", #id_key)
.end((error, response) => {
if (error) {
return apiCatch(error, getState)
}
if (response) {
return dispatch(setList(response.body.data));
}
});
};Ας ελέγξουμε τις μεθόδους:
- setLevel σας επιτρέπει να εισαγάγετε ένα σφάλμα στάθμης στο ταμπλό του φρουρού. Έχει ιδιότητες - 'μοιραίο', 'σφάλμα', 'προειδοποίηση', 'ημερολόγιο', 'πληροφορίες, 'debug', 'critical').
- setUser βοηθά στην αποθήκευση τυχόν δεδομένων χρήστη (αναγνωριστικό, διεύθυνση email, πρόγραμμα πληρωμής κ.λπ.).
- setExtra σας επιτρέπει να ορίσετε οποιαδήποτε δεδομένα χρειάζεστε, για παράδειγμα, ένα κατάστημα.
Εάν θέλετε τα σχόλια των χρηστών για ένα σφάλμα, θα πρέπει να χρησιμοποιήσετε τη συνάρτηση showReportDialog.
Sentry.showReportDialog();Συμπέρασμα:
Σήμερα περιγράψαμε έναν από τους τρόπους ενσωμάτωσης του Sentry σε μια εφαρμογή React.
→ Συνομιλία μέσω Telegram από
Πηγή: www.habr.com