I tenei ra ka korero atu ahau ki a koe mo te tirotiro hapa i te waa tuuturu i roto i te tono React. Ko te tono o mua kaore i te whakamahia mo te aroturuki hapa. Ko etahi o nga kamupene he maha nga wa ka whakakorehia te aroturuki pepeha, ka hoki mai ano ki muri i nga tuhinga, nga whakamatautau, me era atu. Heoi, mena ka taea e koe te whakarereke i to hua mo te pai ake, me mahi noa!
1. He aha koe e hiahia ai ki te Sentry?
Ki taku whakaaro kei te pirangi koe ki te whai i nga pepeha i te wa e whakaputa ana
Ki to whakaaro kaore e ranea tenei?
Kaati, me titiro ki nga korero.
Ko nga take nui mo nga kaihanga ki te whakamahi i te Sentry:
- Ka taea e koe te karo i nga tupono ka tukuna he waehere me nga hapa
- Awhina i te QA ki te whakamatautau waehere
- Whiwhi whakamohiotanga tere mo nga raru
- Te kaha ki te whakatika tere i nga hapa
- Te whiwhi whakaaturanga watea o nga hapa i roto i te papa whakahaere
- Kōmaka hapa mā te wāhanga kaiwhakamahi/pūtirotiro
Nga take matua mo te kaupapa Tumuaki/Arahi
- Whakaorangia te moni (Ka taea te whakauru i te Kaitiaki ki o tuunga)
- Te whiwhi urupare a te kaiwhakamahi
- Te mohio he aha te he o to kaupapa i roto i te waa
- Te mohio ki te maha o nga raru e pa ana ki nga tangata mo to taupānga
- Awhina koe ki te rapu waahi i pohehe ai o kaihanga
Ki taku whakaaro ka aro mai nga kaihanga ki tenei tuhinga tuatahi. Ka taea hoki e koe te whakamahi i tenei rarangi take hei whakatenatena i to rangatira ki te whakauru i a Sentry.
Kia tupato ki te mea whakamutunga i te rarangi pakihi.
Kei te pirangi kē koe?
He aha te Sentry?
Ko te Sentry he tono aroturuki pepeke puna tuwhera hei awhina i nga kaiwhakawhanake ki te whai me te whakatika i nga tukinga i te waa tuuturu. Kaua e wareware ko te tono ka taea e koe te whakanui ake i te pai me te whakapai ake i te wheako kaiwhakamahi. Ka tautoko a Sentry i te JavaScript, Node, Python, PHP, Ruby, Java me etahi atu reo hotaka.
2. Takiuru me te hanga kaupapa
- Whakatūwherahia tō pūkete Sentry. Me takiuru pea koe. (Kia mahara ka taea te whakauru i a Sentry ki runga i o tūmau)
- Ko te mahi e whai ake nei ko te hanga kaupapa
- Tīpakohia tō reo mai i te rārangi. (Ka tohua e matou te React. Pāwhiritia te "Waihanga Kaupapa")
Whakaritehia to tono. He tauira taketake mo te whakauru i a Sentry ki roto i te ipu ka kitea i raro nei:
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;
}
}
}He Ruānuku awhina a Sentry hei awhina i a koe ki te whakaaro me aha koe ka whai ake. Ka taea e koe te whai i enei kaupae. E hiahia ana ahau ki te whakaatu ki a koe me pehea te hanga i to kaihautu hapa tuatahi. He pai, kua hanga e matou he kaupapa! Kia neke tatou ki te taahiraa e whai ake nei
3. React and Sentry integration
Me whakauru e koe te putea npm ki to kaupapa.
npm i @sentry/browserArawhiti te Sentry i roto i to ipu:
Sentry.init({
// dsn: #dsnUrl,
});Ko te DSN kei roto i nga Kaupapa -> Tautuhinga -> Kī Kiritaki. Ka kitea e koe nga taviri kiritaki i te pae rapu.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Te aroturuki i te hapa tuatahi
Hei tauira, i whakamahia e ahau tetahi tono puoro ngawari me te Deezer API. Ka taea e koe te kite . Me hanga he hapa. Ko tetahi huarahi ko te uru ki te taonga "kaore i tautuhia".
Me hanga e tatou he paatene e karanga ana papatohu.log с kaiwhakamahi.īmera. I muri i tenei mahi me whiwhi tatou i te karere hapa: Hapa Momo Kaore i mau (kaore e taea te panui taonga mai i te undefined email) nā te ngaro o te ahanoa kaiwhakamahi. Ka taea hoki e koe te whakamahi Javascript okotahi.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>He penei te ahua o te ipu katoa:
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);I muri i te whakauru i tenei paatene, me whakamatau koe i roto i te tirotiro.
Kei a maatau te hapa tuatahi
Whoo-hoo!
Mena ka paatohia e koe te hapa pane, ka kite koe i tetahi tohu puranga.
He kino te ahua o nga karere. Ko te tikanga kua kite matou i nga karere hapa me te kore e mohio kei hea te waehere. Ma te taunoa e korero ana matou mo te mapi puna i ReactJS na te mea kaore i te whirihora.
Kei te pirangi ano ahau ki te tuku tohutohu mo te whakatakoto i te mapi puna, engari ka roa ake tenei tuhinga i taku i whakaaro ai.
Ka taea e koe te ako i tenei kaupapa . Mena kei te pirangi koe ki tenei tuhinga, ka whakaputahia te waahanga tuarua mo te whakauru mapi puna. Na, pa atu ki nga pai me te ohauru ki kia kore ai e ngaro te wahanga tuarua.
5. Whakamahinga Tuhinga o mua me te pito mutunga API
pai. Kua hipokina e matou te tuunga javascript i nga waahanga o mua. Heoi, ka aha tatou mo nga hapa XHR?
Kei a Sentry hoki te whakahaere hapa ritenga. I whakamahia e ahau ki te whai i nga hapa api.
Sentry.captureException(err)Ka taea e koe te whakarite i te ingoa hapa, taumata, taapiri raraunga, raraunga kaiwhakamahi ahurei ma te whakamahi i to tono, imeera, aha atu.
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));
}
});Kei te pirangi au ki te whakamahi i tetahi mahi whanui mo te 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);
};Kawemai i tenei mahi ki to waea 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));
}
});
};Kia tirohia nga tikanga:
- huingaTaumata ka taea e koe te whakauru i tetahi hapa taumata ki te papatohu kaitiaki. He āhuatanga - 'mate', 'hapa', 'whakatupato', 'takiuru', 'info, 'debug', 'arohaehae').
- SetUser ka awhina ki te tiaki i nga raraunga kaiwhakamahi (id, wahitau imeera, mahere utu, me etahi atu).
- setExtra ka taea e koe te tautuhi i nga raraunga e hiahia ana koe, hei tauira, rokiroki.
Mena kei te pirangi koe ki te tiki urupare a nga kaiwhakamahi mo tetahi pepeha, me whakamahi koe i te mahi showReportDialog.
Sentry.showReportDialog();Whakamutunga:
I tenei ra i whakaahuahia e matou tetahi huarahi ki te whakauru i a Sentry ki tetahi tono React.
→ Kōrerorero Telegram na
Source: will.com