Azure Web App中托管的React应用如何获取用户页面访问统计信息？

完全可以获取你需要的访问数据，问题大概率出在Application Insights的配置或者报表查看方式上，以下是具体解决步骤：

1. 确保Application Insights正确追踪React路由变化 #

React是单页应用，默认的Application Insights只会记录初始加载的页面，不会自动追踪前端路由切换导致的页面跳转。你需要手动添加页面追踪逻辑：

• 先确认已经在React项目中集成了Application Insights SDK，安装依赖包：

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

• 初始化SDK后，在路由组件中添加路由变化监听（以react-router为例）：

  import { useLocation } from 'react-router-dom';
  import { useAppInsightsContext } from '@microsoft/applicationinsights-react-js';
  import { useEffect } from 'react';
  
  function App() {
    const location = useLocation();
    const appInsights = useAppInsightsContext();
  
    useEffect(() => {
      // 路由变化时追踪页面视图
      appInsights.trackPageView({ name: location.pathname });
    }, [location, appInsights]);
  
    return (
      // 你的路由组件内容
    );
  }
  

• 如果需要识别具体用户，在用户登录成功后调用：

  appInsights.setAuthenticatedUserContext('用户唯一ID');
  

  这样就能把访问记录和具体用户关联起来。

2. 在Application Insights中查看正确的报表 #

配置完成后等待一段时间让数据上报，然后在Azure门户的Application Insights资源中查看：

• 用户访问信息：进入「用户」面板，能看到总用户数、新/老用户分布；通过「用户流」可以直观看到用户在各个页面的跳转路径；如果设置了用户ID，还能在「用户」列表中查看单个用户的所有访问记录。
• 页面访问次数：进入「页面视图」面板，会按页面路径统计访问次数、停留时长、跳出率等数据，支持按时间范围、用户维度筛选。

3. 用Azure Web App日志补充统计 #

如果暂时没法调整前端代码，也可以启用Web App的详细HTTP日志：

• 在Azure门户的Web App资源中，进入「日志」>「应用服务日志」，开启「HTTP日志」并设置存储位置，就能获取包含请求路径、客户端IP的日志文件。你可以下载日志后用工具统计页面访问次数，但这种方式无法关联到具体用户，只能做基础的页面访问量统计。

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