Bugun men sizga React ilovasida real vaqtda xatolarni kuzatish haqida gapirib beraman. Front-end ilovasi odatda xatolarni kuzatish uchun ishlatilmaydi. Ba'zi kompaniyalar xatolarni kuzatishni to'xtatib qo'yishadi, hujjatlar, testlar va hokazolardan so'ng unga qaytadilar. Biroq, agar siz mahsulotingizni yaxshi tomonga o'zgartira olsangiz, shunchaki qiling!
1. Sentry nima uchun kerak?
O'ylaymanki, siz ishlab chiqarish jarayonida xatolarni kuzatishga qiziqasiz
Sizningcha, bu etarli emasmi?
Mayli, keling, tafsilotlarni ko'rib chiqaylik.
Ishlab chiquvchilarning Sentry-dan foydalanishining asosiy sabablari:
- Xatolar bilan kodni joylashtirishda xavflardan qochish imkonini beradi
- Kodni tekshirishda QAga yordam bering
- Muammolar haqida tezkor bildirishnomalarni oling
- Xatolarni tezda tuzatish qobiliyati
- Administrator panelida xatolarning qulay ko'rinishini olish
- Xatolarni foydalanuvchi/brauzer segmenti bo‘yicha tartiblang
Bosh direktor/Lead loyihasining asosiy sabablari
- Pulni tejash (Sentry serverlaringizga o'rnatilishi mumkin)
- Foydalanuvchilarning fikr-mulohazalarini olish
- Haqiqiy vaqtda loyihangizda nima noto'g'ri ekanligini tushunish
- Odamlar sizning ilovangiz bilan bog'liq muammolar sonini tushunish
- Ishlab chiquvchilaringiz xato qilgan joylarni topishga yordam bering
O'ylaymanki, ishlab chiquvchilar birinchi navbatda ushbu maqolaga qiziqishadi. Shuningdek, siz xo'jayiningizni Sentryni birlashtirishga ishontirish uchun ushbu sabablar ro'yxatidan foydalanishingiz mumkin.
Biznes ro'yxatidagi oxirgi element bilan ehtiyot bo'ling.
Siz allaqachon qiziqasizmi?
Sentry nima?
Sentry - bu ishlab chiquvchilarga real vaqt rejimida nosozliklarni kuzatish va tuzatishga yordam beradigan ochiq kodli xatolarni kuzatish ilovasi. Ilova samaradorlikni oshirish va foydalanuvchi tajribasini yaxshilash imkonini berishini unutmang. Sentry JavaScript, Node, Python, PHP, Ruby, Java va boshqa dasturlash tillarini qo'llab-quvvatlaydi.
2. Tizimga kiring va loyiha yarating
- Sentry hisobingizni oching. Siz tizimga kirishingiz kerak bo'lishi mumkin. (Iltimos, Sentry serverlaringizga o'rnatilishi mumkinligini unutmang)
- Keyingi qadam loyihani yaratishdir
- Roʻyxatdan oʻz tilingizni tanlang. (Biz Reactni tanlaymiz. "Loyiha yaratish" tugmasini bosing)
Ilovangizni moslashtiring. Sentry-ni konteynerga qanday integratsiya qilishning asosiy misolini quyida ko'rish mumkin:
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-da keyingi nima qilish kerakligini aniqlashga yordam beradigan yordamchi usta bor. Siz ushbu bosqichlarni bajarishingiz mumkin. Men sizga birinchi xato ishlov beruvchingizni qanday yaratishni ko'rsatmoqchiman. Ajoyib, biz loyiha yaratdik! Keling, keyingi bosqichga o'tamiz
3. React va Sentry integratsiyasi
Loyihangizga npm paketini o'rnatishingiz kerak.
npm i @sentry/browserKonteyneringizda Sentryni ishga tushiring:
Sentry.init({
// dsn: #dsnUrl,
});DSN Loyihalar -> Sozlamalar -> Mijoz kalitlarida joylashgan. Qidiruv satrida mijoz kalitlarini topishingiz mumkin.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Birinchi xatoni kuzatish
Masalan, men Deezer API bilan oddiy musiqa ilovasidan foydalandim. Siz buni ko'rishingiz mumkin . Biz xato yaratishimiz kerak. Buning bir usuli "aniqlanmagan" xususiyatga kirishdir
Biz chaqiradigan tugmani yaratishimiz kerak console.log с user.email. Ushbu amaldan so'ng biz xato xabarini olishimiz kerak: Tugallanmagan TypeError (belgilanmagan xususiyatdan xususiyatni o'qib bo'lmaydi email) yo'qolgan foydalanuvchi ob'ekti tufayli. Siz ham foydalanishingiz mumkin Javascriptdan istisno.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Butun konteyner quyidagicha ko'rinadi:
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);Ushbu tugmani birlashtirgandan so'ng, uni brauzerda sinab ko'rishingiz kerak.
Bizda birinchi xato bor
Voy!
Agar siz sarlavha xatosini bossangiz, stek izini ko'rasiz.
Xabarlar yomon ko'rinadi. Albatta, biz kodning qaerdaligini tushunmasdan xato xabarlarini ko'rdik. Odatiy bo'lib, biz ReactJS-dagi manba xaritasi haqida gapiramiz, chunki ular sozlanmagan.
Men manba xaritasini o'rnatish bo'yicha ko'rsatmalar bermoqchiman, ammo bu maqolani men o'ylaganimdan ancha uzoqroq qiladi.
Siz ushbu mavzuni o'rganishingiz mumkin . Agar siz ushbu maqolaga qiziqsangiz, manba xaritasi integratsiyasi haqida ikkinchi qismni nashr etadi. Shunday qilib, ko'proq layk bosing va obuna bo'ling ikkinchi qismni o'tkazib yubormaslik uchun.
5. Foydalanish soqchi yakuniy nuqta bilan API
KELISHDIKMI. Biz oldingi paragraflarda javascript istisnosini ko'rib chiqdik. Biroq, XHR xatolari haqida nima qilamiz?
Sentry shuningdek, maxsus xatolarni qayta ishlashga ega. Men uni api xatolarini kuzatish uchun ishlatardim.
Sentry.captureException(err)Siz ilovangiz, elektron pochtangiz va h.k.lar yordamida xato nomini, darajasini sozlashingiz, maʼlumotlar, noyob foydalanuvchi maʼlumotlarini qoʻshishingiz mumkin.
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 uchun umumiy funksiyadan foydalanmoqchiman.
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);
};Ushbu funktsiyani api chaqiruvingizga import qiling.
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));
}
});
};Keling, usullarni ko'rib chiqaylik:
- setLevel qo'riqchi asboblar paneliga daraja xatosini kiritish imkonini beradi. Uning xususiyatlari bor - "halokatli", "xato", "ogohlantirish", "jurnal", "ma'lumot", "debug", "tanqidiy").
- setUser har qanday foydalanuvchi ma'lumotlarini (id, elektron pochta manzili, to'lov rejasi va boshqalar) saqlashga yordam beradi.
- setExtra sizga kerak bo'lgan har qanday ma'lumotlarni, masalan, do'konni belgilash imkonini beradi.
Xato haqida foydalanuvchi fikr-mulohazalarini olishni istasangiz, showReportDialog funksiyasidan foydalanishingiz kerak.
Sentry.showReportDialog();xulosa:
Bugun biz Sentry-ni React ilovasiga integratsiya qilishning bir usulini tasvirlab berdik.
→ Telegram orqali suhbat
Manba: www.habr.com