ARMS 前端监控 SDK 提供了若干高级选项,可满足进阶场景下的前端监控需求,例如 SPA 页面上报、数据预上报和自定义性能指标上报。

SPA 页面上报

SPA(Single Page Application)即单页面应用。在此类型的应用中,页面只会刷新一次。传统的方式只会在页面加载完成后上报一次 PV,而无法统计到各个子页面的 PV,也无法让其他类型的日志按子页面聚合。

ARMS 前端监控 SDK 提供了针对 SPA 页面的两种处理方式:

  • 开启 SPA 自动解析

    此方法适用于大部分以 URL Hash 作为路由的单页面应用场景。

    在初始化的配置项中,设置 enableSPAtrue,即会开启页面的 Hashchange 事件监听(触发重新上报 PV),并将 URL Hash 作为其他数据上报中的 page 字段。

    enableSPA 配套的还有 <Function>parseHash(参见 前端监控 SDK 配置项)。

  • 完全手动上报

    此方法可用于所有的单页面应用场景。如果第一种方法无效,则可用此方法。

    SDK 提供了 setPage 方法来手动更新数据上报时的 page name。调用此方法时,默认会重新上报页面 PV。

    // 监听应用路由变更事件
    app.on('routeChange', function (next) {
        __bl.setPage(next.name);
    });                    

数据预上报

以下情形会导致数据上报出现问题:

  • 在页面刚刚加载时,有一些数据需要上报,但此时 SDK 可能还未完成初始化(或者不确定是否已完成初始化)。
  • 在应用的初始化逻辑中调用 setConfig 方法,但由于 SDK 是异步加载的,此时可能还未加载完成。

解决办法:SDK 在 __bl 对象上增加了一个 pipe 属性,用于将预调用的信息缓存到此变量中。例如:

__bl.pipe = [
    // 将当前页面的 HTML 也作为一个 API 上报
    ['api', '/index.html', true, performance.now, 'SUCCESS'],

    // SDK 初始化完成后即开启 SPA 自动解析
    ['setConfig', {enableSPA: true}]
];            

如果只上报单条数据,也可以直接写成:

__bl.pipe = ['msg', '我是另一个普通的消息'];          

其中数组的第 0 个表示方法名,后面依次是入参。 SDK 初始化完成后,就会依次调用预先挂载到 window.__bl.pipe 上的方法及参数。

说明 在 SDK 初始化完成前,如果多次设置 __bl.pipe 的值,则以最后设置的为准。

如果不能确定 SDK 是否初始化完成,又不想添加太多判断逻辑,也可以在 SDK 初始化完成后调用 pipe(支持 IE9 及以上)。

例如,单页面应用中,设置 autoSend: false 后,在应用初始化后上报第一次 PV,此时并不确定 SDK 是否初始化完成。

// 设置页面 name 为 'homepage',并且上报 PV
__bl.pipe = ['setPage', 'homepage'];            

自定义性能指标上报

您可以使用 __bl.pipe 方法上报以下自定义性能指标:

  • 自定义首屏时间 cfpt
  • 自定义首次可交互时间 ctti
  • 其他自定义性能指标 t1 ~ t10(共计 10 个)

上述自定义性能指标是在页面 Load 事件触发前上报的,且这些指标是同时上报的,即不会逐一上报。

以 CDN 方式接入时,上报自定义性能指标的示例如下:

__bl.pipe=[ 'performance',

   {
      cfpt: 100,
      ctti: 20,
      t1: 300,
      t2: 300,
      t3: 60,
      t4: 1300,
      t5: 300,
      t6: 1300,
      t7: 40,
      t8: 300,
      t9: 300,
      t10: 4100
    }];

以 Weex 方式接入时,上报自定义性能指标的示例如下:

const BrowserLogger = require('alife-logger');
// 与 CDN 的 Pipe 结构一致
const pipe = ['performance', {cfpt:100, ctti:20, t1:300, t2:300, t3:60, t4:1300, t5:300, t6:1300, t7:40, t8:300, t9:300, t10:4100}];
const __bl = BrowserLogger.singleton({pid:'站点唯一ID'},pipe);