Implementing a logger provider for Blazor WASM

[ThomasArdal]

I'm trying to implement a logger provider for Blazor WASM. The provider requires a HTTP client to communicate with a remote API. The Blazor WASM documentation for adding new providers is very short and limited. Basically, it requires you to call:

builder.Logging.AddProvider(new CustomLoggingProvider());

In real life, you probably don't want to configure providers this way, since they need options and dependencies.

I have tried implementing my own custom logger provider for Blazor WASM, but I'm not sure if I'm missing something. As mentioned, it requires a HTTP client but also some options. Options class first:

public class ElmahIoBlazorOptions
{
    public string ApiKey { get; set; }
    public Guid LogId { get; set; }
}

Properties don't really matter for this example. Then an extension method on ILoggingBuilder to configure the new provider:

public static class LoggingBuilderElmahIoExtensions
{
    public static ILoggingBuilder AddElmahIo(this ILoggingBuilder loggingBuilder, Action<ElmahIoBlazorOptions> configure)
    {
        loggingBuilder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri("https://api.elmah.io") });
        loggingBuilder.Services.Configure(configure);
        loggingBuilder.Services.AddSingleton<ILoggerProvider, ElmahIoLoggerProvider>(services =>
        {
            var httpClient = services.GetService<HttpClient>();
            var options = services.GetService<IOptions<ElmahIoBlazorOptions>>();
            return new ElmahIoLoggerProvider(httpClient, options);
        });
        return loggingBuilder;
    }
}

The method register a new HttpClient, configure the options, and add the new logger provider as a singleton.

The ILoggerProvider class looks like this:

public class ElmahIoLoggerProvider : ILoggerProvider
{
    private readonly HttpClient httpClient;
    private readonly ElmahIoBlazorOptions options;

    public ElmahIoLoggerProvider(HttpClient httpClient, IOptions<ElmahIoBlazorOptions> options)
    {
        this.httpClient = httpClient;
        this.options = options.Value;
    }

    public ILogger CreateLogger(string categoryName)
    {
        return new ElmahIoLogger(httpClient, options);
    }

    public void Dispose()
    {
    }
}

And finally the logger:

public class ElmahIoLogger : ILogger
{
    private readonly HttpClient httpClient;
    private readonly ElmahIoBlazorOptions options;

    public ElmahIoLogger(HttpClient httpClient, ElmahIoBlazorOptions options)
    {
        this.httpClient = httpClient;
        this.options = options;
    }

    public IDisposable BeginScope<TState>(TState state) => null;

    public bool IsEnabled(LogLevel logLevel) => true;

    public void Log<TState>(LogLevel logLevel, EventId eventId, TState state, Exception exception, Func<TState, Exception, string> formatter)
    {
        var baseException = exception?.GetBaseException();

        httpClient.PostAsJsonAsync(
            $"https://api.elmah.io/v3/messages/{options.LogId}?api_key={options.ApiKey}",
            new
            {
                dateTime = DateTime.UtcNow,
                detail = exception.StackTrace,
                type = baseException?.GetType().FullName,
                title = formatter(state, exception),
                severity = LogLevelToSeverity(logLevel),
                source = baseException?.Source,
                hostname = Environment.MachineName
            });
    }

    private string LogLevelToSeverity(LogLevel logLevel)
    {
        // impl left out
        return "Error";
    }
}

The new logger can now be configured like this:

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        builder.Logging.AddElmahIo(options =>
        {
            options.ApiKey = "my api key";
            options.LogId = new Guid("my log id");
        });

        await builder.Build().RunAsync();
    }
}

Would this be a good way to implement a logger provider for Blazor WASM? I'm mostly thinking about the way I register the HTTP client and that the approach doesn't follow the documentation. Also, it would be great with some "official" examples of how to achieve this 👍

[ThomasArdal]

Anyone?

[davidfowl]

• I'm assuming the API key isn't a secret because it's available on the client side.
• You don't want to make an HTTP request per log statement, you want to do some batching and send those several log statements in a batch.

[ThomasArdal]

• Correct, the API key isn't a secret. It's a special key generated to use on the client, like when logging from JavaScript 👍
• Agree. The integration will support bulk (like its sibling) once done. I have added some simple code here for now since the main purpose of this example is to understand how a logger provider for Blazor can be implemented. My main issue right now is to understand the best way to configure the HTTP client in this set up.

[davidfowl]

The better question about HTTP client lifetime is, do you expect this to be used both in blazor WASM and blazor server? If yes, registering the HttpClient is a bad idea and it might be better to manage the lifetime of the HttpClient in your logger provider internally.

[ThomasArdal]

I don't. When using Blazor server I would just use the Elmah.Io.Extensions.Logging package. I want to use this package in Blazor WASM too, but it contains features and class usage that aren't available when running in the browser. My idea here is to create an Elmah.Io.Blazor package that is targeted Blazor WASM. I'm just not sure this is the best way to do it but I can be wrong there:

loggingBuilder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri("https://api.elmah.io") });

[ThomasArdal]

BTW, I tried registering a HttpClient in Blazor with the Microsoft.Extensions.Http package and AddHttpClient. It throws a RuntimeError: memory access out of bounds error which I'm not sure why happens. So, now I'm back at this:

loggingBuilder.Services.AddSingleton<ILoggerProvider, ElmahIoLoggerProvider>(services =>
{
    var httpClient = new HttpClient { BaseAddress = new Uri("https://api.elmah.io") };
    var options = services.GetService<IOptions<ElmahIoBlazorOptions>>();
    return new ElmahIoLoggerProvider(httpClient, options);
});

Registering the HttpClient as transient as shown in my previous comment didn't work, since you would override the one typically registered to talk with the backend API.