Bugün sizlere bir React uygulamasında gerçek zamanlı hata takibini anlatacağım. Bir ön uç uygulaması genellikle hata takibi için kullanılmaz. Bazı şirketler genellikle hata takibini erteleyerek dokümantasyon, test vb. sonrasında hata takibine geri döner. Ancak ürününüzü daha iyiye doğru değiştirebiliyorsanız, bunu yapın!
1. Neden Sentry'ye ihtiyacınız var?
Üretim sırasında hataları takip etmekle ilgilendiğinizi varsayıyorum
Bunun yeterli olmadığını mı düşünüyorsunuz?
Tamam, ayrıntılara bakalım.
Geliştiricilerin Sentry'yi kullanmasının başlıca nedenleri:
- Hatalı kod dağıtırken risklerden kaçınmanıza olanak tanır
- Kod testinde QA'ya yardımcı olun
- Sorunlarla ilgili hızlı bildirimler alın
- Hataları hızlı bir şekilde düzeltme yeteneği
- Yönetici panelinde hataların uygun bir şekilde görüntülenmesi
- Hataları kullanıcı/tarayıcı segmentine göre sıralayın
CEO/Liderlik projesinin ana nedenleri
- Paradan tasarruf edin (Sentry sunucularınıza kurulabilir)
- Kullanıcı geri bildirimi alma
- Projenizde neyin yanlış olduğunu gerçek zamanlı olarak anlama
- İnsanların uygulamanızla ilgili yaşadığı sorunların sayısını anlama
- Geliştiricilerinizin hata yaptığı yerleri bulmanıza yardımcı olun
Geliştiricilerin öncelikle bu makaleyle ilgileneceğini düşünüyorum. Patronunuzu Sentry'yi entegre etmeye ikna etmek için bu nedenler listesini de kullanabilirsiniz.
İş listesindeki son öğeye dikkat edin.
Zaten ilgileniyor musun?
Sentry nedir?
Sentry, geliştiricilerin çökmeleri gerçek zamanlı olarak izlemesine ve düzeltmesine yardımcı olan açık kaynaklı bir hata izleme uygulamasıdır. Uygulamanın verimliliği artırmanıza ve kullanıcı deneyimini iyileştirmenize olanak sağladığını unutmayın. Sentry, JavaScript, Node, Python, PHP, Ruby, Java ve diğer programlama dillerini destekler.
2. Giriş yapın ve bir proje oluşturun
- Sentry hesabınızı açın. Giriş yapmanız gerekebilir. (Sunucularınıza Sentry'nin kurulabileceğini lütfen unutmayın)
- Bir sonraki adım bir proje oluşturmaktır
- Listeden dilinizi seçin. (React'i seçeceğiz. "Proje Oluştur"a tıklayın)
Uygulamanızı özelleştirin. Sentry'nin bir konteynere nasıl entegre edileceğine dair temel bir örnek aşağıda görülebilir:
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'de bundan sonra ne yapmanız gerektiğini belirlemenize yardımcı olacak yararlı bir Sihirbaz vardır. Bu adımları takip edebilirsiniz. Size ilk hata işleyicinizi nasıl oluşturacağınızı göstermek istiyorum. Harika, bir proje yarattık! Bir sonraki adıma geçelim
3. React ve Sentry entegrasyonu
Projenize npm paketini kurmalısınız.
npm i @sentry/browserSentry'yi konteynerinizde başlatın:
Sentry.init({
// dsn: #dsnUrl,
});DSN, Projeler -> Ayarlar -> İstemci Anahtarları'nda bulunur. İstemci anahtarlarını arama çubuğunda bulabilirsiniz.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. İlk hatayı takip etmek
Mesela Deezer API'li basit bir müzik uygulaması kullandım. Görebilirsin . Bir hata oluşturmamız gerekiyor. Bunun bir yolu "tanımsız" özelliğe erişmektir
Çağıran bir düğme oluşturmamız gerekiyor konsol.log с Kullanıcı e-postası. Bu işlemden sonra bir hata mesajı almalıyız: Yakalanmayan TypeError (tanımsızdan özellik okunamıyor) email) eksik kullanıcı nesnesi nedeniyle. Ayrıca kullanabilirsin Javascript istisnası.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Konteynerin tamamı şuna benzer:
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);Bu butonu entegre ettikten sonra tarayıcıda test etmelisiniz.
İlk hatamızı yapıyoruz
Vay canına!
Başlık hatasına tıklarsanız yığın izlemesini göreceksiniz.
Mesajlar kötü görünüyor. Elbette kodun nerede olduğunu anlamadan hata mesajları gördük. Varsayılan olarak ReactJS'deki kaynak haritasından bahsediyoruz çünkü bunlar yapılandırılmamış.
Ayrıca kaynak haritanın kurulumuyla ilgili talimatlar da vermek isterim, ancak bu, bu makalenin düşündüğümden çok daha uzun olmasına neden olur.
Bu konuyu inceleyebilirsiniz . Bu makaleyle ilgileniyorsanız, Kaynak harita entegrasyonu ile ilgili ikinci bölümü yayınlayacağız. Bu yüzden daha fazla beğeni yapın ve abone olun ikinci kısmı kaçırmamak için.
5. kullanımı Nöbet bitiş noktası olan API
TAMAM. Önceki paragraflarda javascript istisnasını ele aldık. Ancak XHR hataları konusunda ne yapacağız?
Sentry'nin ayrıca özel hata işleme özelliği vardır. API hatalarını izlemek için kullandım.
Sentry.captureException(err)Uygulamanızı, e-postanızı vb. kullanarak hata adını, düzeyini özelleştirebilir, veri ekleyebilir, benzersiz kullanıcı verilerini özelleştirebilirsiniz.
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'si için genel bir işlev kullanmak istiyorum.
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);
};Bu işlevi API çağrınıza aktarın.
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));
}
});
};Yöntemleri kontrol edelim:
- setSeviye Nöbetçi kontrol paneline bir seviye hatası eklemenizi sağlar. Özellikleri vardır - 'ölümcül', 'hata', 'uyarı', 'günlük', 'bilgi, 'hata ayıklama', 'kritik').
- setKullanıcı herhangi bir kullanıcı verisinin (kimlik, e-posta adresi, ödeme planı vb.) kaydedilmesine yardımcı olur.
- setEkstra ihtiyacınız olan herhangi bir veriyi (örneğin, mağaza) belirtmenize olanak tanır.
Bir hata hakkında kullanıcı geri bildirimi almak istiyorsanız showReportDialog işlevini kullanmalısınız.
Sentry.showReportDialog();Sonuç:
Bugün Sentry'yi React uygulamasına entegre etmenin bir yolunu anlattık.
→ Telegram sohbeti
Kaynak: habr.com