Blazor WAM中FluentUI报ArgumentNullException问题排查及解决

问题现象 #

在Blazor WAM独立应用中，使用Microsoft.FluentUI.AspNetCore.Components（4.11.8版本）和Blazored.LocalStorage（4.5版本）时，一旦在Program.cs或组件中引入Blazored.LocalStorage，FluentUI的FluentDivider、FluentKeyCode等组件就会崩溃，抛出以下异常：

System.ArgumentNullException: Value cannot be null. (Parameter 'jsObjectReference')

排查过程 #

最初误以为是Blazored.LocalStorage与FluentUI存在兼容性问题，但移除Blazored.LocalStorage后，异常仍然出现。进一步排查发现，问题根源在于Serilog的日志配置：

var logLevelSwitch = new LoggingLevelSwitch(Serilog.Events.LogEventLevel.Verbose);
var logger = new LoggerConfiguration()
    .MinimumLevel.ControlledBy(logLevelSwitch)
    .Enrich.WithProperty("InstanceId", Guid.NewGuid().ToString("n"))
    .WriteTo.BrowserConsole()
    .CreateLogger();
builder.Services.AddLogging(configure =>
{
    configure.ClearProviders();
    configure.AddSerilog(logger, true);
});

问题原因 #

Serilog.Sinks.BrowserConsole接收器在未显式传入IJSRuntime实例的情况下，会自动注册一个自定义的IJSRuntime实现。这个自定义实现会覆盖Blazor框架默认的IJSRuntime实例，导致FluentUI组件初始化时无法获取到正确的JavaScript运行时引用，最终触发空引用异常。

解决方法 #

在配置BrowserConsole接收器时，显式传入应用的IJSRuntime实例，避免Serilog自行创建冲突的实现。修改后的代码如下：

var logLevelSwitch = new LoggingLevelSwitch(Serilog.Events.LogEventLevel.Verbose);

// 构建临时服务提供者以获取框架默认的IJSRuntime实例
var tempServiceProvider = builder.Services.BuildServiceProvider();
var jsRuntime = tempServiceProvider.GetRequiredService<IJSRuntime>();

var logger = new LoggerConfiguration()
    .MinimumLevel.ControlledBy(logLevelSwitch)
    .Enrich.WithProperty("InstanceId", Guid.NewGuid().ToString("n"))
    .WriteTo.BrowserConsole(jsRuntime) // 显式传入IJSRuntime
    .CreateLogger();

builder.Services.AddLogging(configure =>
{
    configure.ClearProviders();
    configure.AddSerilog(logger, true);
});

完成上述修改后，FluentUI组件与Blazored.LocalStorage均可正常工作，异常不再出现。

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