如何在Azure Application Insights的browserTimings中记录SPA自定义HTTP请求性能

高阶方案：直接构造自定义遥测写入目标表 #

绕过trackPageViewPerformance的自动覆盖逻辑，直接构造符合browserTimings表结构的遥测数据上报：

1. 映射性能数据到标准字段
   从PerformanceObserver获取的PerformanceResourceTiming数据，对应到browserTimings的核心字段：

function mapResourceToBrowserTimings(resourceEntry) {
    return {
        id: resourceEntry.name,
        duration: resourceEntry.duration,
        startTime: resourceEntry.startTime,
        fetchStart: resourceEntry.fetchStart,
        domainLookupStart: resourceEntry.domainLookupStart,
        domainLookupEnd: resourceEntry.domainLookupEnd,
        connectStart: resourceEntry.connectStart,
        connectEnd: resourceEntry.connectEnd,
        requestStart: resourceEntry.requestStart,
        responseStart: resourceEntry.responseStart,
        responseEnd: resourceEntry.responseEnd,
        url: resourceEntry.name,
        method: resourceEntry.initiatorType
    };
}

2. 直接上报自定义遥测
   使用trackEvent并指定遥测类型为browserTimings，确保数据写入目标表：

const appInsights = new ApplicationInsights({ config: { instrumentationKey: '你的密钥' } });
appInsights.loadAppInsights();

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        // 过滤SPA的AJAX/Fetch请求
        if (entry.entryType === 'resource' && ['xmlhttprequest', 'fetch'].includes(entry.initiatorType)) {
            const timings = mapResourceToBrowserTimings(entry);
            appInsights.trackEvent({
                name: 'CustomHttpTimings',
                properties: timings
            }, undefined, { type: 'browserTimings' });
        }
    }
});

observer.observe({ entryTypes: ['resource'] });

低阶方案：通过遥测处理器合并数据 #

利用SDK的遥测初始化器，拦截默认browserTimings数据并替换为自定义HTTP时序：

1. 注册遥测初始化器
   在SDK初始化时添加处理器，手动合并收集到的HTTP性能数据：

appInsights.addTelemetryInitializer((envelope) => {
    if (envelope.data.baseType === 'BrowserTimingsData') {
        // 从全局缓存获取待上报的HTTP时序数据
        const customTimings = window.pendingHttpTimings.shift();
        if (customTimings) {
            Object.assign(envelope.data.baseData, customTimings);
        }
    }
});

2. 收集并暂存性能数据
   用PerformanceObserver收集数据后暂存到全局变量，等待初始化器触发时合并：

window.pendingHttpTimings = [];

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.entryType === 'resource' && ['xmlhttprequest', 'fetch'].includes(entry.initiatorType)) {
            window.pendingHttpTimings.push(mapResourceToBrowserTimings(entry));
        }
    }
});

observer.observe({ entryTypes: ['resource'] });

核心实现要点 #

• 弃用trackPageViewPerformance：该方法专为页面加载时序设计，会自动填充页面加载字段，必然覆盖自定义数据
• 匹配schema结构：确保上报字段符合SDK定义的BrowserTimingsData结构，避免数据被丢弃
• 精准过滤请求：通过initiatorType或URL前缀筛选SPA内的HTTP请求，排除静态资源等非目标数据
• 去重处理：对同一请求的时序数据做去重，避免重复上报

内容的提问来源于stack exchange，提问作者vmachacek