１．この記事の目的

Blazorでは<ErrorBoundary>で効率よくGlobalなエラーハンドリングが実現できます。
また、簡単なカスタマイズでログ出力やエラーページのレイアウト変更など可能なので整理しました。

２．前提条件

Visual studio 2022 Version 17.12.3
.Net 8
UI：Blazor Web App
Interactive render mode : Server
Interactivity location ： Global

Interactivity location を Global から Per Pageにすると<ErrorBoundary>でのグローバルエラーハンドリングが複雑になるためここでは考えません。

３．`<ErrorBoundary>`

３．１ `<ErrorBoundary>`の実装

構文

<ErrorBoundary>
  <ChildContent>
     {正常時の表示コンテント}
  </ChildContent>
  <ErrorContent>
     {異常キャッチ時の表示コンテント}
  </ErrorContent>
</ErrorBoundary>

MainLayout.razorにて@Bodyを<ErrorBoundary>で囲みます。

<article class="content px-4">
    @Body
</article>

↓ 変更

<article class="content px-4">
    <ErrorBoundary>
        <!-- 正常系 -->
        <ChildContent>
            @Body
        </ChildContent>
        <!-- エラー系 -->
        <ErrorContent>
            <p class="text-danger">システムエラーが発生</p>
            <div class="mt-3">
                <a href="" @onclick="NavigateToHome">Homeへ</a>
            </div>
        </ErrorContent>
    </ErrorBoundary>
</article>

３．２エラー発生タイミングごとの挙動

InteractiveServerレンダーモードではエラー発生タイミングが大きく2種類存在します。

	タイミング	概要
A	HTTPリクエストの応答中	GETなどのページ取得時等
B	SignalR通信中	ボタンクリックイベントなど初期ページ表示後のイベント等

(A) HTTPリクエストの応答中のエラー

HTTPリクエスト応答中にOnInitializedでエラーを発生させます。

Weather.razor

@page "/weather"

<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>HTTPリクエスト時に強制エラー</p>
@code {
    protected override void OnInitialized()
    {
        throw new Exception("OnInitializedで強制エラー発生");
    }
}

挙動

エラーがハンドリングされ、<ErrorContent>で用意したコンテントが表示されます。

(B) SignalR通信中のエラー

Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
        if (currentCount > 3)
        {
            throw new Exception("counter IncrementCount");
        }
    }
}

挙動

同じです。
エラーがハンドリングされ、<ErrorContent>で用意したコンテントが表示されます。

４．デフォルトのログ出力

４．１コンソール出力

以下が確認できる。

ErrorBoundryがExceptionをキャッチしたこと
ThrowしたExceptionのメッセージ「OnInitializedで強制エラー発生」
エラー発生時のスタックトレース

４．２ Windowsイベントログ

同様の内容が確認できる。

５．ログ出力の強化

<ErrorBoundary>を継承し、カスタマイズします
OnErrorAsyncをoverrideし、エラー発生時に好みの処理を記述します

/Layout/CustomErrorBoundary.razor

@inherits ErrorBoundary
@inject ILogger<CustomErrorBoundary> Logger

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

@code {
    protected override Task OnErrorAsync(Exception ex)
    {
        Logger.LogError(ex, "共通エラーハンドリング");
        return Task.CompletedTask;
    }
}

MainLayout.razor

<ErrorBoundary>
      ・・・
</ErrorBoundary>

　　↓ 書き換え

<CustomErrorBoundary>
      ・・・
</CustomErrorBoundary>

５．１コンソール出力

以下が確認できる。

ErrorBoundryではなく、CustomErrorBoundryでキャッチしている
warnで出力されていたログが、LogErrorで書き込んでいるのでfailに変わっている
LogErrorで書き込むときに追加したメッセージ「共通エラーハンドリング」が確認できる

５．２ Windowsイベントログ

同様の内容が確認できる。

６．エラーページの強化

<ErrorContent>をコンポーネントとして独立させます

MainLayout.razor

<ErrorContent>
    <p class="text-danger">システムエラーが発生</p>
    <div class="mt-3">
        <a href="" @onclick="NavigateToHome">Homeへ</a>
    </div>
</ErrorContent>

　　↓

<ErrorContent>
    <MyError />
</ErrorContent>

/Layout/MyError.razor

<div class="container text-center mt-5">
    <div class="card shadow-lg">
        <div class="card-body">
            <h1 class="text-danger">
                <i class="bi bi-exclamation-triangle-fill"></i> システムエラー
            </h1>
            <p class="text-muted mt-3">
                申し訳ありませんが、問題が発生しました。しばらくしてから再度お試しください。
            </p>
            <div class="mt-4">
                <button class="btn btn-primary btn-lg" @onclick="NavigateToHome">
                    <i class="bi bi-house-door-fill"></i> Homeへ戻る
                </button>
            </div>
        </div>
    </div>
</div>

@code {
    [Inject] private NavigationManager NavigationManager { get; set; } = default!;

    private void NavigateToHome()
    {
        // 完全なページリロードを実行
        NavigationManager.NavigateTo("/", forceLoad: true);
    }
}

挙動

７．注意事項

７．１デフォルトの開発環境エラーページ

見慣れたデフォルトのエラーページ（UseDeveloperExceptionPage）ですが、<ErrorBoundary>が優先されるため表示されなくなります。

７．２デフォルトのエラーページ

デフォルトのprogram.csにUseExceptionHandlerが記述されてます。

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);

こちらも<ErrorBoundary>が優先されるため、"/Error"へリダイレクトされません。

８．参考

９．全ソース