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'];