Namuhla ngizokutshela mayelana nokulandelela iphutha ngesikhathi sangempela kuhlelo lokusebenza lwe-React. Uhlelo lokusebenza olungaphambili aluvamisile ukusetshenziselwa ukulandelela amaphutha. Ezinye izinkampani zivame ukuyeka ukulandela iziphazamisi, zibuyele kukho ngemva kwemibhalo, ukuhlolwa, njll. Nokho, uma ungakwazi ukushintsha umkhiqizo wakho ube ngcono, vele ukwenze!
1. Kungani udinga i-Sentry?
Ngicabanga ukuthi unentshisekelo ekulandeleleni iziphazamisi ngesikhathi sokukhiqiza
Ucabanga ukuthi lokhu akwanele?
Kulungile, ake sibheke imininingwane.
Izizathu eziphezulu zokuthi onjiniyela basebenzise i-Sentry:
- Ikuvumela ukuthi ugweme ubungozi lapho usebenzisa ikhodi enamaphutha
- Siza i-QA ngokuhlolwa kwekhodi
- Thola izaziso ezisheshayo mayelana nezinkinga
- Ikhono lokulungisa ngokushesha amaphutha
- Ukuthola isibonisi esikahle samaphutha kuphaneli yomqondisi
- Hlunga amaphutha ngesegimenti yomsebenzisi/yesiphequluli
Izizathu eziyinhloko zephrojekthi ye-CEO/Eholayo
- Yonga imali (I-Sentry ingafakwa kumaseva akho)
- Ithola impendulo yomsebenzisi
- Ukuqonda ukuthi yini engalungile ngephrojekthi yakho ngesikhathi sangempela
- Ukuqonda inani lezinkinga abantu abanazo ngohlelo lwakho lokusebenza
- Siza ukuthi uthole izindawo lapho onjiniyela bakho benza khona amaphutha
Ngicabanga ukuthi onjiniyela bangaba nentshisekelo kulesi sihloko kuqala. Ungasebenzisa futhi lolu hlu lwezizathu ukuze wenze abaphathi bakho bahlanganise i-Sentry.
Qaphela into yokugcina ohlwini lwebhizinisi.
Ingabe usuvele unentshisekelo?
Yini iSentry?
I-Sentry iwumthombo ovulekile wohlelo lokusebenza lokulandela iziphazamisi olusiza onjiniyela balandelele futhi balungise ukuphahlazeka ngesikhathi sangempela. Ungakhohlwa ukuthi uhlelo lokusebenza likuvumela ukuthi ukhuphule ukusebenza kahle futhi uthuthukise ulwazi lomsebenzisi. I-Sentry isekela i-JavaScript, i-Node, i-Python, i-PHP, i-Ruby, i-Java nezinye izilimi zokuhlela.
2. Ngena ngemvume bese udala iphrojekthi
- Vula i-akhawunti yakho ye-Sentry. Kungase kudingeke ukuthi ungene. (Sicela uqaphele ukuthi i-Sentry ingafakwa kumaseva akho)
- Isinyathelo esilandelayo ukwakha iphrojekthi
- Khetha ulimi lwakho ohlwini. (Sizokhetha okuthi React. Chofoza okuthi "Dala Iphrojekthi").
Enza ngendlela oyifisayo isicelo sakho. Isibonelo esiyisisekelo sendlela yokuhlanganisa i-Sentry esitsheni singabonakala ngezansi:
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;
}
}
}I-Sentry ineWizadi ewusizo ukukusiza ukuthi uthole ukuthi yini okufanele uyenze ngokulandelayo. Ungakwazi ukulandela lezi zinyathelo. Ngifuna ukukubonisa ukuthi usenza kanjani isibambi sakho sokuqala samaphutha. Kuhle, sidale iphrojekthi! Asiqhubekele esinyathelweni esilandelayo
3. Ukuhlanganiswa kwe-React kanye ne-Sentry
Kufanele ufake iphakheji ye-npm kuphrojekthi yakho.
npm i @sentry/browserQalisa I-Sentry esitsheni sakho:
Sentry.init({
// dsn: #dsnUrl,
});I-DSN itholakala kokuthi Amaphrojekthi -> Izilungiselelo -> Okhiye Beklayenti. Ungathola okhiye beklayenti kubha yokusesha.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Ukulandelela iphutha lokuqala
Isibonelo, ngisebenzise uhlelo lokusebenza lomculo olulula nge-Deezer API. Ungayibona . Sidinga ukudala iphutha. Enye indlela iwukuba ufinyelele endaweni "engachazwanga".
Sidinga ukudala inkinobho eshayayo console.log Ρ umsebenzisi.imeyili. Ngemva kwalesi senzo kufanele sithole umlayezo wephutha: I-Uncaught TypeError (ayikwazi ukufunda isakhiwo kusuka kokungachazwanga email) ngenxa yento yomsebenzisi engekho. Ungasebenzisa futhi Okuhlukile kwe-Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Isitsha sonke sibukeka kanjena:
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);Ngemva kokuhlanganisa le nkinobho, kufanele uyihlole esipheqululini.
Sinephutha lethu lokuqala
Whoo-hoo!
Uma uchofoza iphutha likanhlokweni, uzobona umkhondo wesitaki.
Imilayezo ibukeka kabi. Yebo siyibonile imilayezo yamaphutha ngaphandle kokuqonda ukuthi ikhodi ikuphi. Ngokuzenzakalelayo sikhuluma ngemephu yomthombo ku-ReactJS ngoba ayilungiselelwe.
Ngingathanda futhi ukunikeza imiyalelo yokusetha imephu yomthombo, kodwa lokho kungenza lesi sihloko sibe side kakhulu kunalokho ebengihlosile.
Ungakwazi ukufunda lesi sihloko . Uma unentshisekelo kulesi sihloko, izoshicilela ingxenye yesibili mayelana nokuhlanganiswa kwemephu yomthombo. Ngakho-ke, shaya ukuthandwa okuningi futhi ubhalisele ukuze ungaphuthelwa ingxenye yesibili.
5. Ukusetshenziswa Kuthunyelwe ngephoyinti lokugcina API
KULUNGILE. Sifake okuhlukile kwe-javascript ezigabeni ezedlule. Nokho, sizokwenzani ngamaphutha e-XHR?
Umthumeli futhi unokuphatha iphutha langokwezifiso. Ngiyisebenzise ukulandelela amaphutha e-api.
Sentry.captureException(err)Ungenza ngendlela oyifisayo igama lephutha, ileveli, wengeze idatha, idatha yomsebenzisi ehlukile usebenzisa uhlelo lwakho lokusebenza, i-imeyili, njll.
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));
}
});Ngingathanda ukusebenzisa umsebenzi ojwayelekile we-API yokubamba.
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);
};Ngenisa lo msebenzi kukholi yakho ye-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));
}
});
};Ake sihlole izindlela:
- setLevel ikuvumela ukuthi ufake iphutha leleveli kudeshibhodi yomlindi. Inezici - 'ezibulalayo', 'iphutha', 'isixwayiso', 'ilogi', 'imininingwane,' ukulungisa iphutha', 'ibucayi').
- setUser isiza ukulondoloza noma iyiphi idatha yomsebenzisi (i-id, ikheli le-imeyili, uhlelo lokukhokha, njll.).
- setOkwengeziwe ikuvumela ukuthi ucacise noma iyiphi idatha oyidingayo, isibonelo, gcina.
Uma ufuna ukuthola impendulo yomsebenzisi mayelana nesiphazamisi, kufanele usebenzise umsebenzi we-showReportDialog.
Sentry.showReportDialog();Isiphetho:
Namuhla sichaze indlela eyodwa yokuhlanganisa i-Sentry kuhlelo lokusebenza lwe-React.
β Xoxa ngocingo
Source: www.habr.com