如何用Azure App Insights JS SDK在Next.js中记录请求数与页面浏览量

问题1：PageViews日志缺少页面URL #

你当前在Document.ts的组件外部直接调用trackPageView和startTrackPage，存在两个核心问题：

1. Document是Next.js的服务器端渲染入口，此时客户端window对象尚未初始化，无法正确获取当前页面的URL信息；
2. 调用顺序错误，startTrackPage用于追踪页面加载时长，需配合stopTrackPage使用，直接调用trackPageView会导致默认数据缺失。

修复方案： #

将页面追踪逻辑移到客户端组件（如_app.tsx）中，而非Document.ts，并明确传递页面URL和名称：

// _app.tsx
import { useEffect } from 'react';
import { appInsights } from 'services/telemetry';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps, router }: AppProps) {
  useEffect(() => {
    // 定义页面追踪函数
    const trackPage = () => {
      appInsights.trackPageView({
        name: router.pathname,
        uri: window.location.href,
      });
    };

    // 首次加载时追踪页面
    trackPage();

    // 监听路由切换事件，追踪后续页面跳转
    const handleRouteChange = () => trackPage();
    router.events.on('routeChangeComplete', handleRouteChange);

    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  return <Component {...pageProps} />;
}

同时修改Document.ts，移除组件外的AppInsights调用（服务器端无法正确追踪客户端页面信息）：

// Document.ts
import { Html, Head, Main, NextScript } from 'next/document';

const Document = () => {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};

export default Document;

问题2：操作与依赖图表无数据波动 #

先纠正你对操作和依赖的理解：

• 操作（Operation）：指应用主动发起或处理的核心任务，比如用户的页面访问（PageView属于操作的一种）、客户端发起的API请求；
• 依赖（Dependency）：指应用依赖的外部服务调用，比如客户端调用后端API、服务器端连接数据库等，是应用被动依赖的外部资源请求。

你当前看不到数据的原因：

1. 之前在Document.ts的服务器端调用追踪逻辑，未正确关联客户端操作上下文，导致PageView数据未被归类到操作统计中；
2. 若要追踪依赖（如客户端API请求），需额外开启AppInsights的自动追踪功能。

修复方案： #

1. 确保页面追踪逻辑在客户端执行（参考问题1的_app.tsx配置），PageView会被正确统计到操作图表中；
2. 若需要自动追踪客户端API请求（作为依赖），修改Telemetry.ts的配置，开启自动追踪：

// Telemetry.ts
import { ApplicationInsights } from '@microsoft/applicationinsights-web';

const appInsights = new ApplicationInsights({
  config: {
    connectionString: 'InstrumentationKey=<<connectionString>>',
    enableAutoRouteTracking: true, // 自动追踪路由变化
    enableAutoDependencyCorrelation: true, // 自动关联依赖与操作上下文
    enableRequestTracking: true, // 自动追踪XMLHttpRequest/fetch请求作为依赖
  },
});

appInsights.loadAppInsights();
export { appInsights };

问题3：记录包含URL和页面信息的页面浏览请求 #

除上述配置外，还可通过以下方式优化页面浏览记录：

• 自定义PageView属性，添加页面标题、自定义业务信息等：

// 在_app.tsx的trackPage函数中扩展属性
appInsights.trackPageView({
  name: router.pathname,
  uri: window.location.href,
  properties: {
    pageTitle: document.title,
    // 可添加自定义属性，如用户角色、运行环境等
  },
});

• 追踪页面加载性能（如首次渲染时长），使用startTrackPage和stopTrackPage组合：

useEffect(() => {
  const handleRouteChangeStart = () => appInsights.startTrackPage();
  
  const handleRouteChangeComplete = () => {
    appInsights.stopTrackPage({
      name: router.pathname,
      uri: window.location.href,
      properties: { pageTitle: document.title },
    });
  };

  router.events.on('routeChangeStart', handleRouteChangeStart);
  router.events.on('routeChangeComplete', handleRouteChangeComplete);

  return () => {
    router.events.off('routeChangeStart', handleRouteChangeStart);
    router.events.off('routeChangeComplete', handleRouteChangeComplete);
  };
}, [router]);

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