Blazor Interactive Server中ErrorContent未捕获异常的问题排查

为什么ErrorContent未触发？ #

Blazor Interactive Server模式下，默认的ErrorBoundary仅捕获组件渲染阶段的异常。而按钮点击这类交互事件中的异步异常，会被Blazor的SignalR连接处理逻辑自动捕获并静默处理（避免连接断开），不会冒泡到父级ErrorBoundary，导致ErrorContent无法触发。

另外，你在ErrorContent中直接编写日志代码的方式也存在问题：ErrorContent仅在错误状态下渲染，此时异常已经发生，这段代码的执行时机和异常触发时机不一致，可能导致日志记录不及时或失效。

实现自动日志记录与错误提示的方案 #

方案1：自定义ErrorBoundary捕获交互异常（.NET 7+） #

创建自定义错误边界组件，覆盖异常处理逻辑，确保捕获交互阶段的异常：

@inherits ErrorBoundary
@inject ILogger<GlobalErrorBoundary> Logger

<ErrorBoundary @ref="_errorBoundary">
    <ChildContent>@ChildContent</ChildContent>
    <ErrorContent Context="error">
        @{
            var errorId = Guid.NewGuid().ToString();
            Logger.LogError(error, $"未处理错误 [ID: {errorId}]");
        }
        <main class="page--error">
            <div class="main-content">
                <h1>意外错误</h1>
                <p>系统遇到未预期错误，已自动记录。请提供错误ID：<strong>@errorId</strong> 联系技术支持。</p>
                <button @onclick="Recover">返回正常页面</button>
            </div>
        </main>
    </ErrorContent>
</ErrorBoundary>

@code {
    private ErrorBoundary? _errorBoundary;

    protected override async Task OnErrorAsync(Exception exception)
    {
        // 确保交互阶段的异常被捕获并传递到错误边界
        await base.OnErrorAsync(exception);
    }

    private void Recover() => _errorBoundary?.Recover();
}

然后在MainLayout.razor中替换默认ErrorBoundary：

<GlobalErrorBoundary>
    <!-- 原有子内容 -->
</GlobalErrorBoundary>

方案2：全局异常日志+错误边界联动 #

通过注册IErrorBoundaryLogger实现全局异常捕获，同时在错误边界中展示唯一错误ID：

1. 创建全局异常日志类：

public class AppErrorLogger : IErrorBoundaryLogger
{
    private readonly ILogger<AppErrorLogger> _logger;
    public string? CurrentErrorId { get; private set; }

    public AppErrorLogger(ILogger<AppErrorLogger> logger)
    {
        _logger = logger;
    }

    public ValueTask LogErrorAsync(Exception exception, ComponentErrorBoundaryMetadata? metadata)
    {
        CurrentErrorId = Guid.NewGuid().ToString();
        _logger.LogError(exception, $"错误记录 [ID: {CurrentErrorId}]");
        return ValueTask.CompletedTask;
    }
}

2. 在Program.cs中注册服务：

builder.Services.AddScoped<AppErrorLogger>();
builder.Services.AddSingleton<IErrorBoundaryLogger, AppErrorLogger>();

3. 修改MainLayout.razor的错误边界：

@inject AppErrorLogger ErrorLogger

<ErrorBoundary>
    <ChildContent>
        <!-- 原有子内容 -->
    </ChildContent>
    <ErrorContent>
        <main class="page--error">
            <div class="main-content">
                <h1>Unexpected Error (sorry)</h1>
                <p>
                    程序遇到未预期错误，已自动记录。请提供错误ID：<strong>@ErrorLogger.CurrentErrorId</strong> 以便排查。
                </p>
                <button @onclick="() => ((ErrorBoundary)FindComponent(typeof(ErrorBoundary))).Recover()">恢复</button>
            </div>
        </main>
    </ErrorContent>
</ErrorBoundary>

关键注意事项 #

• 确保事件处理方法为异步且未被内部try/catch包裹：

  // 正确写法：让异常自然抛出
  public async Task OnSelectResources()
  {
      await RiskyAsyncOperation();
  }
  

• 避免在ErrorContent的渲染代码中直接执行日志逻辑，建议通过OnError回调或全局日志器处理。

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