テスト目的で、アプリで発生したエラーを「キャッチ」し、(コンソールではなく) ページに表示したいと思います。そのために、.Net 6 フレームワークのErrorBoundaryコンポーネントを発見しました。
Microsoft の ErrorBoundaries ドキュメント
最初に、 Bazor WebAssemblyプロジェクト内でこのコンポーネントのテストに成功しました。
手順:
- 新しい Blazor WebAssembly プロジェクトを作成する
- コンポーネント CustomErrorBoundary.razor を作成します (以下のコードを参照)。
- MainLayout.razor で @Body 命令をコンポーネント CustomErrorBoundary で囲みます。
- FetchData.razor では、コード内で例外をスローします (以下を参照)。
CustomErrorBoundary
@inherits ErrorBoundary
@if (CurrentException is null)
{
@ChildContent
}
else if (ErrorContent is not null)
{
@ErrorContent(CurrentException)
}
else
{
<div style="background-color: yellow; border: 2px dashed black; white-space: pre; font-family: consolas, monospace;">
@foreach (var exception in receivedExceptions)
{
<div class="received-exception" style="background-color: rgba(255,255,255,0.3); margin: 0.5rem; padding: 0.5rem;">
@exception.Message
</div>
}
</div>
}
@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();
}
}
このアプリをテストして FetchData 内を移動すると、エラーがスローされ、ページに表示されます。
ここまでは順調ですね。今度は同じことをしたいと思いますが、今回は.NET Maui Blazorプロジェクト用です。
手順:
- 新しいBlazor .NET Maui Blazor プロジェクトを作成する
- パッケージ Microsoft.AspNetCore.Components.Web をプロジェクトに追加します (ErrorBoundary を利用するため)。
- Visual Studio を再起動します (必須ではありません)
- コンポーネント CustomErrorBoundary.razor を作成します (上記のコードを参照)。
- MainLayout.razor で @Body 命令をコンポーネント CustomErrorBoundary で囲みます。
- WeatherForecastService.cs では、コードで例外をスローします (以下を参照)。
残念ながら、プロジェクトを開始しようとすると、プロジェクトはすぐにクラッシュします。
簡単に言うと、.NET Maui Blazor プロジェクトではErrorBoundaryがサポートされていないようです。
<ErrorBoundary>
@Body
</ErrorBoundary>
上記の単純なコードは、Blazor Maui では機能しません。
ErrorBoundary が .NET Maui Blazorと互換性があるかどうかわかりませんか? そうでない場合、Blazor Maui プロジェクト内のエラーをキャッチしてページに表示する方法は?