ASP.NET Core Blazor logging

Configure custom logging in Blazor WebAssembly apps with the WebAssemblyHostBuilder.Logging property.

Add the namespace for Microsoft.AspNetCore.Components.WebAssembly.Hosting to Program.cs:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

In Program.Main of Program.cs, set the minimum logging level with LoggingBuilderExtensions.SetMinimumLevel and add the custom logging provider:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
...
builder.Logging.SetMinimumLevel(LogLevel.Debug);
builder.Logging.AddProvider(new CustomLoggingProvider());

The Logging property is of type ILoggingBuilder, so all of the extension methods available on ILoggingBuilder are also available on Logging.

Logging configuration can be loaded from app settings files. For more information, see ASP.NET Core Blazor configuration.

SignalR .NET client logging

Inject an ILoggerProvider to add a WebAssemblyConsoleLogger to the logging providers passed to HubConnectionBuilder. Unlike a traditional ConsoleLogger, WebAssemblyConsoleLogger is a wrapper around browser-specific logging APIs (for example, console.log). Use of WebAssemblyConsoleLogger makes logging possible within Mono inside a browser context.

Note

WebAssemblyConsoleLogger is internal and not available for direct use in developer code.

Add the namespace for Microsoft.Extensions.Logging and inject an ILoggerProvider into the component:

@using Microsoft.Extensions.Logging
@inject ILoggerProvider LoggerProvider

In the component's OnInitializedAsync method, use HubConnectionBuilderExtensions.ConfigureLogging:

var connection = new HubConnectionBuilder()
    .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
    .ConfigureLogging(logging => logging.AddProvider(LoggerProvider))
    .Build();

For general ASP.NET Core logging guidance that pertains to Blazor Server, see Logging in .NET Core and ASP.NET Core.

Log in Razor components

Loggers respect app startup configuration.

The using directive for Microsoft.Extensions.Logging is required to support IntelliSense completions for APIs, such as LogWarning and LogError.

The following example demonstrates logging with an ILogger in components.

Pages/Counter.razor:

@page "/counter"
@using Microsoft.Extensions.Logging;
@inject ILogger<Counter> logger;

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}
@page "/counter"
@using Microsoft.Extensions.Logging;
@inject ILogger<Counter> logger;

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

The following example demonstrates logging with an ILoggerFactory in components.

Pages/Counter.razor:

@page "/counter"
@using Microsoft.Extensions.Logging;
@inject ILoggerFactory LoggerFactory

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        var logger = LoggerFactory.CreateLogger<Counter>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}
@page "/counter"
@using Microsoft.Extensions.Logging;
@inject ILoggerFactory LoggerFactory

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        var logger = LoggerFactory.CreateLogger<Counter>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

Additional resources