Gaur React aplikazio batean denbora errealeko erroreen jarraipenaren bidez azalduko dizut. Frontend aplikazioa ez da normalean akatsen jarraipena egiteko erabiltzen. Zenbait konpainiak askotan akatsen jarraipena alde batera uzten dute, dokumentazio, proba eta abarren ondoren bertara itzultzen dira. Hala ere, zure produktua hobera alda dezakezun, egin ezazu!
1. Zergatik behar duzu Sentry?
Suposatzen dut ekoizpenean akatsen jarraipena egitea interesatzen zaizula.
Hau nahikoa ez dela uste duzu?
Ados, ikus ditzagun xehetasunak.
Garatzaileentzako Sentry erabiltzeko arrazoi nagusiak:
- Erroreak dituen kodea zabaltzean arriskuak kentzeko aukera ematen du
- Lagundu QA kodea probetan
- Lortu arazoen jakinarazpen azkarrak
- Akatsak azkar konpontzeko gaitasuna
- Admin panelean erroreen bistaratzea erosoa lortzea
- Ordenatu erroreak erabiltzailearen/arakatzailearen segmentuaren arabera
CEO / Lead proiektuaren arrazoi nagusiak
- Aurreztu dirua (Sentry zure zerbitzarietan instalatu daiteke)
- Lortu erabiltzaileen iritzia
- Zure proiektuan zer gertatzen den denbora errealean ulertzea
- Jendeak zure aplikazioarekin duen arazo kopurua ulertzea
- Lagundu zure garatzaileek akats bat egin duten tokiak aurkitzen
Garatzaileek artikulu honetan interesatuko luketela uste dut. Arrazoi zerrenda hau ere erabil dezakezu zure nagusia Sentry integratzeko konbentzitzeko.
Kontuz enpresa-zerrendako azken elementuarekin.
Dagoeneko interesatzen zaizu?
Zer da Sentry?
Sentry kode irekiko akatsak jarraitzeko aplikazioa da, garatzaileei hutsegiteen jarraipena eta denbora errealean konpontzen laguntzen diena. Ez ahaztu aplikazioak eraginkortasuna areagotzeko eta erabiltzailearen esperientzia hobetzeko aukera ematen duela. Sentry-k JavaScript, Node, Python, PHP, Ruby, Java eta beste programazio-lengoaia batzuk onartzen ditu.
2. Hasi saioa eta sortu proiektu bat
- Ireki Sentry kontua. Baliteke saioa hasi behar izatea. (Kontuan izan Sentry zure zerbitzarietan instalatu daitekeela)
- Hurrengo urratsa proiektu bat sortzea da
- Hautatu zure hizkuntza zerrendatik. (Erreakzionatu aukeratuko dugu. Egin klik "Sortu proiektua")
Konfiguratu zure aplikazioa. Sentry edukiontzi batean integratzeko oinarrizko adibide bat ikus dezakezu behean:
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-k morroi lagungarri bat du hurrengo egin behar duzuna ulertzen laguntzeko. Beheko urratsak jarraitu ditzakezu. Zure lehen errore-kudeatzailea nola sortu erakutsi nahi dizut. Primeran, proiektu bat sortu dugu! Joan gaitezen hurrengo urratsera
3. React eta Sentry integratuz
npm paketea instalatu behar duzu zure proiektuan.
npm i @sentry/browserHasieratu Sentry zure edukiontzian:
Sentry.init({
// dsn: #dsnUrl,
});DSN Proiektuak -> Ezarpenak -> Bezero-gakoak atalean dago. Bezero-gakoak bilaketa-barran aurki ditzakezu.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Lehenengo errorearen jarraipena
Adibidez, musika aplikazio sinple bat erabili nuen Deezer APIarekin. Ikus dezakezu . Akats bat sortu behar dugu. Modu bat "definitu gabeko" propietatea atzitzea da
Deitzen duen botoi bat sortu behar dugu kontsola.erregistroa Ρ erabiltzailea.email. Ekintza honen ondoren, errore-mezu bat jaso beharko genuke: Atzeman gabeko motako errorea (ezin da propietatea irakurri undefined email) erabiltzaile-objekturik ez dagoelako. Erabili ere egin dezakezu javascript salbuespena.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Edukiontzi osoa honelakoa da:
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);Botoi hau integratu ondoren, arakatzailean probatu beharko zenuke.
Gure lehen akatsa dugu
Au-au!
Goiburuko errorean klik egiten baduzu, pilaren arrastoa ikusiko duzu.
Mezuek itxura txarra dute. Jakina, errore-mezuak ikusi ditugu kode hau non dagoen ulertu gabe. Lehenespenez ReactJS-en iturburu-mapari buruzkoa da, ez daudelako konfiguratuta.
Iturburu-mapa konfiguratzeko argibideak ere eman nahiko nituzke, baina horrek nahi nuena baino askoz luzeagoa izango litzateke mezu hau.
Gai hau azter dezakezu . Artikulu honetan interesatzen bazaizu, iturburu-mapen integrazioari buruzko bigarren zatia argitaratuko du. Beraz, egin klik atsegin gehiago eta harpidetu bigarren zatia ez galtzeko.
5. Erabilera Edukien amaierako puntuarekin API
ADOS. Aurreko paragrafoetan javascript salbuespena estali dugu. Hala ere, zer egiten dugu XHR akatsekin?
Sentry-k erroreen kudeaketa pertsonalizatua ere badu. Api akatsen jarraipena egiteko erabili nuen.
Sentry.captureException(err)Akatsen izena, maila, datuak gehi ditzakezu, erabiltzaileen datu esklusiboak zure aplikazioaren, posta elektronikoaren eta abarren bidez pertsonaliza ditzakezu.
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 APIrako funtzio generiko bat erabili nahiko nuke.
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);
};Inportatu funtzio hau api deian.
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));
}
});
};Ikus ditzagun metodoak:
- setLevel Maila-errore bat txertatzeko aukera ematen dizu sentry panelean. Propietateak ditu - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- ezarriUser Erabiltzaileen edozein datu gordetzen laguntzen du (ID, helbide elektronikoa, ordainketa plana, etab.).
- setExtra behar dituzun datu guztiak ezartzeko aukera ematen dizu, adibidez, denda bat.
Erabiltzaileak akats baten inguruko iritzia nahi baduzu, showReportDialog funtzioa erabili beharko zenuke.
Sentry.showReportDialog();Ondorioa:
Gaur Sentry React aplikazio batean integratzeko moduetako bat deskribatu dugu.
β Telegramen txata
Iturria: www.habr.com