Sa lá atá inniu beidh mé ag siúl leat trí rianú earráide fíor-ama in aip React. De ghnáth ní úsáidtear an feidhmchlár tosaigh le haghaidh rianú fabhtanna. Is minic a chuireann roinnt cuideachtaí rianú fabhtanna ar leataobh, ag filleadh air tar éis doiciméadú, tástálacha, agus mar sin de. Mar sin féin, más féidir leat do tháirge a athrú chun feabhais, ansin déan é!
1. Cén fáth a bhfuil Sentry ag teastáil uait?
Táim ag glacadh leis go bhfuil suim agat i rianú fabhtanna le linn táirgeadh.
An gceapann tú nach leor é seo?
Ceart go leor, déanaimis féachaint ar na sonraí.
Na Príomhchúiseanna le Feidhmchlár a Úsáid d'fhorbróirí:
- Ligeann sé duit fáil réidh le rioscaí agus cód á imscaradh le hearráidí
- Cabhrú le QA i dtástáil cód
- Faigh fógraí fadhbanna go tapa
- Cumas chun earráidí a shocrú go tapa
- Taispeántas áisiúil earráidí a fháil sa phainéal riaracháin
- Earráidí a shórtáil de réir deighleog úsáideora/bhrabhsálaí
Príomhchúiseanna le Príomhoifigeach Feidhmiúcháin / Tionscadal Ceannais
- Sábháil airgead (Is féidir Sentry a shuiteáil ar do fhreastalaithe)
- Faigh aiseolas úsáideora
- A thuiscint cad atá cearr le do thionscadal i bhfíor-am
- Tuiscint a fháil ar líon na bhfadhbanna atá ag daoine le d'aip
- Cabhair chun áiteanna a aimsiú ina ndearna d'fhorbróirí botún
Sílim go mbeadh suim ag na forbróirí san alt seo ar an gcéad dul síos. Is féidir leat an liosta cúiseanna seo a úsáid freisin chun cur ina luí ar do bhainisteoir Sentry a chomhtháthú.
Bí cúramach leis an mír dheireanach ar an liosta gnó.
An bhfuil suim agat cheana féin?
Cad é Sentry?
Is feidhmchlár rianaithe fabhtanna foinse oscailte é Sentry a chuidíonn le forbróirí tuairteanna a rianú agus a shocrú i bhfíor-am. Ná déan dearmad go gceadaíonn an feidhmchlár duit éifeachtúlacht a mhéadú agus taithí úsáideora a fheabhsú. Tacaíonn Sentry le JavaScript, Nód, Python, PHP, Ruby, Java agus teangacha ríomhchlárúcháin eile.
2. Logáil isteach agus cruthaigh tionscadal
- Oscail do chuntas Sentry. Seans go mbeidh ort síniú isteach. (Tabhair faoi deara gur féidir Sentry a shuiteáil ar do fhreastalaithe)
- Is é an chéad chéim eile ná tionscadal a chruthú
- Roghnaigh do theanga ón liosta. (Táimid chun React a roghnú. Cliceáil "Cruthaigh Tionscadal")
Socraigh d'iarratas. Is féidir leat sampla bunúsach a fheiceáil thíos de conas Sentry a chomhtháthú isteach i gcoimeádán:
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;
}
}
}Tá draoi cabhrach ag Sentry chun cabhrú leat tuiscint a fháil ar cad ba cheart duit a dhéanamh. Is féidir leat na céimeanna thíos a leanúint. Ba mhaith liom a thaispeáint duit conas do chéad láimhseálaí earráide a chruthú. Go hiontach, tá tionscadal cruthaithe againn! A ligean ar bogadh ar aghaidh go dtí an chéad chéim eile
3. Comhtháthú Frithghníomh agus Sentry
Ní mór duit an pacáiste npm a shuiteáil i do thionscadal.
npm i @sentry/browserTosaigh Sentry i do choimeádán:
Sentry.init({
// dsn: #dsnUrl,
});Tá an DSN suite i dTionscadail -> Socruithe -> Eochracha Cliant. Is féidir leat eochracha cliant a aimsiú sa bharra cuardaigh.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Rianú an chéad earráid
Mar shampla, d'úsáid mé feidhmchlár ceoil simplí leis an Deezer API. Is féidir leat é a fheiceáil . Ní mór dúinn earráid a chruthú. Bealach amháin is ea rochtain a fháil ar an maoin “neamhshainithe”.
Ní mór dúinn a chruthú cnaipe a glaonna consól.log с ríomhphost.úsáideoir. Tar éis an ghnímh seo, ba cheart dúinn teachtaireacht earráide a fháil: Earráid Chineál Neamhghafa (Ní féidir an t-airí ó neamhshainithe a léamh email) mar gheall ar easpa réad úsáideora. Is féidir leat úsáid a bhaint freisin Eisceacht javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Breathnaíonn an coimeádán iomlán mar seo:
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);Tar éis duit an cnaipe seo a chomhtháthú, ba cheart duit é a thástáil sa bhrabhsálaí.
Tá an chéad botún againn
Cé hú!
Má chliceálann tú ar an earráid ceanntásc, feicfidh tú an rian cruachta.
Breathnaíonn na teachtaireachtaí go dona. Ar ndóigh, tá teachtaireachtaí earráide feicthe againn gan a thuiscint cá bhfuil an cód seo. De réir réamhshocraithe baineann sé le léarscáil foinse in ReactJS toisc nach bhfuil siad cumraithe.
Ba mhaith liom freisin treoracha a sholáthar chun an léarscáil foinseach a shocrú, ach d’fhág sin go mbeadh an post seo i bhfad níos faide ná mar a bhí beartaithe agam.
Is féidir leat staidéar a dhéanamh ar an ábhar seo . Má tá suim agat san alt seo, foilseoidh sé an dara cuid faoi chomhtháthú léarscáileanna foinse. Mar sin cliceáil ar níos mó likes agus liostáil le gan a chailleann an dara cuid.
5. Úsáid Sentry le críochphointe API
ceart go leor. Tá an eisceacht javascript clúdaithe againn sna hailt roimhe seo. Mar sin féin, cad a dhéanaimid le hearráidí XHR?
Tá láimhseáil earráide saincheaptha ag Sentry freisin. Úsáid mé é le haghaidh rianú fabhtanna api.
Sentry.captureException(err)Is féidir leat ainm an fhabht, leibhéal, sonraí a chur leis, sonraí úsáideora uathúla trí d’aip, ríomhphost, etc.
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));
}
});Ba mhaith liom feidhm chineálach a úsáid don API gabhála.
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);
};Iompórtáil an fheidhm seo i nglao 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));
}
});
};Déanaimis na modhanna a sheiceáil:
- setLeibheal ligeann sé duit earráid leibhéalta a chur isteach sa phainéal sentry. Tá airíonna aige - ‘marfach’, ‘earráid’, ‘rabhadh’, ‘logáil’, ‘info, ‘debug’, ‘criticiúil’).
- setUser cuidíonn sé le haon sonraí úsáideora a shábháil (id, seoladh ríomhphoist, plean íocaíochta, etc.).
- setExtra ligeann duit aon sonraí a theastaíonn uait a shocrú, mar shampla, stór.
Más mian leat aiseolas úsáideora ar fhabht, ba cheart duit an fheidhm showReportDialog a úsáid.
Sentry.showReportDialog();Conclúid:
Inniu rinneamar cur síos ar cheann de na bealaí chun Sentry a chomhtháthú in iarratas React.
→ Telegram ag comhrá le
Foinse: will.com