Blazor.Extensions.Logging 0.1.1

Blazor Extensions

Blazor Extensions are a set of packages with the goal of adding useful things to Blazor.

Blazor Extensions Logging

This package is a implementation for the Microsoft Extensions Logging abstraction to support using the ILogger interface in your Blazor code.

When the component is configured, all the log statements will appear in the browser's developmer tool console.

Features

Content to log

The logger supports the same string formatting what MEL provides, altogether with named parameter replacement in the message.

In addition to that if you like to log an object then in the browser console you'll see an object displayed, and on that you can expand members, hierarchies to see what is in them.

If you want to log an enumerable list of objects, then the browser side component will display iy be calling console.table.

Filtering

The implementation supports the ILoggerFactory based filtering configuration that is supplied by the Microsoft Extension Logging abstraction.

To keep it lightweight Microsoft Extensions Configuration based configuration is not supported, the logger can be only configured in code.

Log levels

The logger supports the LogLevels defined in MEL.

Some of the log levels are not available as distinct methods in the browser's developer tool, so the browser side component does some mapping.

Sample configuration

Setup

The following snippet shows how to setup the browser console logger by registering it for dependency injection in the Program.cs of the application.

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
    );
});

Usage

The following snippet shows how to consume the logger in a Blazor component.

@inject ILogger<Index> logger

@functions {
  protected override async Task OnInitAsync()
  {
      logger.LogDebug("MyCompoent init");
  }
}

If you want to consume it outside of a cshtml based component, then you can use the Inject attribute to inject it into the class.

[Inject]
protected ILogger<MyClass> logger;

public void LogSomething()
{
  logger.LogDebug("Inside LogSomething");
}

Contributions and feedback

Please feel free to use the component, open issues, fix bugs or provide feedback.