Имрӯз ман ба шумо дар бораи пайгирии хатогиҳои вақти воқеӣ дар барномаи React нақл мекунам. Замимаи фронталӣ одатан барои пайгирии хато истифода намешавад. Баъзе ширкатҳо аксар вақт пайгирии хатогиҳоро қатъ мекунанд, пас аз ҳуҷҷатгузорӣ, санҷишҳо ва ғайра ба он бармегарданд. Бо вуҷуди ин, агар шумо маҳсулотатонро ба ҷои беҳтар иваз карда тавонед, ин корро кунед!
1. Чаро ба шумо Sentry лозим аст?
Ман гумон мекунам, ки шумо ба пайгирии хатогиҳо ҳангоми истеҳсол таваҷҷӯҳ доред
Оё шумо фикр мекунед, ки ин кофӣ нест?
Хуб, биёед ба тафсилот назар андозем.
Сабабҳои асосии таҳиягарон барои истифодаи Sentry:
- Ба шумо имкон медиҳад, ки ҳангоми ҷойгиркунии код бо хатогиҳо аз хатарҳо канорагирӣ кунед
- Ба QA дар санҷиши код кӯмак кунед
- Дар бораи мушкилот огоҳиномаҳои зуд гиред
- Қобилияти зуд ислоҳ кардани хатогиҳо
- Гирифтани намоиши қулайи хатогиҳо дар панели идоракунӣ
- Хатогиро аз рӯи сегменти корбар/браузер ҷудо кунед
Сабабҳои асосии лоиҳаи CEO/Lead
- Пулро сарфа кунед (Sentry метавонад дар серверҳои шумо насб карда шавад)
- Гирифтани фикру мулоҳизаҳои корбар
- Фаҳмидани он ки дар лоиҳаи шумо дар вақти воқеӣ чӣ хато аст
- Фаҳмидани шумораи мушкилоте, ки одамон бо барномаи шумо доранд
- Ба шумо дар ёфтани ҷойҳое, ки таҳиягарони шумо хато кардаанд, кӯмак кунед
Ман фикр мекунам, ки таҳиягарон аввал ба ин мақола таваҷҷӯҳ хоҳанд кард. Шумо инчунин метавонед ин рӯйхати сабабҳоро истифода баред, то роҳбари худро ба ҳамгироии Sentry бовар кунонед.
Бо ҷузъи охирини рӯйхати тиҷорат эҳтиёт шавед.
Оё шумо аллакай таваҷҷӯҳ доред?
Sentry чист?
Sentry як барномаи пайгирии хатогиҳои кушодаасос аст, ки ба таҳиягарон дар пайгирӣ ва ислоҳи садамаҳо дар вақти воқеӣ кӯмак мекунад. Фаромӯш накунед, ки барнома ба шумо имкон медиҳад, ки самаранокӣ ва таҷрибаи корбарро беҳтар созед. Sentry JavaScript, Node, Python, PHP, Ruby, Java ва дигар забонҳои барномасозиро дастгирӣ мекунад.
2. Ворид шавед ва лоиҳа эҷод кунед
- Ҳисоби Sentry-и худро кушоед. Шояд шумо бояд ворид шавед. (Лутфан қайд кунед, ки Sentry метавонад дар серверҳои шумо насб карда шавад)
- Қадами навбатӣ сохтани лоиҳа мебошад
- Забони худро аз рӯйхат интихоб кунед. (Мо реаксияро интихоб мекунем. "Эҷоди лоиҳа" -ро клик кунед)
Барномаи худро танзим кунед. Намунаи асосии чӣ гуна ҳамгиро кардани Sentry ба контейнер дар зер дидан мумкин аст:
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 як устоди муфид дорад, ки ба шумо дар фаҳмидани он ки дар оянда чӣ кор кардан лозим аст, кӯмак мекунад. Шумо метавонед ин қадамҳоро иҷро кунед. Ман мехоҳам ба шумо нишон диҳам, ки чӣ тавр аввалин коркардкунандаи хатогии худро эҷод кунед. Аҷоиб, мо як лоиҳа эҷод кардем! Биёед ба қадами оянда гузарем
3. Интегратсияи React ва Sentry
Шумо бояд бастаи npm -ро дар лоиҳаи худ насб кунед.
npm i @sentry/browserSentry-ро дар контейнери худ оғоз кунед:
Sentry.init({
// dsn: #dsnUrl,
});DSN дар Лоиҳаҳо -> Танзимот -> Калидҳои муштарӣ ҷойгир аст. Шумо метавонед калидҳои муштариро дар сатри ҷустуҷӯ пайдо кунед.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Пайгирии хатои аввал
Масалан, ман як барномаи оддии мусиқиро бо API Deezer истифода кардам. Шумо метавонед онро бубинед . Мо бояд хато эҷод кунем. Яке аз роҳҳо дастрасӣ ба моликияти "муайяннашуда" мебошад
Мо бояд тугмаеро эҷод кунем, ки занг мезанад console.log с user.email. Пас аз ин амал мо бояд паёми хатогиро қабул кунем: TypeError дастгирнашуда (молиятро аз номуайян хондан мумкин нест email) аз сабаби набудани объекти корбар. Шумо инчунин метавонед истифода баред Истиснои Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Тамоми контейнер чунин менамояд:
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);Пас аз ворид кардани ин тугма, шумо бояд онро дар браузер санҷед.
Мо хатои аввалини худро дорем
Хо-хо!
Агар шумо хатои сарлавҳаро пахш кунед, шумо пайгирии стекро хоҳед дид.
Паёмҳо бад ба назар мерасанд. Албатта, мо паёмҳои хатогиҳоро дидем, ки кодро дарк накардаем. Бо нобаёнӣ мо дар бораи харитаи манбаъ дар ReactJS сухан меронем, зеро онҳо танзим нашудаанд.
Ман инчунин мехостам дастур оид ба таъсиси харитаи манбаъ пешниҳод кунам, аммо ин мақоларо аз он ки ман пешбинӣ кардам, дарозтар мекунад.
Шумо метавонед ин мавзӯъро омӯзед . Агар шумо ба ин мақола таваҷҷӯҳ дошта бошед, қисми дуюмро дар бораи ҳамгироии харитаи манбаъ нашр хоҳад кард. Пас, бештар лайк пахш кунед ва обуна шавед то ки кисми дуюмро аз даст надихем.
5. Истифода щаравул бо нуқтаи ниҳоӣ API
ДУРУСТ. Мо истиснои JavaScript-ро дар параграфҳои қаблӣ баррасӣ кардем. Аммо, мо дар бораи хатогиҳои XHR чӣ кор хоҳем кард?
Sentry инчунин коркарди хатогиҳои фармоиширо дорад. Ман онро барои пайгирии хатогиҳои api истифода кардам.
Sentry.captureException(err)Шумо метавонед бо истифода аз замимаи худ, почтаи электронӣ ва ғайра номи хато, сатҳ, илова кардани маълумот, додаҳои беназири корбарро танзим кунед.
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));
}
});Ман мехоҳам як функсияи умумиро барои API catch истифода барам.
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);
};Ин функсияро дар занги 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));
}
});
};Биёед усулҳоро тафтиш кунем:
- setLevel ба шумо имкон медиҳад, ки хатои сатҳро ба панели назоратӣ ворид кунед. Он дорои хосиятҳо - "фатал", "хатоӣ", "огоҳӣ", "журнал", "маълумот", "debug", "critical").
- setUser барои нигоҳ доштани ҳама гуна маълумоти корбар (ID, суроғаи почтаи электронӣ, нақшаи пардохт ва ғайра) кӯмак мекунад.
- setExtra ба шумо имкон медиҳад, ки ҳама гуна маълумоте, ки ба шумо лозим аст, масалан, захира кунед.
Агар шумо хоҳед, ки фикру мулоҳизаҳои корбарро дар бораи хатогиҳо гиред, шумо бояд функсияи showReportDialog -ро истифода баред.
Sentry.showReportDialog();Хулоса:
Имрӯз мо як роҳи ҳамгироии Sentry-ро ба барномаи React тавсиф кардем.
→ Чати Telegram аз ҷониби
Манбаъ: will.com