SPA场景接入

SPA（single-page application）应用通过动态更新页面来实现更快速、更流畅的用户体验。与传统的多页面应用程序不同，SPA应用程序不需要在每次用户导航时重新加载整个页面，而是动态加载和更新页面内容。这意味着用户可以更快地交互和导航，而无需在每个页面之间等待加载时间。SPA通常使用前端框架来管理应用程序状态和页面路由。例如Angular、React或Vue。

接入指导

在监控SPA应用程序时，您需要额外关注以下方面：

• 页面路由监控：SPA应用程序的核心是通过路由管理不同的页面和状态，需要监控页面路由的变化以便了解用户导航和使用模式。
• 性能监控：SPA应用程序的核心是动态加载和更新页面内容，因此需要监控路由切换下的性能，以便识别性能问题并进行优化。

页面路由监控

配置pageview plugin的routeMode即可实现SPA路由的监听和上报。
配置示例：

import client from '@apmplus/web'

client('init', {
  ...
  plugins: {
    pageview: {
      routeMode: 'hash',  // hash or history
    }
  },
  ...
})

性能监控

页面性能分为首屏性能和非首屏性能。

• 首屏性能：页面首次加载的时候的性能，跟普通应用一样，可以通过timing、FP、FCP、FMP、TTI、LCP等指标来衡量。
• 非首屏性能：路由切换的性能。SPA性能插件可以自动计算并上报SPA_LOAD指标来衡量路由切换性能。

接入

版本依赖

@apmplus/web >= 2.0.1 && @apmplus/integrations >= 2.1.0

自动计算并上报SPA_LOAD

import client from '@apmplus/web'
import { SPALoadPlugin } from '@apmplus/integrations'

client('init', {
  ...
  plugins: {
    pageview: {
      routeMode: 'hash' // 默认是history模式，所以如果是history路由可以无需配置
    }
  },
  integrations: [SPALoadPlugin()], // 手动引入SPALoadPlugin
})

手动上报SPA_LOAD

//  方案一： 路由切换前调用performanceInit，渲染后调用performanceSend
// 路由切换前
client('performanceInit')

// SPA 渲染完成后， 调用此方法sdk会帮助计算时间差，然后上报spa_load 性能指标
client('performanceSend')

// 方案二： 上报自定义性能指标：手动计算好渲染时间【单位ms】，通过性能的单指标上报协议上报
client('sendCustomPerfMetric', { name: 'spa_load', value: {{渲染时间}} })

手动上报SPA_LOAD有两种方式：

• 通过performanceInit&&performanceSend打点
  使用performanceIni&&performanceSend注意事项：
  • 需要从产品层面，确定哪些URL对应页面的概念
    例如，URL的改变对应的是页面中两个tab切换，产品层面认为两个tab属于同一页面，那么此时URL的改变不需要调用performanceInit&&performanceSend。
  • 页面加载完成的时间点可以选择框架层的渲染完成的节点
    例如，URL变化后，页面请求a、b两个接口。a对应主要内容的数据，b对应次要内容的数据，那么可以在a请求的数据渲染完成后，作为页面渲染完成时间点，调用performanceSend触发指标计算。
• 手动上报自定义性能指标

应用与消费

1. 注册性能指标。
   
   根据指标的具体情况为指标指定基准线，可用于衡量指标的优劣。如何注册性能指标，请参见 性能指标管理 。
2. 在控制台左上角选择全部功能 > 站点性能总览。
3. 单击指标总览页签，查看SPA_LOAD指标的消费情况。
   
4. 在控制台左上角选择全部功能 > 数据探索。
5. 单击Views页签查看瀑布图。
   
   在瀑布图中，您可以查看SPA_LOAD指标前的一系列资源请求和业务请求的耗时情况，帮助找到路由切换性能差的原因。