Blazor to Serilog in ASP.NET Core

Microsoft’s new UI stack, Blazor, features in just about every summary of what’s new in .NET Core 3. I’m not planning to use “server-side” Blazor, although it’s undeniably impressive (frameworks based on stateful client/server sessions tend to blow their complexity budget dealing with all the messy realities of deployment on the web). “Client-side” Blazor, which runs .NET code in the browser using WebAssembly, is more interesting to me.

I’ve made my peace with JavaScript, and I’m happy in the polyglot web development world we mostly inhabit, but there are still times I’d like to share C# modules between the browser and server. In Seq, for example, we have a substantial C# query parser and expression evaluator that we’d love to be able to use client-side.

Since WASM is here to stay, I’m keeping an eye on client-side Blazor, and tinkering with a few ideas…

Spiking out some core Serilog + Blazor scenarios

There are two interesting scenarios I can see for Serilog in Blazor.

The first is interaction with the browser console, which natively supports structured data in the form of JavaScript objects. For a WASM module to log structured data through the browser console, serialization or mashalling is required, and this isn’t something that can or should be done for every argument to every log call. Serilog recognizes this distinction, and its {@Property} capturing syntax triggers serialization only when it’s desirable; the ToString() representation of objects is sent to the browser console otherwise.

var user = new {Name = "nblumhardt", Id = 42};
Log.Information("User {@User} logged in", user);

In Firefox this comes out rather nicely:

I won’t say much more about this feature, here, but you can dotnet add package Serilog.Sinks.BrowserConsole and WriteTo.BrowserConsole() to see this in action for yourself, and check out the code on GitHub.

The second interesting scenario is a natural extension of Blazor’s essential value proposition: transparently send client-side log events through the server-side log stream, for easy collection and analysis.

A quick spike, which I’ll write about below, suggests it’s a compelling and rather pleasant developer experience that’s worth more investigation.

Serilog.Sinks.BrowserHttp and Serilog.AspNetCore.Ingestion

Serilog.Sinks.BrowserHttp is a client-side sink that POSTs newline-delimited, JSON-encoded log events from the browser to an HTTP endpoint. This could be implemented by the app’s origin server, by another web application entirely, or by a log server that can ingest HTTP payloads.

Serilog.AspNetCore.Ingestion implements a matching HTTP endpoint as middleware that can be plugged into any ASP.NET Core app running Serilog. Events received by the middleware are deserialized into Serilog LogEvents, and written to the server’s log pipeline. Events from the client are tagged with a property Origin = 'Client' so that they can be robustly identified.

The two packages can be used separately, but work nicely together. Here you can see a client-side button click event, running in Blazor, being logged directly to the server-side terminal, and a client-side error following immediately after:

Having only one log stream to watch is nice, even at development time.

Creating the demo solution

The easiest way to set up a Blazor client app with an ASP.NET Core server is using the blazorwasm template, installed along via the .NET Core 3.1 preview SDK.

dotnet new blazorwasm --hosted

This creates a solution file and three projects: Client, Server, and Shared. The Server project is a web app that hosts the Client. Check that everything is set up correctly using dotnet run.

Setting up the Blazor client

In the Client project, install Serilog.Sinks.BrowserHttp. I’m going to enable Serilog.Sinks.BrowserConsole in the example, so I’ll install that package, too.

cd ./Client
dotnet add package Serilog.Sinks.BrowserHttp
dotnet add package Serilog.Sinks.BrowserConsole

Blazor apps start in Program.cs; here’s a complete listing that shows how Serilog is configured:

using System;
using Microsoft.AspNetCore.Blazor.Hosting;
using Serilog;
using Serilog.Core;

public class Program
{
    public static void Main(string[] args)
    {
        var levelSwitch = new LoggingLevelSwitch();
        Log.Logger = new LoggerConfiguration()
            .MinimumLevel.ControlledBy(levelSwitch)
            .Enrich.WithProperty("InstanceId", Guid.NewGuid().ToString("n"))
            .WriteTo.BrowserHttp(controlLevelSwitch: levelSwitch)
            .WriteTo.BrowserConsole()
            .CreateLogger();

        Log.Information("Hello, browser!");

        try
        {
            CreateHostBuilder(args).Build().Run();
        }
        catch (Exception ex)
        {
            Log.Fatal(ex, "An exception occurred while creating the WASM host");
            throw;
        }
    }
    
    public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
        BlazorWebAssemblyHost.CreateDefaultBuilder()
            .UseBlazorStartup<Startup>();
}

@page "/counter"
@using Serilog

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;
    private static readonly ILogger Log = Serilog.Log.ForContext<Counter>();

    private void IncrementCount()
    {
        currentCount++;
        Log.Information("Incremented count to {CurrentCount}", currentCount);
    }
}

cd ./Server
dotnet add package Serilog.AspNetCore.Ingestion

If you followed all of the instructions in the ASP.NET Core setup article, in Startup.cs, you’ll have:

app.UseSerilogRequestLogging();

app.UseSerilogIngestion(); // <-- Add this line
app.UseSerilogRequestLogging();

Javier Huthon

Javier is Content Specialist and also .NET developer. He writes helpful guides and articles, assist with other marketing and .NET community work