如何用JavaScript、React和Sentry进行错误跟踪（附代码）

DebugUsery
346 阅读7分钟

以一种可管理的方式跟踪错误是开发人员最痛苦的任务之一。在过去，我们不得不为每一个应用程序重建错误跟踪，这往往导致整个业务逻辑中不相干的代码行。 Sentry是一个错误跟踪框架，它做了很多繁重的工作，提供框架、后端和可视化控制台。它还提供了你所需要的一切，以便低效率地整合到你的JavaScript代码库中。

Sentry最近宣布对其前端JavaScript捆绑包进行了新的优化，将包的大小减少了约29%。Sentry的新兴技术副总裁Ben Vinegar说，该公司对这项优化有两个目标，"一个是能够实现一些快速的胜利，如删除废弃的代码和删除不必要的抽象，第二个是更大的重构，实现树状摇动和从JavaScript ES5切换到ES6"。

现在是在你的JavaScript应用程序中使用Sentry的好时机。 如果你已经在使用Sentry，现在是更新你的捆绑程序的时候了。

我们将在这个演示中使用React，看看Sentry是如何在前端的JavaScript应用程序中工作的。

Sentry如何工作

要在你的React应用程序中使用Sentry，你首先要在你的应用程序目录中包含Sentry库，然后在应用程序生命周期的早期初始化该框架。 然后，Sentry将收集信息并将其报告给Sentry服务，你可以在你的应用程序仪表板中查看它。 Sentry提供各种方法将信息切成对你最有用的形式。它还会自动对类似的错误进行分组，使之能够简单地识别出高优先级的问题。

设置Sentry

第一步是在Sentry创建一个账户。 开发者级别可以让你持续免费访问。

一旦你登录了你的账户，你将创建一个项目。 主导航在你屏幕的左侧菜单中。点击项目，然后在左上角创建项目。 选择JavaScript作为你的技术，然后给项目起个名字并创建项目。

现在，你的项目会以卡片的形式出现在项目窗格中，如图1所示。 如果你点击项目名称，Sentry会带你到项目的详细信息页面。 你现在有一个地方可以跟踪你的应用程序的问题，我们接下来会开发。

sentry fig1IDG

图1.Sentry的项目窗格。

创建一个React应用

让我们在命令行中输入：npx create-react-app sentry-js ，启动一个JavaScript React应用程序。你可以通过输入npm run start ，测试一切是否正常运行。用户界面将在localhost:3000处可见。

接下来，加入Sentry SDK。 注意，如果应用程序仍在开发模式下运行，你需要点击CTRL-C，或者将其放在后台。 我们将通过NPM添加两个包：npm i @sentry/browser @sentry/tracing 。

你的项目有一个唯一的ID，与一个唯一的URL相关联，称为DSN（数据源名称）。 这是你的错误报告的来源。 你可以通过打开项目的细节窗格并点击安装说明链接（看起来像一个友好的帝国机器人旁边的那个）来找到你的项目的URL。 中间的代码片段是我们要纳入我们的项目的。

现在，我们想在应用程序加载的早期将API添加到代码中，所以打开/src/index.js ，将代码段放入其中。它将是清单1中所示的东西。

清单1.将Sentry SDK添加到index.js中


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import * as Sentry from "@sentry/browser";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "https://<YOUR-DSN-HERE>",
  integrations: [new BrowserTracing()],

  tracesSampleRate: 1.0
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

现在让我们来创建一个错误。打开/src/App.js ，添加按钮元素，如清单2所示。

清单2.在/src/App.js中添加一个错误按钮


<button onClick={() => {throw new Error('FooBar Error');}}>Make another Error</button>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">

当点击时，这个按钮将抛出一个错误。 重新加载开发应用程序并点击它，Sentry将自动报告它，而不需要任何明确的工具。

回到Sentry仪表板，点击左侧导航栏上的问题链接。你会看到一个类似图2的屏幕。

sentry fig2IDG

图2.Sentry仪表板中的问题屏幕。

注意到这里显示了错误的一些细节，包括错误是从哪里调用的（在我的例子中，onClick(home/matthewcarltyson/sentry-js/sentry-js/rc/App)）和错误信息FooBar Error。 Sentry已经在捕捉有用的信息了。

如果你反复点击这个按钮，你会注意到错误计数并没有上升。Sentry可以识别类似的事件，比如一个错误发生的实例，并把它们作为一个问题分组。

用Sentry进行性能监控

你可以通过点击Sentry导航菜单中的性能来查看事务。

事务与错误监控协同工作，不仅提供了一种监控错误的方法，也提供了识别性能问题的方法。一个简单的例子是识别你的应用程序中缓慢的API获取请求，与抛出的异常。

你会看到一些绘制交易指标的窗格。在屏幕的底部，是一个包含事务的表格，包括/ transaction 。如果你点击这个斜线，你会打开事务的细节，Sentry会给你关于这个页面加载的各种资产的指标，比如加载favicon花了多长时间。

按环境设置和过滤

如果你不告诉它报告来自哪个环境，Sentry会自动把问题和事务分配到生产环境。 你可以在问题表中看到这一点，点击标题下拉的All Env会显示生产环境。

你可以通过在Sentry初始化中添加一个environment 字段来明确设置环境（本例中为/src/index.js ）。一个例子是：environment: development 。一旦交易到达了这个位置，你就可以根据环境进行排序和过滤。

在你的构建中，你可以通过环境值来设置environment 字段的适当值，如dotenv 。

发布

通过Sentry，你还可以通过发布来查看和组织数据。 点击导航菜单中的发布链接来开始。 在所有项目下拉菜单中，选择你之前创建的项目。 这将打开一个创建发布的对话框。 点击*链接，选择创建新集成*。 由此产生的对话框要求为你的新集成命名，这是一个部署和项目之间的关联。你可以接受默认值，在我的例子中，它是javascript-1 Release Integration。

现在，配置界面将填入发布ID。 在我们做其他事情之前，我们需要一个Git提交，以便Sentry附加到上面。因此，init ，按照清单3中的步骤建立一个新的 repo（注意必须安装Git）。

清单 3.启动本地 repo


git init
git add .
git commit -m “initial”

现在我们可以按照清单4中提供的步骤进行操作，与Sentry Releases屏幕中的步骤类似。

清单4.创建一个版本


# Installs the sentry command line tool:
curl -sL https://sentry.io/get-cli/ | SENTRY_CLI_VERSION="2.2.0" bash
# Sets env variables
SENTRY_AUTH_TOKEN=
VERSION=`sentry-cli releases propose-version`
# use the tool to create a release
sentry-cli releases new "$VERSION" --org=dark-horse --project=javascript-1 --auth-token=<YOUR-INTEGRATION-ID-HERE>

# Associate the git commit
sentry-cli releases set-commits "$VERSION" --auto --org=dark-horse --project=javascript-1 --auth-token=<YOUR-INTEGRATION-ID-HERE>

#
sentry-cli releases finalize "$VERSION" --org=dark-horse --project=javascript-1 --auth-token=<YOUR-INTEGRATION-ID-HERE>

现在，当你回到Sentry控制台，选择左边的Release，你会看到新创建的版本。 你可以看到它已经正确地放置了javascript-1项目。 如果你点击进入版本本身，你会看到关于它的指标和细节。

我们可以使用发布来跟踪错误和性能，作为你发布周期的一部分。 你可以跟踪一个问题是在哪个版本中引入的，跟踪回归，等等。 你也可以直接将发布与GitHub等仓库中的提交相关联。

总结

我们只是触及了Sentry能做的事情的表面。它可以用来与问题跟踪系统集成，将问题分配给人员和团队，跟踪问题，并纳入细粒度的性能指标。

每一个具有足够规模和复杂性的项目都值得进行错误和性能跟踪。 不难看出为什么Sentry是这个领域的领导者，因为它使管理产生的数据和获得数据的可见性变得容易。 Sentry复杂而又低耗的集成使它可以简单地添加到项目中。在这里，你已经看到了我们基于React的例子。

avatar
文章
阅读
粉丝