捕获并在页面上显示.NET Maui项目中的任何错误

Question

出于测试的目的，我想“捕捉”我的应用程序中出现的任何错误，并将其显示在页面上(而不是在控制台)。为此，我在6框架中发现了ErrorBoundary组件。

微软的ErrorBoundaries文档

首先，我在Bazor WebAssembly项目中成功地测试了这个组件。

步骤：

• 创建newBlazor WebAssembly项目
• 创建组件CustomErrorBoundary.razor (请参阅下面的代码)
• 在MainLayout.razor中，用组件CustomErrorBoundary包围@Body指令
• 在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 项目。

步骤：

• 创建一个newBlazor .NET Maui项目
• 将包Microsoft.AspNetCore.Components.Web添加到项目中(从ErrorBoundary中获益)
• 重新启动Visual (不是强制性的)
• 创建组件CustomErrorBoundary.razor (参见上面的代码)
• 在MainLayout.razor中，用组件CustomErrorBoundary包围@Body指令
• 在WeatherForecastService.cs中，在代码中抛出一个异常(参见下面)

​

​

不幸的是，当项目试图启动时，它会不折不扣地崩溃。

​

​

因此，简单地说:似乎ErrorBoundary在.NET Maui项目中不受支持。

<ErrorBoundary>
    @Body
</ErrorBoundary>

上面的简单代码在Blazor中不起作用。

所以我不知道ErrorBoundary是否与.NET Maui兼容？如果没有，如何捕捉Blazor项目中的任何错误并显示在页面上？

Answer 1

试图破译错误，乍一看，您继承的类型ErrorBoudary似乎需要一个没有注入到MAUI项目中的依赖项。

我找到了一篇文章，它似乎解释了您的问题关于这个问题的Githubmemory --基本上，您需要实现接口，然后将这个新类注册为可用的服务。

ErrorBoundary码

IErrorBoundaryLogger码

我想Blazor默认会实现这一点吗？

Answer 2

我知道这不是一个答案，我希望这不是坏的形式。我现在正在学习，我想分享一个相关的代码片段，以防其他人想要这样做。

用上面的例子，和泥巴拉索。我制作了一个自定义错误边界组件，它将错误显示在一个snackbar弹出窗口中。

CustomErrorBoundary.razor

@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;
    }
}

Answer 3

我在争论我的答案是否仅仅是因为MudBlazor而起作用，但是由于这里没有什么反馈，所以我会把它加进去。我正在使用默认的ErrorBoundary，它对我来说运行得很好。也许在过去的9个月里有什么更新了？

以下是我在MainLayout.razor中的相关代码：

<MudLayout>
    <MudAppBar Elevation="0">
        @* Some random MudAppBar stuff... *@
    </MudAppBar>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">
            <ErrorBoundary>
                <ChildContent>
                    @Body
                </ChildContent>
                <ErrorContent>
                    <p class="errorUI">An error has occured. Edit this content in MainLayout.razor</p>
                </ErrorContent>
            </ErrorBoundary>
        </MudContainer>
    </MudMainContent>
</MudLayout>

我以类似于问题的方式抛出一个异常，错误内容apperas :)