(20/30) Let's Learn Blazor Together: Logging

When developing a system, logging is very important. It wasn't mentioned earlier, but the author recently thought of this, so let's implement it!

Since the author is using Blazor Server, the official documentation only provides the approach for Blazor WebAssembly, so let's try the latter first.

First, open the previously created BlazorWasm project, add @using Microsoft.Extensions.Logging; to Counter.razor and inject the service @inject ILogger<Counter> _logger;, then add the information to prompt inside the original IncrementCount(). LogWarning() is used here, but there are also LogCritical, LogDebug, LogError, etc. available.

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

  <PageTitle>Counter</PageTitle>

  <h1>Counter</h1>

  <p role="status">Current count: @_currentCount</p>

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

  @code { private int _currentCount; private void IncrementCount() {
  _logger.LogWarning("A beauty clicked me!"); _currentCount++; } }</Counter
>

Next, set the startup project to the BlazorWasm project. After starting, navigate to the Counter page, click the button, press F12 to switch to the Console tab, and you'll see the information we defined displayed.

It's that simple in Blazor WebAssembly. Is it the same in Blazor Server?

Unfortunately, Blazor Server does not support this approach. Currently, the only way is to use IJSRuntime to call the browser's console.log to prompt information, and to have different levels of information, you must also customize it.

Switch back to the Blazor Server project. Add the ConsoleLog() method to JsInteropClasses. What it does is just call console.log().

public async Task ConsoleLog(string message)
{
	await _js.InvokeAsync<object?>("console.log", message);
}

Then, override OnAfterRenderAsync() in Blog.razor.cs and call ConsoleLog() inside it.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	await _jsClass!.ConsoleLog("This is the console.log message from Blazor Server");
}

The reason we don't write it in OnInitializedAsync() is because we are using pre-render. At that point, JavaScript is not ready yet. If called in OnInitializedAsync(), the error shown below will occur.

If you absolutely must call it in OnInitializedAsync(), you can go to _Layout.cshtml and change the render-mode attribute of <component> from ServerPrerendered to Server.

The render-mode for Server has three types: Static, Server, and ServerPrerendered. The first is the fastest, converting all Components into static HTML files. The second is the slowest, first outputting a marker, and only rendering into HTML files when the user activates that Component. The third is a compromise: it first turns the Component into a static HTML file without interactive functionality, and only when the user activates that Component does it notify the Server to add the functionality.

This is also why changing render-mode to Server is effective—because ConsoleLog() hasn't been converted into a JavaScript file at that point.

References:

1. ASP.NET Core Blazor logging
2. LoggerExtensions Class
3. How can I write into the browser´s console via Blazor WebAssembly?
4. Blazor Server
5. What's the difference between RenderMode.Server and RenderMode.ServerPrerendered in blazor?
6. RenderMode Enum

Note: The code in this article has been refactored using .NET 6 + Visual Studio 2022. You can click the original link to compare with the refactored code for learning. Thank you for reading and supporting the original author.