使用 Sentry 进行前端监控
概述
什么是前端监控
简而言之，前端监控是用于跟踪网站或应用程序性能的一组流程和工具。
前端监控主要关注最终用户看到的部分。其中包括以下问题：
- 渲染速度慢
- 用户体验不一致或无响应
- 网络请求/API错误
- 特定于框架的问题
前端监控的重要性
随着网站变得越来越强大和复杂，维护其性能变得越来越困难。
前端性能是用户体验的一部分。对企业质量的看法通常是用户通过其网站首先看到和体验到的。客户端的任何不一致、停机或错误都可能导致网站失去信任和信誉。因此，前端监控是开发强大的网站和应用程序的重要组成部分。
React 哨兵入门
幸运的是，目前有一些强大的工具（例如Sentry）可以跟踪、记录和监控前端性能。它是一个开源的错误跟踪工具，支持多种语言和框架，如Java、PHP、Ruby、React、Rust、Unity等。
在本教程中，将使用 Sentry 设置并开始监视 React 应用程序。
第 0 步：设置项目
创建反应应用程序
npx create-react-app my-app
cd my-app
npm start
如果之前通过 npm install -g create-react-app 全局安装了 create-react-app，建议你使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 卸载该软件包，以确保npx 始终使用最新版本。
第 1 步：设置 Sentry 项目
在sentry.io创建一个免费的Sentry 帐户。创建帐户后，单击“创建项目”按钮。 
现在，选择 React 作为我们项目的平台并输入项目名称。单击“创建项目”以完成新 Sentry 项目的设置。 
第2步：安装Sentry SDK
在 React 应用程序中，可以通过使用以下命令安装其 SDK 来集成 Sentry：
npm install @sentry/react @sentry/tracing
将已安装的包导入 React 的应用程序 index.js 文件中，如下所示：
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
第 3 步：在 React 应用程序中配置 Sentry
为了让 Sentry 连接到我们的 React 应用程序，需要使用客户端密钥（也称为 Sentry DSN（数据源名称）值）配置 SDK。
要获取客户端密钥，只需导航到“设置”>“项目”>“{你的项目名称}”，如下面的截图所示。 
然后，单击“客户端密钥 (DSN)”并复制 DSN 值。 
返回应用程序的index.js 文件，在导入语句下方添加 Sentry.init() 方法，以将应用程序连接到你的 Sentry 项目。您的 index.js 文件应类似于：
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import App from "./App";
//Add these lines
Sentry.init({
dsn: "Your DSN here", //paste copied DSN value here
integrations: [new BrowserTracing()],
tracesSampleRate: 1.0, //lower the value in production
});
ReactDOM.render(<App />, document.getElementById("root"));
关于采样率
测试时，将 tracesSampleRate 保持为 1.0 就可以了。这意味着在浏览器中执行的每个操作都将作为事务发送到 Sentry。
在生产中，应降低该值以收集统一的样本数据大小，而不会达到 Sentry 的事务配额。或者，为了动态收集样本数据，可以使用tracesSampler来过滤这些交易。
第 4 步：测试集成
配置完应用程序后，可以使用一个简单的按钮来测试集成是否成功：
return <button onClick={methodDoesNotExist}>Bad Button</button>;如果运行应用程序，会收到以下错误：
现在，检查 Sentry 仪表板，看看是否已正确跟踪错误。如下图所示，ReferenceError 就在那里。 
第 5 步：捕获自定义错误
除了从 React 捕获错误之外，Sentry 还可以捕获应用程序内指定的错误。
例如，在React应用程序中，添加一些功能。首先是按钮错误。
function ButtonError() {
throw "Ini Error";
}
然后，只需在调用该函数时添加一条 try-catch 语句即可。需要使用 Sentry.captureException()，以便将其捕获为事务并发送到 Sentry。
function TestError() {
try {
ButtonError();
} catch (e) {
Sentry.captureException(e);
}
}
不要忘记在 App.js 文件中导入使用 Sentry 的包：
import * as Sentry from "@sentry/react";
现在，如果单击“预期”按钮。 
在 Sentry 仪表板的问题下，可以看到我们捕获的自定义错误。 
启用性能监控
除了错误跟踪之外，还可以通过在 App 组件的导出语句中包装 Sentry.withProfiler() 来在 Sentry 仪表板中启用性能监控。
export default Sentry.withProfiler(App);
导航到“性能”选项卡以监视和测量重要指标，例如 FCP（首次内容绘制）、任何 API 请求的延迟或停机时间等。 
会话重播
OpenReplay 是一个开源会话重播套件，可让查看用户在 Web 应用程序上执行的操作，帮助你更快地解决问题。OpenReplay 是自托管的，可以完全控制你的数据。
只需添加一些配置即可捕获会话。
Sentry.init({
dsn: "YOUR DSN",
replaysSessionSampleRate: 0.1,
// If the entire session is not sampled, use the below sample rate to sample
// sessions when an error occurs.
replaysOnErrorSampleRate: 1.0,
integrations: [new Sentry.Replay()],
});
客户的反馈意见
Sentry还支持在发生错误时弹出反馈。在启动 Sentry 时添加一些配置。
Sentry.init({
dsn: "YOUR DSN",
beforeSend(event, hint) {
// Check if it is an exception, and if so, show the report dialog
if (event.exception) {
Sentry.showReportDialog({ eventId: event.event_id });
}
return event;
},
});
当错误发生时。再次单击“预期”按钮。 
如果用户提交反馈，可以在用户反馈中看到 
结论
毫无疑问，前端监控在当今的Web开发实践中已经逐渐流行起来。Sentry 等强大的工具可以提供有用的见解和错误管理，以丰富用户体验。
更强大的是 OpenReplay 与 Sentry 集成，允许发送重放的活动，以便更快、更轻松地进行调试。
希望这篇文章对你开始使用前端监控和 Sentry 有所帮助。
