Бүгүн мен сизге React тиркемесинде каталарды реалдуу убакытта көзөмөлдөө жөнүндө айтып берем. Фронттук тиркеме адатта катага көз салуу үчүн колдонулбайт. Кээ бир компаниялар мүчүлүштүктөрдү көзөмөлдөөнү кийинкиге калтырышат, документациядан, тесттерден ж.б. кийин ага кайтып келишет. Бирок, эгер сиз продуктууңузду жакшы жакка өзгөртө алсаңыз, анда аны жасаңыз!
1. Сентри эмне үчүн керек?
Мен сиз өндүрүш учурунда мүчүлүштүктөрдү байкоого кызыкдар деп ойлойм
Бул жетишсиз деп ойлойсузбу?
Макул, майда-чүйдөсүнө чейин карап көрөлү.
Иштеп чыгуучулардын Sentry колдонуусунун негизги себептери:
- Каталар менен кодду жайылтууда тобокелдиктерден качууга мүмкүндүк берет
- Кодду сыноо менен QAга жардам бериңиз
- Көйгөйлөр жөнүндө тез эскертмелерди алыңыз
- каталарды тез оңдоо мүмкүнчүлүгү
- Администратор панелинде каталардын ыңгайлуу дисплейин алуу
- Колдонуучу/браузер сегменти боюнча каталарды иреттөө
CEO/Lead долбоорунун негизги себептери
- Акчаны үнөмдөңүз (Sentry сервериңизге орнотулат)
- Колдонуучунун пикирлерин алуу
- Реалдуу убакытта долбооруңузда эмне туура эмес экенин түшүнүү
- Колдонмоңуз менен адамдардын көйгөйлөрүнүн санын түшүнүү
- Иштеп чыгуучуларыңыз ката кетирген жерлерди табууга жардам берет
Мен иштеп чыгуучулар биринчи бул макалага кызыкдар деп ойлойм. Сиз ошондой эле ушул себептердин тизмесин колдонсоңуз болот.
Бизнес тизмесиндеги акыркы нерседен сак болуңуз.
Сиз буга чейин эле кызыгасызбы?
Sentry деген эмне?
Sentry – иштеп чыгуучуларга реалдуу убакытта каталарды көзөмөлдөөгө жана оңдоого жардам берген ачык булактуу мүчүлүштүктөрдү көзөмөлдөө колдонмосу. Колдонмо эффективдүүлүктү жогорулатууга жана колдонуучу тажрыйбасын жакшыртууга мүмкүндүк берерин унутпаңыз. Sentry JavaScript, Node, Python, PHP, Ruby, Java жана башка программалоо тилдерин колдойт.
2. Кирүү жана долбоор түзүү
- Sentry аккаунтуңузду ачыңыз. Сиз кирүү керек болушу мүмкүн. (Сиздин серверлериңизге Sentry орнотулушу мүмкүн экенин эске алыңыз)
- Кийинки кадам долбоорду түзүү болуп саналат
- Тизмеден тилиңизди тандаңыз. (Биз React тандайбыз. "Долбоорду түзүү" баскычын басыңыз)
Колдонмоңузду ыңгайлаштырыңыз. Сентриди контейнерге кантип интеграциялоонун негизги мисалын төмөндө көрүүгө болот:
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. React жана Sentry интеграциясы
Долбооруңузга npm пакетин орнотушуңуз керек.
npm i @sentry/browserКонтейнериңизде Sentry'ди баштаңыз:
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. Биринчи катага көз салуу
Мисалы, мен Deezer API менен жөнөкөй музыкалык тиркемени колдондум. Сиз аны көрө аласыз . Биз ката түзүшүбүз керек. Бир жолу "аныкталбаган" касиетке жетүү болуп саналат
Биз чакыра турган баскычты түзүшүбүз керек console.log с user.email. Бул аракеттен кийин биз ката билдирүүсүн алышыбыз керек: Uncaught 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));
}
});Мен 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);
};Бул функцияны 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 күзөтчү тактасына деңгээл катасын киргизүүгө мүмкүндүк берет. Анын касиеттери бар - "өлүмчүл", "ката", "эскертүү", "журнал", "маалымат", "мүчөлөрдү оңдоо", "критикалык").
- setUser ар кандай колдонуучунун маалыматтарын сактоого жардам берет (id, электрондук почта дареги, төлөм планы, ж.б.).
- setExtra сизге керектүү маалыматтарды көрсөтүүгө мүмкүндүк берет, мисалы, дүкөн.
Эгер сиз мүчүлүштүк тууралуу колдонуучунун пикирин билгиңиз келсе, showReportDialog функциясын колдонушуңуз керек.
Sentry.showReportDialog();корутундусу:
Бүгүн биз Sentryди React тиркемесине интеграциялоонун бир жолун сүрөттөп бердик.
→ Telegram чат аркылуу
Source: www.habr.com