ErrorBoundary subclassing, exception context, and recovery

[guardrex]

Description

Cover ...

• DOM events aren't captured by ErrorBoundary.
• The exception context (@context).
• Recovery with a clear button (component reference with Recover).
• Custom context (Context={CONTEXT}).
• Recovery with exception processing (subclassed with overridden OnErrorAsync).

@context with recovery example ...

<ErrorBoundary @ref="errorBoundary">
    <ChildContent>
        <EmbeddedCounter />
    </ChildContent>
    <ErrorContent>
        <div class="alert alert-danger" role="alert">
            <p class="fs-3 fw-bold">😈 A rotten gremlin got us. Sorry!</p>
            <p>@context.GetType(): @context.Message</p>
            <button class="btn btn-info" @onclick="_ => errorBoundary.Recover()">Clear</button>
        </div>
    </ErrorContent>
</ErrorBoundary>

@code {
    private ErrorBoundary? errorBoundary;
}

Custom context ...

<ErrorContent Context="exception">
    @exception.Message
</ErrorContent>

Subclassed CustomErrorBoundary component (CustomErrorBoundary.razor) for custom processing with OnErrorAsync ...

@inherits ErrorBoundary
@inject ILogger<CustomErrorBoundary>? Logger

@if (CurrentException is null)
{
    @ChildContent
}
else if (ErrorContent is not null)
{
    @ErrorContent(CurrentException)
}

@code {
    protected override async Task OnErrorAsync(Exception exception)
    {
        await Task.Yield();
        Logger?.LogError("{Type}: {Message}", exception.GetType(), exception.Message);
    }
}

OR ... preceding component implemented in code ...

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace BlazorSample;

public class CustomErrorBoundary : ErrorBoundary
{
    [Inject]
    ILogger<CustomErrorBoundary>? Logger {  get; set; }

    protected override async Task OnErrorAsync(Exception exception)
    {
        await Task.Yield();
        Logger?.LogError("{Type}: {Message}", exception.GetType(), exception.Message);
    }
}

Used as ...

<CustomErrorBoundary>
    ...
</CustomErrorBoundary>

Cross-references:

• ErrorBoundary does not work aspnetcore#56413 (comment)
• Expose OnErrorAsync in ErrorBoundary  aspnetcore#41784
• <xref:Microsoft.AspNetCore.Components.ErrorBoundaryBase.OnErrorAsync%2A>

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/handle-errors?view=aspnetcore-8.0

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/fundamentals/handle-errors.md

Document ID

66a0b1c2-c45c-98ca-9808-6f340a861c44

Article author

@guardrex