今天我将带您了解 React 应用程序中的实时错误跟踪。 前端应用程序通常不用于错误跟踪。 一些公司经常把错误跟踪放在一边,在文档、测试等之后再返回。 但是,如果您可以使您的产品变得更好,那就去做吧!
1. 为什么需要哨兵?
我假设您对生产过程中的错误跟踪感兴趣。
您认为这还不够吗?
好吧,我们来看看细节。
开发人员使用 Sentry 的主要原因:
- 让您在部署有错误的代码时摆脱风险
- 帮助 QA 进行代码测试
- 快速获取问题通知
- 快速修复错误的能力
- 在管理面板中方便地显示错误
- 按用户/浏览器段对错误进行排序
担任首席执行官/领导项目的主要原因
- 省钱(Sentry 可以安装在您的服务器上)
- 获取用户反馈
- 实时了解您的项目出了什么问题
- 了解人们在使用您的应用时遇到的问题数量
- 帮助找到开发人员犯错误的地方
我认为开发人员首先会对这篇文章感兴趣。 您还可以使用这一系列理由来说服您的老板集成 Sentry。
请小心业务清单上的最后一项。
您已经感兴趣了吗?
什么是哨兵?
Sentry 是一款开源错误跟踪应用程序,可帮助开发人员实时跟踪和修复崩溃。 不要忘记该应用程序还可以让您提高效率并改善用户体验。 Sentry 支持 JavaScript、Node、Python、PHP、Ruby、Java 等编程语言。
2. 登录并创建项目
- 打开您的哨兵帐户。 您可能需要登录。 (请注意,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 位于项目 -> 设置 -> 客户端密钥中。 您可以在搜索栏中找到客户端密钥。
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
4. 跟踪第一个错误
例如,我使用了带有 Deezer API 的简单音乐应用程序。 你可以看到
我们需要创建一个调用的按钮 控制台日志 с 用户邮箱。 执行此操作后,我们应该收到一条错误消息: 未捕获的类型错误(无法从未定义的属性中读取属性 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 中的源映射,因为它们没有配置。
我还想提供有关设置源映射的说明,但这将使本文比我预期的长得多。
你可以研究这个话题
5.用法 SENTRY 有端点 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));
}
});
我想对 catch 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);
};
在 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));
}
});
};
我们来检查一下方法:
- 设置级别 允许您在哨兵仪表板中插入级别错误。 它具有属性 -“致命”、“错误”、“警告”、“日志”、“信息”、“调试”、“严重”)。
- 设置用户 有助于保存任何用户数据(ID、电子邮件地址、付款计划等)。
- 设置额外 允许您设置所需的任何数据,例如商店。
如果您希望用户对错误进行反馈,您应该使用 showReportDialog 函数。
Sentry.showReportDialog();
结论:
今天我们描述了将 Sentry 集成到 React 应用程序中的一种方法。
→ 电报聊天
来源: habr.com