我希望能够在构建Blazor单页面应用程序时，在一个地方捕获所有未处理的异常，就像在WPF应用程序中使用“Current.DispatcherUnhandledException”一样。
这个问题专门涉及客户端（WebAssembly）异常处理。我正在使用Blazor版本3.0.0-preview8.19405.7。
我一直在寻找解决方案，但似乎它并不存在。在微软的文档 (https://learn.microsoft.com/en-us/aspnet/core/blazor/handle-errors?view=aspnetcore-3.0) 中列出了错误可能发生的位置，并提供了每个位置的处理方法。我认为一定有更可靠的方法来捕获所有异常。
.NET 6中有一个名为ErrorBoundary的组件。
简单示例：
<ErrorBoundary>
@Body
</ErrorBoundary>
高级示例：
<ErrorBoundary>
<ChildContent>
@Body
</ChildContent>
<ErrorContent Context="ex">
@{ OnError(@ex); } @*calls custom handler*@
<p>@ex.Message</p> @*prints exeption on page*@
</ErrorContent>
</ErrorBoundary>
全局异常处理的一种选择是：
创建CustomErrorBoundary(继承ErrorBoundary)并重写OnErrorAsync(Exception exception)。
这里有CustomErrorBoundary的示例。
ErrorBoundary (youtube)Context="ex" 是我之前遗漏的部分，因为它允许您访问异常详细信息。微软文档目前缺少这些信息。谢谢！ - deadlydog这适用于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()
{
}
}
}
}
}
var unhandledExceptionSender = new UnhandledExceptionSender();
var unhandledExceptionProvider = new UnhandledExceptionProvider(unhandledExceptionSender);
builder.Logging.AddProvider(unhandledExceptionProvider);
builder.Services.AddSingleton<IUnhandledExceptionSender>(unhandledExceptionSender);
这里有一个示例项目，实现了这个解决方案。
WebAssemblyHost host = builder.Build(); SomeClass.ServiceProvider = host.Services;IJSRuntime jSRuntime = (IJSRuntime)SomeClass.ServiceProvider.GetService(typeof(IJSRuntime)); jSRuntime.InvokeVoidAsync("SomeJavascriptErrorMethod", someErrorMessage); - Jax目前没有集中的地方来捕获和处理客户端异常。
因此，每个组件必须处理其自己的错误。如果您想要，可以创建自己的 ErrorHandlingComponentBase 继承，并在所有的生命周期方法周围放置 try/catch，并针对该组件编写自己的逻辑，以显示“哦，糟糕，抱歉，我挂了”UI，如果出现任何问题。但这不是今天框架的一个功能。
我希望这将来会改变，并且我认为支持应该内置在框架中。
OnInitialed 方法那样去调用方法，而是要通过 override 来重写它们。所以那样是行不通的。 - symbiontpublic 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; });
});
@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;
}
}
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>
<ErrorBoundary>
<ChildContent>
... App
</ChildContent>
<ErrorContent Context="errorException">
<div class="blazor-error-boundary">
Boom!
</div>
</ErrorContent>
</ErrorBoundary>
要访问异常，您可以使用内置的ErrorBoundary组件和使用Context属性访问RenderFragment
<ErrorBoundary>
<ChildContent>
@Body
</ChildContent>
<ErrorContent Context="ex">
<h1 style="color: red;">Oops... error occured: @ex.Message </h1>
</ErrorContent>
</ErrorBoundary>
Console.Error中。目前没有其他方式来捕获它们，但Rémi Bourgarel提供了一种解决方案，可以记录它们和/或采取自定义操作。请参见Remi's blog。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);
}
}
builder.Services.AddLogging...，并添加以下内容：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();
@code (
protected override async void OnInitialized()
{
base.OnInitialized();
AppDomain.CurrentDomain.UnhandledException += (sender, e) =>
{
//Call your class that handles error
};
}
}
MainLayout.razor
<ErrorBoundary @ref="errorBoundary">
<ChildContent>
@Body
</ChildContent>
<ErrorContent Context="ex">
@Body
@{
if (ex.Message.Contains("status code"))
Console.WriteLine(ex.Message);
else Snackbar.Add(@ex.Message, Severity.Error);
}
</ErrorContent>
</ErrorBoundary>
MainLayout.razor.cs
ErrorBoundary errorBoundary;
protected override void OnParametersSet()
{
errorBoundary?.Recover();
}
<!-- <div id="blazor-error-ui" dir="rtl">
an error occurred!
<a href="" class="reload">refresh</a>
<a class="dismiss"></a>
</div> -->