Taa, m ga-agwa gị maka nsochi mperi ozugbo na ngwa React. A naghị ejikarị ngwa n'ihu maka nsochi njehie. Ụfọdụ ụlọ ọrụ na-ewepụkarị nsochi ahụhụ, na-alaghachi na ya mgbe akwụkwọ, ule, wdg. Otú ọ dị, ọ bụrụ na ị nwere ike ịgbanwe ngwaahịa gị ka mma, mgbe ahụ mee ya!
1. Gịnị mere ị chọrọ Sentry?
Echere m na ị nwere mmasị na nsuso chinchi n'oge mmepụta
Ị chere na nke a ezughị?
Ọ dị mma, ka anyị lelee nkọwapụta.
Ihe kacha mkpa ndị mmepe ga-eji Sentry:
- Na-enye gị ohere ịzenarị ihe egwu mgbe ị na-ebuga koodu nwere mperi
- Nyere QA aka na nyocha koodu
- Nata ozi ngwa ngwa gbasara nsogbu
- Ikike imezi mperi ngwa ngwa
- Inweta a adaba ngosi nke njehie na admin panel
- Hazie mperi site na ngalaba onye ọrụ/nchọgharị
Isi ihe kpatara ọrụ CEO/Lead
- Chekwaa ego (enwere ike itinye ntinye na sava gị)
- Inweta nzaghachi onye ọrụ
- Ịghọta ihe na-adịghị mma na ọrụ gị ozugbo
- Ịghọta ọnụọgụ nsogbu ndị mmadụ nwere na ngwa gị
- Nyere gị aka ịchọta ebe ndị nrụpụta gị mehiere
Echere m na ndị mmepe ga-enwe mmasị na isiokwu a mbụ. Ị nwekwara ike iji ndepụta ihe kpatara ya iji mee ka onye isi gị kwenye itinye Sentry.
Kpachara anya na ihe ikpeazụ na ndepụta azụmahịa.
Ị nwere mmasị ugbua?
Kedu ihe bụ Sentry?
Sentry bụ ngwa nleba anya ahụhụ nke mepere emepe na-enyere ndị mmepe aka ịgbaso ma dozie mkpọka ozugbo. Echefula na ngwa ahụ na-enye gị ohere ịbawanye arụmọrụ ma melite ahụmịhe onye ọrụ. Sentry na-akwado JavaScript, Node, Python, PHP, Ruby, Java na asụsụ mmemme ndị ọzọ.
2. Nbanye ma mepụta oru ngo
- Mepee akaụntụ Sentry gị. Ị nwere ike ịbanye. (Biko mara na enwere ike itinye Sentry na sava gị)
- Nzọụkwụ ọzọ bụ ịmepụta ọrụ
- Họrọ asụsụ gị na ndetu. (Anyị ga-ahọrọ React. Pịa "Mepụta Project").
Hazie ngwa gị. Ị nwere ike ịhụ ihe atụ bụ isi otu esi etinye Sentry n'ime akpa dị n'okpuru:
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 nwere Ọkachamara na-enyere gị aka ịchọpụta ihe ị ga-eme ọzọ. Ị nwere ike ịgbaso usoro ndị a. Achọrọ m igosi gị otu esi emepụta onye na-ahụ maka njehie mbụ gị. Ọ dị mma, anyị ekepụtala ọrụ! Ka anyị gaa n'ihu na nzọụkwụ ọzọ
3. Mmeghachi omume na Sentry mwekota
Ị ga-etinyerịrị ngwugwu npm na ọrụ gị.
npm i @sentry/browserMalite Sentry n'ime akpa gị:
Sentry.init({
// dsn: #dsnUrl,
});DSN dị na Projects -> Ntọala -> igodo ndị ahịa. Ị nwere ike ịchọta igodo ndị ahịa na ogwe ọchụchọ.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Na-enyocha njehie mbụ
Dịka ọmụmaatụ, ejiri m ngwa egwu dị mfe na Deezer API. Ị nwere ike ịhụ ya . Anyị kwesịrị ịmepụta njehie. Otu ụzọ bụ ịnweta ihe onwunwe "undefined".
Anyị kwesịrị ịmepụta bọtịnụ na-akpọ console.log с onye ọrụ.email. Mgbe emechara ihe a anyị kwesịrị ịnata ozi njehie: TypeError ejideghị (enweghị ike ịgụ ihe onwunwe sitere na enweghị nkọwa email) n'ihi ihe onye ọrụ efu efu. Ị nwekwara ike iji Ewepu Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Akpa ahụ dum dị ka nke a:
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);Mgbe ị jikọtara bọtịnụ a, ị ga-anwale ya na ihe nchọgharị ahụ.
Anyị nwere njehie mbụ anyị
Kuo-hoo!
Ọ bụrụ na ịpịrị mperi nkụnye eji isi mee, ị ga-ahụ nchọta nchịkọta.
Ozi ndị ahụ dị njọ. N'ezie, anyị ahụla ozi njehie na-aghọtaghị ebe koodu ahụ dị. Site na ndabara, anyị na-ekwu maka maapụ isi mmalite na ReactJS n'ihi na ahazighị ha.
Ọ ga-amasị m ịnye ntụziaka maka ịtọ maapụ isi mmalite, mana nke ahụ ga-eme ka akụkọ a dị ogologo karịa ka m bu n'obi.
Ị nwere ike mụọ isiokwu a . Ọ bụrụ na ị nwere mmasị na edemede a, ga-ebipụta akụkụ nke abụọ gbasara njikọta map isi mmalite. Yabụ, kụọ mmasị ndị ọzọ wee denye aha ka ị ghara ịhapụ akụkụ nke abụọ.
5. Ojiji sentiri na njedebe njedebe API
Ọ DỊ MMA. Anyị ekpuchila mwepu javascript na paragraf ndị gara aga. Agbanyeghị, gịnị ka anyị ga-eme maka njehie XHR?
Sentry nwekwara njikwa njehie omenala. Eji m ya wee soro mperi api.
Sentry.captureException(err)Ị nwere ike hazie aha njehie, ọkwa, tinye data, data njirimara pụrụ iche site na iji ngwa gị, email, wdg.
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));
}
});Ọ ga-amasị m iji ọrụ mkpokọta maka API ejidere.
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);
};Bubata ọrụ a na oku api gị.
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));
}
});
};Ka anyị lelee usoro ndị a:
- setLevel na-enye gị ohere itinye njehie larịị n'ime dashboard sentry. Ọ nwere akụrụngwa - 'na-egbu egbu', 'njehie', 'ịdọ aka ná ntị', 'log', 'ozi,' debug', 'dị mkpa').
- setUser na-enyere aka ịchekwa data onye ọrụ ọ bụla (id, adreesị ozi-e, atụmatụ ịkwụ ụgwọ, wdg).
- setExtra na-enye gị ohere ịkọwa data ọ bụla ịchọrọ, dịka ọmụmaatụ, chekwaa.
Ọ bụrụ na ịchọrọ ịnweta nzaghachi onye ọrụ gbasara ahụhụ, ị ga-eji ọrụ showReportDialog.
Sentry.showReportDialog();Mmechi:
Taa, anyị kọwara otu ụzọ isi tinye Sentry n'ime ngwa React.
→ Mkparịta ụka Telegram site na
isi: www.habr.com