如何使用 js sdk 在 azure app Insight 中记录请求计数、综合浏览量

Question

我有nextJs应用程序。

Telemetry.ts

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

const appInsights = new ApplicationInsights({
  config: {
    connectionString:
      'InstrumentationKey=<<connectionString>>',
  },
});

appInsights.loadAppInsights();
export { appInsights };

Document.ts

import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
import { appInsights } from 'services/telemetry';

appInsights.trackPageView();
appInsights.startTrackPage();
const Document = () => {
return ();
}

1. 文档页面为主页。因此，当我访问主页时，我可以看到 PageViews 日志正在日志表中填充。但它没有提供如下所示的任何信息。我期望的至少是加载该应用程序的页面的 url。但以下信息没有提供任何信息。

2. 我读到了操作与依赖之间的区别。请求将被标记为操作，响应将被依赖（如果我错了，请纠正我）。但在上述情况下，即使我可以在日志中看到页面浏览量。我在操作和依赖项中都没有看到请求计数的图表峰值。我有什么遗漏的吗？

3. 如何记录我访问的每个页面视图的每个请求（URL 和页面信息）。除了以上还有什么需要做的吗

Answer 1

感谢@Nirbhay luthra提供了在 Next JS 应用程序中集成应用程序洞察的明确步骤。

正如 Nirbhay luthra 提到的，我们可以使用 React Plugin 来跟踪页面浏览量和请求。

您可以在 MSDoc 1 和 2

中看到同样的内容

要记录页面浏览量和请求，您需要在应用程序的默认页面/主页中添加js脚本。

但它没有提供如下所示的任何信息。我期望的至少是加载此应用程序的页面的 url。

您可以在 Application Insights 的 Transaction 部分查看

 request/ page view

的详细信息。

点击任意请求，将会导航至

End-to-end transaction details

，其中包含 URL 和其他详细信息。

• 查看指标部分更详细的信息和图表。

请参阅我为 Angular 回答的 SO Thread。