自定义Blazor ErrorBoundary遇子组件异常触发父组件无限循环问题

问题现象 #

在MainLayout中使用自定义ErrorBoundary组件后，当子组件抛出异常时，父组件陷入无限循环。

根本原因 #

1. 错误的渲染逻辑：自定义ErrorBoundary在捕获到异常后，仍然渲染@ChildContent，导致子组件被重新初始化、再次抛出异常，形成循环闭环。
2. 重复执行副作用：在UI渲染代码中直接调用Snackbar.Add，每次组件重渲染都会重复添加提示，触发组件状态变更，进一步加剧循环。

修复方案 #

修改自定义ErrorBoundary组件 #

调整渲染逻辑，捕获异常后不再渲染原始子组件，改为显示错误提示；同时将Snackbar提示移到生命周期方法中，避免重复执行：

@inherits ErrorBoundary
@inject ISnackbar Snackbar

@if (CurrentException is null)
{
    @ChildContent
}
else if (ErrorContent is not null)
{
    @ErrorContent(CurrentException)
}
else
{
    <div class="alert alert-danger">
        组件加载出错：@CurrentException.Message
    </div>
}

@code {
    protected override Task OnErrorAsync(Exception exception)
    {
        // 仅在捕获异常时调用一次Snackbar
        Snackbar.Add(exception.Message, Severity.Error);
        return base.OnErrorAsync(exception);
    }
}

关键说明 #

• Blazor的ErrorBoundary核心作用是隔离异常，捕获异常后应该替换掉可能抛出异常的子组件渲染内容，而不是继续渲染它。
• 所有带有副作用的操作（如弹出提示、修改外部状态）都不应放在UI渲染代码块中，这类操作应放在组件生命周期方法或事件处理函数里，避免重复执行。

内容的提问来源于stack exchange，提问作者tobias