Dinten ieu kuring bakal nyaritakeun anjeun ngeunaan tracking kasalahan sacara real-time dina aplikasi React. Hiji aplikasi hareup-tungtung teu ilaharna dipaké pikeun tracking kasalahan. Sababaraha perusahaan sering ditunda pelacak bug, uih deui saatos dokuméntasi, tés, jsb. Nanging, upami anjeun tiasa ngarobih produk anjeun janten langkung saé, teras lakukeun!
1. Naha anjeun peryogi Sentry?
Kuring anggap anjeun kabetot dina nyukcruk bug salila produksi
Saur anjeun ieu teu cukup?
Oké, hayu urang nempo rinci.
Alesan utama pikeun pamekar ngagunakeun Sentry:
- Ngidinan anjeun pikeun ngahindarkeun résiko nalika nyebarkeun kode kalayan kasalahan
- Pitulung QA ku nguji kode
- Nampi bewara gancang ngeunaan masalah
- Kamampuhan pikeun gancang ngabenerkeun kasalahan
- Meunangkeun tampilan merenah tina kasalahan dina panel admin
- Nyortir kasalahan dumasar kana bagean pamaké/browser
Alesan utama pikeun CEO / Proyék kalungguhan
- Nyimpen artos (Sentry tiasa dipasang dina server anjeun)
- Meunang eupan balik pamaké
- Ngartos naon anu salah sareng proyék anjeun sacara real waktos
- Ngartos jumlah masalah jalma gaduh aplikasi anjeun
- Ngabantosan anjeun milarian tempat dimana pamekar anjeun ngalakukeun kasalahan
Jigana pamekar bakal kabetot dina artikel ieu munggaran. Anjeun ogé tiasa nganggo daptar alesan ieu pikeun ngayakinkeun bos anjeun pikeun ngahijikeun Sentry.
Kudu ati jeung item panungtungan dina daptar bisnis.
Dupi anjeun geus kabetot?
Naon Sentry?
Sentry mangrupikeun aplikasi pelacak bug open source anu ngabantosan pamekar ngalacak sareng ngalereskeun kacilakaan sacara real waktos. Tong hilap yén aplikasi éta ngamungkinkeun anjeun ningkatkeun efisiensi sareng ningkatkeun pangalaman pangguna. Sentry ngadukung JavaScript, Node, Python, PHP, Ruby, Java sareng basa pamrograman anu sanés.
2. Login jeung nyieun proyek
- Buka akun Sentry anjeun. Anjeun meureun kudu asup. (Perhatikeun yén Sentry tiasa dipasang dina server anjeun)
- Lengkah saterusna nyaeta nyieun proyek
- Pilih basa anjeun tina daptar. (Kami bade milih React. Klik "Jieun Proyék")
Sesuaikeun aplikasi anjeun. Conto dasar kumaha ngahijikeun Sentry kana wadah tiasa ditingali di handap:
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 gaduh Wizard anu mantuan pikeun ngabantosan anjeun terang naon anu anjeun kedah laksanakeun salajengna. Anjeun tiasa nuturkeun léngkah ieu. Abdi hoyong nunjukkeun anjeun kumaha ngadamel panangan kasalahan anu munggaran anjeun. Hébat, kami parantos nyiptakeun proyék! Hayu urang ngaléngkah ka lengkah saterusna
3. Réaksi jeung integrasi Sentry
Anjeun kedah masang pakét npm dina proyék anjeun.
npm i @sentry/browserInitialize Sentry dina wadahna anjeun:
Sentry.init({
// dsn: #dsnUrl,
});DSN perenahna di Projects -> Settings -> Client Keys. Anjeun tiasa mendakan konci klien dina bar teang.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Nyukcruk kasalahan munggaran
Salaku conto, kuring nganggo aplikasi musik saderhana sareng API Deezer. Anjeun tiasa ningali éta . Urang kudu nyieun kasalahan. Salah sahiji cara nyaéta ngaksés harta "undefined".
Urang kudu nyieun hiji tombol nu nelepon konsol.log с pamaké.email. Saatos tindakan ieu urang kedah nampi pesen kasalahan: Uncaught TypeError (teu tiasa maca harta tina undefined email) alatan obyék pamaké leungit. Anjeun oge bisa make Javascript iwal.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Sakabéh wadahna sapertos kieu:
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);Saatos ngahijikeun tombol ieu, anjeun kedah nguji éta dina browser.
Urang boga kasalahan kahiji urang
Hoo-hoo!
Lamun klik dina kasalahan lulugu, anjeun bakal nempo renik tumpukan.
Pesen katingali goréng. Tangtosna urang parantos ningali pesen kasalahan tanpa ngartos dimana kodena. Sacara standar urang ngobrol ngeunaan peta sumber di ReactJS sabab teu ngonpigurasi.
Abdi ogé hoyong masihan pitunjuk pikeun nyetél peta sumber, tapi éta bakal ngajantenkeun tulisan ieu langkung lami tibatan anu dihaja.
Anjeun tiasa diajar topik ieu . Upami anjeun resep kana tulisan ieu, bakal nyebarkeun bagian kadua ngeunaan integrasi peta sumber. Janten, pencét langkung resep sareng ngalanggan sangkan teu katinggaleun bagian kadua.
5. panggunaan pangawal kalawan titik tungtung API
OKÉ. Kami parantos nutupan pengecualian JavaScript dina paragraf sateuacana. Nanging, naon anu bakal urang laksanakeun ngeunaan kasalahan XHR?
Sentry ogé gaduh penanganan kasalahan khusus. I dipaké pikeun ngalacak kasalahan api.
Sentry.captureException(err)Anjeun tiasa nyaluyukeun nami kasalahan, tingkat, tambahkeun data, data pangguna unik nganggo aplikasi anjeun, email, jsb.
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));
}
});Abdi hoyong nganggo fungsi generik pikeun API nyekel.
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);
};Impor pungsi ieu dina panggero api Anjeun.
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));
}
});
};Hayu urang pariksa métode:
- setLevel ngidinan Anjeun pikeun nyelapkeun kasalahan tingkat kana dasbor penjaga. Cai mibanda sipat - 'fatal', 'kasalahan', 'warning', 'log', 'info, 'debug', 'kritis').
- setUser mantuan pikeun ngahemat sagala data pamaké (id, alamat surélék, rencana pamayaran, jsb).
- setExtra ngidinan Anjeun pikeun nangtukeun sagala data nu peryogi, contona, nyimpen.
Upami anjeun hoyong kéngingkeun tanggapan pangguna ngeunaan bug, anjeun kedah nganggo fungsi showReportDialog.
Sentry.showReportDialog();kacindekan:
Dinten ieu kami ngajelaskeun hiji cara pikeun ngahijikeun Sentry kana aplikasi React.
→ Telegram chat ku
sumber: www.habr.com