Данас ћу вам рећи о праћењу грешака у реалном времену у Реацт апликацији. Фронт-енд апликација се обично не користи за праћење грешака. Неке компаније често одлажу праћење грешака, враћајући се на њега након документације, тестова итд. Међутим, ако можете да промените свој производ на боље, онда само урадите то!
1. Зашто вам је потребан Сентри?
Претпостављам да сте заинтересовани за праћење грешака током производње
Мислите ли да ово није довољно?
У реду, хајде да погледамо детаље.
Главни разлози за програмере да користе Сентри:
- Омогућава вам да избегнете ризике приликом постављања кода са грешкама
- Помозите КА са тестирањем кода
- Примајте брза обавештења о проблемима
- Способност брзог исправљања грешака
- Добивање практичног приказа грешака у административној табли
- Сортирај грешке према сегменту корисника/претраживача
Главни разлози за ЦЕО/Водећи пројекат
- Уштедите новац (Сентри се може инсталирати на ваше сервере)
- Добијање повратних информација од корисника
- Разумевање шта није у реду са вашим пројектом у реалном времену
- Разумевање броја проблема који људи имају са вашом апликацијом
- Помозите вам да пронађете места на којима су ваши програмери направили грешке
Мислим да би програмере прво занимао овај чланак. Такође можете користити ову листу разлога да убедите свог шефа да интегрише Сентри.
Будите опрезни са последњом ставком на пословној листи.
Да ли сте већ заинтересовани?
Шта је Сентри?
Сентри је апликација за праћење грешака отвореног кода која помаже програмерима да прате и поправе падове у реалном времену. Не заборавите да вам апликација омогућава да повећате ефикасност и побољшате корисничко искуство. Сентри подржава ЈаваСцрипт, Ноде, Питхон, ПХП, Руби, Јава и друге програмске језике.
2. Пријавите се и креирајте пројекат
- Отворите свој Сентри налог. Можда ћете морати да се пријавите. (Имајте на уму да Сентри може бити инсталиран на вашим серверима)
- Следећи корак је креирање пројекта
- Изаберите свој језик са листе. (Изабраћемо Реацт. Кликните на „Креирај пројекат“)
Прилагодите своју апликацију. Основни пример како да интегришете Сентри у контејнер можете видети у наставку:
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;
}
}
}Сентри има корисног чаробњака који ће вам помоћи да схватите шта би требало да урадите следеће. Можете пратити ове кораке. Желим да вам покажем како да креирате свој први обрађивач грешака. Одлично, направили смо пројекат! Пређимо на следећи корак
3. Реацт и Сентри интеграција
Морате инсталирати нпм пакет у свој пројекат.
npm i @sentry/browserИницијализујте Сентри у свом контејнеру:
Sentry.init({
// dsn: #dsnUrl,
});ДСН се налази у Пројецтс -> Сеттингс -> Цлиент Кеис. Кључеве клијента можете пронаћи у траци за претрагу.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Праћење прве грешке
На пример, користио сам једноставну музичку апликацију са Деезер АПИ-јем. Можете га видети . Морамо да направимо грешку. Један од начина је приступ својству "недефинисано".
Морамо да направимо дугме које позива цонсоле.лог с корисник.е-пошта. Након ове акције требало би да добијемо поруку о грешци: Унцаугхт ТипеЕррор (не може прочитати својство из недефинисаног email) због недостатка корисничког објекта. Такође можете користити Јавасцрипт изузетак.
<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);Након интеграције овог дугмета, требало би да га тестирате у претраживачу.
Имамо прву грешку
Вхоо-хоо!
Ако кликнете на грешку у заглављу, видећете траг стека.
Поруке изгледају лоше. Наравно, видели смо поруке о грешци без разумевања где је код. Подразумевано говоримо о изворној мапи у РеацтЈС-у јер нису конфигурисани.
Такође бих желео да дам упутства за подешавање изворне мапе, али то би овај чланак учинило много дужим него што сам намеравао.
Можете проучити ову тему . Ако сте заинтересовани за овај чланак, објавиће други део о интеграцији изворне мапе. Дакле, притисните више лајкова и претплатите се на да не би пропустио други део.
5.Усаге Стража са крајњом тачком АПИ за
ОК. У претходним параграфима смо покрили изузетак јавасцрипт-а. Међутим, шта ћемо урадити са КСХР грешкама?
Сентри такође има прилагођено руковање грешкама. Користио сам га да пратим грешке у АПИ-ју.
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));
}
});Желео бих да користим генеричку функцију за цатцх АПИ.
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);
};Увезите ову функцију у свој АПИ позив.
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));
}
});
};Хајде да проверимо методе:
- сетЛевел омогућава вам да унесете грешку нивоа у контролну таблу стражара. Има својства - 'фатално', 'грешка', 'упозорење', 'лог', 'инфо, 'дебуг', 'критично').
- сетУсер помаже да се сачувају сви кориснички подаци (ИД, адреса е-поште, план плаћања, итд.).
- сетЕктра омогућава вам да наведете све податке који су вам потребни, на пример, складиште.
Ако желите да добијете повратне информације од корисника о грешци, требало би да користите функцију сховРепортДиалог.
Sentry.showReportDialog();Закључак:
Данас смо описали један начин да се Сентри интегрише у Реацт апликацију.
→ Телеграм ћаскање од
Извор: ввв.хабр.цом