深入浅出Blazor webassembly之Logging

最新推荐文章于 2025-10-23 14:31:12 发布

原创最新推荐文章于 2025-10-23 14:31:12 发布 · 517 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #log4j #js #logging #javascript

本文详细介绍了ASP.NET Core应用程序中日志配置的方法，包括在appsettings.json中设置日志级别，以及针对Blazor WebAssembly应用的特殊性。文章还比较了不同日志实现的优缺点，如内置的Logging类和Blazor.Extensions.Logging扩展。此外，还探讨了Serilog.Sinks.BrowserConsole的使用，提供了详细的配置和示例代码。最后，推荐使用Serilog.Sinks.BrowserConsole作为日志解决方案。

===============================

Aspnet core 的日志配置文件设置

===============================

appsettings.json 文件中可以设置日志

   "Logging": {
        "LogLevel": {  //No specific provider, 将适用于所有的Provider
            "Default": "Information", //Default category for Logger Object, 即 ILogger<T> 中 T 为 category
            "Microsoft": "Warning", 
            "Microsoft.Hosting.Lifetimne": "Information"
        },
        "EventSource": {  //仅适用于 EventSource Provider
            "Default": "Information"
        }
    }

logging配置的层次关系是 Logging.{provider_name.}LogLevel

对于 blazor wsam 应用, 配置文件的logging 配置并不起任何作用.

但可以在 program.cs Main函数用代码的形式设置最低输出级别.

 builder.Logging.SetMinimumLevel(LogLevel.Information);

===============================

最简单的日志输出

===============================

在Blazor wasm 程序中使用Console.WriteLine(), 即可输出到浏览器的console 中, 非常方便.

缺点是: 没有LogLevel的控制

razor 文件中的代码:

    private void IncrementCount()
    {
        currentCount++;
        Console.WriteLine("Console.WriteLine() output. ");
    }

效果:

===============================

内置的Logging类

===============================

Blazor项目中, 在默认情况下, 即可注入 Microsoft.Extensions.Logging.Logger 日志类实例.

优点: 使用非常方便, 而且可以进行 LogLevel 控制

缺点: 仅仅能输出字符串信息, 不能直接输出 object 对象或List或数组.

razor 文件代码:

@page "/counter"
@using Microsoft.Extensions.Logging
@inject ILogger<Counter> MyLogger 


<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        MyLogger.LogInformation("LogInformation");
        MyLogger.LogTrace("LogTrace");  //内置Logger类 不支持这个Trace level
        MyLogger.LogWarning("LogWarning");
        MyLogger.LogDebug("LogDebug");
        MyLogger.LogError("LogError");
         
        MyLogger.LogCritical("LogCritical");  //输出这个记录的日志, 浏览器底部将出现一个Unhandled error 提示条
    }
}

效果如下:

===============================

增强版的 Blazor.Extensions.Logging 包

===============================

增强版的 Blazor.Extensions.Logging 包具体增强点有:

1. 能直接输出接输出object/list/array 对象

2. 支持Trace Level的日志, 不过这个用处并不大

3. logging输出格式也比较好看.

该组件的问题是: 在代码中一起输出两行 Logging , 浏览器中看到的次序正好和代码相反.

Blazor.Extensions.Logging 同样实现了 ILogger<T> 接口, 所以使用方式和内置的Logger类一样.

使用步骤:

1. 为项目增加: Blazor.Extensions.Logging 包引用

dotnet add package Blazor.Extensions.Logging

2. 将扩展logging 类注册的 DI 容器, Program.cs 的 Main() 方法中,

using Blazor.Extensions.Logging;

//Main 方法中
// Add Blazor.Extensions.Logging.BrowserConsoleLogger
builder.Services.AddLogging(builder => builder
    .AddBrowserConsole()
    .SetMinimumLevel(LogLevel.Trace)
);

3. 在Razor 类中, 注入 ILogger<T> 对象

@* //引入 ILogger 接口 *@

@using Microsoft.Extensions.Logging

@* //引入 Log(object) 扩展方法 *@

@using Blazor.Extensions.Logging

@* //注入 Logger 对象 *@

@inject ILogger<Counter> MyLogger

@code {

    private void IncrementCount()
    {
        currentCount++;
        MyLogger.LogInformation(MyLogger.GetType().ToString());
        MyLogger.LogInformation("1: LogInformation");        
        MyLogger.LogWarning("2: LogWarning");
        MyLogger.LogDebug("3: LogDebug");
        MyLogger.LogError("4: LogError");
        MyLogger.LogCritical("5: LogCritical");  //输出这个记录的日志, 浏览器底部不会出现一个Unhandled error 提示条

MyLogger.LogInformation(new List<string> { ".A", ".B", ".C" });

MyLogger.LogInformation(new {Name="张三",Age=20,Like="LOL"});

}
}

=====================================

Serilog.Sinks.BrowserConsole 和 Serilog.Sinks.BrowserHttp

=====================================

参考 https://nblumhardt.com/2019/11/serilog-blazor/

这里仅仅介绍 Serilog.Sinks.BrowserConsole, 一般项目支持 appsettings.json 中配置logging属性, 但 blazor 项目不支持.

使用步骤:

1. 安装 nuget 包,

dotnet add package Serilog.Sinks.BrowserConsole

2. Program.cs 文件初始化全局 Serilog.Log.Logger 对象

3. 记日志方式, 不同于微软的 logger, 需要注入 logger 对象, serilog 直接使用全局 Serilog.Log.Logger对象, 记录日志.

Program.cs 的代码:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Serilog.Configuration;
using Serilog;
using Serilog.Core;
using Serilog.Events;


namespace WebApplication2
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");


            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            //设置 level 控制对象
             var logLevelSwitch = new LoggingLevelSwitch(LogEventLevel.Debug); //默认为 Info level

            //生成一个全局的 Logger
            Log.Logger = new LoggerConfiguration()
                .WriteTo.BrowserConsole()
                .MinimumLevel.ControlledBy(logLevelSwitch)
                .Enrich.WithProperty("InstanceId", Guid.NewGuid().ToString("n"))
                .CreateLogger();

            await builder.Build().RunAsync();
        }
    }
}

生成 Logger对象的写法, 有点特殊, 都是基于 LoggerConfiguration 类中多个角度的子配置完成的.

记录日志示例代码:

@page "/counter"
@using Serilog

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    class Person
    {
        public String Name { get; set; }
        public int Age { get; set; }
    }
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        Log.Logger.Debug("Debug: Person data is {@Person}", new Person() { Name="Harry", Age=10});
        Log.Logger.Information("Info: Person2 data is {P2}", new   { Name = "Harry2", Age = 20 });
        Log.Logger.Information("Info:List is {@lst}", new List<String>() { "A", "B" });
        Log.Logger.Information("Info:List is {lst}", new List<String>() { "A", "B" });

    }
}