Сьогодні я розповім вам про відстеження помилок у реальному часі у програмі React. Програма зовнішнього інтерфейсу зазвичай не використовується для відстеження помилок. Деякі компанії часто відкладають відстеження помилок, повертаючись до нього після документації, тестів та іншого. Однак, якщо ви можете змінити свій продукт на краще, то просто зробіть це!
1. Навіщо вам потрібний Sentry?
Я припускаю, що ви зацікавлені у відслідковуванні помилок у процесі виробництва
Ви вважаєте, що цього недостатньо?
Добре, погляньмо на деталі.
Основні причини використання Sentry для розробників:
- Дозволяє позбавлятися ризиків при розгортанні коду з помилками
- Допомога QA у тестуванні коду
- Отримання швидких повідомлень про проблеми
- Можливість швидкого виправлення помилок
- Отримання зручного відображення помилок в адмін-панелі
- Сортування помилок за сегментами користувача/браузера
Основні причини для CEO / Lead проекту
- Економія грошей (Sentry можна встановити на серверах)
- Отримання відгуків користувачів
- Розуміння того, що не так з вашим проектом у режимі реального часу
- Розуміння кількості проблем, що виникають у людей із вашим додатком
- Допомога у пошуку місць, де ваші розробники допустили помилку
Я думаю, що розробники були б зацікавлені в цій статті насамперед. Ви також можете використовувати список причин, щоб переконати начальство інтегрувати Sentry.
Будьте обережні з останнім пунктом у списку для бізнесу.
Ви вже зацікавлені?
Що таке Sentry?
Sentry – це програми для відстеження помилок з відкритим вихідним кодом, яка допомагає розробникам відстежувати, виправляти збої в режимі реального часу. Не забувайте і про те, що програма дозволяє підвищувати ефективність і покращувати користувальницьке використання. Sentry підтримує JavaScript, Node, Python, PHP, Ruby, Java та інші мови програмування.
2. Увійдіть та створіть проект
- Відкрийте ваш Sentry обліковий запис. Можливо, вам доведеться увійти до системи. (Звертаю увагу, що Sentry можна встановити на ваших серверах)
- Наступний крок створити проект
- Виберіть мову зі списку. (Ми збираємося вибрати React. Натисніть «Створити проект»)
Налаштуйте вашу програму. Базовий приклад, як інтегрувати Sentry в контейнер, можна побачити нижче:
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 є корисний Майстер, який допоможе вам зрозуміти, що ви маєте робити далі. Ви можете виконати такі кроки. Я хочу показати вам, як створити перший обробник помилок. Добре, ми створили проект! Перейдемо до наступного кроку
3. Інтеграція React та Sentry
Ви повинні встановити npm пакет у ваш проект.
npm i @sentry/browserІніціалізуйте Sentry у вашому контейнері:
Sentry.init({
// dsn: #dsnUrl,
});DSN знаходиться в Projects -> Settings -> Client Keys. Ви можете знайти ключі клієнта в рядку пошуку.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Відстеження першої помилки
Я наприклад використовував простий музичний додаток з API Deezer. Ви можете бачити це . Нам потрібно зробити помилку. Одним із способів є звернення до властивості undefined
Ми повинні створити кнопку, яка викликає 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, тому що вони не налаштовані.
Я також хотів би надати інструкції з налаштування вихідної карти, але це зробило б цю статтю набагато довшою, ніж я планував.
Ви можете вивчити цю тему . Якщо ви зацікавлені у цій статті, опублікує другу частину про інтеграцію source map. Отже, натискайте більше лайків та підписуйтесь на щоб не пропустити другу частину.
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));
}
});Я хотів би використати спільну функцію для API catch.
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 дозволяє вставити помилку рівня в панель моніторингу sentry. Він має властивості - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser допомагає зберегти будь-які дані користувача (id, адреса електронної пошти, план оплати і т. д.).
- setExtra дозволяє задати будь-які дані, які вам потрібні, наприклад магазин.
Якщо ви хочете отримати відгуки про помилку, вам слід використовувати функцію showReportDialog.
Sentry.showReportDialog();Висновок:
Сьогодні ми описали один із способів інтеграції Sentry до програми React.
→ Телеграм-чат по
Джерело: habr.com