An-diugh innsidh mi dhut mu lorg mhearachdan fìor-ùine ann an tagradh React. Mar as trice chan eil tagradh aghaidh air a chleachdadh airson lorg mhearachdan. Bidh cuid de chompanaidhean gu tric a’ cur stad air bugaichean, a’ tilleadh thuige às deidh sgrìobhainnean, deuchainnean, msaa. Ach, mas urrainn dhut an toradh agad atharrachadh airson na b’ fheàrr, dìreach dèan e!
1. Carson a tha feum agad air Sentry?
Tha mi a’ gabhail ris gu bheil ùidh agad ann an tracadh bhiteagan aig àm cinneasachaidh.
A bheil thu a’ smaoineachadh nach eil seo gu leòr?
Ceart gu leòr, leig dhuinn sùil a thoirt air mion-fhiosrachadh.
Na prìomh adhbharan airson a bhith a’ cleachdadh seòlaidhean airson luchd-leasachaidh:
- A ’leigeil leat faighinn cuidhteas cunnartan nuair a bhios tu a’ cleachdadh còd le mearachdan
- Cuidich QA ann an deuchainn còd
- Faigh fios mu dhuilgheadasan gu sgiobalta
- Comas mearachdan a cheartachadh gu sgiobalta
- Faigh taisbeanadh goireasach de mhearachdan anns a ’phannal rianachd
- Deasaich mearachdan a rèir roinn cleachdaiche / brobhsair
Prìomh adhbharan airson Ceannard / Prìomh phròiseact
- Sàbhail airgead (faodar Sentry a chuir a-steach air na frithealaichean agad)
- Faigh fios air ais bho luchd-cleachdaidh
- A’ tuigsinn dè tha ceàrr air do phròiseact ann an àm fìor
- Tuigsinn an àireamh de dhuilgheadasan a tha aig daoine leis an aplacaid agad
- Cuidich thu gus àiteachan a lorg far an do rinn an luchd-leasachaidh mearachdan
Tha mi a’ smaoineachadh gum biodh ùidh aig an luchd-leasachaidh san artaigil seo sa chiad àite. Faodaidh tu cuideachd an liosta adhbharan seo a chleachdadh gus toirt a chreidsinn air do cheannard Sentry a thoirt a-steach.
Bi faiceallach leis an rud mu dheireadh air an liosta gnìomhachais.
A bheil ùidh agad mu thràth?
Dè th' ann an Sentry?
Is e aplacaid tracadh bug stòr fosgailte a th’ ann an Sentry a chuidicheas luchd-leasachaidh gus tubaistean a lorg agus a cheartachadh ann an àm fìor. Na dì-chuimhnich gu bheil an aplacaid cuideachd a 'toirt cothrom dhut èifeachdas àrdachadh agus eòlas luchd-cleachdaidh a leasachadh. Bidh Sentry a’ toirt taic do JavaScript, Node, Python, PHP, Ruby, Java agus cànanan prògramaidh eile.
2. Log a-steach agus cruthaich pròiseact
- Fosgail do chunntas Sentry. Is dòcha gu feum thu clàradh a-steach. (Thoir an aire gum faodar Sentry a chuir a-steach air na frithealaichean agad)
- Is e an ath cheum pròiseact a chruthachadh
- Tagh do chànan bhon liosta. (Tha sinn a’ dol a thaghadh React. Briog air “Cruthaich Pròiseact”)
Stèidhich an tagradh agad. Chì thu eisimpleir bunaiteach de mar as urrainn dhut Sentry fhilleadh a-steach do shoitheach gu h-ìosal:
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;
}
}
}Tha draoidh cuideachail aig Sentry gus do chuideachadh le bhith a’ tuigsinn na bu chòir dhut a dhèanamh an ath rud. Faodaidh tu na ceumannan gu h-ìosal a leantainn. Tha mi airson sealltainn dhut mar a chruthaicheas tu a’ chiad inneal-làimhseachaidh mearachd agad. Sgoinneil, tha sinn air pròiseact a chruthachadh! Gluaisidh sinn air adhart chun ath cheum
3. Amalachadh React and Sentry
Feumaidh tu am pasgan npm a stàladh sa phròiseact agad.
npm i @sentry/browserTòisich Sentry anns a’ ghobhar agad:
Sentry.init({
// dsn: #dsnUrl,
});Tha an DSN suidhichte ann am Pròiseactan -> Roghainnean -> Iuchraichean Cliant. Gheibh thu iuchraichean teachdaiche anns a’ bhàr sgrùdaidh.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. A 'tracadh a' chiad mhearachd
Mar eisimpleir, chleachd mi tagradh ciùil sìmplidh leis an Deezer API. Chì thu e . Feumaidh sinn mearachd a chruthachadh. Is e aon dòigh faighinn chun togalach “neo-mhìnichte”.
Feumaidh sinn putan a chruthachadh a bhios a’ gairm consòil.log с cleachdaiche.email. Às deidh na gnìomh seo, bu chòir dhuinn teachdaireachd mearachd fhaighinn: Uncaught TypeError (chan urrainn dhuinn seilbh a leughadh bho neo-mhìnichte email) air sgàth nì cleachdaiche a dhìth. Faodaidh tu cuideachd a chleachdadh eisgeachd javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Tha an soitheach gu lèir a’ coimhead 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);Às deidh dhut am putan seo a thoirt a-steach, bu chòir dhut a dhearbhadh sa bhrobhsair.
Tha a’ chiad mhearachd againn
Cò-hoo!
Ma bhriogas tu air a’ mhearachd cinn, chì thu lorg na stac.
Tha na teachdaireachdan a’ coimhead dona. Gu dearbh, tha sinn air teachdaireachdan mearachd fhaicinn gun a bhith a 'tuigsinn càite a bheil an còd seo. Gu gnàthach tha e mu dheidhinn mapa stòr ann an ReactJS oir chan eil iad air an rèiteachadh.
Bu mhath leam cuideachd stiùireadh a thoirt seachad mu bhith a’ stèidheachadh a’ mhapa stòr, ach dhèanadh sin am post seo tòrr nas fhaide na bha dùil agam.
Faodaidh tu an cuspair seo a sgrùdadh . Ma tha ùidh agad san artaigil seo, foillsichidh sinn an dàrna pàirt mu amalachadh mapa stòr. Mar sin, buail barrachd likes agus fo-sgrìobhadh gu gus nach caill thu an dàrna pàirt.
5. Cleachdadh Sgaoileadh le puing crìochnachaidh API
ceart gu leòr. Tha sinn air an eisgeachd javascript a chòmhdach anns na paragrafan roimhe seo. Ach, dè a nì sinn mu mhearachdan XHR?
Tha làimhseachadh mearachd àbhaisteach aig Sentry cuideachd. Chleachd mi e airson lorg api bug.
Sentry.captureException(err)Faodaidh tu ainm a’ bhiast, ìre, dàta a chuir ris, dàta cleachdaiche gun samhail tron app agad, post-d, msaa.
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));
}
});Bu mhath leam gnìomh coitcheann a chleachdadh airson an API glacaidh.
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);
};Cuir a-steach an gnìomh seo ann an gairm 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));
}
});
};Feuch gun dèan sinn sgrùdadh air na dòighean:
- seata Ìre a’ leigeil leat mearachd ìre a chuir a-steach don deas-bhòrd sentry. Tha feartan aige - 'marbhtach', 'mearachd', 'rabhadh', 'log', 'fiosrachadh,' deasbaid ',' èiginneach ').
- cleachdaiche seata a’ cuideachadh le bhith a’ sàbhaladh dàta cleachdaiche sam bith (id, seòladh puist-d, plana pàighidh, msaa).
- seata a bharrachd a 'leigeil leat dàta sam bith a dh' fheumas tu a shuidheachadh, mar eisimpleir, stòr.
Ma tha thu ag iarraidh fios air ais bho luchd-cleachdaidh air bug, bu chòir dhut an gnìomh showReportDialog a chleachdadh.
Sentry.showReportDialog();Co-dhùnadh:
An-diugh thug sinn cunntas air aon de na dòighean air Sentry fhilleadh a-steach do thagradh React.
→ Telegram cabadaich le
Source: www.habr.com