Is there a way to globally catch all unhandled errors in a Blazor single page application?

Question

I would like to be able to catch all unhandled exceptions in one single place building a Blazor single page application. Like using the "Current.DispatcherUnhandledException" in WPF applications.

This question is exclusively about client-side (webassembly) exception handling. I am using Blazor version 3.0.0-preview8.19405.7

I have been searching for a solution, but it seems like it does not exist. On Microsofts documentation (https://learn.microsoft.com/en-us/aspnet/core/blazor/handle-errors?view=aspnetcore-3.0) there is a list of places errors may occur and a walk through on how to handle each one of them. It believe there must be a more bullet proof way to catch all.

Answer 1

In .NET 6 there is component called ErrorBoundary.

Simple example:

<ErrorBoundary>
   @Body
</ErrorBoundary>

Advanced Example:

 <ErrorBoundary>
    <ChildContent>
          @Body
    </ChildContent>
    <ErrorContent Context="ex">
          @{ OnError(@ex); } @*calls custom handler*@
          <p>@ex.Message</p> @*prints exeption on page*@
    </ErrorContent>
 </ErrorBoundary>

For the global exception handling I see this as an option: Create CustomErrorBoundary (inherit the ErrorBoundary) and override the OnErrorAsync(Exception exception).

Here is the sample of CustomErrorBoundary.

Useful links

• Official docs
• Some info in .NET 6 preview 4 blog post.
• Tests for ErrorBoundary in dotnet repo (great sample).
• PR on dotnet repo.
• Simple usage of ErrorBoundary (youtube)

Answer 2

This works in v3.2+

using Microsoft.Extensions.Logging;
using System;

namespace UnhandledExceptions.Client
{
    public interface IUnhandledExceptionSender
    {
        event EventHandler<Exception> UnhandledExceptionThrown;
    }

    public class UnhandledExceptionSender : ILogger, IUnhandledExceptionSender
    {

        public event EventHandler<Exception> UnhandledExceptionThrown;

        public IDisposable BeginScope<TState>(TState state)
        {
            return null;
        }

        public bool IsEnabled(LogLevel logLevel)
        {
            return true;
        }

        public void Log<TState>(LogLevel logLevel, EventId eventId, TState state,
            Exception exception, Func<TState, Exception, string> formatter)
        {
            if (exception != null)
            {
                UnhandledExceptionThrown?.Invoke(this, exception);
            }
        }
    }

    public class UnhandledExceptionProvider : ILoggerProvider
    {
        UnhandledExceptionSender _unhandledExceptionSender;

 
        public UnhandledExceptionProvider(UnhandledExceptionSender unhandledExceptionSender)
        {
            _unhandledExceptionSender = unhandledExceptionSender;
        }

        public ILogger CreateLogger(string categoryName)
        {
            return new UnhandledExceptionLogger(categoryName, _unhandledExceptionSender);
        }

        public void Dispose()
        {            
        }

        public class UnhandledExceptionLogger : ILogger
        {
            private readonly string _categoryName;
            private readonly UnhandledExceptionSender _unhandeledExceptionSender;

            public UnhandledExceptionLogger(string categoryName, UnhandledExceptionSender unhandledExceptionSender)
            {
                _unhandeledExceptionSender = unhandledExceptionSender;
                _categoryName = categoryName;
            }

            public bool IsEnabled(LogLevel logLevel)
            {
                return true;
            }

            public void Log<TState>(LogLevel logLevel, EventId eventId, TState state, Exception exception, Func<TState, Exception, string> formatter)
            {
                // Unhandled exceptions will call this method
                // Blazor already logs unhandled exceptions to the browser console
                // but, one could pass the exception to the server to log, this is easily done with serilog
                Serilog.Log.Fatal(exception, exception.Message);                             
            }

            public IDisposable BeginScope<TState>(TState state)
            {
                return new NoopDisposable();
            }

            private class NoopDisposable : IDisposable
            {
                public void Dispose()
                {  
                }
            }
        }
    }
}

Add this to Program.cs

var unhandledExceptionSender = new UnhandledExceptionSender();
var unhandledExceptionProvider = new UnhandledExceptionProvider(unhandledExceptionSender);
builder.Logging.AddProvider(unhandledExceptionProvider);
builder.Services.AddSingleton<IUnhandledExceptionSender>(unhandledExceptionSender);

Here is an example project implementing this solution.

Answer 3

Currently there is no central place to catch and handle client side exceptions.

Here is a quote from Steve Sanderson about it:

So overall, each component must deal with handling its own errors. If you want, you could make your own ErrorHandlingComponentBase to inherit from, and put a try/catch around all the lifecycle methods, and have your own logic for displaying an "oh dear sorry I died" UI on that component if anything went wrong. But it's not a feature of the framework today.

I hope this will change in the future and I believe support should be backed into the framework.

Answer 4

For .NET 5 Blazor Server Side, this post Create Your Own Logging Provider to Log to Text Files in .NET Core worked for me. For my case, I have adapted this to catch unhandled exceptions to write into Azure storage table.

public class ExceptionLoggerOptions
{
    public virtual bool Enabled { get; set; }
}

[ProviderAlias("ExceptionLogger")]
public class ExceptionLoggerProvider : ILoggerProvider
{
    public readonly ExceptionLoggerOptions Options;

    public ExceptionLoggerProvider(IOptions<ExceptionLoggerOptions> _options)
    {
        Options = _options.Value;
    }

    public ILogger CreateLogger(string categoryName)
    {
        return new ExceptionLogger(this);
    }

    public void Dispose()
    {
    }
}

public class ExceptionLogger : ILogger
{
    protected readonly ExceptionLoggerProvider _exceptionLoggerProvider;

    public ExceptionLogger([NotNull] ExceptionLoggerProvider exceptionLoggerProvider)
    {
        _exceptionLoggerProvider = exceptionLoggerProvider;
    }

    public IDisposable BeginScope<TState>(TState state)
    {
        return null;
    }

    public bool IsEnabled(LogLevel logLevel)
    {
        return logLevel == LogLevel.Error;
    }

    public void Log<TState>(LogLevel logLevel, EventId eventId, TState state, Exception exception, Func<TState, Exception, string> formatter)
    {
        if (false == _exceptionLoggerProvider.Options.Enabled) return;

        if (null == exception) return;

        if (false == IsEnabled(logLevel)) return;

        var record = $"{exception.Message}"; // string.Format("{0} {1} {2}",  logLevel.ToString(), formatter(state, exception), exception?.StackTrace);

        // Record exception into Azure Table
    }
}

public static class ExceptionLoggerExtensions
{
    public static ILoggingBuilder AddExceptionLogger(this ILoggingBuilder builder, Action<ExceptionLoggerOptions> configure)
    {
        builder.Services.AddSingleton<ILoggerProvider, ExceptionLoggerProvider>();
        builder.Services.Configure(configure);
        return builder;
    }
}

    public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(webBuilder =>
    {
        webBuilder.UseStaticWebAssets().UseStartup<Startup>();
    }).ConfigureLogging((hostBuilderContext, logging) =>
    {
        logging.AddExceptionLogger(options => { options.Enabled = true; });
    });

Answer 5

To access exception you can use built-in ErrorBoundary component and access RenderFragment using Context attribute

<ErrorBoundary> 
    <ChildContent>
        @Body   
    </ChildContent>
    <ErrorContent Context="ex">
        <h1 style="color: red;">Oops... error occured: @ex.Message </h1>
    </ErrorContent>
</ErrorBoundary>

Answer 6

This will catch ALL errors.

App.razor

<ErrorBoundary>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</ErrorBoundary>

If you want to customize the message:

<ErrorBoundary>
    <ChildContent>
        ... App
    </ChildContent>
    <ErrorContent Context="errorException">

        <div class="blazor-error-boundary">
            Boom!
        </div>

    </ErrorContent>
</ErrorBoundary>

Answer 7

Using the CustomErrorBoundary in the above example, and mudblazor. I made a custom error boundary component that displays the error in a snackbar popup.

In case someone else wants to do this.

CustomErrorBoundary.razor

@inherits ErrorBoundary
@inject ISnackbar Snackbar
@if (CurrentException is null)
{
    @ChildContent
}
else if (ErrorContent is not null)
{
    @ErrorContent(CurrentException)
}
else
{
    @ChildContent

        @foreach (var exception in receivedExceptions)
        {
            Snackbar.Add(@exception.Message, Severity.Error);
        }

    Recover();
}

@code {
    List<Exception> receivedExceptions = new();

    protected override Task OnErrorAsync(Exception exception)
    {
        receivedExceptions.Add(exception);
        return base.OnErrorAsync(exception);
    }

    public new void Recover()
    {
        receivedExceptions.Clear();
        base.Recover();
    }
}

MainLayout.razor

@inherits LayoutComponentBase
@inject ISnackbar Snackbar

<MudThemeProvider IsDarkMode="true"/>
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar>
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
    </MudAppBar>
    <MudDrawer @bind-Open="@_drawerOpen">
        <NavMenu/>
    </MudDrawer>
    <MudMainContent>
        <CustomErrorBoundary>
            @Body
        </CustomErrorBoundary>
    </MudMainContent>
</MudLayout>

@code {
    bool _drawerOpen = true;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

Answer 8

In the current Blazor webassembly version all unhandled exceptions are caught in an internal class and written to Console.Error. There is currently no way to catch them in a different way, but Rémi Bourgarel shows a solution to be able to log them and/or take custom actions. See Remi's blog.

Simple logger to route them to an ILogger:

public class UnhandledExceptionLogger : TextWriter
{
    private readonly TextWriter _consoleErrorLogger;
    private readonly ILogger _logger;

    public override Encoding Encoding => Encoding.UTF8;

    public UnhandledExceptionLogger(ILogger logger)
    {
        _logger = logger;
        _consoleErrorLogger = Console.Error;
        Console.SetError(this);
    }

    public override void WriteLine(string value)
    {
        _logger.LogCritical(value);
        // Must also route thru original logger to trigger error window.
        _consoleErrorLogger.WriteLine(value);
    }
}

Now in Program.cs add builder.Services.AddLogging... and add:

builder.Services.AddSingleton<UnhandledExceptionLogger>();
...
// Change end of Main() from await builder.Build().RunAsync(); to:
var host = builder.Build();
// Make sure UnhandledExceptionLogger is created at startup:
host.Services.GetService<UnhandledExceptionLogger>();
await host.RunAsync();

Answer 9

The only way I have found to capture all errors ( including Async void without try catch implemented ) for Blazor webassembly is to register to AppDomain.CurrentDomain.UnhandledException event

in MainLayout.razor

@code (

 protected override async void OnInitialized()
    {
        base.OnInitialized();
         AppDomain.CurrentDomain.UnhandledException += (sender, e) =>
             {
                 //Call your class that handles error
             };
}
}