MudBlazor：HTTP消息处理器中显示Snackbar失效问题

我编写了一个用于捕获网络连接错误的HTTP拦截器，代码如下：

public class NetworkErrorInterceptor : DelegatingHandler
{
    private readonly ISnackbar snackbar;

    public NetworkErrorInterceptor(ISnackbar snackbar)
    {
        this.snackbar = snackbar;
    }

    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, 
        CancellationToken cancellationToken)
    {
        HttpResponseMessage? response = null;

        try
        {
            Console.WriteLine($"Network Interceptor: sending request");
            response = await base.SendAsync(request, cancellationToken);
        }
        catch (HttpRequestException)
        {
            Console.WriteLine($"Network Interceptor: inside catch block");
            snackbar.Add("Network connection error", Severity.Error, config =>
            {
                // 配置项
            });
        }

        return response ?? new HttpResponseMessage(HttpStatusCode.ServiceUnavailable);
    }
}

这段逻辑在组件内时，Snackbar可正常显示，但移至拦截器后不再生效（控制台日志可正常输出）。我将其移至拦截器是为了让所有请求都能触发该逻辑。

依赖注入配置：

builder.Services.AddScoped<NetworkErrorInterceptor>();
builder.Services
    .AddHttpClient(/* ... */)
    .AddHttpMessageHandler<NetworkErrorInterceptor>();

原因分析 #

HttpMessageHandler的执行线程和Blazor UI线程不一致，拦截器中的Snackbar调用未在UI线程执行，导致无法更新界面。另外，若HttpClient生命周期与拦截器不匹配，也可能导致Snackbar实例失效。

解决方法 #

1. 切换到UI线程调用Snackbar

Blazor中必须在UI线程更新界面，通过注入IDispatcher将Snackbar调用调度到UI线程：

public class NetworkErrorInterceptor : DelegatingHandler
{
    private readonly ISnackbar _snackbar;
    private readonly IDispatcher _dispatcher;

    public NetworkErrorInterceptor(ISnackbar snackbar, IDispatcher dispatcher)
    {
        _snackbar = snackbar;
        _dispatcher = dispatcher;
    }

    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, 
        CancellationToken cancellationToken)
    {
        HttpResponseMessage? response = null;
        try
        {
            Console.WriteLine($"Network Interceptor: sending request");
            response = await base.SendAsync(request, cancellationToken);
        }
        catch (HttpRequestException)
        {
            Console.WriteLine($"Network Interceptor: inside catch block");
            // 调度到UI线程执行Snackbar添加操作
            await _dispatcher.DispatchAsync(() =>
            {
                _snackbar.Add("Network connection error", Severity.Error, config =>
                {
                    // 自定义配置，例如：
                    // config.VisibleStateDuration = 5000;
                });
            });
        }
        return response ?? new HttpResponseMessage(HttpStatusCode.ServiceUnavailable);
    }
}

2. 对齐HttpClient与拦截器的生命周期

确保HttpClient的生命周期和拦截器一致（均为Scoped），避免Singleton HttpClient捕获Scoped拦截器导致实例失效：

// 使用AddScopedHttpClient注册Scoped生命周期的HttpClient
builder.Services.AddScopedHttpClient("MyScopedClient")
    .AddHttpMessageHandler<NetworkErrorInterceptor>();

3. 确认SnackbarProvider已注册

检查主布局文件（如MainLayout.razor）中是否包含<MudSnackbarProvider />，这是Snackbar显示的必要组件：

@inherits LayoutComponentBase

<MudLayout>
    <!-- 其他布局内容 -->
    <MudSnackbarProvider />
</MudLayout>

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