Umi4插件开发之网友需求（一）：前端数据埋点之Sentry（入门）

2023-10-28 01:19:34

大家好，我是Umi 插件开发专家。今天，我将带领大家开启Umi 插件开发的探索，本次主题：前端数据埋点之 Sentry。

说到数据埋点，大家并不算太过生疏。举个例子，你们经常用电脑或者手机打开某个网站或者APP 时，可能会有一个提示框弹出来询问你是否要允许它推送通知。用户点击允许后，前端埋点数据就会发送给服务端进行记录，这样网站或APP就能对你进行更加个性化的推送了。

所以，数据埋点，其实是一种让浏览器主动上报某些事件到服务器的技术手段。前端埋点，顾名思义，就是前端来上报这些事件。那么在众多前端埋点工具中，Sentry 可谓是当下非常流行的一款。今天，我们就来聊聊 Sentry 以及如何在 Umi 项目中使用它。

接下来，我会手把手带大家学习以下内容：

Sentry 原理及官网使用说明
Umi 中使用 Sentry
Sentry 插件开发准备

Sentry 原理及官网使用说明

Sentry 是一个日志聚合和错误监控系统。它的原理是通过前端和后端 SDK 将错误信息记录到 Sentry 的服务器上，然后用户可以在 Sentry 的界面上查看这些信息，分析错误产生的原因并解决它。

对于 Sentry 的使用，首先，我们需要访问 Sentry 官网（https://sentry.io/）并创建一个账号。创建账号后，我们就可以创建项目了。在项目中，我们可以看到 Sentry 提供的各种功能，包括错误日志查看、错误分组、源代码映射、性能监控、用户反馈等。

Umi 中使用 Sentry

在 Umi 项目中使用 Sentry 非常简单。我们可以使用以下命令安装 Sentry 插件：

npm install @sentry/webpack-plugin @sentry/browser

安装完成后，我们可以在 config/config.ts 中配置 Sentry 插件。如下：

export default {
  plugins: [
    // ...
    ['@sentry/webpack-plugin', {
      // ...
    }],
  ],
}

其中，@sentry/webpack-plugin 是用于 webpack 的 Sentry 插件，它会在构建过程中将 Sentry SDK 注入到我们的代码中。而 @sentry/browser 是浏览器端的 Sentry SDK，它会在运行时收集错误信息并将其发送到 Sentry 的服务器上。