A yau zan gaya muku game da bin diddigin kuskuren ainihin lokacin a cikin aikace-aikacen React. Ba a saba amfani da aikace-aikacen gaba-gaba don bin diddigin kuskure. Wasu kamfanoni galibi suna kashe bin diddigin kwaro, komawa zuwa gare ta bayan takardu, gwaje-gwaje, da sauransu. Koyaya, idan zaku iya canza samfuran ku don mafi kyau, to kawai kuyi shi!
1. Me yasa kuke buƙatar Sentry?
Ina tsammanin kuna sha'awar bin kwaro yayin samarwa
Kuna ganin wannan bai isa ba?
To, bari mu duba cikakkun bayanai.
Manyan dalilan masu haɓaka amfani da Sentry:
- Yana ba ku damar guje wa haɗari lokacin tura lamba tare da kurakurai
- Taimakawa QA tare da gwajin lamba
- Karɓi sanarwar gaggawa game da matsaloli
- Ikon gyara kurakurai da sauri
- Samun dace nuni na kurakurai a cikin admin panel
- Tsara kurakurai ta bangaren mai amfani/browser
Babban dalilai na Shugaba/Jagoran aikin
- Ajiye kuɗi (ana iya shigar da saƙo akan sabar ku)
- Samun ra'ayoyin masu amfani
- Fahimtar abin da ke damun aikin ku a ainihin lokacin
- Fahimtar adadin matsalolin da mutane ke da ita tare da app ɗin ku
- Taimaka muku nemo wuraren da masu haɓaka ku suka yi kuskure
Ina tsammanin masu haɓakawa za su fara sha'awar wannan labarin. Hakanan zaka iya amfani da wannan jerin dalilai don shawo kan shugaban ku don haɗa Sentry.
Yi hankali da abu na ƙarshe akan jerin kasuwanci.
Shin kuna sha'awar?
Menene Sentry?
Sentry shine buɗe tushen bug aikace-aikacen sa ido wanda ke taimaka wa masu haɓakawa su bibiyi da gyara hadarurruka a cikin ainihin lokaci. Kar ku manta cewa aikace-aikacen yana ba ku damar haɓaka aiki da haɓaka ƙwarewar mai amfani. Sentry yana goyan bayan JavaScript, Node, Python, PHP, Ruby, Java da sauran harsunan shirye-shirye.
2. Shiga da ƙirƙirar aikin
- Bude asusun Sentry na ku. Mai yiwuwa ka shiga. (Lura cewa ana iya shigar da Sentry akan sabar ku)
- Mataki na gaba shine ƙirƙirar aiki
- Zaɓi harshen ku daga lissafin. (Za mu zaɓi React. Danna "Create Project")
Keɓance aikace-aikacen ku. Misali na asali na yadda ake haɗa Sentry cikin akwati ana iya gani a ƙasa:
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 yana da mayen mai taimako don taimaka muku gano abin da ya kamata ku yi na gaba. Kuna iya bin waɗannan matakan. Ina so in nuna muku yadda ake ƙirƙirar mai sarrafa kuskurenku na farko. Mai girma, mun ƙirƙiri aikin! Mu ci gaba zuwa mataki na gaba
3. React da Sentry hadewa
Dole ne ku shigar da kunshin npm a cikin aikin ku.
npm i @sentry/browserFara Sentry a cikin akwati:
Sentry.init({
// dsn: #dsnUrl,
});DSN yana cikin Ayyuka -> Saituna -> Maɓallan Aboki. Kuna iya nemo maɓallan abokin ciniki a mashigin bincike.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Bibiyar kuskuren farko
Misali, na yi amfani da aikace-aikacen kiɗa mai sauƙi tare da Deezer API. Kuna iya gani . Muna buƙatar ƙirƙirar kuskure. Hanya ɗaya ita ce samun dama ga kadarorin "wanda ba a bayyana ba".
Muna buƙatar ƙirƙirar maɓallin da ke kira console.log с mai amfani.email. Bayan wannan aikin ya kamata mu sami saƙon kuskure: Kuskuren Nau'in da ba a kama shi ba (ba za a iya karanta kadarorin da ba a bayyana ba email) saboda rashin abin mai amfani. Hakanan zaka iya amfani Banda Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Duk kwandon yayi kama da haka:
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);Bayan haɗa wannan maɓallin, ya kamata ku gwada shi a cikin mai bincike.
Muna da kuskurenmu na farko
Ku-hoo!
Idan ka danna kan kuskuren kai, za ka ga alamar tari.
Saƙonnin ba su da kyau. Tabbas mun ga saƙonnin kuskure ba tare da fahimtar inda lambar yake ba. Ta hanyar tsoho muna magana ne game da taswirar tushen a cikin ReactJS saboda ba a daidaita su ba.
Ina kuma so in ba da umarni don saita taswirar tushe, amma hakan zai sa wannan labarin ya fi tsayi fiye da yadda nake so.
Kuna iya nazarin wannan batu . Idan kuna sha'awar wannan labarin, zai buga kashi na biyu game da haɗin taswirar tushe. Don haka, danna ƙarin likes kuma ku yi subscribing don kar a rasa kashi na biyu.
5. Amfani Sentry tare da ƙarshen batu API
KO. Mun rufe ban da javascript a cikin sakin layi na baya. Koyaya, menene zamuyi game da kurakuran XHR?
Sentry kuma yana da sarrafa kuskuren al'ada. Na yi amfani da shi don gano kurakuran API.
Sentry.captureException(err)Kuna iya tsara sunan kuskure, matakin, ƙara bayanai, keɓaɓɓen bayanan mai amfani ta amfani da aikace-aikacenku, imel, da sauransu.
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));
}
});Ina so in yi amfani da aikin gama-gari don API ɗin kama.
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);
};Shigo wannan aikin a cikin kiran API ɗin ku.
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));
}
});
};Bari mu duba hanyoyin:
- saitaLevel yana ba ku damar saka kuskuren matakin a cikin dashboard ɗin sentry. Yana da kaddarorin - 'mai mutuwa', 'kuskure', 'gargadi', 'log', 'bayanai, 'debug', 'mahimmanci').
- saitiUser yana taimakawa wajen adana duk bayanan mai amfani (id, adireshin imel, shirin biyan kuɗi, da sauransu).
- saitaExtra yana ba ku damar saka kowane bayanan da kuke buƙata, misali, adanawa.
Idan kana son samun ra'ayin mai amfani game da kwaro, yakamata kayi amfani da aikin showReportDialog.
Sentry.showReportDialog();Kammalawa:
A yau mun bayyana hanya ɗaya don haɗa Sentry cikin aikace-aikacen React.
→ Tattaunawa ta Telegram ta
source: www.habr.com