Jodi a mwen pral di w sou swiv erè an tan reyèl nan yon aplikasyon React. Yon aplikasyon front-end pa tipikman itilize pou swiv erè. Gen kèk konpayi yo souvan retire ensèk swiv, retounen nan li apre dokimantasyon, tès, elatriye. Sepandan, si ou ka chanje pwodwi ou pou pi bon an, Lè sa a, jis fè li!
1. Poukisa ou bezwen Sentry?
Mwen sipoze ou enterese nan swiv pinèz pandan pwodiksyon an
Ou panse sa pa ase?
Oke, ann gade detay yo.
Pi gwo rezon pou devlopè yo sèvi ak Sentry:
- Pèmèt ou evite risk lè w ap deplwaye kòd ak erè
- Ede QA ak tès kòd
- Resevwa notifikasyon rapid sou pwoblèm
- Kapasite byen vit korije erè
- Jwenn yon ekspozisyon pratik nan erè nan panèl la admin
- Triye erè pa segman itilizatè/navigatè
Rezon prensipal pou pwojè CEO/Lead
- Ekonomize lajan (Sentry ka enstale sou serveurs ou yo)
- Jwenn fidbak itilizatè yo
- Konprann sa ki mal nan pwojè ou an tan reyèl
- Konprann kantite pwoblèm moun genyen ak aplikasyon w lan
- Ede w jwenn kote devlopè w yo te fè erè
Mwen panse ke devlopè yo ta enterese nan atik sa a an premye. Ou ka sèvi ak lis rezon sa a tou pou konvenk bòs nan travay ou entegre Sentry.
Fè atansyon ak dènye atik ki sou lis biznis la.
Èske w deja enterese?
Ki sa ki Sentry?
Sentry se yon aplikasyon pou swiv ensèk ouvè ki ede devlopè yo swiv epi ranje aksidan an tan reyèl. Pa bliye ke aplikasyon an pèmèt ou ogmante efikasite ak amelyore eksperyans itilizatè. Sentry sipòte JavaScript, Node, Python, PHP, Ruby, Java ak lòt lang pwogramasyon.
2. Konekte epi kreye yon pwojè
- Louvri kont Sentry ou a. Ou ka oblije konekte. (Tanpri sonje ke Sentry ka enstale sou serveurs ou yo)
- Pwochen etap la se kreye yon pwojè
- Chwazi lang ou nan lis la. (Nou pral chwazi Reyaji. Klike sou "Kreye Pwojè")
Customize aplikasyon w lan. Yon egzanp debaz sou fason pou entegre Sentry nan yon veso ka wè anba a:
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 gen yon Sòsye ki itil pou ede w konnen kisa ou ta dwe fè apre. Ou ka swiv etap sa yo. Mwen vle montre w ki jan yo kreye premye moun ki okipe erè w la. Gwo, nou te kreye yon pwojè! Ann ale nan pwochen etap la
3. Reyaji ak entegrasyon Sentry
Ou dwe enstale pake npm nan pwojè ou a.
npm i @sentry/browserInisyalize Sentry nan veso ou a:
Sentry.init({
// dsn: #dsnUrl,
});DSN a sitiye nan Pwojè -> Anviwònman -> Kle Kliyan. Ou ka jwenn kle kliyan nan ba rechèch la.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Suivi premye erè a
Pa egzanp, mwen te itilize yon aplikasyon mizik senp ak API Deezer. Ou ka wè li . Nou bezwen kreye yon erè. Youn nan fason se jwenn aksè nan pwopriyete "endefini".
Nou bezwen kreye yon bouton ki rele console.log с user.email. Apre aksyon sa a nou ta dwe resevwa yon mesaj erè: Uncaught TypeError (pa ka li pwopriyete nan endefini email) akòz objè itilizatè ki manke. Ou ka itilize tou eksepsyon Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Tout veso a sanble tankou sa 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);Apre entegre bouton sa a, ou ta dwe teste li nan navigatè a.
Nou gen premye erè nou an
Whoo-hoo!
Si ou klike sou erè nan header, ou pral wè yon tras pil.
Mesaj yo gade move. Natirèlman nou te wè mesaj erè san yo pa konprann kote kòd la ye. Pa default nou ap pale de kat sous la nan ReactJS paske yo pa configuré.
Mwen ta renmen tou bay enstriksyon pou mete kat sous la, men sa ta fè atik sa a pi long pase sa mwen te gen entansyon.
Ou ka etidye sijè sa a . Si w enterese nan atik sa a, pral pibliye dezyèm pati a sou entegrasyon kat sous. Kidonk, frape plis like epi abònman pou nou pa rate dezyèm pati a.
5. Itilizasyon Sentry ak pwen final API
OK. Nou te kouvri eksepsyon javascript nan paragraf anvan yo. Sepandan, ki sa nou pral fè sou erè XHR?
Sentry gen tou manyen erè koutim. Mwen te itilize li pou swiv erè api.
Sentry.captureException(err)Ou ka Customize non erè a, nivo, ajoute done, done itilizatè inik lè l sèvi avèk aplikasyon w lan, imèl, elatriye.
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));
}
});Mwen ta renmen sèvi ak yon fonksyon jenerik pou API a trape.
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);
};Enpòte fonksyon sa a nan apèl api ou a.
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));
}
});
};Ann tcheke metòd yo:
- setLevel pèmèt ou mete yon erè nivo nan tablodbò sentinèl la. Li gen pwopriyete - 'fatal', 'erè', 'avètisman', 'log', 'info, 'debug', 'kritik').
- setUser ede sove nenpòt done itilizatè (id, adrès imel, plan peman, elatriye).
- setExtra pèmèt ou presize nenpòt done ou bezwen, pou egzanp, magazen.
Si ou vle jwenn fidbak itilizatè sou yon ensèk, ou ta dwe itilize fonksyon showReportDialog la.
Sentry.showReportDialog();Konklizyon:
Jodi a nou dekri yon fason pou entegre Sentry nan yon aplikasyon React.
→ Telegram chat pa
Sous: www.habr.com