系统性能监控和优化

Sentry：性能监控和优化

一、系统存在的现象：

1. 首屏加载速度慢，Performance 性能评分只有: 51分 ，总结有以下原因：

   1. 没有配置services work ： 根据策略从服务器获取的资源文件，缓存到本地，以便在后续的请求中使用

   2. 主系统SCRM加载资源文件过大： chunk-vendors.5ace40cb.js 910KB

      1. 分包splitChunks ，node_modules目录的模块拆分到一个单独的代码块中，其他模块拆分到另一个代码块中。

   3. 没有按需加载UI框架

   4. 没有异步加载：使用异步加载，减少页面阻塞。

   5. 没有延迟加载：将不必要的资源（如图片、JavaScript），需要时再加载。

   6. 使用http 2.0 提升网页资源并发请求 ：http/1.1默认限制6个并发请求，使用http 2.0 提升网页资源并发请求（或者域名切片，使用不同域名请求资源）

      1. 兼容性问题：尽管现代浏览器都支持 HTTP/2，但仍然有一些旧版本的浏览器不支持该协议。这意味着你可能需要处理兼容性问题，以确保你的网站在各种浏览器和设备上都能正常运行。
      2. 服务器资源消耗：使用 HTTP/2 可能会增加服务器的资源消耗。服务器需要更多的计算和内存资源来处理并发请求。

   7. 没有配置CDN：将静态资源部署到CDN上，利用CDN的分布式节点提供更快速的资源访问

   8. 使用服务端渲染：vue SSR 或者 nuxt 框架

2. 缺乏监控体系：页面访问时间、资源访问时间等

   1. Sentry 可以捕获和报告多个页面性能指标，以下是一些常见的指标：

      1. 页面加载时间（Page Load Time）：页面加载时间是指从用户发起请求到页面完全加载并可交互的时间。它包括网络请求、资源加载、解析和渲染页面等过程。
      2. 首次有效渲染时间（First Meaningful Paint）：首次有效渲染时间是指页面中有意义的内容首次出现并可见的时间点。它比首次内容渲染时间更加准确地反映了用户感知到页面加载进度的时间。
      3. 首次交互时间（First Input Delay）：首次交互时间是指用户首次与页面进行交互（例如点击按钮、输入表单等）时的延迟时间。它衡量了页面响应用户操作的速度。
      4. 资源加载时间（Resource Load Time）：资源加载时间是指页面中各种资源（例如图片、CSS、JavaScript 文件等）的加载时间。它反映了页面加载过程中各个资源的性能表现。
      5. 页面卡顿（Page Jank）：页面卡顿指的是页面在交互过程中出现的明显延迟或卡顿现象。Sentry 可以捕获和报告页面卡顿事件，并提供相应的性能分析和优化建议。

      这些指标可以帮助你了解页面加载和性能方面的问题，并及时采取优化措施。Sentry 的前端 SDK 可以自动捕获这些指标，并将其发送到 Sentry 服务器进行分析和报告。你可以在 Sentry 控制台中查看和分析这些指标的报告数据。

   2. 除了 Sentry，还有一些其他工具可以用于监控页面性能并触发警报通知。以下是一些常用的工具：

      1. Google Analytics： 免费版本不提供页面性能监控 、 数据会上传Google的服务器 、需要使用VPN
      2. New Relic： 云端应用性能监控服务、 数据会上传到国外服务器，需要使用VPN 访问官网等
      3. Pingdom： 只提供收费的服务计划 、 需要使用VPN
      4. WebPageTest： 开源的网页性能测试工具 、 不提供警报通知功能

      这些工具可以帮助你实时监控页面性能，并在性能指标超过设定的阈值时发送警报通知，以便及时采取措施解决问题。根据你的需求和预算，你可以选择适合你的工具进行页面性能监控。

二、性能监控：

1. Sentry 项目配置入口：

   Sentry.init({
     ..., // 其它配置项
     enabled: boolean,
     dsn: '',
     environment: '',
     allowUrls: [''],
     integrations: [
       new SentryTracing.BrowserTracing({
         routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
       }),
     ],
     normalizeDepth: 10,
     sampleRate: 0~1,
     tracesSampleRate: 0~1,
   });
   
   

   1. enabled：决定错误以及性能相关信息是否要上报到sentry，比如我只希望生产环境上报，这里你就能写一个表达式。
   2. dsn：上报到sentry的关键凭证，比如你在sentry后台创建了多个项目，那么每个项目都会提供给你一个独一无二的dns，有它sentry才知道上报的信息属于哪个项目。
   3. environment：上报信息时告诉sentry这些信息属于哪个环境，测试还是开发或者生产。之后你就能在sentry后台切换环境查看对应环境的数据。
   4. allowUrls：一个包含地址字符串的数组，告诉sentry哪些地址页面能被上报，上面的enabled权限比这个要大，比如你配置了只上报生产环境，那么你在这个数组加入[‘localhost’]也不会对开发环境生效。
   5. integrations：new SentryTracing.BrowserTracing() 的功能就是将浏览器页面加载和导航检测作为事物，并捕获请求和其他性能指标。
   6. normalizeDepth：我们在上报错误时，有时候需要查看面包屑中调用栈情况，但是有些对象层级比较深，当层级超过三层sentry默认展示[Object]，这就导致你没法查看完整的对象信息，所以我们通过这个配置sentry能识别对象的深度，非常有用。
   7. sampleRate：决定sentry错误抓取的百分比，范围时0~1，比如今天项目报了100个错误，你配置的0.5，那么sentry随机给你上报50个。
   8. tracesSampleRate：决定事务上报的百分比，前文说了sentry时以页面加载为单位来搜集页面性能数据，那么这个配置决定sentry上报多少。
      1. traces_sample_rate`可以设置为不同的值来表示不同的采样率。以下是常见的一些值及其含义：
         1. 0.0：完全禁用性能监控，不对任何请求进行采样。
         2. 1.0：对所有请求进行采样，即监控所有请求的性能。
         3. 0.5：采样率为50%，即对一半的请求进行采样。
         4. 0.1：采样率为10%，即对10%的请求进行采样。
         5. 0.01：采样率为1%，即对1%的请求进行采样。

2. Alert 配置规则

   1. Throughput：吞吐量是项目中的事务总数，当它在一段时间内达到阈值时，您可以发出警报。

   2. Transaction Duration ：监控事务完成所需的时间。

   3. Apdex ：用于根据应用程序响应时间跟踪和衡量用户满意度的指标。Apdex分数提供了特定事务或端点中令人满意、可容忍和受挫请求的比率。

   4. Failure Rate：失败率是不成功事务的百分比。Sentry将状态为“正常”、“已取消”和“未知”以外的事务视为失败。

   5. Largest Contentful Paint ：最大内容绘制

   6. First Input Delay ：首次输入延迟

   7. Cumulative Layout Shift ：累积布局偏移

3. Performace 介绍
   

   2. Web Vital	Good	Meh	Poor
      最大内容绘制 (LCP)	<= 2.5s	<= 4s	> 4s
      首次输入延迟 (FID)	<= 100ms	<= 300ms	> 300ms
      累积布局偏移 (CLS)	<= 0.1	<= 0.25	> 0.25
      首次绘制 (FP)	<= 1s	<= 3s	> 3s
      首次内容绘制 (FCP)	<= 1s	<= 3s	> 3s
      首字节时间 (TTFB)	<= 100ms	<= 200ms	> 600ms

   3. Web Vital	Ch****rome	Edge	O****pera	Firefox	Safari	IE
      最大内容绘制 (LCP)	✓	✓	✓
      首次输入延迟 (FID)	✓	✓	✓	✓	✓	✓
      累积布局偏移 (CLS)	✓	✓	✓
      首次绘制 (FP)	✓	✓	✓
      首次内容绘制 (FCP)	✓	✓	✓	✓	✓
      首字节时间 (TTFB)	✓	✓	✓	✓	✓	✓

   4. Web 指标为三大指标：Largest Contentful Paint 最大内容绘制 (LCP)、First Input Delay 首次输入延迟 (FID) 和 Cumulative Layout Shift 累积布局偏移 (CLS)。每项指标测量用户体验的不同方面：LCP 测量感知加载速度，并在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点；FID 测量响应度，并将用户首次尝试与页面交互的体验进行了量化；CLS 测量视觉稳定性，并对可见页面内容的意外布局偏移量进行了量化。

   5. 

   6. 为了对页面或网站的整体性能进行分类，我们取该页面或网站的所有页面浏览量的第 75 个百分位数。换句话说，如果一个网站有至少 75% 的页面浏览量达到"良好"阈值，则该网站在这项指标下就会被归类为性能"良好"。相反，如果有至少 25% 的页面浏览量达到"欠佳"阈值，则该网站会被归类为性能"欠佳"。因此，如果 LCP 的第 75 个百分位数为 2 秒，就会被归类为"良好"，而如果 LCP 的第 75 个百分位数为 5 秒，则会被归类为"欠佳"。

   7. sentry以每个页面（路由）加载为单位，然后搜集这个页面加载过程中的接口请求，资源下载等等数据，之后统一跟随这个页面一起上报。 简单来理解，每个页面每次加载时sentry都会以这个页面为名创建一个事务Transaction（一个装信息的盒子），在加载过程中，sentry会搜集接口请求、pageload、静态资源下载等等数据，然后装在这个事务一起上报：

   

   7. 概览
   8. Web Vitals 直方图显示数据分布，它可以通过揭示异常来帮助您识别和诊断前端性能问题。

   

   9. 在 Performance 主页上，您可以通过切换 Performance 主页右上角的选项卡来找到 Trends View。此页面显示随着时间的推移其性能发生重大变化的 transaction。

4. Discover 介绍 ： 所有接入Sentry项目的概览数据