Hôm nay tôi sẽ cho bạn biết về việc theo dõi lỗi theo thời gian thực trong ứng dụng React. Ứng dụng front-end thường không được sử dụng để theo dõi lỗi. Một số công ty thường trì hoãn việc theo dõi lỗi, quay lại sau khi có tài liệu, kiểm tra, v.v. Tuy nhiên, nếu bạn có thể thay đổi sản phẩm của mình tốt hơn thì hãy cứ làm điều đó!
1. Tại sao bạn cần Sentry?
Tôi cho rằng bạn quan tâm đến việc theo dõi lỗi trong quá trình sản xuất
Bạn có nghĩ rằng điều này là không đủ?
Được rồi, chúng ta hãy nhìn vào chi tiết.
Những lý do hàng đầu để nhà phát triển sử dụng Sentry:
- Cho phép bạn tránh rủi ro khi triển khai mã có lỗi
- Trợ giúp QA kiểm tra mã
- Nhận thông báo nhanh về các vấn đề
- Khả năng sửa lỗi nhanh chóng
- Hiển thị các lỗi một cách thuận tiện trong bảng quản trị
- Sắp xếp lỗi theo phân khúc người dùng/trình duyệt
Những lý do chính cho dự án CEO/Lead
- Tiết kiệm tiền (Sentry có thể được cài đặt trên máy chủ của bạn)
- Nhận phản hồi của người dùng
- Hiểu những gì sai với dự án của bạn trong thời gian thực
- Hiểu số lượng vấn đề mọi người gặp phải với ứng dụng của bạn
- Giúp bạn tìm ra những chỗ mà nhà phát triển của bạn đã mắc lỗi
Tôi nghĩ các nhà phát triển sẽ quan tâm đến bài viết này đầu tiên. Bạn cũng có thể sử dụng danh sách lý do này để thuyết phục sếp tích hợp Sentry.
Hãy cẩn thận với mục cuối cùng trong danh sách kinh doanh.
Bạn đã quan tâm chưa?
Sentry là gì?
Sentry là một ứng dụng theo dõi lỗi mã nguồn mở giúp các nhà phát triển theo dõi và khắc phục sự cố trong thời gian thực. Đừng quên rằng ứng dụng cho phép bạn tăng hiệu quả và cải thiện trải nghiệm người dùng. Sentry hỗ trợ JavaScript, Node, Python, PHP, Ruby, Java và các ngôn ngữ lập trình khác.
2. Đăng nhập và tạo dự án
- Mở tài khoản Sentry của bạn. Bạn có thể phải đăng nhập. (Xin lưu ý rằng Sentry có thể được cài đặt trên máy chủ của bạn)
- Bước tiếp theo là tạo một dự án
- Chọn ngôn ngữ của bạn từ danh sách. (Chúng ta sẽ chọn React. Nhấp vào "Tạo dự án")
Tùy chỉnh ứng dụng của bạn. Một ví dụ cơ bản về cách tích hợp Sentry vào container có thể được xem bên dưới:
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 có một Wizard hữu ích để giúp bạn tìm ra những gì bạn nên làm tiếp theo. Bạn có thể làm theo các bước sau. Tôi muốn chỉ cho bạn cách tạo trình xử lý lỗi đầu tiên. Tuyệt vời, chúng tôi đã tạo ra một dự án! Hãy chuyển sang bước tiếp theo
3. Tích hợp React và Sentry
Bạn phải cài đặt gói npm trong dự án của mình.
npm i @sentry/browserKhởi tạo Sentry trong vùng chứa của bạn:
Sentry.init({
// dsn: #dsnUrl,
});DSN nằm trong Dự án -> Cài đặt -> Khóa máy khách. Bạn có thể tìm thấy khóa ứng dụng khách trong thanh tìm kiếm.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Theo dõi lỗi đầu tiên
Ví dụ: tôi đã sử dụng một ứng dụng âm nhạc đơn giản với API Deezer. Bạn có thể nhìn thấy nó . Chúng ta cần tạo ra một lỗi. Một cách là truy cập thuộc tính "không xác định"
Chúng ta cần tạo một nút gọi bảng điều khiển.log с Email người dùng. Sau hành động này, chúng ta sẽ nhận được thông báo lỗi: Uncaught TypeError (không thể đọc thuộc tính từ không xác định email) do thiếu đối tượng người dùng. Bạn cũng có thể dùng Ngoại lệ Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Toàn bộ container trông như thế này:
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);Sau khi tích hợp nút này, bạn nên kiểm tra nó trên trình duyệt.
Chúng tôi có lỗi đầu tiên
Úi chà!
Nếu bạn bấm vào lỗi tiêu đề, bạn sẽ thấy dấu vết ngăn xếp.
Tin nhắn có vẻ tệ. Tất nhiên, chúng tôi đã nhìn thấy các thông báo lỗi mà không hiểu mã đó nằm ở đâu. Theo mặc định, chúng ta đang nói về bản đồ nguồn trong ReactJS vì chúng chưa được định cấu hình.
Tôi cũng muốn cung cấp hướng dẫn thiết lập bản đồ nguồn, nhưng điều đó sẽ khiến bài viết này dài hơn tôi dự định.
Bạn có thể nghiên cứu chủ đề này . Nếu bạn quan tâm đến bài viết này, sẽ xuất bản phần thứ hai về tích hợp bản đồ nguồn. Vì vậy, hãy nhấn nhiều lượt thích và đăng ký hơn để không bỏ lỡ phần thứ hai.
5. Cách sử dụng Lính gác với điểm cuối API
ĐƯỢC RỒI. Chúng tôi đã đề cập đến ngoại lệ javascript trong các đoạn trước. Tuy nhiên, chúng ta sẽ làm gì với lỗi XHR?
Sentry cũng có khả năng xử lý lỗi tùy chỉnh. Tôi đã sử dụng nó để theo dõi lỗi api.
Sentry.captureException(err)Bạn có thể tùy chỉnh tên lỗi, cấp độ, thêm dữ liệu, dữ liệu người dùng duy nhất bằng ứng dụng, email, v.v.
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));
}
});Tôi muốn sử dụng hàm chung cho API bắt.
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);
};Nhập hàm này vào lệnh gọi api của bạ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));
}
});
};Hãy kiểm tra các phương pháp:
- setLevel cho phép bạn chèn lỗi cấp độ vào bảng điều khiển canh gác. Nó có các thuộc tính - 'gây tử vong', 'lỗi', 'cảnh báo', 'log', 'thông tin, 'gỡ lỗi', 'nghiêm trọng').
- người dùng đặt giúp lưu bất kỳ dữ liệu người dùng nào (id, địa chỉ email, gói thanh toán, v.v.).
- setExtra cho phép bạn chỉ định bất kỳ dữ liệu nào bạn cần, ví dụ: lưu trữ.
Nếu bạn muốn nhận phản hồi của người dùng về một lỗi, bạn nên sử dụng hàm showReportDialog.
Sentry.showReportDialog();Kết luận:
Hôm nay chúng tôi đã mô tả một cách để tích hợp Sentry vào ứng dụng React.
→ Trò chuyện Telegram bằng
Nguồn: www.habr.com