ASP.NET Core Blazor logging

Article
11/18/2021
5 minutes to read

Logging in Blazor WebAssembly apps

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.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.

Hosted Blazor WebAssembly logging

A hosted Blazor WebAssembly app that prerenders its content executes component initialization code twice. Logging takes place server-side on the first execution of initialization code and client-side on the second execution of initialization code. Depending on the goal of logging during initialization, check logs server-side, client-side, or both.

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

Logging in Blazor Server apps

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

Razor component logging

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

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

Additional resources

Logging in .NET Core and ASP.NET Core

Logging in Blazor WebAssembly apps

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.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.

Hosted Blazor WebAssembly logging

SignalR .NET client logging

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

Logging in Blazor Server apps

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

Razor component logging

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

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

Additional resources

Logging in .NET Core and ASP.NET Core

Logging in Blazor WebAssembly apps

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.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.

Hosted Blazor WebAssembly logging

SignalR .NET client logging

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

Logging in Blazor Server apps

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

Razor component logging

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

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

Additional resources

Logging in .NET Core and ASP.NET Core

ASP.NET Core Blazor logging

Please rate your experience

Logging in Blazor WebAssembly apps

Hosted Blazor WebAssembly logging

SignalR .NET client logging

Logging in Blazor Server apps

Razor component logging

Additional resources

Logging in Blazor WebAssembly apps

Hosted Blazor WebAssembly logging

SignalR .NET client logging

Logging in Blazor Server apps

Razor component logging

Additional resources

Logging in Blazor WebAssembly apps

Hosted Blazor WebAssembly logging

SignalR .NET client logging

Logging in Blazor Server apps

Razor component logging

Additional resources

Feedback