跳到主要内容

监控SDK

2024年04月21日
柏拉文
越努力，越幸运

一、认识​

微前端场景下监控 SDK 会有以下几种基础诉求:

  1. 监控数据过滤: 在微前端场景下, 要与特定监控 SDK 进行结合时需要提供过滤 API, 对不符合诉求的数据进行过滤, 从而能够实现在微前端场景下监控性能可以进行正确的分发。

  2. 支持监控代码和监听的复用: 在微前端场景中, 一个页面里可能存在十几份监控代码, 如果每次监控都引入、重新引入监控代码会带来体积的增长, 同时多份相同的监听也会带来严重的内存占用和性能影响。而所有监控都复用同一份监听代码和监控将会降低性能损耗和内存占用。

  3. 支持暂停或销毁监控: 在微前端场景中, 微应用可能随着用户的操作行为进行渲染或销毁，需要能够随时暂停或重新开启实例监控。

  4. 自定义数据上报: 在微前端场景中, 微应用随着用户的操作行为进行选择和销毁过程可能有一些特有的数据未上报, 例如 PV，在路由变化后重新渲染并重新开启实例监控, 但是不会再次进行 PV 上报, 因此需要手动触发上报，另外还包括自定义等额外定义的性能也需要重新上报。

针对以上诉求, 在监控 SDK 中支持了以上能力, 下面是针对微前端场景做的 SDK 支持

二、数据过滤​

数据过滤: 能够在上报的更早期进行信息过滤，能够有效的过滤 error、fetch、xhr、resource 等信息。

import client from '@sdk'

client('setFilter', 'xhr', ([method, url])=>{
    if(url.includes('/test/')){
        return true;
    }
    return false;
});

三、插件热更新​

插件热更新: 能够动态关闭/开启插件, 同时能动态更新插件配置

import browserClient from "web"

// 动态销毁 pageview 插件 
browserClient('destroyAgent.remove');

// 动态开启 pageview 插件， 复用原本配置 
browserClient('reloadPlugin', 'pageview')

// 使用新配置重新加载 pageview 插件, reloadPlugin 方法会先销毁原来的插件, 再开启新的插件
browserClient('reloadPlugin', 'pageview', {
    routeMode: 'history',
    sendInit: false
});

四、监控代码和监听的复用​

监控代码和监听的复用 能够通过已有监控实例创建另一个监控实例；同类监听在单实例内或者多实例之间是完全复用的。

import client from "web"

// 通过已有监控实例创建另一个监控实例，无需额外引入监控代码
const newClient = client.create();

newClient.init({ xxxx });
newClient.start();

五、QianKun 监控 Plugin​

基于微前端场景下的性能监控、上报隔离以及和 SDK 的结合, 我们设计了 Qiankun Plugin， 通过 Plugin 托管微应用的监控启动关闭以及数据分发。

import Garfish from "garfish";
import { SlardarPlugin } from "web"

Garfish.usePlugin(SlardarPlugin({
    createBrowserClient,
    slardarOptions: {
        config: {
            bid: 'main'
        }
    }
}));

Garfish.run({
    apps: [
        {
            name: "react",
            activeWhen: '/react'm,
            entry: 'http://localhost:8080',
            // slardar SDK 配置
            slardarOptions: {
                match: {},
                config: {
                    bid: 'react',
                }
            }
        }
    ]
});
export function SlardarPlugin(createBrowserClient, createBrowserClientConfig, slardarOptions): SlardarPluginOptions {
    return {
        name: "slardar-plugin",
        beforeLoad(appInfo){
            // 启动监控
            slardarInstance('init', app);
            slardarInstance('setFilter', ()=>{
                // 根据应用信息过滤
            });
            // 性能监控
            FCPMonitor(domGetter, (metric)=>{
                sendPerfTime({
                    perfName: 'mffcp',
                    value: metric.renderTime - beforeLoadPerformanceNow,
                    bid: slardarOptions.config.bid
                });
            });
        },
        afterUnmount(appInfo){
            slardarInstance('on','report', ()=>{
                return false;
            });
        }
    }
}