Danas ću vas provesti kroz praćenje grešaka u realnom vremenu u React aplikaciji. Frontend aplikacija se obično ne koristi za praćenje grešaka. Neke kompanije često ostavljaju po strani praćenje grešaka, vraćajući se na njega nakon dokumentacije, testova i tako dalje. Međutim, ako možete promijeniti svoj proizvod na bolje, onda to samo učinite!
1. Zašto vam je potreban Sentry?
Pretpostavljam da ste zainteresovani za praćenje grešaka tokom proizvodnje.
Mislite li da ovo nije dovoljno?
Ok, pogledajmo detalje.
Glavni razlozi za korištenje Sentry za programere:
- Omogućava vam da se riješite rizika prilikom implementacije koda s greškama
- Pomozite QA u testiranju koda
- Dobijajte brza obavještenja o problemima
- Sposobnost brzog ispravljanja grešaka
- Dobivanje praktičnog prikaza grešaka u admin panelu
- Sortiraj greške prema segmentu korisnika/pretraživača
Glavni razlozi za CEO/Lead projekta
- Uštedite novac (Sentry se može instalirati na vaše servere)
- Dobijte povratne informacije od korisnika
- Razumijevanje šta nije u redu s vašim projektom u realnom vremenu
- Razumijevanje broja problema koji ljudi imaju s vašom aplikacijom
- Pomozite u pronalaženju mjesta na kojima su vaši programeri napravili grešku
Mislim da bi programere prije svega zanimao ovaj članak. Također možete koristiti ovu listu razloga da uvjerite svog šefa da integriše Sentry.
Budite oprezni sa posljednjom stavkom na poslovnoj listi.
Jeste li već zainteresirani?
Šta je Sentry?
Sentry je aplikacija za praćenje grešaka otvorenog koda koja pomaže programerima da prate i poprave padove u realnom vremenu. Ne zaboravite da vam aplikacija također omogućava povećanje efikasnosti i poboljšanje korisničkog iskustva. Sentry podržava JavaScript, Node, Python, PHP, Ruby, Java i druge programske jezike.
2. Prijavite se i kreirajte projekat
- Otvorite svoj Sentry nalog. Možda ćete se morati prijaviti. (Imajte na umu da se Sentry može instalirati na vaše servere)
- Sljedeći korak je kreiranje projekta
- Izaberite svoj jezik sa liste. (Odabrat ćemo React. Kliknite na "Kreiraj projekat")
Postavite svoju aplikaciju. U nastavku možete vidjeti osnovni primjer kako integrirati Sentry u kontejner:
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 ima korisnog čarobnjaka koji će vam pomoći da shvatite što trebate učiniti sljedeće. Možete slijediti dolje navedene korake. Želim vam pokazati kako da kreirate svoj prvi obrađivač grešaka. Odlično, napravili smo projekat! Idemo na sljedeći korak
3. Integracija React i Sentry
Morate instalirati npm paket u svoj projekat.
npm i @sentry/browserInicijalizirajte Sentry u svom kontejneru:
Sentry.init({
// dsn: #dsnUrl,
});DSN se nalazi u Projekti -> Postavke -> Klijentski ključevi. Ključeve klijenta možete pronaći u traci za pretraživanje.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Praćenje prve greške
Na primjer, koristio sam jednostavnu muzičku aplikaciju sa Deezer API-jem. Možete to vidjeti . Moramo napraviti grešku. Jedan od načina je pristup svojstvu "nedefinirano".
Moramo kreirati dugme koje poziva konzolni dnevnik с korisnik.e-mail. Nakon ove akcije, trebali bismo dobiti poruku o grešci: Neuhvaćena greška tipa (ne može čitati svojstvo iz nedefiniranog email) zbog odsustva korisničkog objekta. Također možete koristiti javascript izuzetak.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Cijeli kontejner izgleda ovako:
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);Nakon integracije ovog dugmeta, trebalo bi da ga testirate u pretraživaču.
Imamo prvu grešku
Whoo-hoo!
Ako kliknete na grešku u zaglavlju, vidjet ćete praćenje steka.
Poruke izgledaju loše. Naravno, vidjeli smo poruke o grešci bez razumijevanja gdje je ovaj kod. Po defaultu se radi o izvornoj mapi u ReactJS-u jer nisu konfigurirani.
Također bih želio dati upute za postavljanje izvorne mape, ali to bi ovaj post učinio mnogo dužim nego što sam namjeravao.
Možete proučiti ovu temu . Ako ste zainteresovani za ovaj članak, će objaviti drugi dio o integraciji izvorne mape. Zato kliknite na više lajkova i pretplatite se na da ne propustite drugi deo.
5. Upotreba stražar sa krajnjom tačkom API
UREDU. U prethodnim paragrafima smo pokrili javascript izuzetak. Međutim, šta da radimo sa XHR greškama?
Sentry također ima prilagođeno rukovanje greškama. Koristio sam ga za praćenje api grešaka.
Sentry.captureException(err)Možete prilagoditi naziv greške, nivo, dodati podatke, jedinstvene korisničke podatke putem vaše aplikacije, e-pošte itd.
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));
}
});Želio bih koristiti generičku funkciju za 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);
};Uvezite ovu funkciju u api poziv.
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));
}
});
};Provjerimo metode:
- setLevel omogućava vam da umetnete grešku nivoa u kontrolnu tablu stražara. Ima svojstva - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser pomaže u spremanju svih korisničkih podataka (id, email adresa, plan plaćanja, itd.).
- setExtra omogućava vam da postavite sve podatke koji su vam potrebni, na primjer, trgovinu.
Ako želite povratne informacije korisnika o grešci, trebali biste koristiti funkciju showReportDialog.
Sentry.showReportDialog();Zaključak:
Danas smo opisali jedan od načina integracije Sentry u React aplikaciju.
→ Telegram chat by
izvor: www.habr.com