1. Home
  2. Language Guides
  3. .NET
  4. Real User Monitoring
  5. Blazor

Blazor

To monitor Blazor applications, we will add Raygun4JS which is a JavaScript library that will handle tracking activity triggered by both standard page loads in your web application and also navigation by the user once the page is loaded.

Step 1 - Add the following snippet

In Pages/_Host add this snippet to your markup immediately before the closing </head> tag:

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

This will fetch the Raygun4JS script from our CDN asynchronously so it doesn't block the page load.

Step 2 - Enable Real User Monitoring

Paste this at the bottom of the section in Pages/_Host, just below the blazor.server.js line.

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enablePulse', true); // This enables Real User Monitoring
  window.rg4js = rg4js;       // This is needed to connect Raygun4JS with Blazor callbacks
</script>

Note: If you are pasting the script block using the instructions provided when setting up a new application, be aware that you need to include window.rg4js = rg4js; at the bottom of the script section.

Step 3 - Wire up tracking of SPA navigation events

Open Shared/MainLayout.razor and at the top of the page paste the following lines:

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@implements IDisposable

At the bottom of the page, add the following code block:

@code {
  protected override void OnInitialized()
  {
    NavigationManager.LocationChanged += LocationChanged;
    base.OnInitialized();
  }
  
  private async void LocationChanged(object sender, LocationChangedEventArgs e)
  {
    if (e.IsNavigationIntercepted)
    {
      var pageViewData = new
      {
        Type = "pageView",
        Path = new Uri(NavigationManager.Uri).AbsolutePath
      };

      await JSRuntime.InvokeVoidAsync("rg4js", "trackEvent", pageViewData);
    }
  }

  void IDisposable.Dispose()
  {
    NavigationManager.LocationChanged -= LocationChanged;
  }
}

Setup user tracking by adding the following information to the script block at the bottom of the page in Pages/_Host.

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id',
  isAnonymous: false,
  email: 'users_email_address@domain.com',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'
});

Alternatively, this can be provided from a server rendered code section by using a JavaScript invoke call:

var userData = new
{
  Identifier = "users_email_address_or_unique_id",
  IsAnonymous = false,
  Email = "users_email_address@domain.com",
  FirstName = "Firstname",
  FullName = "Firstname Lastname"
};

await JSRuntime.InvokeVoidAsync("rg4js", "setUser", userData);

The string properties on a User have a maximum length of 255 characters. Users who have fields that exceed this amount will not be processed.

You can track custom performance measurements across your website or application using custom timings. For example, you might track the time it takes for a specific video to play or the search bar to load. Custom timings gives you the flexibility to track the timing of events that matter to your users or business.

For more information see our documentation on custom timings.

The Raygun4JS provider is open source and available at the Raygun4JS repository.

On this page: