利用Sentry监控应用里的前后端

这篇笔记主要记录用Sentry监控应用里的前后端，分别配置应用里的前端和后端并测试是否生效。我用到的Sentry功能点如下

功能点编号	功能名称	功能说明
1	监控应用性能	追踪页面加载时间、接口响应时间、慢请求等性能指标
2	报错监控	捕获并上报前端或后端的异常信息，快速定位到代码位置
3	用户会话复现	自动录制用户点击、输入等操作，报错时可回放用户操作视频
4	用户操作痕迹	记录用户的行为路径，如点击、跳转、输入等操作

新建了应用里的前端和后端项目

用户会话复现

用户操作痕迹，点击 点击 输入 点击 报错

追踪代码报错的位置

还有些其他功能，我没有用到， 如错误关联具体用户，版本控制（Release tracking），知道是哪个版本上线后报错，我用的是免费版。

我们要监控的应用是一个全栈应用，技术栈是MEAN(MongoDB Express React Node),开始配置吧

配置前端项目

进入Sentry控制台， 点击新建项目

因为我的是React, 选择React, 其他我保持默认，比如项目名，是否邮件通知

点击新建项目按钮后就跳到如下页面，里面有配置步骤

来自未来的一张截图 展示配置只要4步

安装@sentry/react 执行安装下

pnpm add @sentry/react

接着配置SDK 在main.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, 我选择自动，执行下面命令, 就会安装执行引导程序

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

引导程序结束后有测试验证的流程，

添加测试代码

按照引导程序给出的流程验证，在本地测试和验证

1. pnpm build 打个包 成功上传source map 到sentry了

2. 运行应用 测试错误 打完包之后，我们运行应用，去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

// 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 引入要放在最前面

// 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 配置

同样我们用自动配置

npx @sentry/wizard@latest -i sourcemaps -sass

SENTRY_AUTH_TOKEN=sntrys_eyJpYXQiOjE3NDQyNTYyOTguNjkzMjAxLCJ1cmwiOiJodHRwczovL3NlbnRyeS5pbyIsInJlZ2lvbl91xxx

添加测试代码

构建项目 后端我们就重新运行下项目 测试代码生效

sentry 后台也有报错信息

这样我们前后端就都配置成功了。 自动构建成功，有错误提醒都会发邮件通知，不想要这个通知，这个我们也可以关掉