Blazor Basics: Introduction to Logging with Serilog in Blazor Applications

In this article, we learn the fundamentals of integrating Serilog into a Blazor web application.

Serilog is a popular and highly valued open-source logging framework for the .NET platform.

You can access the Blazor Server code and the Blazor WebAssembly code on GitHub.

Why Logging Is Important

You might wonder why integrating logging into a web application is important.

First of all, it doesn’t really matter what kind of application you build. You will eventually hit a point where something breaks, and you’ll wonder why.

Logging allows you to trace user activities and make bugs more transparent and reproducible.

It’s no different for web applications. You host the application on the server, and (ideally) multiple users will visit it and perform various actions.

There is incoming and outgoing HTTP traffic, and you might also be consuming third-party APIs. Your system will become more complex than you believe sooner or later.

A properly set up logging system will allow you to assess the severity of a bug quickly. You will instantly know how many users are affected (which user groups) and how likely other users are to hit the same limitation in your system.

What Is Serilog?

Serilog is an open-source .NET library that provides diagnostic logging to files, the console, and many more targets.

It can be used for classic .NET Framework applications and modern .NET 10+ based applications, including Blazor web applications.

I have used Serilog in applications of various shapes and sizes for the past decade and longer. I have used it for ASP.NET Core backend APIs and desktop applications.

Performance has never been an issue, and integration has always been straightforward.

Let’s integrate Serilog in a Blazor web application.

How Does Serilog Work?

Serilog provides a foundational package and several framework integrations. Since we are working with Blazor and ASP.NET Core, we will use the framework-specific NuGet package in this article.

The framework-specific packages help set up application logging.

Another important concept is a sink. Sinks allow us to specify where or how to store the log information. For example, the Console and File sinks are common logging targets.

However, there are also more advanced and specific sinks, for example, to save log files to a blob storage on an Azure Storage account.

Hint: There are over 80 sinks listed in the official Serilog repository at the time of writing this article.

Hint: There are at the time of writing this article.

Integrating Serilog into Blazor Server Web Applications

First of all, we install the Serilog.AspNetCore NuGet package to the Blazor Server web application project.

The Serilog.AspNetCore package has a few dependencies on the most commonly used sinks, such as Console and File.

Next, we configure Serilog in the Program.cs file:

We use the AddSerilog extension method on the IServiceCollection type to configure Serilog.

We set the minimum log level to Information and use the WriteTo property to configure Console and File as the log targets (sinks).

We configure the log file to include the current day in its filename. This helps automatically split up log files per day to keep the files to a manageable size.

Hint: Learn more about the available log levels in the Serilog documentation.

Hint: Learn more about the available log levels in the Serilog documentation.

Next, we want to write a log statement from a Blazor component.

We open the Counter.razor (generated from the example files using the default Blazor web application project template in .NET 10):

We use the @inject directive to inject an instance of the ILogger type and provide the type of the component as the generic type argument.

In the code section, we use the injected Logger property and its LogInformation method to write a log statement.

In this case, we want to log the current count whenever the user presses the button to increment it.

We can now start the application and press the button to increase the counter value. We should now see the log statements in the Console.

If we open the project folder on the hard disk, we should also be able to find and open the log file.

Instead of configuring Serilog statically in the Program.cs, you can also configure it in appsettings.json.

This allows you to change the log level and configure active sinks at runtime, not during application compilation.

For example, you can choose to log to the Console and a File during development and to an Azure Storage account in production without changing the application’s source code.

You can access the Blazor Server code and the Blazor WebAssembly code on GitHub.

Integrating Serilog in Blazor WebAssembly Web Applications

Serilog integration for Blazor WebAssembly looks different.

When we think about how Blazor WebAssembly is architected, it’s clear that we cannot integrate Serilog in the Client (WebAssembly) project. And here is why: The Serilog.AspNetCore package depends on the ASP.NET Core shared runtime and is therefore incompatible with the browser web assembly runtime.

We have basically two options when it comes to logging in WebAssembly client projects:

• Write logs to the browser console
• Write logs to a remote service (server-side logging via API)

Let’s explore the two options in more detail.

Logging to the Browser Console

The simplest way to get started is by configuring the browser console as the target (sink) for log messages in the WebAssembly client project.

We start by installing the following three NuGet packages:

Next, in the Program.cs file, we create a logger configuration and add it to the list of registered logging providers. We clear the existing providers first and add the Serilog provider as the only logging provider.

Similar to the Blazor Server setup, we now inject an instance of the ILogger type in the Counter component:

And we log a message whenever the user presses the button to increase the counter.

When running the application and increasing the value on the Counter page by pressing the Click Me button, we see the log message appear in the console window of the browser’s developer tools.

Browser logs are helpful for reproducing reported bugs in a local development environment.

You can access the Blazor Server code and the Blazor WebAssembly code on GitHub.

Logging to a Remote Service (API)

While browser logs are helpful for gathering information in a controlled environment, we need a different strategy to retrieve logs from real users in a production application.

Since we do not have access to the user’s computers, we need to make sure they send the required information from the client to the server.

There are two main options.

• We can implement our own endpoint using an ASP.NET Core backend service and use the Serilog HTTP Sink.
• We use a remote logging service, such as Seq, and use the dedicated Serilog Seq Sink.

Whatever path we choose, the workflow remains the same.

We decide where we want to store and how we want to transfer the log messages from the client to a (remote) server.

Additional Serilog Features

There are additional advanced features I did not cover in this beginner article, but that are helpful for production scenarios:

• You can enrich Serilog with additional information, such as a UserId, Username, SessionsId or web RequestID.
• You can configure the output format with placeholders and configure JSON instead of plain text output.
• You can use structured logging.

Conclusion

Integrating Serilog into your Blazor web application can significantly improve your ability to monitor, diagnose and maintain your software.

Whether you’re working with Blazor Server or Blazor WebAssembly, Serilog offers flexible configuration and a wide variety of sinks. It allows gathering information during development, when reproducing bugs and for monitoring production systems.

Be aware of the architectural differences between Blazor Server and Blazor WebAssembly and understand the implications. We can directly log user interaction on the server for Blazor Server applications.

However, in Blazor WebAssembly, we are limited to client-side logging via the browser console and to calling remote APIs to send log statements to a centralized system.

If you want to learn more about Blazor development, watch my free Blazor Crash Course on YouTube. And stay tuned to the Telerik blog for more Blazor Basics.