这篇笔记主要记录用Sentry监控应用里的前后端，分别配置应用里的前端和后端并测试是否生效。我用到的Sentry功能点如下
| 功能点编号 | 功能名称 | 功能说明 |
|---|---|---|
| 1 | 监控应用性能 | 追踪页面加载时间、接口响应时间、慢请求等性能指标 |
| 2 | 报错监控 | 捕获并上报前端或后端的异常信息，快速定位到代码位置 |
| 3 | 用户会话复现 | 自动录制用户点击、输入等操作，报错时可回放用户操作视频 |
| 4 | 用户操作痕迹 | 记录用户的行为路径，如点击、跳转、输入等操作 |
新建了应用里的前端和后端项目 
用户会话复现
用户操作痕迹，点击 点击 输入 点击 报错 
追踪代码报错的位置 
还有些其他功能，我没有用到， 如错误关联具体用户，版本控制（Release tracking），知道是哪个版本上线后报错，我用的是免费版。
我们要监控的应用是一个全栈应用，技术栈是MEAN(MongoDB Express React Node),开始配置吧
配置前端项目
进入Sentry控制台， 点击新建项目
因为我的是React, 选择React, 其他我保持默认，比如项目名，是否邮件通知 
点击新建项目按钮后就跳到如下页面，里面有配置步骤 
来自未来的一张截图 展示配置只要4步 
安装@sentry/react 执行安装下
bash
pnpm add @sentry/react接着配置SDK 在main.tsx里配置
tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import 'react-day-picker/style.css'
import './index.css'
import * as Sentry from '@sentry/react'
Sentry.init({
dsn: 'https://9c6eccdb37a5555089711d72aa4556fc@o4507231223939072.ingest.de.sentry.io/4509126357483600',
integrations: [Sentry.replayIntegration()],
// Session Replay
replaysSessionSampleRate: 1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
})
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>
)上传Source Maps
这里可以选择自动还是手动，我用的是vite, 我选择自动，执行下面命令, 就会安装执行引导程序
bash
npx @sentry/wizard@latest -i sourcemaps
问我用的是自己部署的Sentry还是官方的Sass, 我用的官方免费版，，自动打开sentry网页，因为我已经登录，就让我选择要配置的项目， 这里选择刚才新建的javascript-react项目，选择好了后页面就提示回到控制台，继续执行source-map配置引导程序 
问我选择了什么构建工具，我选了vite, 创建了一个.env.sentry-build-plugin
然后配置CI/CD 我选择的是I will do this later（晚点再配）, 因为当时给的是Github actions, jinkins, 没仔细看有没有netlify(前端自动部署用的这个），要自己配下 
并给出了配置的token, 后面用到
SENTRY_AUTH_TOKEN=sntrys_eyJpYXQiOjE3NDQyNDkzNDMuNTI4NDMxLCJ1cmwiOiJodHRwczovL3NlbnRyeS5pbyIsInJlZ2lvbl91xxxxxx
引导程序结束后有测试验证的流程，
添加测试代码
按照引导程序给出的流程验证，在本地测试和验证
-
pnpm build 打个包 成功上传source map 到sentry了
-
运行应用 测试错误 打完包之后，我们运行应用，去Sentry控制台，发现有报错
可以看到代码提示的错误位置
前端项目配置成功🎉🎉
Tip 配置Github 这样可以在Github看到代码报错位置
上面截图有让我们连接Git Providers, 这样就可以code mapping, 点击Get Started
但是这个测试代码我还没有提交，所以打开的时候 虽然是提示的这个代码位置，但是并没有错误代码
netlify 集成sentry
在这个页面,
给应用里的后端部分配置Sentry
和前端一样的流程，选择NODE.JS, 现在有了经验，大胆点给项目取名叫做dushu-backend
新建项目
选择我用的框架Express 
安装@sentry/node
然后来到了下面的界面
配置SDK
安装了后@sentry/node后，配置SDK，在项目根目录新增一个instrument.js
js
// Import with `import * as Sentry from "@sentry/node"` if you are using ESM
const Sentry = require("@sentry/node");
Sentry.init({
dsn: "https://42424cc83b6f7f74c4830f4251f00b8d@o4507231223939072.ingest.de.sentry.io/4509126824951888",
});在index.js首页引入配置 刚才新建的这个instrument.js 引入要放在最前面
js
// IMPORTANT: Make sure to import `instrument.js` at the top of your file.
// If you're using ECMAScript Modules (ESM) syntax, use `import "./instrument.js";`
require("./instrument.js");
// All other imports below
// Import with `import * as Sentry from "@sentry/node"` if you are using ESM
const Sentry = require("@sentry/node");
const express = require("express");
const app = express();
// All your controllers should live here
app.get("/", function rootHandler(req, res) {
res.end("Hello world!");
});
// The error handler must be registered before any other error middleware and after all controllers
Sentry.setupExpressErrorHandler(app);
// Optional fallthrough error handler
app.use(function onError(err, req, res, next) {
// The error id is attached to `res.sentry` to be returned
// and optionally displayed to the user for support.
res.statusCode = 500;
res.end(res.sentry + "\n");
});
app.listen(3000);注意这里，Sentry.setupExpressErrorHandler(app);这句要放在app.post, app.get, app.put...这些控制器后面，错误中间件前面
source-map 配置
同样我们用自动配置
base
npx @sentry/wizard@latest -i sourcemaps -sass
SENTRY_AUTH_TOKEN=sntrys_eyJpYXQiOjE3NDQyNTYyOTguNjkzMjAxLCJ1cmwiOiJodHRwczovL3NlbnRyeS5pbyIsInJlZ2lvbl91xxx
添加测试代码
构建项目 后端我们就重新运行下项目 测试代码生效
sentry 后台也有报错信息
这样我们前后端就都配置成功了。 自动构建成功，有错误提醒都会发邮件通知，不想要这个通知，这个我们也可以关掉
