I kēia lā, e haʻi wau iā ʻoe e pili ana i ka nānā ʻana i ka hewa manawa maoli i kahi noi React. ʻAʻole i hoʻohana pinepine ʻia kahi noi mua no ka nānā ʻana i nā hewa. Hoʻopau pinepine kekahi mau ʻoihana i ka nānā ʻana i ka bug, hoʻi i laila ma hope o ka palapala, nā hoʻokolohua, a me nā mea ʻē aʻe. Eia naʻe, inā hiki iā ʻoe ke hoʻololi i kāu huahana no ka maikaʻi, a laila e hana wale!
1. No ke aha ʻoe e pono ai iā Sentry?
Manaʻo wau makemake ʻoe i ka nānā ʻana i nā pōpoki i ka wā hana
Manaʻo ʻoe ʻaʻole lawa kēia?
ʻAe, e nānā kākou i nā kikoʻī.
ʻO nā kumu nui e hoʻohana ai nā mea hoʻomohala iā Sentry:
- Hāʻawi iā ʻoe e pale i nā pilikia i ka wā e kau ana i nā code me nā hewa
- Kōkua iā QA me ka hoʻāʻo code
- Loaʻa nā leka hoʻomaopopo wikiwiki e pili ana i nā pilikia
- Hiki ke hoʻoponopono koke i nā hewa
- Loaʻa i kahi hōʻike kūpono o nā hewa i ka papa admin
- Hoʻokaʻawale i nā hewa e ka ʻāpana mea hoʻohana/polokalamu
Nā kumu nui no ka papahana CEO/Lead
- Mālama i ke kālā (Hiki ke hoʻokomo ʻia ʻo Sentry ma kāu mau kikowaena)
- Loaʻa ka manaʻo o ka mea hoʻohana
- Ka hoʻomaopopo ʻana i ka hewa o kāu pāhana i ka manawa maoli
- Ka hoʻomaopopo ʻana i ka nui o nā pilikia i loaʻa i ka poʻe me kāu polokalamu
- Kōkua iā ʻoe e ʻimi i nā wahi i hana hewa ai kāu mau mea hoʻomohala
Manaʻo wau e makemake mua nā mea hoʻomohala i kēia ʻatikala. Hiki iā ʻoe ke hoʻohana i kēia papa inoa o nā kumu e hōʻoiaʻiʻo ai i kou haku e hoʻohui iā Sentry.
E akahele i ka mea hope loa ma ka papa inoa ʻoihana.
Ua hoihoi paha ʻoe?
He aha ka Sentry?
ʻO Sentry kahi palapala hoʻopalekana kumu kumu e kōkua ai i nā mea hoʻomohala e nānā a hoʻoponopono i nā pōpilikia i ka manawa maoli. Mai poina e hiki i ka palapala noi ke hoʻonui i ka pono a hoʻomaikaʻi i ka ʻike mea hoʻohana. Kākoʻo ʻo Sentry i ka JavaScript, Node, Python, PHP, Ruby, Java a me nā ʻōlelo papahana ʻē aʻe.
2. E komo a hana i kahi papahana
- E wehe i kāu moʻokāki Sentry. Pono paha ʻoe e komo. (E ʻoluʻolu e hiki ke hoʻokomo ʻia ʻo Sentry ma kāu mau kikowaena)
- ʻO ka hana aʻe e hana i kahi papahana
- E koho i kāu ʻōlelo mai ka papa inoa. (E koho mākou i React. Kaomi "Create Project")
Hoʻopilikino i kāu noi. Hiki ke ʻike ʻia ma lalo nei kahi hiʻohiʻona kumu o ka hoʻohui ʻana iā Sentry i loko o kahi pahu.
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;
}
}
}Loaʻa iā Sentry kahi Wizard kōkua e kōkua iā ʻoe e noʻonoʻo i kāu mea e hana ai ma hope. Hiki iā ʻoe ke hahai i kēia mau ʻanuʻu. Makemake wau e hōʻike iā ʻoe pehea e hana ai i kāu mea hoʻokele hewa mua. Nui, ua hana mākou i kahi papahana! E neʻe kākou i ka ʻanuʻu aʻe
3. React a me ka hoʻohui Sentry
Pono ʻoe e hoʻokomo i ka pūʻolo npm i kāu papahana.
npm i @sentry/browserE hoʻomaka i ka Sentry i kāu pahu:
Sentry.init({
// dsn: #dsnUrl,
});Aia ka DSN ma Projects -> Settings -> Client Keys. Hiki iā ʻoe ke loaʻa nā kī o ka mea kūʻai aku ma ka pahu hulina.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Ka hahai ana i ka hewa mua
No ka laʻana, ua hoʻohana wau i kahi noi mele maʻalahi me ka Deezer API. Hiki iā ʻoe ke ʻike . Pono mākou e hana i kahi hewa. ʻO kekahi ala ʻo ke komo ʻana i ka waiwai "ʻaʻole i wehewehe ʻia".
Pono mākou e hana i kahi pihi kelepona console.log с mea hoʻohana.leka uila. Ma hope o kēia hana e loaʻa iā mākou kahi memo hewa: Uncaught TypeError (ʻaʻole hiki ke heluhelu i ka waiwai mai undefined email) ma muli o ka nele mea hoʻohana. Hiki iā ʻoe ke hoʻohana Hoʻokoe Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Penei ke ano o ka ipu a pau:
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);Ma hope o ka hoʻohui ʻana i kēia pihi, pono ʻoe e hoʻāʻo iā ia ma ka polokalamu kele pūnaewele.
Loaʻa iā mākou kā mākou hewa mua
Whoo-hoo!
Inā ʻoe e kaomi i ka hewa poʻomanaʻo, e ʻike ʻoe i kahi trace stack.
He ʻino nā memo. ʻOiaʻiʻo ua ʻike mākou i nā memo hewa me ka ʻole o ka hoʻomaopopo ʻana i kahi o ke code. Ma ka maʻamau ke kamaʻilio nei mākou e pili ana i ka palapala kumu ma ReactJS no ka mea ʻaʻole lākou i hoʻonohonoho ʻia.
Makemake au e hāʻawi i nā ʻōlelo aʻoaʻo no ka hoʻonohonoho ʻana i ka palapala kumu, akā ʻoi aku ka lōʻihi o kēia ʻatikala ma mua o kaʻu i manaʻo ai.
Hiki iā ʻoe ke aʻo i kēia kumuhana . Inā makemake ʻoe i kēia ʻatikala, e hoʻopuka i ka ʻāpana ʻelua e pili ana i ka hoʻohui ʻāina kumu. No laila, e kaomi i nā makemake hou aʻe a kau inoa iā i ʻole e poina i ka ʻāpana ʻelua.
5. Hoʻohana Hoʻounaʻia me ka helu hope API
OK. Ua uhi mākou i ka ʻokoʻa javascript i nā paukū mua. Akā, he aha kā mākou e hana ai e pili ana i nā hewa XHR?
Loaʻa iā Sentry ka lawelawe hewa maʻamau. Ua hoʻohana au iā ia e hahai i nā hewa api.
Sentry.captureException(err)Hiki iā ʻoe ke hana i ka inoa hewa, pae, hoʻohui i ka ʻikepili, ka ʻikepili mea hoʻohana kūikawā me ka hoʻohana ʻana i kāu noi, leka uila, 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));
}
});Makemake au e hoʻohana i kahi hana maʻamau no ka API hopu.
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);
};Hoʻokomo i kēia hana ma kāu kelepona 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));
}
});
};E nānā kākou i nā ʻano hana:
- setLevel hiki iā ʻoe ke hoʻokomo i kahi hewa pae i loko o ka dashboard kiaʻi. Loaʻa iā ia nā waiwai - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser kōkua i ka mālama ʻana i nā ʻikepili mea hoʻohana (id, leka uila, hoʻolālā uku, etc.).
- setExtra hiki iā ʻoe ke kuhikuhi i nā ʻikepili āu e pono ai, no ka laʻana, hale kūʻai.
Inā makemake ʻoe e loaʻa ka manaʻo o ka mea hoʻohana e pili ana i kahi bug, pono ʻoe e hoʻohana i ka hana showReportDialog.
Sentry.showReportDialog();Panina:
I kēia lā ua wehewehe mākou i kahi ala e hoʻohui ai iā Sentry i kahi noi React.
→ Kūkākūkā Telegram na
Source: www.habr.com