Web App的Application Insights及日志无用户数据问题求助

核心原因 #

你使用的React示例是静态SPA，Azure Web App针对Node运行时的默认Application Insights集成仅覆盖后端服务，不会自动为前端页面注入遥测采集逻辑，导致用户行为数据无法被捕获。

分步排查与修复 #

1. 手动集成前端Application Insights SDK #

静态React应用必须手动添加SDK才能采集用户行为数据：

• 安装依赖包：

  npm install @microsoft/applicationinsights-react-js @microsoft/applicationinsights-web
  

• 在React入口文件（如src/index.js）中初始化SDK，替换为你的Application Insights连接字符串或仪表密钥：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  import { ApplicationInsights } from '@microsoft/applicationinsights-web';
  import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
  import { createBrowserHistory } from 'history';
  
  const browserHistory = createBrowserHistory({ basename: '' });
  const reactPlugin = new ReactPlugin();
  const appInsights = new ApplicationInsights({
    config: {
      connectionString: '<你的Application Insights连接字符串>',
      // 或使用 instrumentationKey: '<你的仪表密钥>'，推荐用连接字符串
      extensions: [reactPlugin],
      extensionConfig: {
        [reactPlugin.identifier]: { history: browserHistory }
      },
      samplingPercentage: 100 // 确保全量采集，避免采样过滤数据
    }
  });
  appInsights.loadAppInsights();
  appInsights.trackPageView(); // 手动触发初始页面视图采集
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

• 重新构建并部署应用到Azure Web App。

2. 验证Web App应用设置配置 #

确认Web App已正确配置Application Insights的连接信息：

• 登录Azure门户，进入你的Web App -> 配置 -> 应用设置
• 检查是否存在APPLICATIONINSIGHTS_CONNECTION_STRING或APPINSIGHTS_INSTRUMENTATIONKEY，且值与你的Application Insights资源一致
• 若不存在，添加对应设置并保存，重启Web App生效

3. 检查遥测发送状态 #

使用浏览器开发者工具验证数据是否正常发送：

• 打开应用页面，按F12进入开发者工具 -> 网络标签
• 过滤请求关键词/v2/track，查看是否有向Application Insights端点发送的POST请求
• 若请求存在且返回200状态码，说明数据已发送，等待5-10分钟后刷新Application Insights面板即可看到数据
• 若请求不存在或报错，检查Console标签是否有SDK初始化失败的错误信息

4. 排除采样与资源匹配问题 #

• 确认Application Insights资源的采样率设置为100%（在资源的数据收集 -> 采样中查看）
• 检查是否选错了Application Insights资源，确保Web App关联的资源与你查看的面板是同一个

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