Blazor WebAssembly中ErrorContent未显示的问题求助

核心原因 #

.NET 6的Blazor WebAssembly中，#blazor-error-ui是全局未处理异常捕获器，当组件内的ErrorBoundary没有正确捕获异常时，全局错误UI就会触发。你遇到的情况通常是以下几个配置/代码问题导致：

解决步骤 #

1. 确保ErrorBoundary正确包裹抛出异常的组件逻辑 #

检查你的Counter.razor代码，必须让抛出异常的IncrementCount方法处于ErrorBoundary的ChildContent范围内，且ErrorBoundary正确定义了ErrorContent。示例正确代码：

<ErrorBoundary>
    <ChildContent>
        <PageTitle>Counter</PageTitle>

        <h1>Counter</h1>

        <p role="status">Current count: @currentCount</p>

        <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    </ChildContent>
    <ErrorContent Context="ex">
        <div class="alert alert-danger">
            自定义错误提示：@ex.Message
        </div>
    </ErrorContent>
</ErrorBoundary>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        if (currentCount > 2)
        {
            throw new InvalidOperationException("计数超过限制");
        }
    }
}

2. 调整全局错误UI的触发逻辑（按需操作） #

默认的#blazor-error-ui会在DOM加载时自动显示，即便异常已被ErrorBoundary捕获。可以修改wwwroot/index.html中的脚本，让它仅在未被组件级ErrorBoundary处理的异常时触发：
原默认脚本：

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var errorUI = document.getElementById('blazor-error-ui');
        if (errorUI) {
            errorUI.style.display = 'block';
            setTimeout(function () {
                errorUI.style.display = 'none';
            }, 5000);
        }
    });
</script>

修改后：

<script>
    Blazor.start().catch(function (err) {
        var errorUI = document.getElementById('blazor-error-ui');
        if (errorUI) {
            errorUI.style.display = 'block';
        }
    });
</script>

修改后全局错误UI仅会在应用启动异常或未被任何ErrorBoundary捕获的异常时显示。

3. 确认异步逻辑的异常捕获 #

如果IncrementCount是异步方法，必须用async/await包装逻辑，否则异常可能逃逸到全局处理：

<button class="btn btn-primary" @onclick="IncrementCountAsync">Click me</button>

@code {
    private async Task IncrementCountAsync()
    {
        currentCount++;
        await Task.Delay(100);
        if (currentCount > 2)
        {
            throw new InvalidOperationException("计数超过限制");
        }
    }
}

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