Danes vam bom povedal o sledenju napakam v realnem času v aplikaciji React. Sprednja aplikacija se običajno ne uporablja za sledenje napakam. Nekatera podjetja pogosto odložijo sledenje napakam in se k njemu vrnejo po dokumentaciji, testih itd. Vendar, če lahko spremenite svoj izdelek na bolje, potem to le storite!
1. Zakaj potrebujete Sentry?
Predvidevam, da vas zanima sledenje hroščem med proizvodnjo
Mislite, da to ni dovolj?
V redu, poglejmo podrobnosti.
Glavni razlogi, zakaj razvijalci uporabljajo Sentry:
- Omogoča, da se izognete tveganjem pri uvajanju kode z napakami
- Pomagajte QA pri testiranju kode
- Prejmite hitra obvestila o težavah
- Sposobnost hitrega odpravljanja napak
- Pridobivanje priročnega prikaza napak na skrbniški plošči
- Razvrsti napake glede na segment uporabnika/brskalnika
Glavni razlogi za CEO/Lead projekt
- Prihranite denar (Sentry lahko namestite na svoje strežnike)
- Pridobivanje povratnih informacij uporabnikov
- Razumevanje, kaj je narobe z vašim projektom v realnem času
- Razumevanje števila težav, ki jih imajo ljudje z vašo aplikacijo
- Pomagajte vam najti mesta, kjer so vaši razvijalci naredili napake
Mislim, da bi ta članek najprej zanimal razvijalce. Uporabite lahko tudi ta seznam razlogov, da prepričate svojega šefa, da integrira Sentry.
Bodite previdni pri zadnji točki na poslovnem seznamu.
Vas že zanima?
Kaj je Sentry?
Sentry je odprtokodna aplikacija za sledenje napakam, ki razvijalcem pomaga pri sledenju in odpravljanju zrušitev v realnem času. Ne pozabite, da aplikacija omogoča povečanje učinkovitosti in izboljšanje uporabniške izkušnje. Sentry podpira JavaScript, Node, Python, PHP, Ruby, Java in druge programske jezike.
2. Prijavite se in ustvarite projekt
- Odprite svoj račun Sentry. Morda se boste morali prijaviti. (Upoštevajte, da je Sentry mogoče namestiti na vaše strežnike)
- Naslednji korak je izdelava projekta
- Na seznamu izberite svoj jezik. (Izbrali bomo React. Kliknite »Ustvari projekt«)
Prilagodite svojo aplikacijo. Osnovni primer, kako integrirati Sentry v vsebnik, si lahko ogledate spodaj:
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 koristen čarovnik, ki vam pomaga ugotoviti, kaj morate storiti naslednje. Sledite tem korakom. Želim vam pokazati, kako ustvarite svoj prvi program za obravnavo napak. Super, ustvarili smo projekt! Pojdimo na naslednji korak
3. Integracija React in Sentry
V svoj projekt morate namestiti paket npm.
npm i @sentry/browserInicializirajte Sentry v svojem vsebniku:
Sentry.init({
// dsn: #dsnUrl,
});DSN se nahaja v Projekti -> Nastavitve -> Ključi odjemalca. Ključe odjemalca najdete v iskalni vrstici.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Sledenje prvi napaki
Uporabil sem na primer preprosto glasbeno aplikacijo z API-jem Deezer. Lahko vidite . Ustvariti moramo napako. Eden od načinov je dostop do lastnosti "nedefinirano".
Ustvariti moramo gumb, ki kliče console.log с uporabnik.e-pošta. Po tem dejanju bi morali prejeti sporočilo o napaki: Uncaught TypeError (lastnosti ni mogoče prebrati iz nedefiniranega email) zaradi manjkajočega uporabniškega objekta. Uporabite lahko tudi Izjema Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Celoten vsebnik izgleda takole:
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);Po integraciji tega gumba ga preizkusite v brskalniku.
Imamo prvo napako
Hu-hu!
Če kliknete napako v glavi, boste videli sled sklada.
Sporočila izgledajo slabo. Seveda smo videli sporočila o napakah, ne da bi razumeli, kje je koda. Privzeto govorimo o izvornem zemljevidu v ReactJS, ker niso konfigurirani.
Prav tako bi rad zagotovil navodila za nastavitev izvornega zemljevida, vendar bi bil zaradi tega ta članek veliko daljši, kot sem nameraval.
To temo lahko preučujete . Če vas ta članek zanima, bo objavil drugi del o integraciji izvornega zemljevida. Torej, pritisnite več všečkov in se naročite da ne zamudim drugega dela.
5. Uporaba Sentry s končno točko API
V REDU. V prejšnjih odstavkih smo obravnavali izjemo javascript. Vendar, kaj bomo storili glede napak XHR?
Sentry ima tudi prilagojeno obravnavo napak. Uporabil sem ga za sledenje napakam api.
Sentry.captureException(err)Prilagodite lahko ime napake, stopnjo, dodate podatke, edinstvene uporabniške podatke s svojo aplikacijo, e-pošto 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));
}
});Rad bi uporabil generično funkcijo 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);
};Uvozite to funkcijo v svoj klic 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));
}
});
};Preverimo metode:
- setLevel vam omogoča vstavljanje napake ravni v nadzorno ploščo stražarja. Ima lastnosti - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser pomaga pri shranjevanju morebitnih uporabniških podatkov (id, elektronski naslov, plačilni načrt itd.).
- setExtra vam omogoča, da določite vse podatke, ki jih potrebujete, na primer shranjevanje.
Če želite od uporabnikov pridobiti povratne informacije o napaki, morate uporabiti funkcijo showReportDialog.
Sentry.showReportDialog();Zaključek:
Danes smo opisali en način integracije Sentryja v aplikacijo React.
→ Telegram klepet z
Vir: www.habr.com