在前面的文章中我们介绍了 ichati.cn 用到的代码静态质量检查的工具 SonarQube，和 Nodejs 系统可观测性的工具 OpenTelemetry 和 SigNoz。

这篇文章我们来介绍一下 ichati.cn 前端所用到的监控系统 Sentry。

前端的监控相比较后端来说会更加简单一些。

ichati.cn 只关注两个地方。

• 异常
• 性能

原理我就不讲了，很简单。

异常通过 window.onerror、try-catch、error 事件、unhandledrejection 事件等等来实现。

性能可以通过 preformance API 来实现。

Sentry 介绍

Sentry 是前端监控领域最强大的开源库之一。

当然它不仅限于前端，还可以监控客户端和服务端。但它最擅长的仍然是前端。所以 ichati.cn 选择在后端使用 OpenTelemetry，选择在前端和小程序使用 Sentry。

Sentry 的体积很小，只有 20kb，所以对加载速度影响不大。

它的异常监控功能非常强大，支持多环境、多版本的管理。

性能检测方面，支持自动监测、手动检测和指标的可视化。

在监测之外，还支持报告和告警。比如通过邮箱等方式提醒对应的负责人。同时告警的规则还可以自定义。

Sentry 支持私有化部署。私有化部署可以避免数据泄露的风险。

和后端的可观测性生态不同，由于前端的监控比较简单，所以并不像 OpenTelemetry 和 SigZon 那样各司其职。

Sentry 是一个集多种功能于一体的开源框架。涵盖了数据的采集、数据的存储、数据的分析和可视化。所以它的架构非常复杂，利用了一大堆中间件来实现，比如 Zookeeper、Kafka、ClickHouse 等。

部署 Sentry

Sentry 有两种使用方式。一种是官方的云服务，一种是私有部署。

这里我们演示私有部署的用法。

私有部署需要使用 Docker。

首先在 Github 下载最新的源代码。

github.com/getsentry/s…

然后运行解压后的 install.sh 文件，它会帮我们处理所有的事情。

稍等片刻，Docker 镜像启动成功后，会监听 9000 端口，我们可以通过 http://127.0.0.1:9000 访问 Dashboard。

刚开始 ichati.cn 使用的是私有部署，但很快就发现 sentry 很吃服务器资源。觉得并不划算，所以后面换成官方的云服务了。

官方的 Sentry Team 订阅每个月 29 美元，约等于 210 元。并不算贵。

前端项目接入

在之前，Sentry 比较麻烦，需要在前端项目中安装依赖库，在项目启动的入口处初始化 Sentry 等等。

但是现在在项目中集成 Sentry 非常简单了。

第一步：在控制台创建项目。

点击 Create Project。

第二步：集成 SDK。

然后在项目中运行命令：

npx @sentry/wizard -i nextjs

选择几个选项之后，sentry 的脚手架会帮我们把默认的配置都处理好。

最后我们启动项目：

访问 http://127.0.0.1:port/sentry-example-page 就可以进入到测试页面。

在测试页面点击抛出异常就可以向 Sentry 发送错误。

Sentry 配置项

sentry 的配置项有很多，这里对它们进行展开介绍。

• release：应用的版本号
• environment：环境
• servername：服务名
• tags：标签
• extra：附加信息
• user：用户

以下是一个简单的示例：

Sentry.init({
	dsn: process.env.SENTRY_DSN,
	environment: process.env.BUILD_ENV,
});

Sentry.setTag("app", "trace");
Sentry.setTag("platform", "wechat");
Sentry.setTag("framework", "taro");
Sentry.setExtra("frameworkVersion", process.env.TARO_VERSION);
Sentry.setExtra("buildTime", process.env.BUILD_TIME);
Sentry.setExtra("buildCommit", process.env.BUILD_COMMIT);
Sentry.setExtra("buildBranch", process.env.BUILD_BRANCH);
Sentry.setExtra("buildTag", process.env.BUILD_TAG);
Sentry.setExtra("buildNumber", process.env.BUILD_NUMBER);
Sentry.setExtra("buildType", process.env.BUILD_TYPE);
Sentry.setExtra("buildEnv", process.env.BUILD_ENV);

Sentry.setUser({
	id: 'xxx',
	username: 'xxx',
	email: 'xxx',
	ip_address: 'xxx',
});

除了这些配置项，我们还可以使用事务手动上报错误，并且设置错误的作用域：

const transaction = Sentry.startTransaction({
	name: "Example Frontend Transaction",
});

Sentry.configureScope((scope) => {
	scope.setSpan(transaction);
});

transaction.finish();

Sentry Dashboard

通过上一步骤的接入，现在我们可以在 Sentry Dashboard 中查看和管理错误了。

首先来看 Issues。

Issues 里面是问题列表，展示了错误的名字、详细信息，以及哪个文件中抛出的错误、什么时候发生的错误、错误的发展趋势、错误的次数、出现错误的用户数、分配的错误处理人等。

点击某条 Issue，我们可以看到更加详细的错误信息。

信息的内容非常全面，包括：

• Tag
• 错误堆栈
• 错误文件/行数（需要使用 sourcemap）
• 用户的运行环境/浏览器/操作系统/IP 等
• 用户行为分析

甚至还支持用户屏幕重放。

微信小程序接入 Sentry

ichati 除了前端外，还有另外一个入口，就是微信小程序。

相对于前端来说，sentry 官方并没有对微信小程序的支持。

所以我们采用了第三方方案。

微信小程序所有的请求域名都必须经过 IPC 备案，但 sentry.io 并没有备案，也就是说我们无法直接将数据上报到 sentry。

但也并非不能解决，使用一个已经备案过的域名进行代理即可。虽然麻烦，但并不复杂。

代理可以使用 nodejs、或者直接使用 nginx。

以下是示例代码：

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const chalk = require("chalk");
const dotenv = require("dotenv");
dotenv.config();

const app = express();
const port = process.env.PORT || 9000;

if (!process.env.TARGET) {
  console.error(chalk.red("Please set TARGET in .env file"));
  process.exit(1);
}

app.use(
  "/",
  createProxyMiddleware({
    target: process.env.TARGET,
    changeOrigin: true,
    onProxyReq: (proxyReq, req, res) => {
      proxyReq.path = req.originalUrl;
    },
    onProxyRes: function (proxyRes, req, res) {
      proxyRes.headers["Access-Control-Allow-Origin"] = "*";
    },
  })
);

app.listen(port, () => {
  console.log(
    chalk.green(`Proxy server listening at http://localhost:${port}`)
  );
});

以上就是关于 sentry 的简要介绍。

篇幅所限，本文暂时结束。

后面会持续更新，让我们一起期待《大型网站重构指南》的下一篇。

如果你对最新的技术感兴趣，特别是对 Web3、AI 相关的内容感兴趣，可以添加我的微信 LZQ20130415，拉你进群交流。