How can I correlate frontend and backend using App Insights?

Question

I am having an ASP.NET Core Razor application, where I am using the JavaScript AppInsights component for the ckient-side (configured in _Layout.cshtml) and the nuget package for the server-side.

Unfortunately, I am not able to correlate page views on the client-side to requests on the server-side. Also, the application map is not getting drawn correctly, no matter what I try. As you can see, they are "disconnected".

I have tried the following settings on the front end without luck. Any idea?

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

Answer 1

I figured it out. The documentation only lists XMLHttpRequest calls under the auto-collected dependency items for JavaScript.

So that implies I have to change views like this

// 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)
    {
        // ...
    }
}

To views that make use of AJAX, e.g like so

// 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()
    {
        ...
    }
}

And now everything looks as it should