Ngayon sasabihin ko sa iyo ang tungkol sa real-time na pagsubaybay sa error sa isang React na application. Ang isang front-end na application ay hindi karaniwang ginagamit para sa pagsubaybay ng error. Ang ilang mga kumpanya ay madalas na ipagpaliban ang pagsubaybay sa bug, bumabalik dito pagkatapos ng dokumentasyon, mga pagsubok, atbp. Gayunpaman, kung maaari mong baguhin ang iyong produkto para sa mas mahusay, pagkatapos ay gawin mo lang!
1. Bakit kailangan mo ng Sentry?
Ipinapalagay ko na interesado ka sa pagsubaybay sa mga bug sa panahon ng paggawa
Sa tingin mo ba hindi ito sapat?
Okay, tingnan natin ang mga detalye.
Mga nangungunang dahilan para gamitin ng mga developer ang Sentry:
- Nagbibigay-daan sa iyong maiwasan ang mga panganib kapag nagde-deploy ng code na may mga error
- Tulungan ang QA sa pagsubok ng code
- Makatanggap ng mabilis na mga abiso tungkol sa mga problema
- Kakayahang mabilis na iwasto ang mga pagkakamali
- Pagkuha ng maginhawang pagpapakita ng mga error sa admin panel
- Pagbukud-bukurin ang mga error ayon sa segment ng user/browser
Mga pangunahing dahilan para sa proyekto ng CEO/Lead
- Makatipid ng pera (Maaaring i-install ang Sentry sa iyong mga server)
- Pagkuha ng feedback ng user
- Pag-unawa kung ano ang mali sa iyong proyekto sa real time
- Pag-unawa sa bilang ng mga problema ng mga tao sa iyong app
- Tulungan kang maghanap ng mga lugar kung saan nagkamali ang iyong mga developer
Sa tingin ko ang mga developer ay magiging interesado muna sa artikulong ito. Maaari mo ring gamitin ang listahang ito ng mga dahilan para kumbinsihin ang iyong boss na isama ang Sentry.
Mag-ingat sa huling item sa listahan ng negosyo.
Interesado ka na ba?
Ano ang Sentry?
Ang Sentry ay isang open source na bug tracking application na tumutulong sa mga developer na subaybayan at ayusin ang mga pag-crash sa real time. Huwag kalimutan na pinapayagan ka ng application na pataasin ang kahusayan at pagbutihin ang karanasan ng user. Sinusuportahan ng Sentry ang JavaScript, Node, Python, PHP, Ruby, Java at iba pang mga programming language.
2. Mag-login at gumawa ng proyekto
- Buksan ang iyong Sentry account. Maaaring kailanganin mong mag-log in. (Pakitandaan na ang Sentry ay maaaring mai-install sa iyong mga server)
- Ang susunod na hakbang ay ang paglikha ng isang proyekto
- Piliin ang iyong wika mula sa listahan. (Pipiliin namin ang React. I-click ang "Gumawa ng Proyekto")
I-customize ang iyong application. Ang isang pangunahing halimbawa ng kung paano isama ang Sentry sa isang lalagyan ay makikita sa ibaba:
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;
}
}
}Ang Sentry ay may kapaki-pakinabang na Wizard upang tulungan kang malaman kung ano ang dapat mong gawin sa susunod. Maaari mong sundin ang mga hakbang na ito. Gusto kong ipakita sa iyo kung paano lumikha ng iyong unang tagapangasiwa ng error. Mahusay, gumawa kami ng isang proyekto! Lumipat tayo sa susunod na hakbang
3. React at Sentry integration
Dapat mong i-install ang npm package sa iyong proyekto.
npm i @sentry/browserI-initialize ang Sentry sa iyong container:
Sentry.init({
// dsn: #dsnUrl,
});Ang DSN ay matatagpuan sa Mga Proyekto -> Mga Setting -> Mga Susi ng Kliyente. Makakakita ka ng mga client key sa search bar.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Pagsubaybay sa unang error
Halimbawa, gumamit ako ng simpleng application ng musika sa Deezer API. Makikita mo ito . Kailangan nating gumawa ng error. Ang isang paraan ay ang pag-access sa "undefined" property
Kailangan nating gumawa ng button na tumatawag console.log Ρ user.email. Pagkatapos ng pagkilos na ito dapat tayong makatanggap ng mensahe ng error: Uncaught TypeError (hindi mabasa ang property mula sa undefined email) dahil sa nawawalang object ng user. Maaari mo ring gamitin Pagbubukod sa JavaScript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Ang buong lalagyan ay ganito ang hitsura:
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);Pagkatapos isama ang button na ito, dapat mong subukan ito sa browser.
Mayroon kaming unang pagkakamali
Whoo-hoo!
Kung nag-click ka sa error sa header, makakakita ka ng stack trace.
Mukhang masama ang mga mensahe. Siyempre nakakita kami ng mga mensahe ng error nang hindi nauunawaan kung nasaan ang code. Bilang default, pinag-uusapan natin ang pinagmulang mapa sa ReactJS dahil hindi sila naka-configure.
Gusto ko ring magbigay ng mga tagubilin para sa pag-set up ng source map, ngunit gagawin nitong mas matagal ang artikulong ito kaysa sa nilalayon ko.
Maaari mong pag-aralan ang paksang ito . Kung interesado ka sa artikulong ito, ay maglalathala ng ikalawang bahagi tungkol sa pagsasama ng pinagmulang mapa. Kaya, pindutin ang higit pang mga likes at mag-subscribe sa para hindi makaligtaan ang ikalawang bahagi.
5. Paggamit Nagbabantay na may dulong punto API
OK. Sinakop namin ang pagbubukod sa javascript sa mga nakaraang talata. Gayunpaman, ano ang gagawin natin tungkol sa mga error sa XHR?
Ang Sentry ay mayroon ding custom na paghawak ng error. Ginamit ko ito upang subaybayan ang mga error sa api.
Sentry.captureException(err)Maaari mong i-customize ang pangalan ng error, antas, magdagdag ng data, natatanging data ng user gamit ang iyong application, email, atbp.
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));
}
});Gusto kong gumamit ng generic na function para sa catch API.
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);
};I-import ang function na ito sa iyong api call.
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));
}
});
};Suriin natin ang mga pamamaraan:
- setLevel nagbibigay-daan sa iyo na magpasok ng error sa antas sa dashboard ng sentri. Mayroon itong mga katangian - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser tumutulong na i-save ang anumang data ng user (id, email address, plano sa pagbabayad, atbp.).
- setExtra nagbibigay-daan sa iyo na tukuyin ang anumang data na kailangan mo, halimbawa, mag-imbak.
Kung gusto mong makakuha ng feedback ng user tungkol sa isang bug, dapat mong gamitin ang showReportDialog function.
Sentry.showReportDialog();Konklusyon:
Ngayon inilarawan namin ang isang paraan upang maisama ang Sentry sa isang React na application.
β Telegram chat ni
Pinagmulan: www.habr.com