feat: update spa

Author: niuweili

flashduty/en/2. RUM/3. Performance Monitoring/2. Metrics.md

@@ -25,6 +25,10 @@ In addition to core metrics, it also supports other auxiliary metrics:
 
 These metrics are automatically collected when users visit pages and reported to the Flashduty platform through the SDK. You can view detailed performance data in the analysis dashboard.
 
+:::tip
+Interaction to Next Paint and Largest Contentful Paint are not collected for pages opened in the background (for example, in a new tab or a window without focus).
+:::
+
 ## Metric Calculation Methods
 
 ### 1. Largest Contentful Paint (LCP)
@@ -53,6 +57,18 @@ These metrics are automatically collected when users visit pages and reported to
 - **Use case**: Optimize response speed for interaction-intensive pages (such as forms, navigation menus).
 
 
+## Monitoring Single Page Applications (SPA)
+
+For Single Page Applications (SPA), the RUM browser SDK distinguishes between two navigation types through the `loading_type` attribute: `initial_load` and `route_change`.
+
+1. History Single Page Applications
+If an interaction on a webpage causes the URL to change but the page does not refresh completely, the RUM SDK will start a new `view` using `loading_type:route_change`. RUM uses the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History) to track URL changes.
+
+2. Hash Single Page Applications
+The RUM SDK automatically monitors frameworks that rely on hash (`#`) navigation. The SDK listens for `HashChangeEvent` and issues a new `view`. Events from HTML anchors that do not affect the current view context are ignored.
+
+For SPA applications, if you need to monitor performance after route changes, it is recommended to use the [Custom Performance Monitoring](#Custom%20Performance%20Monitoring) feature to measure performance metrics of specific components or interactions.
+
 ## Custom Performance Monitoring
 
 ### 1. Component-level Performance Measurement
@@ -122,13 +138,7 @@ document.addEventListener("scroll", function handler() {
 - Use descriptive naming (such as `login_form_render`).
 - Maintain naming consistency.
 
-### 2. SPA Scenario Handling
-
-- When route changes, timing is based on the start time of the current RUM view.
-- Some timers need to be reset.
-- Pay attention to metric continuity during page transitions.
-
-### 3. Performance Impact Control
+### 2. Performance Impact Control
 
 - Control the number of custom metrics.
 - Avoid frequent timing.
@@ -154,6 +164,15 @@ document.addEventListener("scroll", function handler() {
 - Ensure timers are started and stopped correctly.
 - Check timestamp accuracy in asynchronous scenarios.
 
+### 4. Empty Web Vitals Metrics Collection
+
+- **Background pages**: Pages opened in new tabs or unfocused windows, causing INP and LCP to be uncollectable
+- **SPA route changes**: During `loading_type:route_change`, Core Web Vitals metrics (LCP, CLS, INP, FCP) will not be re-collected
+- **Integration method**: Page loads completely before SDK is fully initialized
+- **Page lifecycle**: Page is closed or navigated away before metrics collection is complete
+- **Browser compatibility**: Older browser versions do not support certain Web Vitals APIs
+- **Empty page content**: Page has no measurable content elements (such as blank pages)
+
 ## Next Steps
 
 - [Performance Analysis](https://docs.flashcat.cloud/en/flashduty/rum/performance-analysis?nav=01JCQ7A4N4WRWNXW8EWEHXCMF5)

flashduty/zh/2. RUM/3. 性能监控/2. 指标上报.md

@@ -25,6 +25,10 @@ Flashduty RUM 支持以下[核心 Web Vitals 指标](https://web.dev/articles/vi
 
 这些指标会在用户访问页面时自动收集，并通过 SDK 上报到 Flashduty 平台，您可以在分析看板中查看详细的性能数据。
 
+:::tip
+对于在后台打开的页面（例如，在新标签页或无焦点的窗口中），不会收集到下一绘制时间（Interaction to Next Paint）和最大内容绘制时间（Largest Contentful Paint）的数据。
+:::
+
 ## 指标计算方法
 
 ### 1. 最大内容绘制（LCP）
@@ -53,6 +57,18 @@ Flashduty RUM 支持以下[核心 Web Vitals 指标](https://web.dev/articles/vi
 - **用例**: 优化交互密集型页面（如表单、导航菜单）的响应速度。
 
 
+## 监控单页应用(SPA)
+
+对于单页应用程序 (SPA)，RUM 浏览器 SDK 通过`loading_type`属性区分`initial_load`和`route_change`这两种导航类型。
+
+1. History 单页应用
+如果网页上的某个交互操作导致 URL 发生变化，但页面并未完全刷新，RUM SDK 会使用`loading_type:route_change`启动一个新的`view`。RUM 使用[History API](https://developer.mozilla.org/zh-CN/docs/Web/API/History)来跟踪 URL 的变化。
+
+2. Hash 单页应用
+RUM SDK 会自动监控依赖哈希（`#`）导航的框架。SDK 会监听 `HashChangeEvent` 并发出一个新的`view`。来自HTML锚点且不影响当前视图上下文的事件将被忽略。
+
+对于 SPA 应用，如需监控路由切换后的性能，建议使用[自定义性能监控](#自定义性能监控)功能来测量特定组件或交互的性能指标。
+
 ## 自定义性能监控
 
 ### 1. 组件级性能测量
@@ -122,20 +138,13 @@ document.addEventListener("scroll", function handler() {
 - 使用描述性命名（如 `login_form_render`）。
 - 保持命名一致性。
 
-### 2. SPA 场景处理
-
-- 路由变更时，计时以当前 RUM view 的开始时间为基准。
-- 需要重置某些计时器。
-- 注意页面切换时的指标连续性。
-
-### 3. 性能影响控制
+### 2. 性能影响控制
 
 - 控制自定义指标数量。
 - 避免频繁计时。
 - 合理设置采样率。
 
 ## 常见问题
-
 ### 1. 页面加载时间异常
 
 - 检查慢加载资源（图片、脚本）。
@@ -154,6 +163,16 @@ document.addEventListener("scroll", function handler() {
 - 确保计时器正确启停。
 - 检查异步场景的时间戳准确性。
 
+### 4. 收集的Web Vitals指标为空
+
+- **后台页面**：页面在新标签页或无焦点窗口中打开，导致INP和LCP无法收集
+- **SPA路由切换**：在`loading_type:route_change`时，核心Web Vitals指标（LCP、CLS、INP、FCP）不会重新收集
+- **引入方式**：页面在SDK完全初始化前就已加载完成
+- **页面生命周期**：页面在指标收集完成前就被关闭或导航离开
+- **浏览器兼容性**：旧版本浏览器不支持某些Web Vitals API
+- **页面无内容**：页面没有可测量的内容元素（如空白页面）
+
+
 ## 下一步
 
 - [性能分析](https://docs.flashcat.cloud/zh/flashduty/rum/performance-analysis)