Šodien es jums pastāstīšu par kļūdu izsekošanu reāllaikā React lietojumprogrammā. Priekšgala lietojumprogramma parasti netiek izmantota kļūdu izsekošanai. Daži uzņēmumi bieži atliek kļūdu izsekošanu, atgriežoties pie tās pēc dokumentācijas, testiem utt. Tomēr, ja jūs varat mainīt savu produktu uz labo pusi, tad vienkārši dariet to!
1. Kāpēc jums ir nepieciešams Sentry?
Es pieņemu, ka jūs interesē kļūdu izsekošana ražošanas laikā
Vai jūs domājat, ka ar to nepietiek?
Labi, apskatīsim detaļas.
Galvenie iemesli, kāpēc izstrādātāji izmanto Sentry:
- Ļauj izvairīties no riskiem, izvietojot kodu ar kļūdām
- Palīdziet kvalitātes nodrošināšanai ar koda testēšanu
- Saņemiet ātrus paziņojumus par problēmām
- Spēja ātri labot kļūdas
- Ērta kļūdu parādīšana administratora panelī
- Kārtot kļūdas pēc lietotāja/pārlūkprogrammas segmenta
Galvenie CEO/Vadošā projekta iemesli
- Ietaupiet naudu (Sentry var instalēt jūsu serveros)
- Lietotāju atsauksmju saņemšana
- Reāllaikā izprotiet, kas ar jūsu projektu ir nepareizi
- Izpratne par to, cik daudz problēmu cilvēkiem ir ar jūsu lietotni
- Palīdziet atrast vietas, kur jūsu izstrādātāji ir pieļāvuši kļūdas
Es domāju, ka izstrādātājus vispirms interesētu šis raksts. Varat arī izmantot šo iemeslu sarakstu, lai pārliecinātu savu priekšnieku integrēt Sentry.
Esiet piesardzīgs ar pēdējo vienumu uzņēmumu sarakstā.
Vai jūs jau interesējat?
Kas ir Sentrijs?
Sentry ir atvērtā koda kļūdu izsekošanas lietojumprogramma, kas palīdz izstrādātājiem reāllaikā izsekot un novērst avārijas. Neaizmirstiet, ka lietojumprogramma ļauj palielināt efektivitāti un uzlabot lietotāja pieredzi. Sentry atbalsta JavaScript, Node, Python, PHP, Ruby, Java un citas programmēšanas valodas.
2. Piesakieties un izveidojiet projektu
- Atveriet savu Sentry kontu. Iespējams, būs jāpiesakās. (Lūdzu, ņemiet vērā, ka Sentry var instalēt jūsu serveros)
- Nākamais solis ir projekta izveide
- Sarakstā atlasiet savu valodu. (Mēs atlasīsim Reaģēt. Noklikšķiniet uz "Izveidot projektu")
Pielāgojiet savu lietojumprogrammu. Pamata piemēru, kā Sentry integrēt konteinerā, var redzēt zemāk:
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 ir noderīgs vednis, kas palīdzēs jums noskaidrot, kas jums jādara tālāk. Varat veikt šīs darbības. Es vēlos jums parādīt, kā izveidot savu pirmo kļūdu apstrādātāju. Lieliski, esam izveidojuši projektu! Pāriesim pie nākamās darbības
3. React un Sentry integrācija
Projektā ir jāinstalē npm pakotne.
npm i @sentry/browserInicializējiet Sentry savā konteinerā:
Sentry.init({
// dsn: #dsnUrl,
});DSN atrodas sadaļā Projekti -> Iestatījumi -> Klienta atslēgas. Klienta atslēgas varat atrast meklēšanas joslā.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Pirmās kļūdas izsekošana
Piemēram, es izmantoju vienkāršu mūzikas lietojumprogrammu ar Deezer API. Jūs to varat redzēt . Mums ir jāizveido kļūda. Viens veids ir piekļūt "nenodefinētajam" rekvizītam
Mums ir jāizveido poga, kas zvana console.log с user.email. Pēc šīs darbības mums vajadzētu saņemt kļūdas ziņojumu: Uncaught Type Error (nevar nolasīt rekvizītu no nedefinēta email) trūkstoša lietotāja objekta dēļ. Varat arī izmantot Javascript izņēmums.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Viss konteiners izskatās šādi:
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);Pēc šīs pogas integrēšanas jums tā jāpārbauda pārlūkprogrammā.
Mums ir pirmā kļūda
Čū-ū!
Ja noklikšķināsit uz galvenes kļūdas, jūs redzēsit steka izsekojamību.
Ziņojumi izskatās slikti. Protams, mēs esam redzējuši kļūdu ziņojumus, nesaprotot, kur atrodas kods. Pēc noklusējuma mēs runājam par avota karti ReactJS, jo tie nav konfigurēti.
Es arī vēlētos sniegt norādījumus par avota kartes iestatīšanu, taču tas padarītu šo rakstu daudz garāku, nekā biju iecerējis.
Jūs varat izpētīt šo tēmu . Ja jūs interesē šis raksts, publicēs otro daļu par avotu karšu integrāciju. Tātad, nospiediet vairāk patīk un abonējiet lai nepalaistu garām otro daļu.
5. Lietošana Sargkareivis ar beigu punktu API
LABI. Iepriekšējās rindkopās esam aplūkojuši JavaScript izņēmumu. Tomēr ko mēs darīsim ar XHR kļūdām?
Sentry ir arī pielāgota kļūdu apstrāde. Es to izmantoju, lai izsekotu api kļūdas.
Sentry.captureException(err)Varat pielāgot kļūdas nosaukumu, līmeni, pievienot datus, unikālus lietotāja datus, izmantojot savu lietojumprogrammu, e-pastu utt.
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));
}
});Es vēlētos izmantot vispārīgu funkciju nozvejas 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);
};Importējiet šo funkciju savā API zvanā.
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));
}
});
};Pārbaudīsim metodes:
- setLevel ļauj ievadīt līmeņa kļūdu sardzes informācijas panelī. Tam ir īpašības - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser palīdz saglabāt jebkādus lietotāja datus (id, e-pasta adresi, maksājumu plānu utt.).
- setExtra ļauj norādīt visus nepieciešamos datus, piemēram, uzglabāt.
Ja vēlaties saņemt lietotāju atsauksmes par kļūdu, izmantojiet funkciju showReportDialog.
Sentry.showReportDialog();Secinājums:
Šodien mēs aprakstījām vienu veidu, kā integrēt Sentry React lietojumprogrammā.
→ Telegram tērzēšana ar
Avots: www.habr.com