Выявление и отображение на странице любых ошибок в проекте .NET Maui Blazor

Question

В целях тестирования я хотел бы «поймать» любую ошибку, возникающую в моем приложении, и отобразить ее на странице (а не в консоли). Для этого я обнаружил компонент ErrorBoundary в платформе .Net 6.

Документ ErrorBoundaries от Microsoft

Сначала я успешно протестировал этот компонент в проекте Bazor WebAssembly .

Шаги:

• Создайте проект newBlazor 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 .

Шаги:

• Создайте проект newBlazor .NET Maui Blazor
• Добавьте в проект пакет Microsoft.AspNetCore.Components.Web (чтобы воспользоваться ErrorBoundary)
• Перезапустите Visual Studio (не обязательно)
• Создайте компонент CustomErrorBoundary.razor (см. Код выше)
• В MainLayout.razor окружите инструкцию @Body компонентом CustomErrorBoundary.
• В WeatherForecastService.cs вызовите исключение в коде (см. Ниже)

К сожалению, при попытке запустить проект сразу вылетает.

Проще говоря: кажется, что ErrorBoundary не поддерживается в проекте .NET Maui Blazor.

      <ErrorBoundary>
    @Body
</ErrorBoundary>

Приведенный выше простой код не работает в Blazor Maui.

Итак, я не знаю , совместим ли ErrorBoundary с .NET Maui Blazor? Если нет, как отловить какие-либо ошибки внутри проекта Blazor Maui и отобразить их на странице?

Answer 1

Пытаясь расшифровать ошибку, на первый взгляд кажется, что тип ErrorBoudary, который вы наследуете, нуждается в зависимости, которая не внедряется в ваш проект MAUI.

Я нашел сообщение, которое, кажется, объясняет вашу проблему Githubmemory по этой проблеме. По сути, вам нужно реализовать интерфейс, а затем зарегистрировать этот новый класс как доступную службу.

Код ошибкиГраница

код IErrorBoundaryLogger

Я предполагаю, что Blazor Wasm реализует это по умолчанию?

Answer 2

Я знаю, что это не ответ на это, и я надеюсь, что это не дурной тон. Я учусь прямо сейчас, я хотел поделиться соответствующим фрагментом кода на случай, если кто-то еще захочет это сделать.

используя приведенный выше пример, и Mudblazor. Я сделал пользовательский компонент границы ошибки, который отображает ошибку во всплывающем окне закусочной.

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>

Я выбрасываю исключение так же, как в вопросе, и появляется содержимое ошибки :)