深入淺出Blazor webassembly之Logging

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

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" });

    }
}

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

結論

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

推薦使用 Serilog.Sinks.BrowserConsole

posted @ 2021-09-12 21:25 harrychinese 閱讀(884) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese

深入淺出Blazor webassembly之Logging

公告