Logging to elmah.io from Blazor

Blazor Server App

To start logging to elmah.io from a Blazor Server App, install the Elmah.Io.Extensions.Logging NuGet package:

Install-Package Elmah.Io.Extensions.Logging

dotnet add package Elmah.Io.Extensions.Logging

<PackageReference Include="Elmah.Io.Extensions.Logging" Version="4.*" />

paket add Elmah.Io.Extensions.Logging

In the Startup.cs file, add elmah.io logging configuration:

using Microsoft.Extensions.DependencyInjection;
using Elmah.Io.Extensions.Logging;

namespace MyBlazorApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddLogging(builder => builder
                .AddElmahIo(options =>
                {
                    options.ApiKey = "API_KEY";
                    options.LogId = new Guid("LOG_ID");
                })
            );
        }

        // ...
    }
}

Replace API_KEY with your API key (Where is my API key?) and LOG_ID with the ID of the log you want messages sent to (Where is my log ID?).

All uncaught exceptions are automatically logged to elmah.io. Exceptions can be logged manually, by injecting an ILogger into your view and adding try/catch:

@using Microsoft.Extensions.Logging
@inject ILogger<FetchData> logger

<!-- ... -->

@functions {
    WeatherForecast[] forecasts;

    protected override async Task OnInitAsync()
    {
        try
        {
            forecasts = await Http.GetJsonAsync<WeatherForecast[]>("api/SampleData/WeatherForecasts-nonexisting");
        }
        catch (Exception e)
        {
            logger.LogError(e, e.Message);
        }
    }
}

Information and other severities can be logged as well:

@using Microsoft.Extensions.Logging
@inject ILogger<Counter> logger

<!-- ... -->

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
        logger.LogInformation("Incremented count to {currentCount}", currentCount);
    }
}

Include details from the HTTP context

Microsoft.Extensions.Logging doesn't know that it is running inside a web server. That is why Elmah.Io.Extensions.Logging doesn't include HTTP contextual information like URL and status code as default. To do so, install the Elmah.Io.AspNetCore.ExtensionsLogging NuGet package:

Install-Package Elmah.Io.AspNetCore.ExtensionsLogging

dotnet add package Elmah.Io.AspNetCore.ExtensionsLogging

<PackageReference Include="Elmah.Io.AspNetCore.ExtensionsLogging" Version="4.*" />

paket add Elmah.Io.AspNetCore.ExtensionsLogging

And add the following code to the Configure method in the Startup.cs file:

app.UseElmahIoExtensionsLogging();

Make sure to call this method just before the call to UseEndpoints. This will include some of the information you are looking for.

There's a problem when running Blazor Server where you will see some of the URLs logged as part of errors on elmah.io having the value /_blazor. This is because Blazor doesn't work like traditional websites where the client requests the server and returns an HTML or JSON response. When navigating the UI, parts of the UI are loaded through SignalR, which causes the URL to be /_blazor. Unfortunately, we haven't found a good way to fix this globally. You can include the current URL on manual log statements by injecting a NavigationManager in the top of your .razor file:

@inject NavigationManager navigationManager

Then wrap your logging code in a new scope:

Uri.TryCreate(navigationManager.Uri, UriKind.Absolute, out Uri url);
using (Logger.BeginScope(new Dictionary<string, object> 
{
    { "url", url.AbsolutePath }
}))
{
    logger.LogError(exception, "An error happened");
}

The code uses the current URL from the injected NavigationManager object.

Blazor WebAssembly App (wasm)

To start logging to elmah.io from a Blazor Wasm App, install the Elmah.Io.Blazor.Wasm NuGet package:

Install-Package Elmah.Io.Blazor.Wasm

dotnet add package Elmah.Io.Blazor.Wasm

<PackageReference Include="Elmah.Io.Blazor.Wasm" Version="4.*" />

paket add Elmah.Io.Blazor.Wasm

In the Program.cs file, add elmah.io logging configuration:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Elmah.Io.Blazor.Wasm;

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

            // Your other services here

            builder.Logging.AddElmahIo(options =>
            {
                options.ApiKey = "API_KEY";
                options.LogId = new Guid("LOG_ID");
            });

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

Replace API_KEY with your API key (Where is my API key?) and LOG_ID with the ID of the log you want messages sent to (Where is my log ID?).

The package automatically logs all errors that you also see in the browser console. This package is still in a preview state and is therefore not as polished as our other packages. There's a couple of disadvantages with the package that you need to consider before you use it:

• A lot of information about the HTTP context is missing (like cookies, URL, and user).
• No internal message queue and/or batch processing like Microsoft.Extensions.Logging.
• No support for logging scopes.

This article was brought to you by the elmah.io team. elmah.io is the best error management system for .NET web applications. We monitor your website, alert you when errors start happening, and help you fix errors fast.

See how we can help you monitor your website for crashes Monitor your website