.NET 8 Blazor WASM如何用Serilog将日志推送到API服务器？

1. 安装必要的 NuGet 包 #

需要安装以下包：

• Serilog
• Serilog.Extensions.Logging
• Serilog.Sinks.Http（替代废弃的 Serilog.Sinks.BrowserHttp，使用通用 HTTP 接收器）

通过 .NET CLI 安装：

dotnet add package Serilog
dotnet add package Serilog.Extensions.Logging
dotnet add package Serilog.Sinks.Http

2. 配置 Serilog 专用 HttpClient #

在 Program.cs 中配置供 Serilog 使用的 HttpClient，利用 Blazor WASM 的依赖注入机制创建适配浏览器环境的实例：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// 配置Serilog专用HttpClient，指定API服务器日志接收地址
builder.Services.AddHttpClient("SerilogHttpClient", client =>
{
    client.BaseAddress = new Uri("https://你的API服务器域名/logs");
});

3. 初始化并绑定 Serilog 配置 #

在 Program.cs 中完成 Serilog 配置，注入刚才创建的 HttpClient 实例：

var host = builder.Build();

// 获取Serilog专用HttpClient
var serilogHttpClient = host.Services.GetRequiredService<IHttpClientFactory>()
    .CreateClient("SerilogHttpClient");

// 配置Serilog
Log.Logger = new LoggerConfiguration()
    .MinimumLevel.Information()
    .Enrich.FromLogContext()
    .WriteTo.Http(
        requestUri: "", // 已通过HttpClient的BaseAddress指定，此处留空即可
        httpClient: serilogHttpClient,
        batchPostingLimit: 5, // 累计5条日志批量发送
        period: TimeSpan.FromSeconds(2) // 每2秒检查一次发送时机
    )
    .CreateLogger();

// 替换默认日志提供器
builder.Logging.ClearProviders();
builder.Logging.AddSerilog(Log.Logger);

await host.RunAsync();

4. API 服务器端日志接收示例（.NET 8 Web API） #

在你的 API 服务器中创建接收日志的接口，将日志写入服务器文件：

[ApiController]
[Route("logs")]
public class LogsController : ControllerBase
{
    private readonly string _logFilePath = Path.Combine(Directory.GetCurrentDirectory(), "blazor-logs.txt");

    public LogsController()
    {
        // 确保日志目录存在
        var logDir = Path.GetDirectoryName(_logFilePath);
        if (!Directory.Exists(logDir)) Directory.CreateDirectory(logDir);
    }

    [HttpPost]
    public IActionResult ReceiveLogs([FromBody] IEnumerable<SerilogLogEvent> logs)
    {
        if (logs == null || !logs.Any()) return BadRequest("无日志数据");

        try
        {
            foreach (var log in logs)
            {
                var logLine = $"[{log.Timestamp:yyyy-MM-dd HH:mm:ss}] [{log.Level}] {log.Message} | 附加属性：{JsonSerializer.Serialize(log.Properties)}";
                File.AppendAllText(_logFilePath, logLine + Environment.NewLine);
            }
            return Ok();
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"写入日志失败：{ex.Message}");
        }
    }
}

// 匹配Serilog日志结构的模型类
public class SerilogLogEvent
{
    public DateTime Timestamp { get; set; }
    public string Level { get; set; }
    public string Message { get; set; }
    public Dictionary<string, object> Properties { get; set; }
}

5. Blazor 组件中使用日志 #

在组件中注入 ILogger<T> 即可直接使用 Serilog 记录日志：

@inject ILogger<Index> Logger

<button @onclick="SendTestLog">发送测试日志</button>

@code {
    private void SendTestLog()
    {
        Logger.Information("Blazor WASM 用户触发测试日志");
        Logger.Warning("这是一条警告级别的日志");
    }
}

注意事项 #

• 确保 API 服务器已配置 CORS，允许 Blazor WASM 应用的域名访问 /logs 接口
• 可根据业务需求调整批量发送参数（batchPostingLimit、period），平衡日志实时性与请求频率
• 如需自定义日志格式，可在 WriteTo.Http 中添加 formatter 参数实现序列化定制

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