Loni Emi yoo sọ fun ọ nipa ipasẹ aṣiṣe akoko gidi ni ohun elo React kan. Ohun elo ipari-iwaju kii ṣe deede lo fun titọpa aṣiṣe. Diẹ ninu awọn ile-iṣẹ nigbagbogbo pa ipasẹ kokoro kuro, pada si ọdọ rẹ lẹhin iwe, awọn idanwo, ati bẹbẹ lọ. Sibẹsibẹ, ti o ba le yi ọja rẹ pada fun didara, lẹhinna kan ṣe!
1. Kini idi ti o nilo Sentry?
Mo ro pe o nifẹ si ipasẹ awọn idun lakoko iṣelọpọ
Ṣe o ro pe eyi ko to?
O dara, jẹ ki a wo awọn alaye naa.
Awọn idi pataki fun awọn olupilẹṣẹ lati lo Sentry:
- Gba ọ laaye lati yago fun awọn ewu nigba fifi koodu ranṣẹ pẹlu awọn aṣiṣe
- Iranlọwọ QA pẹlu idanwo koodu
- Gba awọn iwifunni iyara nipa awọn iṣoro
- Agbara lati ṣe atunṣe awọn aṣiṣe ni kiakia
- Ngba ifihan irọrun ti awọn aṣiṣe ninu nronu abojuto
- Too awọn aṣiṣe nipasẹ olumulo/apa aṣawakiri
Akọkọ idi fun CEO / asiwaju ise agbese
- Fi owo pamọ (Ifiranṣẹ le fi sori ẹrọ lori olupin rẹ)
- Ngba esi olumulo
- Loye kini aṣiṣe pẹlu iṣẹ akanṣe rẹ ni akoko gidi
- Loye nọmba awọn iṣoro ti eniyan ni pẹlu app rẹ
- Ṣe iranlọwọ fun ọ lati wa awọn aaye nibiti awọn olupilẹṣẹ rẹ ti ṣe awọn aṣiṣe
Mo ro pe awọn Difelopa yoo nifẹ si nkan yii ni akọkọ. O tun le lo atokọ ti awọn idi lati parowa fun ọga rẹ lati ṣepọ Sentry.
Ṣọra pẹlu nkan ti o kẹhin lori atokọ iṣowo.
Ṣe o nifẹ tẹlẹ?
Kini Sentry?
Sentry jẹ ohun elo ipasẹ kokoro orisun ṣiṣi ti o ṣe iranlọwọ fun awọn olupolowo orin ati ṣatunṣe awọn ipadanu ni akoko gidi. Maṣe gbagbe pe ohun elo naa gba ọ laaye lati mu iṣẹ ṣiṣe pọ si ati ilọsiwaju iriri olumulo. Sentry ṣe atilẹyin JavaScript, Node, Python, PHP, Ruby, Java ati awọn ede siseto miiran.
2. Buwolu wọle ki o si ṣẹda ise agbese kan
- Ṣii akọọlẹ Sentry rẹ. O le ni lati wọle. (Jọwọ ṣakiyesi pe Sentry le fi sori ẹrọ lori olupin rẹ)
- Igbese ti o tẹle ni lati ṣẹda iṣẹ akanṣe kan
- Yan ede rẹ lati inu atokọ naa. (A yoo yan React. Tẹ "Ṣẹda Project")
Ṣe akanṣe ohun elo rẹ. Apeere ipilẹ ti bii o ṣe le ṣepọ Sentry sinu apoti kan ni a le rii ni isalẹ:
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 ni oṣo oluranlọwọ lati ran ọ lọwọ lati mọ ohun ti o yẹ ki o ṣe nigbamii. O le tẹle awọn igbesẹ wọnyi. Mo fẹ lati fihan ọ bi o ṣe le ṣẹda oluṣakoso aṣiṣe akọkọ rẹ. Nla, a ti ṣẹda ise agbese kan! Jẹ ki a lọ si igbesẹ ti n tẹle
3. Fesi ati Sentry Integration
O gbọdọ fi sori ẹrọ ni npm package ninu rẹ ise agbese.
npm i @sentry/browserBẹrẹ Sentry ninu apoti rẹ:
Sentry.init({
// dsn: #dsnUrl,
});DSN naa wa ni Awọn iṣẹ akanṣe -> Eto -> Awọn bọtini alabara. O le wa awọn bọtini alabara ninu ọpa wiwa.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Ipasẹ aṣiṣe akọkọ
Fun apẹẹrẹ, Mo lo ohun elo orin ti o rọrun pẹlu Deezer API. O le rii . A nilo lati ṣẹda aṣiṣe. Ọna kan ni lati wọle si ohun-ini “aimọ asọye”.
A nilo lati ṣẹda bọtini kan ti o pe console.log с olumulo.imeeli. Lẹhin iṣe yii a yẹ ki o gba ifiranṣẹ aṣiṣe kan: Aṣiṣe TypeError ti a ko mu (ko le ka ohun-ini lati aisọ asọye email) nitori sonu olumulo ohun. O tun le lo Iyatọ Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Gbogbo apoti naa dabi eyi:
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);Lẹhin iṣọpọ bọtini yii, o yẹ ki o ṣe idanwo ni ẹrọ aṣawakiri.
A ni aṣiṣe akọkọ wa
Whoo-hoo!
Ti o ba tẹ lori aṣiṣe akọsori, iwọ yoo rii itọpa akopọ kan.
Awọn ifiranṣẹ dabi buburu. Dajudaju a ti rii awọn ifiranṣẹ aṣiṣe laisi oye ibi ti koodu naa wa. Nipa aiyipada a n sọrọ nipa maapu orisun ni ReactJS nitori wọn ko tunto.
Emi yoo tun fẹ lati pese awọn ilana fun iṣeto maapu orisun, ṣugbọn iyẹn yoo jẹ ki nkan yii gun ju ti Mo pinnu lọ.
O le kọ ẹkọ yii . Ti o ba nifẹ si nkan yii, yoo ṣe atẹjade apakan keji nipa isọpọ maapu orisun. Nitorinaa, lu awọn ayanfẹ diẹ sii ki o ṣe alabapin si ki o ma ba padanu apa keji.
5. Lilo Sentry pẹlu opin ojuami API
O DARA. A ti bo imukuro JavaScript ninu awọn oju-iwe ti tẹlẹ. Sibẹsibẹ, kini a yoo ṣe nipa awọn aṣiṣe XHR?
Sentry tun ni mimu aṣiṣe aṣa. Mo lo lati tọpinpin awọn aṣiṣe api.
Sentry.captureException(err)O le ṣe akanṣe orukọ aṣiṣe, ipele, ṣafikun data, data olumulo alailẹgbẹ nipa lilo ohun elo rẹ, imeeli, ati bẹbẹ lọ.
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));
}
});Emi yoo fẹ lati lo iṣẹ jeneriki fun API apeja naa.
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);
};Ṣe agbewọle iṣẹ yii sinu ipe api rẹ.
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));
}
});
};Jẹ ki a ṣayẹwo awọn ọna:
- ipele ipele gba ọ laaye lati fi aṣiṣe ipele kan sinu dasibodu sentry. O ni awọn ohun-ini - 'apaniyan', 'aṣiṣe', 'ikilọ', 'iwọle', 'alaye,' atunkọ', 'pataki').
- setUser ṣe iranlọwọ lati fipamọ data olumulo eyikeyi (id, adirẹsi imeeli, ero isanwo, ati bẹbẹ lọ).
- ṣetoExtra faye gba o lati pato eyikeyi data ti o nilo, fun apẹẹrẹ, itaja.
Ti o ba fẹ gba esi olumulo nipa kokoro kan, o yẹ ki o lo iṣẹ showReportDialog.
Sentry.showReportDialog();Ipari:
Loni a ṣe apejuwe ọna kan lati ṣepọ Sentry sinu ohun elo React kan.
→ Iwiregbe Telegram nipasẹ
orisun: www.habr.com