Raygun's new SDK for .NET Blazor makes error monitoring easy

By Miguel Beltran | Posted Oct 9, 2024 | 9 min. (1732 words)

.NET Blazor, a robust web development framework, offers developers the unique opportunity to build interactive web applications using C#, HTML, CSS, and JavaScript that can run on the server, on the user’s browser, or even as a mobile application when part of a .NET MAUI application. Its unique approach differentiates Blazor from traditional web development methods.

Leveraging our experience with Raygun’s .NET providers (ASP.NET, .NET MAUI, Xamarin, and more), we have created a new Raygun provider optimized for Blazor’s unique environment. It offers the same reliable functionality you expect from a Raygun Crash Reporting provider, from capturing unhandled exceptions to attaching relevant user and system information to crash reports.

Whether using Blazor WebAssembly, Server, building .NET MAUI applications, or a hybrid approach, the Raygun provider can be seamlessly integrated into your application, which means you can benefit from robust crash reporting regardless of whether you’re using server-side or client-side rendering.

In this article, we’ll look at a few key features that make our new Raygun provider a valuable asset for Blazor applications, including:

What is Blazor?
About Raygun’s Blazor provider
Easy to set up
Blazor rendering modes
Key features of Raygun for Blazor

What is Blazor?

Blazor is a relatively new framework within the .NET ecosystem that offers a distinct approach to web development compared to traditional .NET applications.

Blazor leverages C# and Razor syntax for server-side and client-side rendering, eliminating the need for extensive JavaScript, simplifying development, and improving performance.

It also offers both Server-Side Rendering (SSR) and client-side rendering (CSR) options. CSR allows for more dynamic and interactive user experiences, while SSR can improve initial load times and SEO.

Blazor offers two primary deployment options:

Blazor Server runs components on the server and pushes updates to the client in real time using SignalR.
Blazor WebAssembly compiles C# code into WebAssembly, allowing it to run directly in the browser. Running code in the browser enables offline capabilities and reduces server load.

Its component-based architecture, flexible rendering options, and seamless integration with the .NET ecosystem make it a compelling choice for building interactive web applications.

You can also use Blazor in MAUI applications. In this case, a Blazor website is shipped as part of a MAUI multi-platform application and runs inside a web view.

Note that starting in .NET version 8, a new project template called Blazor Web App appeared. In this article, we include Blazor Web App whenever we mention Blazor Server, even if it’s not stated explicitly, since they are technically the same and both use Raygun for Blazor Server.

About Raygun’s Blazor provider

Until now, the recommended way to add Raygun support in Blazor applications was to integrate the Raygun4Net provider on the server side while monitoring JavaScript errors with Raygun4JS. This approach was cumbersome and didn’t fully support Blazor WebAssembly.

That’s why we decided to create a new Raygun provider built with a Blazor-first approach.

Our new Blazor provider is designed to integrate seamlessly into your .NET Blazor application while still providing the same functionality you know and love from our Raygun for .NET provider. This new provider can capture exceptions on either the client or server side and in JavaScript or C# code.

We built Raygun for Blazor with JavaScript interoperability at its core. Our JavaScript interop interface lets you access Raygun’s functionality directly from JavaScript and manually record breadcrumbs and exceptions.

Whether you’re building a Blazor Server or WebAssembly application, our provider offers tailored extensions to simplify configuration. These extensions ensure a smooth integration process, no matter which Blazor implementation you choose. Since it’s a scoped service, you can inject it wherever needed, following Blazor’s principle of reusable components.

Our goal was to make Raygun for Blazor as simple to use as possible. For example, you can send exceptions to Raygun by injecting RaygunBlazorClient into your Razor code and then calling RecordExceptionAsync() with the exception object.

@inject RaygunBlazorClient RaygunClient
…
RaygunClient.RecordExceptionAsync(exception)

As well, calling to recordException from JavaScript is as easy as:

window.raygunBlazor.recordException(exception)

Easy to set up

A series of packages accompany our Raygun for Blazor provider to help streamline the setup process, depending on the type of Blazor application you’re building.

This section will teach you how to start setting up a Blazor WebAssembly, Blazor Server, and MAUI Blazor Hybrid application.

Raygun for Blazor WebAssembly

Blazor WebAssembly is a revolutionary approach that allows developers to compile C# code into WebAssembly. WebAssembly’s low-level binary format can run directly in the browser without requiring a server. This capability opens up new possibilities for building rich, interactive web applications with a familiar .NET development experience and a single codebase, reducing the amount of code needed to build web applications.

Following Blazor composability, you can inject RaygunBlazorClient directly into your Blazor pages and ViewModels just as you can do for Blazor Server applications.

The setup process is very simple as well, you only need to call UseRaygunBlazor() on your WebAssemblyHostBuilder to add and configure a Raygun client.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
// ...
builder.UseRaygunBlazor();

You can also capture errors automatically by setting up an error boundary.

For this, Raygun for Blazor provides the RaygunErrorBoundary class. You only need to wrap your Razor code with this component to capture exceptions and send them to Raygun.

@using Raygun.Blazor.WebAssembly.Controls
...
<article class="content px-4">
  <RaygunErrorBoundary>
    @Body
  </RaygunErrorBoundary>
</article>

You can find the full setup instructions on our Raygun for Blazor documentation.

Raygun for Blazor Server

While Blazor WebAssembly applications run exclusively on the user browser, Blazor Server applications run mostly on the server side, using SingalR to communicate between the server and client implementations.

Starting in .NET version 8, there is a new Blazor Web App project template which replaces the Blazor Server template. There are no differences between the two when using Raygun for Blazor.

The setup process with Raygun for Blazor Server is similar to the WebAssembly application setup. In this case, you only have to call UseRaygunBlazor() on your WebApplication builder.

var builder = WebApplication.CreateBuilder(args);
...
builder.UseRaygunBlazor();

Capturing errors automatically can also be done on Blazor Server applications, and the setup process is as simple as for the WebAssembly applications, as long as you use interactive rendering.

Head to the Raygun for Blazor documentation for full setup instructions.

Raygun for MAUI Blazor Hybrid applications

MAUI Blazor Hybrid is a cross-platform mobile and desktop application development framework that combines .NET MAUI (Multi-platform App UI) technology with Blazor.

Our Blazor Crash Reporting provider works in conjunction with our .NET MAUI provider, allowing you to capture and report exceptions on both sides of the application.

Once your MAUI Blazor Hybrid application has been set up with Raygun4Maui, you only need to call UseRaygunBlazorMaui() with your MauiApp builder.

var builder = MauiApp.CreateBuilder();

builder
  .UseMauiApp<App>()
  // ... Other configuration
  .UseRaygunBlazorMaui();

That will add a scoped RaygunBlazorClient into your MAUI application builder, which you can use from any Blazor screens, just as you would with the other Blazor solutions.

Of course, we also provide an error boundary RaygunErrorBoundary to capture exceptions automatically in MAUI Blazor Hybrid applications.

The full setup instructions can be found in our Raygun for Blazor documentation.

Blazor rendering modes

One of the biggest challenges when building Blazor applications is choosing the right rendering mode for your needs. In general, you can have interactive and static rendering modes.

Interactive rendering mode enables your web application to update the UI in real-time, providing a more responsive and fluid user experience. This is particularly useful for scenarios where the UI needs to change frequently based on user interactions or data updates.

In static rendering mode, the server pre-renders your web application components before sending them to the client. In most scenarios, you may want to use interactive rendering, however static also has its uses, for example, if you want to improve load times or you are handling large amounts of data.

Keep in mind that static rendering has an important limitation: it won’t be able to capture exceptions automatically using the RaygunErrorBoundary.

Client-Side Rendering (CSR) is by definition interactive, while Server-Side Rendering (SSR) can be either static or interactive depending on your configuration.

Blazor WebAssembly and MAUI Blazor Hybrid applications use Client-Side Rendering, therefore they are using interactive rendering and you can use the RaygunErrorBoundary without limitations.

Blazor Server (or Blazor Web Apps as with the new project template) uses static Server-Side rendering by default. As mentioned, this limits the use of RaygunErrorBoundary to capture unhandled errors, but this can be mitigated by enabling interactivity, switching to interactive Server-Side Rendering.

To enable interactivity, set the @rendermode="InteractiveServer" in your HeadOutled and Routes components, as detailed in our documentation. This will allow you to capture exceptions automatically when wrapping Blazor components as explained previously in this article.

Comprehensive error monitoring with Raygun for Blazor

As with the other Raygun Crash Reporting providers that we offer, you will find in Raygun for Blazor all the functionality that you can expect from a crash reporting tool.

Attach breadcrumbs, tags and device information to crash reports like with all other Raygun providers.
Connect this provider with the .NET Authentication state providers to create your own customized user details provider. Attaching all the relevant user information you need for your crash reports.
Offline caching support. So that you don’t miss any reports if the Blazor application goes offline temporarily.
Throttled processing support. Which optimizes resource usage to process and send error reports in a controlled manner.

Try it yourself!

The best way to get started with Raygun for Blazor is by installing the provider following the setup instructions in our Raygun for Blazor documentation. You can try out the full Crash Reporting application free for 14 days! No credit card required.

Whichever Blazor application type you are developing, you can integrate Raygun for Blazor to capture and report errors, with all the Raygun functionality you know and love from our Crash Reporting providers, all presented in an easy-to-setup process.

Simply add the Raygun for Blazor package to your project and start benefiting from Raygun’s comprehensive error reporting tools that will help you identify and resolve issues quickly, ensuring a smooth and reliable user experience.