Angular SPA 和 .Net 6 API 之间未连接 Application Insights Map

Question

我有一个 Angular 13 SPA，它调用我的 .Net 6 API，然后调用数据库。现在整个系统在我的本地机器上运行。

我将 Application Insights JS SDK 和 Angular 插件添加到我的 SPA 并初始化了它们

package.json

"@microsoft/applicationinsights-web": "2.7.4",
"@microsoft/applicationinsights-angularplugin-js": "2.8.0",

app.component.ts

export class AppComponent {
  title = 'app';
  constructor(
    private router: Router,
    private settings: SettingsService,
  ) {
    const aiInstrumentationKey = 'ApplicationInsights_InstrumentationKey';
    var angularPlugin = new AngularPlugin();
    const appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: settings.settings.extensions[aiInstrumentationKey],
        distributedTracingMode: DistributedTracingModes.W3C,
        disableFetchTracking: false,
        enableCorsCorrelation: true,
        enableDebug: true,
        enableDebugExceptions: true,
        enableRequestHeaderTracking: true,
        enableResponseHeaderTracking: true,
        extensions: [angularPlugin],
        extensionConfig: {
          [angularPlugin.identifier]: { router: this.router }
        }
      }
    });
    appInsights.loadAppInsights();
  }
}

在我的 API 中，我添加了 NuGet 包并在我的 Startup class 中初始化了它。

.csproj

<PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.20.0" />

Startup.cs

services.AddApplicationInsightsTelemetry();

通过整个依赖链

然而，Application Map 与此不一致。我希望看到红色箭头，但我得到了两个断开连接的图表。

当我单击绿色圆圈节点并深入示例时，我进入了同一个端到端事务，就像我单击 SPA 的左下角节点一样。

如何正确连接图形？

Answer 1

Application Map 有一个预览选项 - 有时会破坏地图。您可以尝试选择退出预览。

Angular SPA 和 .Net 6 API 之间未连接 Application Insights Map

Application Insights Map not connected between Angular SPA and .Net 6 API

c#

angular

azure-application-insights

azure-monitor