.NET 8 Blazor Server混合渲染模式下全局ErrorBoundary异常处理问题

针对你的.NET 8 Blazor Server应用场景，以下几种方案可以实现全局异常捕获，同时满足静态首页不加载Blazor JS、布局带RenderFragment参数的限制：

方案1：为全局ErrorBoundary单独指定InteractiveServer渲染模式 #

直接在App.razor中使用带交互式渲染模式的ErrorBoundary包裹Router，同时给静态首页组件设置静态渲染模式，避免加载无用JS包。

实现代码 #

App.razor：

<ErrorBoundary @rendermode="RenderMode.InteractiveServer">
    <ChildContent>
        <Router AppAssembly="@typeof(App).Assembly">
            <Found Context="routeData">
                <RouteView 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>
    </ChildContent>
    <ErrorContent Context="exception">
        <div class="alert alert-danger p-4">
            <h3>操作出错</h3>
            <p>@exception.Message</p>
            <button class="btn btn-primary mt-2" 
                    @onclick="() => FindComponent<ErrorBoundary>().Reset()">
                重试
            </button>
        </div>
    </ErrorContent>
</ErrorBoundary>

静态首页（如Index.razor）：

@page "/"
@rendermode RenderMode.Static

<h1>静态首页</h1>
<p>此页面不会加载Blazor交互JS包</p>

原理说明 #

• 外层ErrorBoundary以InteractiveServer模式运行，能捕获所有交互式页面的UI操作异常（如按钮点击），同时服务器端初始化异常也能被捕获。
• 静态首页通过@rendermode RenderMode.Static强制静态渲染，不会触发Blazor JS加载，满足性能需求。

方案2：创建交互式ErrorBoundary封装组件，在布局中使用 #

如果不想全局包裹Router，可以封装一个带交互式渲染的ErrorBoundary组件，在布局中包裹页面内容，避开布局带RenderFragment参数无法设置渲染模式的问题。

实现代码 #

创建InteractiveErrorBoundary.razor：

@rendermode RenderMode.InteractiveServer

<ErrorBoundary>
    <ChildContent>
        @ChildContent
    </ChildContent>
    <ErrorContent Context="ex">
        <div class="alert alert-danger p-4">
            <h3>操作出错</h3>
            <p>@ex.Message</p>
            <button class="btn btn-primary mt-2" @onclick="ResetErrorBoundary">
                重试
            </button>
        </div>
    </ErrorContent>
</ErrorBoundary>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }

    private void ResetErrorBoundary()
    {
        FindComponent<ErrorBoundary>().Reset();
    }
}

修改MainLayout.razor：

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <!-- 使用封装的交互式ErrorBoundary包裹页面内容 -->
            <InteractiveErrorBoundary>
                @Body
            </InteractiveErrorBoundary>
        </article>
    </main>
</div>

原理说明 #

• 封装的InteractiveErrorBoundary组件单独设置InteractiveServer渲染模式，避开了布局组件带RenderFragment无法设置渲染模式的限制。
• 所有使用该布局的页面，其UI操作异常都会被这个交互式ErrorBoundary捕获，静态首页依然可以通过@rendermode RenderMode.Static保持静态渲染。

补充：全局异常兜底处理 #

可以在Program.cs中配置全局异常跳转，作为ErrorBoundary的兜底方案：

builder.Services.AddServerSideBlazor(options =>
{
    options.DetailedErrors = true;
});

// 注册全局异常处理页面
app.UseExceptionHandler("/Error");

创建Error.razor页面（静态渲染）：

@page "/Error"
@rendermode RenderMode.Static

<h1>页面出错</h1>
<p>抱歉，页面出现未预期的错误</p>
<a href="/" class="btn btn-primary">返回首页</a>

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