前端项目上线之后，最头疼的问题就是，用户那边出了bug，我们却不知道，等用户反馈过来，已经过去了很久，也很难复现和排查。

这时候，就需要一个前端监控工具，能自动捕获前端的错误，上报到服务端，让我们能及时发现问题，定位问题，解决问题。Sentry就是其中最流行的一个，它支持前端、后端、移动端等多种平台，功能强大，用的人也很多。

今天这篇文章，就来从零开始，教大家怎么用Sentry做前端监控，从注册账号、安装SDK、上报错误，到查看告警、分析问题，一步步带你入门，希望能帮到刚接触前端监控的朋友。

一、Sentry是什么，能做什么

在开始之前，先简单介绍一下Sentry是什么，能做什么。

Sentry是一个开源的错误追踪和监控平台，主要用于实时监控应用的错误和异常，帮助开发者快速发现、定位和解决问题。它支持很多平台和语言，包括JavaScript、TypeScript、React、Vue、Node.js、Python、Java、Go、移动端等，几乎覆盖了主流的开发技术栈。

对于前端来说，Sentry主要能做这些事情：

1. 自动捕获JavaScript错误

Sentry的SDK，会自动捕获页面上的JavaScript错误，包括未捕获的异常、Promise rejection、资源加载失败等，不需要你手动写try-catch，只要引入了SDK，就能自动上报。

2. 记录错误上下文

Sentry上报错误的时候，不只是上报错误信息，还会带上很多上下文信息，比如错误发生的页面URL、用户的浏览器和系统、用户的操作步骤、请求的接口、控制台的日志等，这些信息，能帮助你快速定位和复现问题。

3. 错误聚合和统计

Sentry会把相同的错误聚合在一起，统计每个错误出现的次数、影响的用户数、首次出现和最后出现的时间，让你能清楚地看到，哪些错误最严重，影响最大，优先解决。

4. 告警通知

你可以设置告警规则，当某个错误达到一定的频率，或者影响了一定数量的用户，Sentry会通过邮件、短信、钉钉、企业微信等方式，通知你，让你能及时发现和处理问题，不用一直盯着仪表盘。

5. 性能监控

除了错误监控，Sentry还支持性能监控，能监控页面的加载时间、接口的响应时间、用户的操作流程等，帮助你发现性能瓶颈，优化用户体验。

总的来说，Sentry是一个功能很全面的监控工具，能帮你解决"用户出了bug你不知道"的问题，是前端项目上线后，必不可少的工具之一。

二、第一步：注册Sentry账号，创建项目

要用Sentry，首先要注册一个账号，创建一个项目。

Sentry有两种使用方式，一种是用官方的SaaS服务，直接在官网注册账号，就能用，不用自己部署，适合大多数人，尤其是小团队和个人开发者；另一种是自己私有化部署，适合对数据安全有要求，或者有定制化需求的大团队。

对于入门来说，建议先用官方的SaaS服务，免费版就有足够的功能，能满足大多数小项目的需求，等用熟了，再考虑要不要私有化部署。

注册账号：

  1. 打开Sentry官网（sentry.io），点击注册，用邮箱或者GitHub账号注册。
  2. 注册完成后，登录，进入主界面。

创建项目：

  1. 点击"Create Project"，创建一个新项目。
  2. 选择平台，前端项目就选"Browser"，或者具体的框架，比如React、Vue、Angular等。
  3. 给项目起个名字，选择所在的团队，设置告警频率，然后点击创建。
  4. 创建完成后，Sentry会给你一个DSN（Data Source Name），这个DSN很重要，是SDK上报数据的地址，后面配置SDK的时候要用到，记下来。

创建好项目之后，就可以在项目的设置里，看到DSN，也可以设置告警规则、团队成员、集成等。

三、第二步：安装和配置Sentry SDK

创建好项目之后，就要在你的前端项目里，安装和配置Sentry的SDK了。

Sentry的前端SDK，叫@sentry/browser，支持原生JavaScript，也支持React、Vue、Angular等框架，安装和配置都很简单。

安装SDK：

如果你的项目用npm或者yarn管理依赖，直接安装就行：

npm install @sentry/browser
# 或者
yarn add @sentry/browser

如果是原生的HTML项目，也可以用CDN的方式引入，直接在HTML里加一个script标签就行，更简单。

配置SDK：

安装好之后，在项目的入口文件里，越早初始化越好，一般是在main.js或者app.js的最开头，初始化Sentry：

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '你的DSN',
  // 其他配置
});

最基本的配置，只要传一个DSN就行，这样Sentry就会自动捕获页面上的错误，上报到你的项目里。

当然，还有很多可选的配置，常用的有：

  • release：设置应用的版本号，方便区分不同版本的错误，比如release: 'my-app@1.0.0'。
  • environment：设置环境，比如开发、测试、生产，方便区分不同环境的错误，比如environment: 'production'。
  • sampleRate：设置错误上报的采样率，0到1之间，比如0.5就是只上报50%的错误，流量大的时候可以用，减少上报量。
  • attachStacktrace：是否自动附加堆栈信息，默认是true，建议开启。
  • beforeSend：在错误上报之前，可以做一些处理，比如过滤敏感信息，或者修改错误内容，这个很实用。

一个比较完整的配置，大概是这样的：

Sentry.init({
  dsn: '你的DSN',
  release: 'my-app@1.0.0',
  environment: process.env.NODE_ENV,
  sampleRate: 1.0,
  attachStacktrace: true,
  beforeSend(event) {
    // 过滤敏感信息
    if (event.request) {
      delete event.request.cookies;
      delete event.request.headers;
    }
    return event;
  },
});

配置好之后，Sentry就会自动捕获页面上的错误了，你可以故意写一个错误，测试一下能不能上报成功。

四、第三步：手动上报错误和信息

除了自动捕获错误，Sentry也支持手动上报错误和信息，有些场景，自动捕获不到，或者你想上报一些自定义的信息，就可以用手动上报。

手动上报错误：

如果你在代码里用了try-catch，捕获了异常，但又想把这个异常上报到Sentry，可以用captureException方法：

try {
  // 可能出错的代码
} catch (error) {
  Sentry.captureException(error);
}

这样，捕获到的异常，就会上报到Sentry，和自动捕获的错误一样，会带上堆栈信息和上下文。

手动上报消息：

有时候，你不想上报错误，只是想上报一些信息或者警告，比如用户做了某个重要操作，或者某个异常情况，但不是错误，这时候可以用captureMessage方法：

Sentry.captureMessage('用户支付失败，订单号：xxx', 'warning');

第二个参数是级别，可以是'info'、'warning'、'error'等，方便在Sentry里区分和筛选。

添加上下文信息：

上报错误的时候，你还可以添加一些自定义的上下文信息，比如用户信息、标签、额外的数据，这些信息会和错误一起上报，帮助你更好地定位问题。

// 设置用户信息
Sentry.setUser({
  id: '123',
  username: 'zhangsan',
  email: 'zhangsan@example.com',
});

// 设置标签
Sentry.setTag('page', 'home');
Sentry.setTag('vip', 'true');

// 设置额外数据
Sentry.setExtra('orderId', '456');
Sentry.setExtra('amount', 99.9);

这些上下文信息，会显示在Sentry的错误详情里，让你能更清楚地知道，错误发生时，用户是谁，在哪个页面，做了什么操作，方便排查。

五、第四步：在Sentry里查看和分析错误

上报了错误之后，就可以在Sentry的后台，查看和分析错误了。

错误列表：

进入项目的"Issues"页面，就能看到所有上报的错误列表，每个错误，会显示错误标题、出现次数、影响用户数、首次和最后出现时间、级别等信息。

你可以按级别、时间、环境、版本等筛选，也可以按出现次数或者影响用户数排序，优先处理那些出现次数多、影响用户多的严重错误。

错误详情：

点击某个错误，就能看到错误的详细信息，包括：

  • 错误信息和堆栈跟踪，能看到错误发生在哪个文件，哪一行，调用栈是什么。
  • 上下文信息，包括用户信息、标签、额外数据、请求信息、浏览器和系统信息等。
  • 面包屑（Breadcrumbs），记录了错误发生前，用户的操作步骤，比如点击了什么按钮，跳转了哪个页面，调用了哪个接口，就像黑匣子一样，能帮你还原错误发生的过程。
  • 事件列表，这个错误每次出现的具体事件，可以看每次的详细信息。

有了这些信息，大多数错误，都能很快定位到原因，不用再像以前那样，靠用户描述，或者自己瞎猜了。

错误聚合：

Sentry会自动把相同的错误聚合在一起，不会因为同一个错误出现了100次，就显示100条，而是聚合成一条，显示总共出现了多少次，影响了多少用户。这样，你就能清楚地看到，哪些错误最严重，优先处理。

当然，有时候聚合可能不准确，把不同的错误聚合成了一条，或者把同一个错误分成了多条，这时候，你可以手动合并或者拆分，调整聚合规则。

六、第五步：设置告警，及时发现问题

光有错误上报还不够，你不可能一直盯着Sentry的后台，所以要设置告警，当有严重错误的时候，Sentry自动通知你。

设置告警规则：

在项目的"Alerts"页面，可以创建告警规则，比如：

  • 当某个错误，在1小时内出现超过10次，就告警。
  • 当某个错误，影响了超过5个用户，就告警。
  • 当出现新的错误，就告警。
  • 当错误率突然升高，超过了阈值，就告警。

你可以根据自己的需求，设置不同的告警规则，严重的错误，设置高优先级的告警，不严重的，可以低优先级，或者不告警，避免告警太多，产生告警疲劳。

告警渠道：

Sentry支持很多告警渠道，包括：

  • 邮件，最基本的，默认就有。
  • 短信，需要付费版。
  • 钉钉、企业微信、飞书，国内常用的办公软件，可以通过集成或者webhook来配置。
  • Slack，国外常用的团队沟通工具。
  • Webhook，自定义的回调，可以对接自己的告警系统。

对于国内团队，一般用邮件或者钉钉/企业微信比较多，配置也很简单，按照Sentry的指引，几步就能配好。

告警的注意事项：

设置告警的时候，要注意避免告警疲劳，不要什么错误都告警，不然告警太多了，你就会麻木，真正重要的告警，反而被忽略了。建议只对严重的、影响大的错误设置告警，一般的错误，可以每天或者每周汇总看一次就行。

七、第六步：性能监控（可选）

除了错误监控，Sentry还支持性能监控，这个功能是可选的，需要额外配置，如果你也想监控前端性能，可以开启。

开启性能监控：

安装性能监控的SDK：

npm install @sentry/tracing

然后在初始化的时候，配置tracesSampleRate，开启性能追踪：

import { Integrations } from '@sentry/tracing';

Sentry.init({
  dsn: '你的DSN',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0, // 采样率，1.0就是100%
});

开启之后，Sentry会自动监控页面的加载时间、接口的响应时间、用户的操作等性能数据，上报到Sentry。

查看性能数据：

在项目的"Performance"页面，可以看到性能数据，包括：

  • 页面的加载时间，白屏时间、首屏时间、可交互时间等。
  • 接口的响应时间，哪些接口慢，慢在哪里。
  • 用户的操作流程，每个步骤花了多少时间。
  • 性能趋势，性能是变好了还是变差了。

通过这些数据，你能发现前端的性能瓶颈，针对性地优化，提升用户体验。

不过，性能监控会增加一定的上报量和性能开销，采样率不要设太高，根据自己的流量和需求，设置一个合适的值就行。

八、常见问题和注意事项

最后，说说用Sentry常见的问题和注意事项，帮大家少踩坑。

1. 错误上报不上去怎么办

如果配置好了，但错误没有上报，先检查这几点：

  • DSN是不是正确，有没有写错。
  • 网络是不是通的，能不能访问Sentry的服务器，如果是私有化部署，检查地址对不对。
  • SDK是不是初始化成功了，有没有报错，初始化的位置是不是太早了，在DOM还没加载的时候就初始化了。
  • 有没有被浏览器插件或者广告拦截器拦截了，有些插件会拦截Sentry的请求。

2. source-map的问题

生产环境的代码，一般都会压缩混淆，这时候上报的错误堆栈，指向的是压缩后的代码，很难看，定位不到具体的源码。这时候，就需要上传source-map，Sentry支持上传source-map，能把压缩后的堆栈，映射回原始源码，方便定位。

上传source-map，可以用@sentry/webpack-plugin，在构建的时候自动上传，也可以用sentry-cli手动上传。注意，source-map不要放在生产环境的服务器上，不然用户就能看到你的源码了，只上传到Sentry就行。

3. 敏感信息的问题

上报错误的时候，可能会带上一些敏感信息，比如用户的密码、token、手机号等，这些信息不应该上报到Sentry，避免泄露。可以在beforeSend里，过滤掉敏感信息，或者用Sentry的隐私配置，自动脱敏。

4. 采样率的问题

如果你的项目流量很大，错误很多，全部上报的话，可能会超过Sentry的免费额度，或者产生很高的费用。这时候，可以设置sampleRate，只上报一部分错误，或者对不同的错误，设置不同的采样率，严重的错误全量上报，一般的错误采样上报。

5. 多环境的问题

开发、测试、生产环境，最好分开，用不同的项目，或者用environment来区分，不要混在一起，不然开发环境的测试错误，会干扰生产环境的错误统计，也容易产生误告警。

6. 不要只依赖Sentry

Sentry是一个很好的工具，但不要只依赖它，它能帮你发现错误，但不能代替测试和代码审查。该写的测试还是要写，该做的代码审查还是要做，Sentry只是最后一道防线，帮你发现那些漏网之鱼。

九、写在最后

Sentry是一个非常强大的前端监控工具，能帮你及时发现和定位前端错误，提升线上项目的稳定性和用户体验。对于任何一个上线的前端项目，都建议接入Sentry，花不了多少时间，却能带来很大的价值。

这篇文章，从零开始，介绍了Sentry的基本使用，从注册账号、安装SDK、上报错误，到查看分析、设置告警、性能监控，希望能帮刚接触Sentry的朋友，快速入门。

当然，Sentry还有很多高级功能，比如Release跟踪、问题分配、工作流集成、自定义仪表盘等，等你入门之后，可以慢慢探索，把Sentry用得更深入，更好地服务于你的项目。

最后，希望大家的项目，都能少出bug，多出star，线上永远稳定运行。如果有什么问题，或者有其他的前端监控工具推荐，欢迎在评论区交流讨论。