如何使用 App Insights 关联前端和后端？

Question

我有一个 ASP.NET Core Razor 应用程序，我在其中使用 JavaScript AppInsights 组件作为 ckient 端（在 _Layout.cshtml 中配置）和 nuget 包服务器端。

不幸的是，我无法将客户端的页面浏览量与服务器端的请求相关联。此外，无论我尝试什么，应用程序地图都无法正确绘制。如您所见，它们是“断开连接”的。

我在前端尝试了以下设置，但没有成功。有什么想法吗？

disableFetchTracking: false,
enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true,

Answer 1

我明白了。 documentation 仅列出 XMLHttpRequest 自动收集的依赖项下的调用 JavaScript.

所以这意味着我必须像这样改变观点

// MySite.cshtml

@page
@model ...
@{
    ViewData["Title"] = "My Site";
}
<h1>@ViewData["Title"]</h1>

<form method="post" class="mt-1">
    <button class="btn btn-primary">Do something</button>
    <input type="hidden" name="id" value="doSomething" />
</form>

// MySite.cshtml.cs

public class MySiteModel : PageModel
{
    // ...
    
    public void OnPost(string id)
    {
        // ...
    }
}

使用 AJAX 的视图，例如

// MySite.cshtml 

@page
@model ...
@{
    ViewData["Title"] = "Exceptions";
}
<h1>@ViewData["Title"]</h1>

<button class="btn btn-primary" id="doSomething">Do Something</button>

@section scripts
{
    <script>
        $(document).click(e => {
            var id = e.target.id;
            
            if (id == "doSomething") {
                $.ajax({
                    url: '?handler=DoSomething
                });                 
            }
        });
    </script>
}

// MySite.cshtml.cs

public MySiteModel : PageModel 
{
    ... 
    public void OnGetDoSomething()
    {
        ...
    }
}

现在一切看起来都应该如此

如何使用 App Insights 关联前端和后端？

How can I correlate frontend and backend using App Insights?

azure

asp.net-core

azure-application-insights