Hari ini saya akan memberitahu anda tentang penjejakan ralat masa nyata dalam aplikasi React. Aplikasi bahagian hadapan biasanya tidak digunakan untuk penjejakan ralat. Sesetengah syarikat sering menangguhkan penjejakan pepijat, kembali kepadanya selepas dokumentasi, ujian, dsb. Walau bagaimanapun, jika anda boleh menukar produk anda ke arah yang lebih baik, maka lakukan sahaja!
1. Mengapa anda memerlukan Sentry?
Saya menganggap anda berminat untuk menjejaki pepijat semasa pengeluaran
Adakah anda fikir ini tidak mencukupi?
Okay, mari kita lihat butirannya.
Sebab utama pembangun menggunakan Sentry:
- Membolehkan anda mengelakkan risiko apabila menggunakan kod dengan ralat
- Bantu QA dengan ujian kod
- Terima pemberitahuan pantas tentang masalah
- Keupayaan untuk membetulkan kesilapan dengan cepat
- Mendapatkan paparan ralat yang mudah dalam panel pentadbir
- Isih ralat mengikut segmen pengguna/pelayar
Sebab utama untuk projek CEO/Lead
- Jimat wang (Sentry boleh dipasang pada pelayan anda)
- Mendapat maklum balas pengguna
- Memahami apa yang salah dengan projek anda dalam masa nyata
- Memahami bilangan masalah yang dihadapi orang dengan apl anda
- Bantu anda mencari tempat di mana pembangun anda membuat kesilapan
Saya rasa pembangun akan berminat dengan artikel ini terlebih dahulu. Anda juga boleh menggunakan senarai sebab ini untuk meyakinkan bos anda untuk menyepadukan Sentry.
Berhati-hati dengan item terakhir dalam senarai perniagaan.
Adakah anda sudah berminat?
Apakah Sentry?
Sentry ialah aplikasi penjejakan pepijat sumber terbuka yang membantu pembangun menjejak dan membetulkan ranap sistem dalam masa nyata. Jangan lupa bahawa aplikasi itu membolehkan anda meningkatkan kecekapan dan meningkatkan pengalaman pengguna. Sentry menyokong JavaScript, Node, Python, PHP, Ruby, Java dan bahasa pengaturcaraan lain.
2. Log masuk dan buat projek
- Buka akaun Sentry anda. Anda mungkin perlu log masuk. (Sila ambil perhatian bahawa Sentry boleh dipasang pada pelayan anda)
- Langkah seterusnya ialah membuat projek
- Pilih bahasa anda daripada senarai. (Kami akan memilih React. Klik "Buat Projek")
Sesuaikan aplikasi anda. Contoh asas bagaimana untuk mengintegrasikan Sentry ke dalam bekas boleh dilihat di bawah:
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 mempunyai Wizard yang berguna untuk membantu anda memikirkan perkara yang perlu anda lakukan seterusnya. Anda boleh mengikuti langkah-langkah ini. Saya ingin menunjukkan kepada anda cara membuat pengendali ralat pertama anda. Hebat, kami telah mencipta projek! Mari kita teruskan ke langkah seterusnya
3. Reaksi dan integrasi Sentry
Anda mesti memasang pakej npm dalam projek anda.
npm i @sentry/browserMulakan Sentry dalam bekas anda:
Sentry.init({
// dsn: #dsnUrl,
});DSN terletak dalam Projek -> Tetapan -> Kunci Pelanggan. Anda boleh mencari kunci pelanggan dalam bar carian.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Menjejaki ralat pertama
Sebagai contoh, saya menggunakan aplikasi muzik mudah dengan API Deezer. Anda boleh melihatnya . Kita perlu membuat ralat. Salah satu cara ialah mengakses harta "tidak ditentukan".
Kita perlu mencipta butang yang memanggil konsol.log Ρ pengguna.e-mel. Selepas tindakan ini, kami akan menerima mesej ralat: Uncaught TypeError (tidak boleh membaca harta daripada undefined email) kerana objek pengguna hilang. Anda juga boleh menggunakan Pengecualian Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Keseluruhan bekas kelihatan seperti ini:
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);Selepas menyepadukan butang ini, anda harus mengujinya dalam penyemak imbas.
Kami mempunyai kesilapan pertama kami
Whoo-hoo!
Jika anda mengklik pada ralat pengepala, anda akan melihat surih tindanan.
Mesej kelihatan buruk. Sudah tentu kami telah melihat mesej ralat tanpa memahami di mana kod itu. Secara lalai kita bercakap tentang peta sumber dalam ReactJS kerana ia tidak dikonfigurasikan.
Saya juga ingin memberikan arahan untuk menyediakan peta sumber, tetapi itu akan menjadikan artikel ini lebih lama daripada yang saya maksudkan.
Anda boleh mempelajari topik ini . Jika anda berminat dengan artikel ini, akan menerbitkan bahagian kedua tentang penyepaduan peta sumber. Jadi, tekan lebih banyak suka dan langgan supaya tidak terlepas bahagian kedua.
5. Penggunaan Sentry dengan titik akhir API
OKEY. Kami telah merangkumi pengecualian javascript dalam perenggan sebelumnya. Walau bagaimanapun, apakah yang akan kita lakukan terhadap ralat XHR?
Sentry juga mempunyai pengendalian ralat tersuai. Saya menggunakannya untuk menjejaki ralat api.
Sentry.captureException(err)Anda boleh menyesuaikan nama ralat, tahap, menambah data, data pengguna unik menggunakan aplikasi anda, e-mel, dsb.
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));
}
});Saya ingin menggunakan fungsi generik untuk API tangkapan.
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);
};Import fungsi ini dalam panggilan api anda.
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));
}
});
};Mari semak kaedah:
- setLevel membolehkan anda memasukkan ralat tahap ke dalam papan pemuka sentri. Ia mempunyai sifat - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser membantu menyimpan sebarang data pengguna (id, alamat e-mel, pelan pembayaran, dsb.).
- setExtra membolehkan anda menentukan sebarang data yang anda perlukan, contohnya, simpan.
Jika anda ingin mendapatkan maklum balas pengguna tentang pepijat, anda harus menggunakan fungsi showReportDialog.
Sentry.showReportDialog();Kesimpulan:
Hari ini kami menerangkan satu cara untuk menyepadukan Sentry ke dalam aplikasi React.
β Sembang telegram oleh
Sumber: www.habr.com