Blazor ErrorBoundary 試用紀錄

ErrorBoundary.

說明

在 React 這個前端框架中同樣有 ErrorBoundary 概念，它會捕捉任何 Component 產生的錯誤並展示預設 UI 畫面，當錯誤發生就會將錯誤限縮到該 Component，其他 Component 則維持功能性。

Blazor 也是借用這個概念，不過 Blaozr 團隊有說明這並不能捕捉所有可能的例外狀況，而且 <ErrorBoundary> 並不是要處理全域錯誤攔截，那是 ILogger 的任務，<ErrorBoundary> 主要目的還是處理渲染或是生命週期方法(OnInitializedAsync、OnParametersSetAsync)產生的錯誤，另外還有許多可能的風險，例如開發者以為 <ErrorBoundary> 可以處理所有錯誤、開發者覺得不需要再針對不同錯誤產生客製化 UI 而導致複數不同錯誤產生時感到困惑、大量同類型 <ErrorBoundary> 同時產生時開發者又剛好針對該錯誤記錄每筆 log 可能導致 log 堵塞…等等，所以不能把這個當成處理錯誤的最後一關。

個人試用結論

已知元件內的Exception都可以被<ErrorBoundary>抓到，尚未試出抓不到的情境。

https://ithelp.ithome.com.tw/articles/10275330ithelp.ithome.com.tw

參考文件

ErrorBoundary 類別 (Microsoft.AspNetCore.Components.Web)MicrosoftLearn

參考文件

開發環境

• IDE:Visual Studio 2022

• .NET6

• Blazor Server App

程式碼紀錄

DEMO013.razor

@page "/DEMO013"
@attribute [AllowAnonymous]

<PageTitle>ErrorBoundary 測試</PageTitle>

<MudContainer>
    <h3>ErrorBoundary 測試</h3>
    <input type="number" @bind=@number />
    <br />

    @* 該<ErrorBoundary>元件會捕捉 Component 產生的錯誤 *@
    <ErrorBoundary @ref=errorBoundary>
        <ChildContent>
            <DisplayNumber Number=@number />
        </ChildContent>
        <ErrorContent Context="ex">
            <MudAlert Severity=Severity.Error>
                發生意想不到的例外！@ex.Message<br />
                <MudButton Variant=Variant.Outlined Color=Color.Error Size=Size.Small OnClick=Recover>還原</MudButton>
            </MudAlert>
        </ErrorContent>
    </ErrorBoundary>

</MudContainer>

@code {
    //## resource
    ErrorBoundary errorBoundary;

    //## State
    int number = 1;

    void Recover()
    {
        errorBoundary.Recover();
        number = 1; // 重置或還原上次正常的狀態值
    }
}

DisplayNumber.razor

<div>Number:@Number</div>
<button @onclick=ThrowError>[throw a testing error]</button>

@code {
    [Parameter] public int Number { get; set; }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        if (Number < 1)
        {
            throw new ApplicationException("數值必需為正數！");
        }
    }

    void ThrowError()
    {
        throw new ApplicationException("丟出測試用錯誤訊息。");
    }
}

沒圖沒真像

EOF