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

Question

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

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

包.json

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

应用程序组件.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 类中对其进行了初始化。

.csproj

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

启动.cs

services.AddApplicationInsightsTelemetry();

我可以很好地看到端到端事务详细信息fb0903820fa64ef092fbcd432336e949，并且它们似乎在整个依赖链中很好地 携带了操作 ID（在我的示例中）

然而，应用程序地图与此并不相符。我期望看到红色箭头，但我得到的是两个断开连接的图表。

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

我该怎么做才能正确连接图表？

Answer 1

应用程序地图有一个预览选项 - 有时会破坏地图。您可以尝试选择退出预览。