Blazor异常消息显示

大家好，欢迎来到IT知识分享网。

1. 打开/Share/MainLayout.razor文件

用 ErrorBoundary标签包果@Body内容。

 <ErrorBoundary @ref="_errorBoundary">
                        <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" />

                        <BlazoredToasts Position="ToastPosition.BottomRight"
                                        Timeout="3"
                                        IconType="Blazored.Toast.IconType.FontAwesome"
                                        SuccessClass="success-toast-override"
                                        SuccessIcon="fa fa-thumbs-up"
                                        ErrorIcon="fa fa-bug" />
</ErrorBoundary>
@code {
    private ErrorBoundary? _errorBoundary;

    protected override void OnParametersSet()
    {//显示错误后恢复UI响应
        _errorBoundary?.Recover();
    }
｝

2. 打开Share/App.razor

用<Error>标签包果路由

 <Error>
        <Router AppAssembly="@typeof(App).Assembly">
            <Found Context="routeData">
                @*<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />*@
                <ReuseTabsRouteView 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>
    </Error>

3. 创建 Share/Error.razor 错误信息显示组件

@using Microsoft.Extensions.Logging
@inject ILogger<Error> Logger
@inject MessageService _message

<div>
    @if (isErrorActive)
    {
        <div class="alert alert-danger" role="alert">
            <Button Type="button" Class="btn-close " data-dismiss="alert" aria-label="Close" @onclick="HideError">
                <span aria-hidden="true">&times;</span>
            </Button>
            <h3>@title</h3>
            <p>@message</p>
        </div>
    }
    <CascadingValue Value="this">
        @ChildContent
    </CascadingValue>
</div>

@code {
    bool isErrorActive = false;
    string title;
    string message;
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    public async void ProcessError(Exception ex)
    {
        string message = $"错误信息:{ex.Message}";
        Logger.LogError(message);

        this.isErrorActive = false;
        this.title = "Error:ProcesError";
        this.message = message;
        await ErrorMessage(this.message);
    }
    private void HideError()
    {
        isErrorActive = false;
    }
     private async Task ErrorMessage(string message)
    {
        await _message.Error(message);

    }
    }

4. 使用Error组件

@code {
  
    [CascadingParameter]
    public Error? error{ get; set; }

    private void IncrementCount()
    {
        currentCount++;
        try
        {
            if (currentCount >= 5)
            {
                throw new InvalidOperationException("无效的操作");
            }
        }
        catch(Exception ex)
        {
            error?.ProcessError(ex);
        }
    }
｝