Hari ini saya akan memberi tahu Anda tentang pelacakan kesalahan real-time di aplikasi React. Aplikasi front-end biasanya tidak digunakan untuk pelacakan kesalahan. Beberapa perusahaan sering menunda pelacakan bug, kembali ke sana setelah dokumentasi, pengujian, dll. Namun, jika Anda bisa mengubah produk Anda menjadi lebih baik, lakukan saja!
1. Mengapa Anda membutuhkan Penjaga?
Saya berasumsi Anda tertarik untuk melacak bug selama produksi
Apakah menurut Anda ini tidak cukup?
Oke, mari kita lihat detailnya.
Alasan utama bagi pengembang untuk menggunakan Sentry:
- Memungkinkan Anda menghindari risiko saat menerapkan kode yang mengalami kesalahan
- Bantu QA dengan pengujian kode
- Terima pemberitahuan cepat tentang masalah
- Kemampuan untuk memperbaiki kesalahan dengan cepat
- Mendapatkan tampilan kesalahan yang nyaman di panel admin
- Urutkan kesalahan berdasarkan segmen pengguna/browser
Alasan utama untuk proyek CEO/Pimpinan
- Menghemat uang (Penjaga dapat diinstal di server Anda)
- Mendapatkan umpan balik pengguna
- Memahami apa yang salah dengan proyek Anda secara real time
- Memahami jumlah masalah yang dialami orang-orang dengan aplikasi Anda
- Membantu Anda menemukan tempat di mana pengembang Anda melakukan kesalahan
Saya rasa para pengembang akan tertarik dengan artikel ini terlebih dahulu. Anda juga dapat menggunakan daftar alasan ini untuk meyakinkan atasan Anda agar mengintegrasikan Sentry.
Hati-hati dengan item terakhir dalam daftar bisnis.
Apakah Anda sudah tertarik?
Apa itu Penjaga?
Sentry adalah aplikasi pelacakan bug sumber terbuka yang membantu pengembang melacak dan memperbaiki kerusakan secara real time. Jangan lupa bahwa aplikasi ini memungkinkan Anda meningkatkan efisiensi dan meningkatkan pengalaman pengguna. Sentry mendukung JavaScript, Node, Python, PHP, Ruby, Java dan bahasa pemrograman lainnya.
2. Masuk dan buat proyek
- Buka akun Penjaga Anda. Anda mungkin harus masuk. (Harap dicatat bahwa Sentry dapat diinstal di server Anda)
- Langkah selanjutnya adalah membuat proyek
- Pilih bahasa Anda dari daftar. (Kita akan memilih React. Klik "Buat Proyek")
Sesuaikan aplikasi Anda. Contoh dasar bagaimana mengintegrasikan Sentry ke dalam sebuah container dapat dilihat di bawah ini:
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 memiliki Wizard yang berguna untuk membantu Anda mengetahui apa yang harus Anda lakukan selanjutnya. Anda dapat mengikuti langkah-langkah berikut. Saya ingin menunjukkan cara membuat penangan kesalahan pertama Anda. Hebat, kami telah membuat proyek! Mari kita lanjutkan ke langkah berikutnya
3. Integrasi React dan Sentry
Anda harus menginstal paket npm di proyek Anda.
npm i @sentry/browserInisialisasi Sentry di wadah Anda:
Sentry.init({
// dsn: #dsnUrl,
});DSN terletak di Proyek -> Pengaturan -> Kunci Klien. Anda dapat menemukan kunci klien di bilah pencarian.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Melacak kesalahan pertama
Misalnya saya menggunakan aplikasi musik sederhana dengan Deezer API. Kamu bisa melihatnya . Kita perlu membuat kesalahan. Salah satu caranya adalah dengan mengakses properti "tidak terdefinisi".
Kita perlu membuat tombol yang memanggil konsol.log Ρ pengguna. email. Setelah tindakan ini kita akan menerima pesan kesalahan: TypeError Tidak Tertangkap (tidak dapat membaca properti dari yang tidak ditentukan email) karena objek pengguna hilang. Anda juga bisa menggunakan Pengecualian Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Seluruh wadah terlihat 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);Setelah mengintegrasikan tombol ini, Anda harus mengujinya di browser.
Kami memiliki kesalahan pertama kami
Wah hoo!
Jika Anda mengklik kesalahan header, Anda akan melihat jejak tumpukan.
Pesannya terlihat buruk. Tentu saja kita telah melihat pesan kesalahan tanpa memahami di mana kodenya berada. Secara default kita berbicara tentang peta sumber di ReactJS karena tidak dikonfigurasi.
Saya juga ingin memberikan petunjuk untuk menyiapkan peta sumber, tetapi hal itu akan membuat artikel ini lebih panjang dari yang saya maksudkan.
Anda dapat mempelajari topik ini . Jika Anda tertarik dengan artikel ini, akan menerbitkan bagian kedua tentang integrasi peta sumber. Jadi, perbanyak suka dan berlangganan agar tidak ketinggalan bagian kedua.
5. Penggunaan Pengawal dengan titik akhir API
OKE. Kami telah membahas pengecualian javascript di paragraf sebelumnya. Namun, apa yang akan kita lakukan terhadap kesalahan XHR?
Sentry juga memiliki penanganan kesalahan khusus. Saya menggunakannya untuk melacak kesalahan api.
Sentry.captureException(err)Anda dapat menyesuaikan nama kesalahan, level, menambahkan data, data pengguna unik menggunakan aplikasi, email, dll.
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 menangkap 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);
};Impor 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 kita periksa metodenya:
- setLevel memungkinkan Anda memasukkan kesalahan level ke dasbor penjaga. Ia memiliki properti - 'fatal', 'kesalahan', 'peringatan', 'log', 'info, 'debug', 'kritis').
- setUser membantu menyimpan data pengguna apa pun (id, alamat email, paket pembayaran, dll.).
- setEkstra memungkinkan Anda menentukan data apa pun yang Anda perlukan, misalnya, simpan.
Jika Anda ingin mendapatkan umpan balik pengguna tentang bug, Anda harus menggunakan fungsi showReportDialog.
Sentry.showReportDialog();Kesimpulan:
Hari ini kami menjelaskan salah satu cara untuk mengintegrasikan Sentry ke dalam aplikasi React.
β Obrolan Telegram lewat
Sumber: www.habr.com