How can I correlate frontend and backend using App Insights? - azure

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