Bagikan melalui

pengelogan ASP.NET Core Blazor

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Artikel ini menjelaskan pengelogan Blazor aplikasi, termasuk konfigurasi dan cara menulis pesan log dari Razor komponen.

Konfigurasi

Konfigurasi pengelogan dapat dimuat dari file pengaturan aplikasi. Untuk informasi selengkapnya, lihat konfigurasi ASP.NET CoreBlazor.

Pada tingkat log default dan tanpa mengonfigurasi penyedia pengelogan tambahan:

Saat aplikasi dikonfigurasi dalam file proyek untuk menggunakan namespace implisit (<ImplicitUsings>enable</ImplicitUsings>), using direktif untuk Microsoft.Extensions.Logging atau API apa pun di LoggerExtensions kelas tidak diperlukan untuk mendukung penyelesaian API Visual Studio IntelliSense atau membangun aplikasi. Jika namespace implisit tidak diaktifkan, Razor komponen harus secara eksplisit menentukan @using direktif untuk pengelogan namespace yang tidak diimpor melalui _Imports.razor file.

Tingkat log

Tingkat log sesuai dengan tingkat log aplikasi ASP.NET Core, yang tercantum dalam dokumentasi API di LogLevel.

Razor pengelogan komponen

Arahan using untuk Microsoft.Extensions.Logging diperlukan untuk mendukung penyelesaian IntelliSense untuk API, seperti LogWarning dan LogError.

Lihat contoh berikut:

  • MenyuntikkanILogger objek (ILogger<Counter1>) untuk membuat pencatat. Kategori log adalah nama yang sepenuhnya memenuhi syarat dari jenis komponen, Counter.
  • Memanggil LogWarning untuk mencatat pada tingkat Warning.

Counter1.razor:

@page "/counter-1"
@inject ILogger<Counter1> Logger

<PageTitle>Counter 1</PageTitle>

<h1>Counter 1</h1>

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

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        Logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-1"
@inject ILogger<Counter1> Logger

<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()
    {
        Logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-1"
@inject ILogger<Counter1> Logger

<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()
    {
        Logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-1"
@using Microsoft.Extensions.Logging
@inject ILogger<Counter1> Logger

<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()
    {
        Logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-1"
@using Microsoft.Extensions.Logging
@inject ILogger<Counter1> Logger

<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()
    {
        Logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

Contoh berikut menunjukkan pengelogan ILoggerFactory dengan komponen dalam.

Counter2.razor:

@page "/counter-2"
@inject ILoggerFactory LoggerFactory

<PageTitle>Counter 2</PageTitle>

<h1>Counter 2</h1>

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

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        var logger = LoggerFactory.CreateLogger<Counter2>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-2"
@inject ILoggerFactory LoggerFactory

<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()
    {
        var logger = LoggerFactory.CreateLogger<Counter2>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-2"
@inject ILoggerFactory LoggerFactory

<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()
    {
        var logger = LoggerFactory.CreateLogger<Counter2>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-2"
@using Microsoft.Extensions.Logging
@inject ILoggerFactory LoggerFactory

<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()
    {
        var logger = LoggerFactory.CreateLogger<Counter2>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

@page "/counter-2"
@using Microsoft.Extensions.Logging
@inject ILoggerFactory LoggerFactory

<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()
    {
        var logger = LoggerFactory.CreateLogger<Counter2>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

Pengelogan sisi server

Untuk panduan pengelogan ASP.NET Core umum, lihat Pengelogan di .NET Core dan ASP.NET Core.

Pengelogan sisi klien

Tidak setiap fitur pengelogan ASP.NET Core didukung sisi klien. Misalnya, komponen sisi klien tidak memiliki akses ke sistem file atau jaringan klien, sehingga menulis log ke penyimpanan fisik atau jaringan klien tidak dimungkinkan. Saat menggunakan layanan pengelogan pihak ketiga yang dirancang untuk bekerja dengan aplikasi satu halaman (SPAs), ikuti panduan keamanan layanan. Perlu diingat bahwa setiap bagian data, termasuk kunci atau rahasia yang disimpan sisi klien tidak aman dan dapat dengan mudah ditemukan oleh pengguna berbahaya.

Bergantung pada versi kerangka kerja dan fitur pengelogan, implementasi pengelogan mungkin memerlukan penambahan namespace untuk Microsoft.Extensions.Logging ke Program file:

using Microsoft.Extensions.Logging;

Konfigurasikan pengelogan di aplikasi sisi klien dengan WebAssemblyHostBuilder.Logging properti . Properti Logging berjenis ILoggingBuilderILoggingBuilder , sehingga metode ekstensi didukung.

Untuk mengatur tingkat pengelogan minimum, panggil LoggingBuilderExtensions.SetMinimumLevel pembangun host dalam Program file dengan LogLevel. Contoh berikut menetapkan tingkat log minimum ke Warning:

builder.Logging.SetMinimumLevel(LogLevel.Warning);

Masuk ke file sisi Program klien

Pengelogan didukung di aplikasi sisi klien setelah WebAssemblyHostBuilder dibuat menggunakan penyedia pencatat konsol internal kerangka kerja (WebAssemblyConsoleLoggerProvider (sumber referensi)).

Dalam file Program:

var host = builder.Build();

var logger = host.Services.GetRequiredService<ILoggerFactory>()
    .CreateLogger<Program>();

logger.LogInformation("Logged after the app is built in the Program file.");

await host.RunAsync();

output konsol Alat pengembang:

info: Program[0]
Logged after the app is built in the Program file.

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Kategori log sisi klien

Kategori log didukung.

Contoh berikut menunjukkan cara menggunakan kategori log dengan Counter komponen aplikasi yang dibuat dari Blazor templat proyek.

IncrementCount Dalam metode komponen aplikasi Counter (Counter.razor) yang menyuntikkan ILoggerFactory sebagai LoggerFactory:

var logger = LoggerFactory.CreateLogger("CustomCategory");
logger.LogWarning("Someone has clicked me!");

output konsol Alat pengembang:

warn: CustomCategory[0]
Someone has clicked me!

ID peristiwa log sisi klien

ID peristiwa log didukung.

Contoh berikut menunjukkan cara menggunakan ID peristiwa log dengan Counter komponen aplikasi yang dibuat dari Blazor templat proyek.

LogEvent.cs:

public class LogEvent
{
    public const int Event1 = 1000;
    public const int Event2 = 1001;
}

IncrementCount Dalam metode komponen aplikasi Counter (Counter.razor):

logger.LogInformation(LogEvent.Event1, "Someone has clicked me!");
logger.LogWarning(LogEvent.Event2, "Someone has clicked me!");

output konsol Alat pengembang:

info: BlazorSample.Pages.Counter[1000]
Someone has clicked me!
warn: BlazorSample.Pages.Counter[1001]
Someone has clicked me!

Templat pesan log sisi klien

Templat pesan log didukung:

Contoh berikut menunjukkan cara menggunakan templat pesan log dengan Counter komponen aplikasi yang dibuat dari Blazor templat proyek.

IncrementCount Dalam metode komponen aplikasi Counter (Counter.razor):

logger.LogInformation("Someone clicked me at {CurrentDT}!", DateTime.UtcNow);

output konsol Alat pengembang:

info: BlazorSample.Pages.Counter[0]
Someone clicked me at 04/21/2022 12:15:57!

Parameter pengecualian log sisi klien

Parameter pengecualian log didukung.

Contoh berikut menunjukkan cara menggunakan parameter pengecualian log dengan Counter komponen aplikasi yang dibuat dari Blazor templat proyek.

IncrementCount Dalam metode komponen aplikasi Counter (Counter.razor):

currentCount++;

try
{
    if (currentCount == 3)
    {
        currentCount = 4;
        throw new OperationCanceledException("Skip 3");
    }
}
catch (Exception ex)
{
    logger.LogWarning(ex, "Exception (currentCount: {Count})!", currentCount);
}

output konsol Alat pengembang:

warn: BlazorSample.Pages.Counter[0]
Exception (currentCount: 4)!
System.OperationCanceledException: Skip 3
at BlazorSample.Pages.Counter.IncrementCount() in C:UsersAlabaDesktopBlazorSamplePagesCounter.razor:line 28

Fungsi filter sisi klien

Fungsi filter didukung.

Contoh berikut menunjukkan cara menggunakan filter dengan Counter komponen aplikasi yang dibuat dari Blazor templat proyek.

Dalam file Program:

builder.Logging.AddFilter((provider, category, logLevel) =>
    category.Equals("CustomCategory2") && logLevel == LogLevel.Information);

IncrementCount Dalam metode komponen aplikasi Counter (Counter.razor) yang menyuntikkan ILoggerFactory sebagai LoggerFactory:

var logger1 = LoggerFactory.CreateLogger("CustomCategory1");
logger1.LogInformation("Someone has clicked me!");

var logger2 = LoggerFactory.CreateLogger("CustomCategory1");
logger2.LogWarning("Someone has clicked me!");

var logger3 = LoggerFactory.CreateLogger("CustomCategory2");
logger3.LogInformation("Someone has clicked me!");

var logger4 = LoggerFactory.CreateLogger("CustomCategory2");
logger4.LogWarning("Someone has clicked me!");

Dalam output konsol alat pengembang, filter hanya mengizinkan pengelogan untuk CustomCategory2 kategori dan Information pesan tingkat log:

info: CustomCategory2[0]
Someone has clicked me!

Aplikasi ini juga dapat mengonfigurasi pemfilteran log untuk namespace tertentu. Misalnya, atur tingkat log ke Trace dalam Program file:

builder.Logging.SetMinimumLevel(LogLevel.Trace);

Biasanya pada Trace tingkat log, output konsol alat pengembang di tingkat Verbose menyertakan Microsoft.AspNetCore.Components.RenderTree pesan pengelogan, seperti berikut ini:

dbug: Microsoft.AspNetCore.Components.RenderTree.Renderer[3]
Rendering component 14 of type Microsoft.AspNetCore.Components.Web.HeadOutlet

Program Dalam file, pengelogan pesan khusus untuk Microsoft.AspNetCore.Components.RenderTree dapat dinonaktifkan menggunakan salah satu pendekatan berikut:

  • builder.Logging.AddFilter("Microsoft.AspNetCore.Components.RenderTree.*", LogLevel.None);

  • builder.Services.PostConfigure<LoggerFilterOptions>(options =>
    options.Rules.Add(
        new LoggerFilterRule(null, 
                             "Microsoft.AspNetCore.Components.RenderTree.*", 
                             LogLevel.None, 
                             null)
    ));

Setelah salah satu filter sebelumnya ditambahkan ke aplikasi, output konsol di tingkat Verbose tidak menampilkan pesan pengelogan Microsoft.AspNetCore.Components.RenderTree dari API.

Penyedia pencatat kustom sisi klien

Contoh di bagian ini menunjukkan penyedia pencatat kustom untuk penyesuaian lebih lanjut.

Tambahkan referensi paket ke aplikasi untuk paket.Microsoft.Extensions.Logging.Configuration

Catatan

Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

Tambahkan konfigurasi pencatat kustom berikut. Konfigurasi menetapkan LogLevels kamus yang mengatur format log kustom untuk tiga tingkat log: Information, Warning, dan Error. Digunakan LogFormatenum untuk menjelaskan format pendek (LogFormat.Short) dan panjang (LogFormat.Long).

CustomLoggerConfiguration.cs:

using Microsoft.Extensions.Logging;

public class CustomLoggerConfiguration
{
    public int EventId { get; set; }

    public Dictionary<LogLevel, LogFormat> LogLevels { get; set; } = 
        new()
        {
            [LogLevel.Information] = LogFormat.Short,
            [LogLevel.Warning] = LogFormat.Short,
            [LogLevel.Error] = LogFormat.Long
        };

    public enum LogFormat
    {
        Short,
        Long
    }
}

Tambahkan pencatat kustom berikut ke aplikasi. Output CustomLogger format log kustom berdasarkan nilai yang logLevel ditentukan dalam konfigurasi sebelumnya CustomLoggerConfiguration .

using Microsoft.Extensions.Logging;
using static CustomLoggerConfiguration;

public sealed class CustomLogger : ILogger
{
    private readonly string name;
    private readonly Func<CustomLoggerConfiguration> getCurrentConfig;

    public CustomLogger(
        string name,
        Func<CustomLoggerConfiguration> getCurrentConfig) =>
        (this.name, this.getCurrentConfig) = (name, getCurrentConfig);

    public IDisposable BeginScope<TState>(TState state) => default!;

    public bool IsEnabled(LogLevel logLevel) =>
        getCurrentConfig().LogLevels.ContainsKey(logLevel);

    public void Log<TState>(
        LogLevel logLevel,
        EventId eventId,
        TState state,
        Exception? exception,
        Func<TState, Exception?, string> formatter)
    {
        if (!IsEnabled(logLevel))
        {
            return;
        }

        CustomLoggerConfiguration config = getCurrentConfig();

        if (config.EventId == 0 || config.EventId == eventId.Id)
        {
            switch (config.LogLevels[logLevel])
            {
                case LogFormat.Short:
                    Console.WriteLine($"{name}: {formatter(state, exception)}");
                    break;
                case LogFormat.Long:
                    Console.WriteLine($"[{eventId.Id, 2}: {logLevel, -12}] {name} - {formatter(state, exception)}");
                    break;
                default:
                    // No-op
                    break;
            }
        }
    }
}

Tambahkan penyedia pencatat kustom berikut ke aplikasi. CustomLoggerProviderOptionsmengadopsi pendekatan berbasis untuk mengonfigurasi pencatat melalui fitur konfigurasi pengelogan bawaan. Misalnya, aplikasi dapat mengatur atau mengubah format log melalui appsettings.json file tanpa memerlukan perubahan kode pada pencatat kustom, yang ditunjukkan di akhir bagian ini.

CustomLoggerProvider.cs:

using System.Collections.Concurrent;
using Microsoft.Extensions.Options;

[ProviderAlias("CustomLog")]
public sealed class CustomLoggerProvider : ILoggerProvider
{
    private readonly IDisposable onChangeToken;
    private CustomLoggerConfiguration config;
    private readonly ConcurrentDictionary<string, CustomLogger> loggers =
        new(StringComparer.OrdinalIgnoreCase);

    public CustomLoggerProvider(
        IOptionsMonitor<CustomLoggerConfiguration> config)
    {
        this.config = config.CurrentValue;
        onChangeToken = config.OnChange(updatedConfig => this.config = updatedConfig);
    }

    public ILogger CreateLogger(string categoryName) =>
        loggers.GetOrAdd(categoryName, name => new CustomLogger(name, GetCurrentConfig));

    private CustomLoggerConfiguration GetCurrentConfig() => config;

    public void Dispose()
    {
        loggers.Clear();
        onChangeToken.Dispose();
    }
}

Tambahkan ekstensi pencatat kustom berikut.

CustomLoggerExtensions.cs:

using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.DependencyInjection.Extensions;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Logging.Configuration;

public static class CustomLoggerExtensions
{
    public static ILoggingBuilder AddCustomLogger(
        this ILoggingBuilder builder)
    {
        builder.AddConfiguration();

        builder.Services.TryAddEnumerable(
            ServiceDescriptor.Singleton<ILoggerProvider, CustomLoggerProvider>());

        LoggerProviderOptions.RegisterProviderOptions
            <CustomLoggerConfiguration, CustomLoggerProvider>(builder.Services);

        return builder;
    }
}

Program Dalam file pada pembuat host, hapus penyedia yang ada dengan memanggil ClearProviders dan menambahkan penyedia pengelogan kustom:

builder.Logging.ClearProviders().AddCustomLogger();

Dalam komponen CustomLoggerExample berikut:

  • Pesan debug tidak dicatat.
  • Pesan informasi dicatat dalam format pendek (LogFormat.Short).
  • Pesan peringatan dicatat dalam format pendek (LogFormat.Short).
  • Pesan kesalahan dicatat dalam format panjang (LogFormat.Long).
  • Pesan pelacakan tidak dicatat.

CustomLoggerExample.razor:

@page "/custom-logger-example"
@inject ILogger<CustomLoggerExample> Logger

<p>
    <button @onclick="LogMessages">Log Messages</button>
</p>

@code{
    private void LogMessages()
    {
        Logger.LogDebug(1, "This is a debug message.");
        Logger.LogInformation(3, "This is an information message.");
        Logger.LogWarning(5, "This is a warning message.");
        Logger.LogError(7, "This is an error message.");
        Logger.LogTrace(5!, "This is a trace message.");
    }
}

@page "/custom-logger-example"
@using Microsoft.Extensions.Logging
@inject ILogger<CustomLoggerExample> Logger

<p>
    <button @onclick="LogMessages">Log Messages</button>
</p>

@code{
    private void LogMessages()
    {
        Logger.LogDebug(1, "This is a debug message.");
        Logger.LogInformation(3, "This is an information message.");
        Logger.LogWarning(5, "This is a warning message.");
        Logger.LogError(7, "This is an error message.");
        Logger.LogTrace(5!, "This is a trace message.");
    }
}

Output berikut terlihat di konsol alat pengembang browser saat tombol Log Messages dipilih. Entri log mencerminkan format yang sesuai yang diterapkan oleh pencatat kustom (aplikasi klien diberi nama LoggingTest):

LoggingTest.Pages.CustomLoggerExample: This is an information message.
LoggingTest.Pages.CustomLoggerExample: This is a warning message.
[ 7: Error ] LoggingTest.Pages.CustomLoggerExample - This is an error message.

Dari inspeksi kasual dari contoh sebelumnya, jelas bahwa mengatur format baris log melalui kamus di CustomLoggerConfiguration tidak benar-benar diperlukan. Format baris yang diterapkan oleh pencatat kustom (CustomLogger) bisa saja diterapkan dengan hanya memeriksa logLevel dalam Log metode . Tujuan menetapkan format log melalui konfigurasi adalah bahwa pengembang dapat mengubah format log dengan mudah melalui konfigurasi aplikasi, seperti yang ditunjukkan contoh berikut.

Di aplikasi sisi klien, tambahkan atau perbarui appsettings.json file untuk menyertakan konfigurasi pengelogan. Atur format log ke Long untuk ketiga tingkat log:

{
  "Logging": {
    "CustomLog": {
      "LogLevels": {
        "Information": "Long",
        "Warning": "Long",
        "Error": "Long"
      }
    }
  }
}

Dalam contoh sebelumnya, perhatikan bahwa entri untuk konfigurasi pencatat kustom adalah CustomLog, yang diterapkan ke penyedia pencatat kustom (CustomLoggerProvider) sebagai alias dengan [ProviderAlias("CustomLog")]. Konfigurasi pengelogan bisa saja diterapkan dengan nama CustomLoggerProvider alih-alih CustomLog, tetapi penggunaan alias CustomLog lebih ramah pengguna.

Program Dalam file, gunakan konfigurasi pengelogan. Tambahkan kode berikut:

builder.Logging.AddConfiguration(
    builder.Configuration.GetSection("Logging"));

Panggilan ke LoggingBuilderConfigurationExtensions.AddConfiguration dapat dilakukan baik sebelum atau sesudah menambahkan penyedia pencatat kustom.

Jalankan aplikasi lagi. Pilih tombol Log Messages. Perhatikan bahwa konfigurasi pengelogan diterapkan dari appsettings.json file. Ketiga entri log dalam format panjang (LogFormat.Long) (aplikasi klien diberi nama LoggingTest):

[ 3: Information ] LoggingTest.Pages.CustomLoggerExample - This is an information message.
[ 5: Warning ] LoggingTest.Pages.CustomLoggerExample - This is a warning message.
[ 7: Error ] LoggingTest.Pages.CustomLoggerExample - This is an error message.

Cakupan log sisi klien

Pencatat konsol alat pengembang tidak mendukung cakupan log. Namun, pencatat kustom dapat mendukung cakupan log. Untuk contoh yang tidak didukung yang dapat Anda kembangkan lebih lanjut sesuai dengan kebutuhan Anda, lihat BlazorWebAssemblyScopesLogger aplikasi sampel di Blazor repositori GitHub sampel (cara mengunduh).

Aplikasi sampel menggunakan sintaks pengelogan ASP.NET Core BeginScope standar untuk menunjukkan cakupan untuk pesan yang dicatat. Layanan Logger dalam contoh berikut adalah ILogger<CustomLoggerExample>, yang disuntikkan ke dalam komponen aplikasi CustomLoggerExample (CustomLoggerExample.razor).

using (Logger.BeginScope("L1"))
{
    Logger.LogInformation(3, "INFO: ONE scope.");
}

using (Logger.BeginScope("L1"))
{
    using (Logger.BeginScope("L2"))
    {
        Logger.LogInformation(3, "INFO: TWO scopes.");
    }
}

using (Logger.BeginScope("L1"))
{
    using (Logger.BeginScope("L2"))
    {
        using (Logger.BeginScope("L3"))
        {
            Logger.LogInformation(3, "INFO: THREE scopes.");
        }
    }
}

Output:

[ 3: Informasi ] {CLASS} - INFO: SATU cakupan. => L1 blazor.webassembly.js:1:35542
[ 3: Informasi ] {CLASS} - INFO: DUA cakupan. => L1 => L2 blazor.webassembly.js:1:35542
[ 3: Informasi ] {CLASS} - INFO: TIGA cakupan. => L1 => L2 => L3

Tempat {CLASS} penampung dalam contoh sebelumnya adalah BlazorWebAssemblyScopesLogger.Pages.CustomLoggerExample.

Pengelogan komponen yang telah dirender sebelumnya

Komponen yang telah dirender menjalankan kode inisialisasi komponen dua kali. Pengelogan terjadi di sisi server pada eksekusi pertama kode inisialisasi dan sisi klien pada eksekusi kedua kode inisialisasi. Tergantung pada tujuan pengelogan selama inisialisasi, periksa log sisi server, sisi klien, atau keduanya.

SignalR pengelogan SignalR klien dengan pembuat klien

Bagian ini berlaku untuk aplikasi sisi server.

Dalam Blazor konfigurasi mulai skrip, teruskan configureSignalR objek konfigurasi yang memanggil configureLogging dengan tingkat log.

configureLogging Untuk nilai tingkat log, berikan argumen sebagai tingkat log string atau bilangan bulat yang diperlihatkan dalam tabel berikut.

LogLevel Pengaturan string Pengaturan bilangan bulat
Trace trace 0
Debug debug 1
Information information 2
Warning warning 3
Error error 4
Critical critical 5
None none 6

Contoh 1: Atur Information tingkat log dengan nilai string.

Blazor Aplikasi Web:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    circuit: {
      configureSignalR: function (builder) {
        builder.configureLogging("information");
      }
    }
  });
</script>

Blazor Server:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.configureLogging("information");
    }
  });
</script>

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Contoh 2: Atur Information tingkat log dengan nilai bilangan bulat.

Blazor Aplikasi Web:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    circuit: {
      configureSignalR: function (builder) {
        builder.configureLogging(2); // LogLevel.Information
      }
    }
  });
</script>

Blazor Server:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.configureLogging(2); // LogLevel.Information
    }
  });
</script>

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Catatan

Menggunakan bilangan bulat untuk menentukan tingkat pengelogan di Contoh 2, sering disebut sebagai angka ajaib atau konstanta ajaib, dianggap sebagai praktik pengkodean yang buruk karena bilangan bulat tidak mengidentifikasi tingkat pengelogan dengan jelas saat melihat kode sumber. Jika meminimalkan byte yang ditransfer ke browser adalah prioritas, menggunakan bilangan bulat mungkin dibenarkan (pertimbangkan untuk menghapus komentar dalam kasus seperti itu).

Untuk informasi selengkapnya tentang Blazor startup (Blazor.start()), lihat startup ASP.NET CoreBlazor.

SignalR pengelogan klien dengan konfigurasi aplikasi

Siapkan konfigurasi pengaturan aplikasi seperti yang dijelaskan dalam konfigurasi ASP.NET CoreBlazor. Tempatkan file pengaturan aplikasi yang wwwroot berisi Logging:LogLevel:HubConnection pengaturan aplikasi.

Catatan

Sebagai alternatif untuk menggunakan pengaturan aplikasi, Anda dapat meneruskan LogLevel sebagai argumen LoggingBuilderExtensions.SetMinimumLevel saat koneksi hub dibuat dalam Razor komponen. Namun, secara tidak sengaja menyebarkan aplikasi ke lingkungan hosting produksi dengan pengelogan verbose dapat mengakibatkan penalti performa. Sebaiknya gunakan pengaturan aplikasi untuk mengatur tingkat log.

Logging:LogLevel:HubConnection Berikan pengaturan aplikasi di file default appsettings.json dan di Development file pengaturan aplikasi lingkungan. Gunakan tingkat log yang kurang verbose umum untuk default, seperti LogLevel.Warning. Nilai pengaturan aplikasi default adalah apa yang digunakan di Staging lingkungan dan Production jika tidak ada file pengaturan aplikasi untuk lingkungan tersebut yang ada. Gunakan tingkat log verbose dalam Development file pengaturan aplikasi lingkungan, seperti LogLevel.Trace.

wwwroot/appsettings.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning",
      "HubConnection": "Warning"
    }
  }
}

wwwroot/appsettings.Development.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning",
      "HubConnection": "Trace"
    }
  }
}

Penting

Konfigurasi dalam file pengaturan aplikasi sebelumnya hanya digunakan oleh aplikasi jika panduan dalam konfigurasi ASP.NET Core Blazor diikuti.

Di bagian Razor atas file komponen (.razor):

  • ILoggerProvider Masukkan untuk menambahkan WebAssemblyConsoleLogger ke penyedia pengelogan yang diteruskan ke HubConnectionBuilder. ConsoleLoggerProviderTidak seperti , WebAssemblyConsoleLogger adalah pembungkus di sekitar API pengelogan khusus browser (misalnya, console.log). Penggunaan memungkinkan pengelogan WebAssemblyConsoleLogger dalam Mono di dalam konteks browser.
  • Suntikkan IConfiguration untuk membaca Logging:LogLevel:HubConnection pengaturan aplikasi.

Catatan

WebAssemblyConsoleLogger bersifat internal dan tidak didukung untuk penggunaan langsung dalam kode pengembang.

@inject ILoggerProvider LoggerProvider
@inject IConfiguration Config

Catatan

Contoh berikut didasarkan pada demonstrasi dalam SignalR tutorial.Blazor Lihat tutorial untuk detail lebih lanjut.

Dalam metode komponenOnInitializedAsync, gunakan HubConnectionBuilderExtensions.ConfigureLogging untuk menambahkan penyedia pengelogan dan mengatur tingkat log minimum dari konfigurasi:

protected override async Task OnInitializedAsync()
{
    hubConnection = new HubConnectionBuilder()
        .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
        .ConfigureLogging(builder => 
        {
            builder.AddProvider(LoggerProvider);
            builder.SetMinimumLevel(
                Config.GetValue<LogLevel>("Logging:LogLevel:HubConnection"));
        })
        .Build();

    hubConnection.On<string, string>("ReceiveMessage", (user, message) => ...

    await hubConnection.StartAsync();
}

Catatan

Dalam contoh sebelumnya, Navigation adalah disuntikkan NavigationManager.

Untuk informasi selengkapnya tentang pengaturan lingkungan aplikasi, lihat lingkungan ASP.NET CoreBlazor.

Pengelogan autentikasi sisi klien

Catat Blazor pesan autentikasi di LogLevel.Debug tingkat pengelogan atau LogLevel.Trace dengan konfigurasi pengelogan di pengaturan aplikasi atau dengan menggunakan filter log untuk Microsoft.AspNetCore.Components.WebAssembly.Authentication dalam Program file.

Gunakan salah satu pendekatan berikut:

  • Dalam file pengaturan aplikasi (misalnya, wwwroot/appsettings.Development.json):

    "Logging": {
  "LogLevel": {
    "Microsoft.AspNetCore.Components.WebAssembly.Authentication": "Debug"
  }
}

    Untuk informasi selengkapnya tentang cara mengonfigurasi aplikasi sisi klien untuk membaca file pengaturan aplikasi, lihat konfigurasi ASP.NET CoreBlazor.

  • Menggunakan filter log, contoh berikut:

    • Mengaktifkan pengelogan Debug untuk konfigurasi build menggunakan arahan preprocessor C#.
    • Blazor Mencatat pesan autentikasi di Debug tingkat log.
    #if DEBUG
    builder.Logging.AddFilter(
        "Microsoft.AspNetCore.Components.WebAssembly.Authentication", 
        LogLevel.Debug);
#endif

Catatan

Razorkomponen yang dirender pada klien hanya masuk ke konsol alat pengembang browser sisi klien.

Sumber Daya Tambahan: