I ❤️ .NET

In this article, let's learn about how to log errors using SeriLog in Blazor WASM in .NET.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Exception Handling and Error Boundary.

Table of Contents

1. Introduction
2. How logging works in Blazor WASM ?
3. Configuring SeriLog
4. Logging to server from Blazor WASM
5. Creating Error component to log error
6. Summary

Introduction

Logging is needed in all applications. This will help to find root cause or track user activity in any environment. This can be done easily in server side applications with logging frameworks but for SPA like Blazor WASM running in browser sandbox, we will not be having direct access to file system or database and logging cannot be done like how we do in server side applications. We can use browser console to log Information, Warning or Error. But this will not help much in production. We can still make logging happen in production by processing Exception and posting the error details to backend API. Let's look on how to achieve this in Blazor WASM.

How logging works in Blazor WASM ?

.NET supports logging with variety of logging providers. Logging can be set on the minimum severity level. The severity levels are,

Logging can be set in the appsettings.json file and can be specified inside the Logging section. Default logging is set in the LogLevel section. The namespace is set as key and minimum severity level is set as value. The appsettings.json file is inside the wwwroot folder of Blazor WASM app. Here is the example how logging is set in appsettings.json file.

For this to work in blazor wasm, we need to add Microsoft.Extensions.Logging.Configuration Nuget package to the project. Now this needs to be configured in Program.cs file as shown below.

That's all with configuring logging in blazor wasm. Now you can inject ILogger<T> in any component and log the messages. You can also inject ILoggerFactory and create logger for specific class using loggerFactory.CreateLogger<T>(); and log messages. Both approaches will log messages to Output Window in your editor and to browser console.

Configuring SeriLog

So far so good. But Logging to browser console is not always helpful. The problem with blazor wasm is that not every features of ASP.NET Core logging is supported. As it is a client side web framework it doesn't have access to file system or network so it's unable to write directly to it. So we need to log the errors to some backend storage like Azure AppInsights or AWS CloudWatch or to a file system. This can be done by sending log information to server side applications which then can be used to log to backend storage configured on the server application. This can be done by using SeriLog which is a popular logging framework for .NET.

First let's setup backend API which we usually use to get data for our blazor wasm app. You need to do the following steps in your backend API project.

1. Install Serilog.AspNetCore Nuget package in server app a.k.a your API.
2. Next install Serilog.AspNetCore.Ingestion Nuget package in server app.

3. Now configure appsettings.json in your server app and configure the destination or sinks to store logs.

   Code Sample - Configuring Logging in Backend App

4. Register Serilog Logging in Host Builder of backend app.

   Code Sample - Add Serilog to Host Builder

5. Finally you need to add the following middleware to your back end API request pipeline. This tells the application that serilog endpoints needs is setup so that logs can be sent to the server. This will be helpful for Blazor WASM app to send logs to backend API.

   Code Sample - Add Serilog Injestion to Backend Request Pipeline

Logging to server from Blazor WASM

Now its time to setup and configure logging in blazor wasm app. You need to do the following steps in your blazor wasm project.

1. First install Microsoft.Extensions.Logging.Configuration Nuget package.
2. Next install Serilog.Extensions.Logging Nuget package.
3. Next install Serilog.Settings.Configuration Nuget package.
4. Next install Serilog.Sinks.BrowserConsole Nuget package.
5. Next install Serilog.Sinks.BrowserHttp Nuget package.

6. Finally add the following configuration in Program.cs

   Code Sample - Configure Serilog in Blazor WASM

In the above code we are initialising Logger and wiring it with Serilog. And we can Enrich() the logs with any data. In our case we are adding a simple Guid as instance id to track the logs in backend system. Finally we are adding the sinks to log to backend using BrowserHttp() and to browser console using BrowserConsole().

That's it now whenever you log any messages it will be logged in both browser console and in your backend API.

Creating Error component to log error

Let's start with simple Subscription component. This will throw error on Subscribe Now button click.

To process the error, let's create an Error component. This component takes Child Content RenderFragment as input. This component also has ProcessError method to process the exception and log it to browser console or backend API. For simplicity I'm logging into browser console.

Now lets wrap our Subscription component with Error component.

Note that the above mentioned components are created in previous article.

That's it. Now if any exception occurs, Subscription component will make use of CascadingParameter Error component and process the exception which then can be used to log to browser console or posted to backend API.

Summary

In this article, we have learnt about how to log errors in Blazor WASM using SeriLog. We have also seen how to create an Error component to process the exception and log it to browser console or backend API. You can find the source code for this article in this I Love .NET repository.