项目中如何引入sentry性能监控注册；创建一个项目；复制项目dsn；全局初始化sentry； vite,webpa

注册：

注意：邮箱需要欧洲或者美国的邮箱，国内邮箱无法注册

sentry接入项目

注册完成后，创建一个项目：

初始化

pnpm i @sentry/cli vite-plugin-sentry -D

复制项目dsn:

全局初始化sentry:

  Sentry.init({
    dsn: process.env.SENTRY_DNS,//复制的sentry DSN地址
    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    replaysSessionSampleRate: 0.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.
    environment: MODE,
    release: `${MODE}-${packageJson.version}`,//用于区分环境和版本
    // 过滤问题
    beforeSend: (event, hint) => {
      const error = hint.originalException as { message: string }
      const regexpArr = [
        /^[Oo]bject captured as promise rejection with keys/,
        /^Unable to preload CSS for.*.css$/,
        /^canceled$/,
        /^UCShellJava.sdkEventFire/,
        /^[Ff]ailed to fetch dynamically imported module:/,
        /UnhandledRejection*/
      ]
      if (error && error?.message && regexpArr.some((reg) => reg.test(error.message))) {
        return null
      }
      return event
    }
  })

上传sourceMap到sentry

vite

安装 Sentry插件

pnpm i vite-plugin-sentry -D

配置 Sentry.sentryclirc ：在项目根目录中创建一个文件，并使用 Sentry DSN、组织、项目和其他必要的详细信息对其进行配置。

[auth]
token=YOUR API TOKEN
 
[defaults]
url=服务器
org=组织
project=项目

更新 Vite 配置：修改您的vite.config.js以包含vite-plugin-sentry。确保build.sourcemap选项设置为true在构建过程中生成源映射。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteSentry from 'vite-plugin-sentry';

const sentryConfig = {
  configFile: './.sentryclirc',
  release: `${MODE}-${packageJson.version}`,//用于区分环境和版本
  deploy: {
    env: 'production',
  },
  skipEnvironmentCheck: true,
  sourceMaps: {
    include: ['./dist/assets'],
    ignore: ['node_modules'],
  }, //根据自己项目调整
};

export default defineConfig({
  plugins: [
    vue(),
    process.env.NODE_ENV === 'production' ? viteSentry(sentryConfig) : null,
  ],
  build: {
    sourcemap: process.env.NODE_ENV === 'production',
  },
});

webpack

安装 Sentry Webpack 插件：安装@sentry/webpack-plugin包。

pnpm i @sentry/webpack-plugin -D

配置 Sentry Webpack 插件：在您的 webpack 配置文件 ( webpack.config.js) 中，添加 Sentry 插件并使用您的 Sentry DSN、发布版本和其他必要的详细信息进行配置。

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
  // Other webpack config options...
  plugins: [
    // Other plugins...
    new SentryWebpackPlugin({
      include: './dist',
      ignore: ['node_modules'],
      configFile: '.sentryclirc',
      release: `${MODE}-${packageJson.version}`,//用于区分环境和版本
      setCommits: {
        auto: true,
      },
    }),
  ],
  devtool: 'source-map', // Enable source maps generation
};

sentry操作

1.Issue

当我们在菜单上选中 Issues（问题）以后，就可以看到 Issues 界面。整个界面可以分为三个部分，分别是：

不同状态 Issues 的 Tab切换
筛选栏，用来筛选 Issues
Issues 列表

问题分类：

所有未解决的 ( is:unresolved)：所有未解决的问题
1. 新的（is:new）：7天之内被创建的问题
2. 进行中的（is:ongoing）：7天之前被创建的问题或者手动标记为已经看过的的问题
待审查 ( is:unresolved is:for_review)：还没有查看过的问题，待审查问题是所有未解决问题的子集。
回归 ( is:regressed)：解决了再次出现的问题。
不断升级 ( is:escalating)：当事件数量明显高于前一周时，sentry将问题定义为不断升级。
已存档 ( is:archived)：所有已存档的问题。

问题筛选

Issues 查询有4个筛选项，分别是项目、环境、日期范围和自定义搜索。自定义搜索通过 key:value 的的形式进行搜索

日期范围

可以筛选最近1小时到最近90天的范围，可以通过绝对日期筛选指定起止范围的问题

自定义搜索

Key/Token	描述
age	返回自该值定义的时间以来创建的问题。语法类似于 Unix find 命令。支持的后缀：`m - minutes`, `h - hours`, `d - days`, `w - weeks`.例如，`age:-24h`返回过去 24 小时内新的问题，而`age:+12h`返回 12 小时之前的问题。输入`age:+12h age:-24h`将返回 12 至 24 小时前创建的问题
app.in_foreground	指示应用程序是在前台还是后台。值为`1/0`或`true/false`
assigned	返回分配给定义的用户或团队的问题。值可以是`me`您自己、`none`非受让人`my_teams`或`#team-name`您所属团队的用户 ID（您的电子邮件地址）
assigned_or_suggested	返回分配给或建议分配给定义的用户或团队的问题。通过匹配所有权规则和可疑提交来找到建议的受让人。值可以是用户 ID（您的电子邮件地址）、`me`您自己的用户 ID、`none`无受让人/建议的用户 ID、`my_teams`或`#team-name`您所属团队的用户 ID
bookmarks	返回由定义的用户添加书签的问题。值可以是您的用户 ID（您的电子邮件地址）或`me`您自己的用户 ID
has	返回具有定义的标记或字段的结果，但不返回该标记或字段的值。例如，输入`has:user`将查找带有`user`标签的事件
is	问题的属性。值可以是：`unresolved`、`resolved`、`archived`、`assigned`、`unassigned`、`linked`、或`unlinked`。和`linked`值`unlinked`根据问题是否链接到外部问题跟踪器来返回问题
lastSeen	上次查看事件的日期时间。例如，`lastSeen:+30d`上次出现的退货问题是在 30 天或更早之前；`lastSeen:-2d`最近两天内出现的退货问题。这类似于`age`.
message	返回匹配消息或具有匹配事务名称的事务的错误。还匹配包含所提供值的任何消息。搜索`message:undefined`会将事件与消息匹配。`undefined is not an object`原始文本搜索（不带`message`密钥的搜索）也会对照此字段进行检查。对于错误，消息可以是元素的串联，因此搜索可能会包含意外结果
title	错误的标题或事务名称
timesSeen	返回具有匹配计数的结果。（与事件中的`count()`相同。）
firstRelease	返回给定版本中首先出现的问题。可以与发行版的版本完全匹配，也`first-release:latest`可以选择最新的发行版。

除了上述的 key，Sentry 还内置了一些 tags 用来搜索：

支持!语句，表示非语法：

支持模糊搜索

如下表示搜索url中带有test的issue：

同一键上有多个值

使用保存的搜索

使用保存的搜索项，方便对搜索项进行快速搜索

更多参考：Search

Issue列表项

批量操作

解决（将is状态转换为resolved），忽略(出现该问题时不会被捕获并报告)，标记已浏览，合并（将两个问题合并为一个类型的问题），排序

单个操作

点击单行列表分配人的下拉头像图标可以将问题分配给指定的人员

如何在代码中过滤某些错误信息

可以在sentry初始化时，在berforeSend使用正则过滤某些不用处理的错误信息

  Sentry.init({
    ...,
    // 过滤问题
    beforeSend: (event, hint) => {
      const error = hint.originalException as { message: string }
      const regexpArr = [
        /^object captured as promise rejection with keys/,
        /^Unable to preload CSS for.*.css$/
      ]
      if (error && error?.message && regexpArr.some((reg) => reg.test(error.message))) {
        return null
      }
      return event
    }
  })

2.问题详情页

问题详情页从上到下依次时问题标题，问题类型，问题描述，tab栏，标签，调用链

时间信息

通过右侧时间信息可以判断该报错最近出现的时间和最早出现问题的版本号等

回放（Replays）

web端特有，可以模拟用户错误操作：

开启需要在代码配置：

// 第一种：在配置文件设置采样比例，Sentry 自动录制
Sentry.init({
                integrations: [
            new Sentry.Replay()
    ],
    // This sets the sample rate to be 10%. You may want this to be 100% while
    // in development and sample at a lower rate in production
    // 采样率
    replaysSessionSampleRate: 0.1,
    // If the entire session is not sampled, use the below sample rate to sample
    // sessions when an error occurs.
    // 错误采样率
    replaysOnErrorSampleRate: 1.0,
})

// 第二种：手动开始录制
replay.stary()

回放结束录制的方式：

用户超过15分钟在页面上没有操作，则自动结束录制。
录制时间超过60分钟，则自动结束录制。
手动调用 replay.stop()

目前项目暂未开启，后续有需要可以开启

面包屑



//需要记录post的请求数据，需要以下操作
Sentry.init({
  // ...
  beforeBreadcrumb(breadcrumb, hint) {
   if (breadcrumb.category === 'xhr' && breadcrumb.data) {
      breadcrumb.data.response = hint?.xhr.response
             breadcrumb.data.responseHeaders = hint?.xhr.getAllResponseHeaders()
    }
    return breadcrumb;
  },
})

记录的行为有：

console
dom 操作（比如点击元素）

Fetch 请求
浏览器路由跳转

Sentry 自身的行为（比如上报日志）
XHR 请求

报错详细信息

用于追踪问题抛出错误的时的上下文信息

3.项目仪表盘

用于展示各个项目的无崩溃率和出现错误的柱状图

sentry的Errors: 1|Transactions: 1.6k：表示应用程序中有 1600 个事务被 Sentry 记录，出现了一个错误

上下柱状图：上方柱状图表示出现错误的次数，下方表示执行事务的次数

无崩溃会话：无崩溃会话是指在一个会话中没有发生任何崩溃或者错误的会话。Sentry 会统计在特定时间范围内，没有发生崩溃的会话的数量，并将这个比例与总会话数进行比较，得出无崩溃会话的百分比。

4.性能指标

用于记录项目性能指标信息数据，对于我们当前接入sentry的项目，主要针对web项目和rn项目进行性能分析，分别对于Web Vitals和手机的性能图表数据

web项目

主要记录LCP,FCP等web性能数据：

LCP (Largest Contentful Paint): 测量页面中最大内容元素（例如主图像或标题文本）在用户视口内变得可见所需的时间。这是一个重要的性能指标，因为它直接影响用户对页面加载速度的感知。Google建议LCP应低于2.5秒以提供更好的用户体验.
FCP (First Contentful Paint): 标记浏览器渲染来自DOM第一位内容的时间点，这个内容可能是文本、图像、SVG甚至元素.
FID (First Input Delay): 衡量从用户首次与网站进行交互（如点击链接或按钮）到浏览器实际能够响应之间的时间。Google建议FID应低于100毫秒以提供更好的用户体验.
CLS (Cumulative Layout Shift): 累积布局偏移是一个元素从其初始位置到被隐藏之间的任何时间，如果元素发生偏移，它会被计算进去。这是一个重要的用户体验指标，因为它反映了页面内容在用户交互期间是否稳定.
FMP (First Meaningful Paint): 首次有效绘制是指页面主要元素（例如视频或博客文章）首次在屏幕上渲染的时间.

手机端

最慢帧（Most Slow Frames）：这是指在移动应用中，渲染速度超过预期的帧。在60帧每秒（fps）的情况下，每一帧的渲染时间应该在16毫秒（Android）或16.67毫秒（iOS）内。如果帧的渲染时间超过这个阈值，就被认为是慢帧。
最冻结帧（Most Frozen Frames）：这是指在移动应用中，渲染时间过长的帧，通常是指渲染时间超过700毫秒的帧。这种情况通常会导致用户体验差，因为用户会看到界面停止响应。
用户痛苦（User Misery）：这是一个衡量用户体验的指标，它反映了用户在使用移动应用时遇到的问题。例如，应用加载缓慢、界面响应慢等问题，都可能导致用户痛苦。
冷启动时间（Cold Startup Time）：这是指移动应用从冷启动（即从未启动状态到可用状态）到可以响应用户操作的时间。对于iOS，Apple建议应用在渲染第一帧时最多花费400毫秒。对于Android，如果冷启动时间超过五秒，或者热启动时间超过两秒，Google Play控制台会发出警告。
每分钟交易数（Transactions Per Minute）：用于描述一个系统或服务在一分钟内能够处理的交易次数，常用于评估系统的性能和处理能力