Introduction To Logging Framework In Blazor With .Net Core

Introduction

Logging is a very critical and essential part of any software. It helps us in the investigation of the essence of problems. The .NET Core Framework has built-in support for logging APIs that is able to work with logging providers.

Blazor is a new experimental .NET web framework using C#/Razor and HTML that runs in the browser with Web Assembly. Blazor endows full stack web development with the consistency, stability, and productivity of .NET. Many changes are going on in this framework and also many new extensions are available that work with Blazor.

In this article, we will learn about the Blazor extension for logging. Now logging extension for Blazor is available. This extension has an implementation for the Microsoft.Extensions.Logging to support the ILogger interface with Blazor code. When this extension is configured, all the logs appear in the browser's console. This Blazor extension provides nearly the same feature as Microsoft.Extensions.Logging provides for .NET Core.

How to configure the provider

Logging extension is not added with default project template. This extension is available on the NuGet package manager. Using the following command, we can add logging to our project.

Using Package Manager

PM > Install-Package Blazor.Extensions.Logging -Version 0.1.2

Using .NET CLI

>dotnet add package Blazor.Extensions.Logging --version 0.1.2

The next step is to register this extension service by adding the logging service to BrowserServiceProvider. Using the following code snippet, we can configure browser console logger.

var serviceProvider = new BrowserServiceProvider(services =>
{
// Add Blazor.Extensions.Logging.BrowserConsoleLogger
services.AddLogging(builder => builder
.AddBrowserConsole() // Register the logger with the ILoggerBuilder
);
});

How to Use

With .NET Core, Logger is available as DI (dependency injection) to every controller by default. In the Blazor, there is no controller. So, we need to inject the logger service to Blazor component. Using the following code we can consume the logger in a Blazor component.

Using cshtml

@using Microsoft.Extensions.Logging;
@inject ILogger<Index> logger
@page "/"
<h1>Test Logger</h1>
@functions {
protected override async Task OnInitAsync()
{
logger.LogDebug("OnInitAsync");
}
}

Outside the cshtml

[Inject]
protected ILogger<MyTestClass> logger { get; set; }
public void LogInfo(string message)
{
logger.LogDebug(message);
}

The current version of Blazor and MEL (Microsoft Extensions Logging) only supports the code based configuration and lightweight Microsoft Extensions Configuration based configuration is not supported.

Log Level

Blazor extension for logger is supporting all the log levels defined in MEL (Microsoft Extensions Logging). Using a SetMinimumLevel method of ILoggingBuilder interface, we can set a minimum log level.

Example

In the following example, I have set minimum log level to Information, so log levels below information (i.e. trace & debug) are ignored for logging.

using Blazor.Extensions.Logging;
using Microsoft.AspNetCore.Blazor.Browser.Rendering;
using Microsoft.AspNetCore.Blazor.Browser.Services;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
namespace BlazorDemoApp
{
public class Program
{
static void Main(string[] args)
{
var serviceProvider = new BrowserServiceProvider(services =>
{
// Add Blazor.Extensions.Logging.BrowserConsoleLogger
services.AddLogging(builder => builder
.AddBrowserConsole() // Register the logger with the ILoggerBuilder
.SetMinimumLevel(LogLevel.Information) // Set the minimum log level to Information
);
});
new BrowserRenderer(serviceProvider).AddComponent<App>("app");
}
}
}

Summary

Blazor extension for Logging is very simple and nearly the same as MEL (Microsoft Extensions Logging). Furthermore a provider may be added in the later release. Blazor is an experimental project and not yet in production. Some of the content of this article may become invalid in future releases of Blazor.

You can view or download the source code from the GitHub link here.