ASP.NET Core Blazor のログ

[アーティクル]
04/11/2023

注意

これは、この記事の最新バージョンではありません。最新のバージョンに切り替えるには、目次の上部にある ASP.NET Core バージョンセレクターを使用します。

バージョンセレクター

セレクターが狭いブラウザーウィンドウに表示されない場合は、ウィンドウの幅を広げるか、垂直省略記号 ([⋮]) >[目次] の順に選択します。

目次セレクター

この記事では、構成や Razor コンポーネントからログメッセージを書き込む方法など、Blazor アプリでのログについて説明します。

構成

ログの構成は、アプリの設定ファイルから読み込むことができます。詳しくは、「ASP.NET Core Blazor の構成」をご覧ください。

既定のログレベルで、追加のログプロバイダーを構成しない場合:

LogLevel.Information レベル以上の Development 環境のサーバー側 .NET コンソールに対してのみ、Blazor Server アプリによってログが記録されます。
LogLevel.Information レベル以上のクライアント側ブラウザー開発者ツールコンソールに対してのみ、Blazor WebAssembly アプリによってログが記録されます。

プロジェクトファイルで暗黙の名前空間 (<ImplicitUsings>enable</ImplicitUsings>) を使うようにアプリが構成されている場合、API Visual Studio IntelliSense の補完またはアプリのビルドをサポートするために Microsoft.Extensions.Logging または LoggerExtensions クラス内の任意の API の using ディレクティブは必要ありません。暗黙的な名前空間が有効ではない場合、_Imports.razor ファイル経由でインポートされていないログの名前空間に対して、Razor コンポーネントで @using ディレクティブを明示的に定義する必要があります。

ログレベル

Blazor アプリのログレベルは ASP.NET Core アプリのログレベル (LogLevel の API ドキュメントに掲載されています) に準拠しています。

Razor コンポーネントのログ

LogWarning や LogError など、API の IntelliSense 入力候補をサポートするには、Microsoft.Extensions.Logging の using ディレクティブが必要です。

次のような例です。

ILogger (ILogger<Counter>) オブジェクトを挿入して、ロガーを作成します。ログの "カテゴリ" は、コンポーネントの種類 Counter の完全修飾名です。
LogWarning を呼び出して、Warning レベルでログを記録します。

Pages/Counter1.razor:

@page "/counter-1"
@inject ILogger<Counter> 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<Counter> 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<Counter> 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<Counter> 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++;
    }
}

次の例は、コンポーネントで ILoggerFactory を使用したログを示しています。

Pages/Counter2.razor:

@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<Counter>();
        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<Counter>();
        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<Counter>();
        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<Counter>();
        logger.LogWarning("Someone has clicked me!");

        currentCount++;
    }
}

Blazor Server アプリでのログ

Blazor Server に関連する全般的 ASP.NET Core ログガイダンスについては、「.NET Core および ASP.NET Core でのログ記録」を参照してください。

Blazor WebAssembly アプリでのログ

ASP.NET Core ログのすべての機能が Blazor WebAssembly アプリでサポートされているわけではありません。たとえば、Blazor WebAssembly アプリにはクライアントのファイルシステムまたはネットワークへのアクセス権がないため、クライアントの物理またはネットワークの記憶域にログを書き込むことはできません。シングルページアプリ (SPA) と連携するように設計されたサードパーティ製のログサービスを使用する場合は、サービスのセキュリティガイダンスに従ってください。 Blazor WebAssembly アプリに格納されているキーやシークレットを含むすべてのデータは "安全とは言えず"、悪意のあるユーザーによって簡単に検出されることにご注意ください。

フレームワークのバージョンとログ機能によっては、ログの実装で Microsoft.Extensions.Logging の名前空間を Program.cs に追加する必要があることがあります。

using Microsoft.Extensions.Logging;

Blazor WebAssembly アプリで WebAssemblyHostBuilder.Logging プロパティを使用して、ログを構成します。 Logging プロパティは ILoggingBuilder 型なので、ILoggingBuilder の拡張メソッドがサポートされます。

最小ログレベルを設定するには、Program.cs で LogLevel を使用して、のホストビルダーで LoggingBuilderExtensions.SetMinimumLevel を呼び出します。次の例では、最小ログレベルを Warning に設定しています。

builder.Logging.SetMinimumLevel(LogLevel.Warning);

`Program.cs` でのログ (Blazor WebAssembly)

Program.cs でのログ記録は、Blazor WebAssembly アプリで、フレームワークの内部コンソールロガープロバイダー (WebAssemblyConsoleLoggerProvider (参照ソース)) を使って WebAssemblyHostBuilder がビルドされた後にサポートされます。

Program.csの場合:

var host = builder.Build();

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

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

await host.RunAsync();

開発者ツールコンソールの出力:

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

Note

通常、.NET 参照ソースへのドキュメントリンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウンリストを使います。詳細については、「ASP.NET Core ソースコードのバージョンタグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

ログのカテゴリ (Blazor WebAssembly)

ログカテゴリは Blazor WebAssembly アプリでサポートされています。

次の例は、Blazor プロジェクトテンプレートから作成されたアプリの Counter コンポーネントでログカテゴリを使う方法を示しています。

ILoggerFactory を LoggerFactory として挿入するアプリの Counter コンポーネント (Pages/Counter.razor) の IncrementCount メソッド:

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

開発者ツールコンソールの出力:

warn: CustomCategory[0]
Someone has clicked me!

ログイベント ID (Blazor WebAssembly)

ログイベント ID は Blazor WebAssembly アプリでサポートされています。

次の例は、Blazor プロジェクトテンプレートから作成されたアプリの Counter コンポーネントでログイベント ID を使う方法を示しています。

LogEvent.cs:

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

アプリの Counter コンポーネント (Pages/Counter.razor) の IncrementCount メソッド:

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

開発者ツールコンソールの出力:

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

ログメッセージテンプレート (Blazor WebAssembly)

ログメッセージテンプレートは Blazor WebAssembly アプリでサポートされています。

次の例は、Blazor プロジェクトテンプレートから作成されたアプリの Counter コンポーネントでログメッセージテンプレートを使う方法を示しています。

アプリの Counter コンポーネント (Pages/Counter.razor) の IncrementCount メソッド:

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

開発者ツールコンソールの出力:

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

ログ例外パラメーター (Blazor WebAssembly)

ログ例外パラメーターは Blazor WebAssembly アプリでサポートされています。

次の例は、Blazor プロジェクトテンプレートから作成されたアプリの Counter コンポーネントでログ例外パラメーターを使う方法を示しています。

アプリの Counter コンポーネント (Pages/Counter.razor) の IncrementCount メソッド:

currentCount++;

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

開発者ツールコンソールの出力:

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

フィルター関数 (Blazor WebAssembly)

フィルター関数は Blazor WebAssembly アプリでサポートされています。

次の例は、Blazor プロジェクトテンプレートから作成されたアプリの Counter コンポーネントでフィルターを使う方法を示しています。

Program.cs:

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

ILoggerFactory を LoggerFactory として挿入するアプリの Counter コンポーネント (Pages/Counter.razor) の IncrementCount メソッド:

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

この開発者ツールコンソールの出力では、フィルターは CustomCategory2 カテゴリと Information ログレベルメッセージのログのみを許可しています。

info: CustomCategory2[0]
Someone has clicked me!

アプリで、特定の名前空間のログフィルターを構成することもできます。たとえば、Program.cs でログレベルを Trace に設定します。

builder.Logging.SetMinimumLevel(LogLevel.Trace);

通常、Trace ログレベルでは、開発者ツールコンソールの出力を詳細レベルにした場合、次のような Microsoft.AspNetCore.Components.RenderTree ログメッセージが含まれます。

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

Program.cs で Microsoft.AspNetCore.Components.RenderTree に固有のログメッセージを無効にするには、次の方法のいずれかを使います。

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

前述のフィルターのいずれかをアプリに追加した後、詳細レベルのコンソール出力に Microsoft.AspNetCore.Components.RenderTree API からのログメッセージが表示されなくなります。

カスタムロガープロバイダー (Blazor WebAssembly)

このセクションの例では、さらに詳細にカスタマイズするための、カスタムロガープロバイダーを紹介します。

Microsoft.Extensions.Logging.Configuration パッケージのアプリへのパッケージ参照を追加します。

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージバージョンを確認します。

次のカスタムロガー構成を追加します。この構成により、Information、Warning、Error の 3 つのログレベルのカスタムログ形式を設定する LogLevels 辞書が確立されます。 LogFormatenum は、短い (LogFormat.Short) 形式と長い (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
    }
}

次のカスタムロガーをアプリに追加します。 CustomLogger は、前の CustomLoggerConfiguration の構成で定義された値 logLevel に基づいてカスタムログ形式を出力します。

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

次のカスタムロガープロバイダーをアプリに追加します。 CustomLoggerProvider は、組み込みのログ構成機能を使用してロガーを構成する Optionsベースのアプローチを採用しています。たとえば、アプリは、このセクションの最後に示すように、カスタムロガーへのコードを変更することなく、appsettings.json ファイルを使用してログ形式を設定または変更できます。

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

次のカスタムロガー拡張機能をアプリに追加します。

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.cs で、ClearProviders を呼び出して既存のプロバイダーをクリアし、カスタムログプロバイダーを追加します。

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

次の Index コンポーネントでは、以下のことを行います。

デバッグメッセージはログされません。
情報メッセージは、短い形式 (LogFormat.Short) でログされます。
警告メッセージは、短い形式 (LogFormat.Short) でログされます。
エラーメッセージは、長い形式 (LogFormat.Long) でログされます。
トレースメッセージはログされません。

Pages/Index.razor:

@page "/"
@using Microsoft.Extensions.Logging
@inject ILogger<Index> 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.");
    }
}

Log Messages ボタンが選択されると、ブラウザーの開発者ツールコンソールに次の出力が表示されます。ログエントリには、カスタムロガーによって適用される適切な形式が反映されます。

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

前の例を簡単に確認すると、CustomLoggerConfiguration の辞書を使用してログ行の形式を設定することは、厳密には必要ないことが明らかです。カスタムロガー (CustomLogger) によって適用された行形式は、logLevel を Log メソッドで確認するだけで適用できた可能性があります。構成を使用してログ形式を割り当てる目的は、次の例に示すように、開発者がアプリ構成を使用してログ形式を簡単に変更できることです。

wwwroot フォルダーで、ログ構成を含むように appsettings.json ファイルを追加または更新します。次の 3 つのログレベルのすべてについて、ログの形式を Long に設定します。

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

前の例では、カスタムロガー構成のエントリが CustomLog であることに注目してください。これは、カスタムロガープロバイダー (CustomLoggerProvider) に [ProviderAlias("CustomLog")] の別名として適用されました。ログの構成は、名前 CustomLog ではなく CustomLoggerProvider を使用して適用することができましたが、別名 CustomLog を使用する方がよりユーザーフレンドリです。

Program.cs で、ログ構成を使用します。次のコードを追加します。

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

LoggingBuilderConfigurationExtensions.AddConfiguration の呼び出しは、カスタムロガープロバイダーを追加する前または後に配置できます。

再度アプリを実行します。 Log Messages ボタンを選択します。ログの構成が appsettings.json ファイルから適用されていることに注目してください。 3 つすべてのログエントリは、長い (LogFormat.Long) 形式です。

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

ログのスコープ (Blazor WebAssembly)

Blazor WebAssembly 開発者ツールコンソールロガーは、ログスコープをサポートしていません。しかし、カスタムロガーはログスコープをサポートすることができます。さらにニーズに合わせて開発できるサポートされていない例については、dotnet/blazor-samples GitHub リポジトリのプロトタイプを参照してください。

BlazorWebAssemblyScopesLogger サンプルアプリ

サンプルアプリでは、標準の ASP.NET Core BeginScope ログ構文を使用して、ログに記録されたメッセージのスコープを示します。次の例の Logger サービスは、アプリの Index コンポーネント (Pages/Index.razor) に挿入される ILogger<Index> です。

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: Information ] ScopesLogger.Pages.Index - INFO: ONE scope. => L1 blazor.webassembly.js:1:35542
[ 3: Information ] ScopesLogger.Pages.Index - INFO: TWO scopes. => L1 => L2 blazor.webassembly.js:1:35542
[ 3: Information ] ScopesLogger.Pages.Index - INFO: THREE scopes. => L1 => L2 => L3

ホストされた Blazor WebAssembly ログ

ホストされた Blazor WebAssembly アプリでそのコンテンツがプリレンダリングされる場合、コンポーネント初期化コードが 2 回実行されます。ログ記録は、初期化コードの最初の実行時にはサーバー側で、初期化コードの 2 回目の実行時にはクライアント側で行われます。初期化時のログ記録の目的に応じて、サーバー側、クライアント側、またはその両方でログをチェックします。

SignalR クライアントのログ (Blazor Server)

Pages/_Host.cshtml の SignalR クライアントビルダーで、ログレベルを指定して configureLogging を呼び出す configureSignalR 構成オブジェクトを渡します。

Pages/_Layout.cshtml の SignalR クライアントビルダーで、ログレベルを指定して configureLogging を呼び出す configureSignalR 構成オブジェクトを渡します。

Pages/_Host.cshtml の SignalR クライアントビルダーで、ログレベルを指定して configureLogging を呼び出す configureSignalR 構成オブジェクトを渡します。

configureLogging のログレベル値には、次の表に示す文字列または整数のログレベルとして引数を渡します。

LogLevel	文字列の設定	整数の設定
Trace	`trace`	0
Debug	`debug`	1
Information	`information`	2
Warning	`warning`	3
Error	`error`	4
Critical	`critical`	5
None	`none`	6

例 1: 文字列値を使用して Information ログレベルを設定する。

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.configureLogging("information");
    }
  });
</script>

例 2: 整数値を使用して Information ログレベルを設定する。

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.configureLogging(2);
    }
  });
</script>

Blazor の起動 (Blazor.start()) の詳細については、「ASP.NET Core Blazor の起動」をご覧ください。

SignalR クライアントのログ (Blazor WebAssembly)

Blazor WebAssembly アプリで、「ASP.NET Core Blazor の構成」の説明に従って、アプリ設定の構成を設定します。 Logging:LogLevel:HubConnection アプリ設定を含むアプリ設定ファイルを wwwroot に配置します。

注意

アプリ設定を使用する代わりに、ハブ接続が Razor コンポーネントで作成されるときに、LogLevel を LoggingBuilderExtensions.SetMinimumLevel の引数として渡すことができます。ただし、詳細ログを含む運用レベルのホスティング環境にアプリを誤って配置すると、パフォーマンスが低下する可能性があります。アプリ設定を使用してログレベルを設定することをお勧めします。

既定の appsettings.json ファイルと Development 環境アプリ設定ファイルに Logging:LogLevel:HubConnection アプリ設定を指定します。既定には、一般的な詳細度の低いログレベル (LogLevel.Warning など) を使用します。そのような環境のアプリ設定ファイルが存在しない場合、Staging と Production の環境で使用されるものが既定のアプリ設定値です。 LogLevel.Trace などの Development 環境アプリ設定ファイルでは、詳細ログレベルを使用してください。

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

重要

上記のアプリ設定ファイルの構成は、「ASP.NET Core Blazor の構成」のガイダンスに従う場合のみアプリによって使用されます。

Razor コンポーネントファイル (.razor) の上部で:

ILoggerProvider を挿入して、HubConnectionBuilder に渡されたログプロバイダーに WebAssemblyConsoleLogger を追加します。従来の ConsoleLogger とは異なり、WebAssemblyConsoleLogger はブラウザー固有のログ API (例: console.log) のラッパーです。 WebAssemblyConsoleLogger を使用すると、ブラウザーコンテキスト内の Mono 内でログ記録できるようになります。
IConfiguration を挿入して Logging:LogLevel:HubConnection アプリ設定を読み取ります。

Note

WebAssemblyConsoleLogger は internal であり、開発者コードで直接サポートされていません。

@inject ILoggerProvider LoggerProvider
@inject IConfiguration Config

注意

次の例は、Blazor を使用した SignalR のチュートリアルの Index コンポーネントに基づいています。詳細については、チュートリアルを参照してください。

コンポーネントの OnInitializedAsync メソッドで、HubConnectionBuilderExtensions.ConfigureLogging を使用してログプロバイダーを追加し、構成から最小ログレベルを設定します。

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

注意

前の例の Navigation は、挿入された NavigationManager です。

Blazor WebAssembly にアプリの環境を設定する方法の詳細については、「ASP.NET Core Blazor の環境」を参照してください。

認証ログ (Blazor WebAssembly)

アプリの設定でログ構成を使用するか、または Program.cs の Microsoft.AspNetCore.Components.WebAssembly.Authentication にログフィルターを使用して、Blazor 認証メッセージを LogLevel.Debug または LogLevel.Trace ログレベルでログに記録します。

次の "いずれか" の方法を使用します。

アプリ設定ファイル (例: wwwroot/appsettings.Development.json):
```
"Logging": {
  "LogLevel": {
    "Microsoft.AspNetCore.Components.WebAssembly.Authentication": "Debug"
  }
}
```
Blazor WebAssembly アプリでアプリ設定ファイルの読み取りを有効にする方法の詳細については、「ASP.NET Core Blazor の構成」をご覧ください。
ログフィルターを使用する場合、次の例のようになります。
- C# プリプロセッサディレクティブを使用して、Debug ビルド構成のログ記録をアクティブにします。
- Blazor 認証メッセージを Debug ログレベルでログに記録します。
```
#if DEBUG
    builder.Logging.AddFilter(
        "Microsoft.AspNetCore.Components.WebAssembly.Authentication", 
        LogLevel.Debug);
#endif
```

Note

クライアント側のブラウザー開発者ツールコンソールに対してのみ、Blazor WebAssembly アプリによってログが記録されます。

その他の技術情報

.NET Core と ASP.NET Core のログ
Loglevel 列挙型 (API ドキュメント)
.NET にカスタムログプロバイダーを実装する
開発者ツールのドキュメントを参照してください。
Blazor サンプル GitHub リポジトリ (dotnet/blazor-samples)

ASP.NET Core Blazor のログ

構成

ログレベル

Razor コンポーネントのログ

Blazor Server アプリでのログ

Blazor WebAssembly アプリでのログ

`Program.cs` でのログ (Blazor WebAssembly)

ログのカテゴリ (Blazor WebAssembly)

ログイベント ID (Blazor WebAssembly)

ログメッセージテンプレート (Blazor WebAssembly)

ログ例外パラメーター (Blazor WebAssembly)

フィルター関数 (Blazor WebAssembly)

カスタムロガープロバイダー (Blazor WebAssembly)

ログのスコープ (Blazor WebAssembly)

ホストされた Blazor WebAssembly ログ

SignalR クライアントのログ (Blazor Server)

SignalR クライアントのログ (Blazor WebAssembly)

認証ログ (Blazor WebAssembly)

その他の技術情報

その他のリソース

その他のリソース

ASP.NET Core Blazor のログ

構成

ログ レベル

Razor コンポーネントのログ

Blazor Server アプリでのログ

Blazor WebAssembly アプリでのログ

Program.cs でのログ (Blazor WebAssembly)

ログのカテゴリ (Blazor WebAssembly)

ログ イベント ID (Blazor WebAssembly)

ログ メッセージ テンプレート (Blazor WebAssembly)

ログ例外パラメーター (Blazor WebAssembly)

フィルター関数 (Blazor WebAssembly)

カスタム ロガー プロバイダー (Blazor WebAssembly)

ログのスコープ (Blazor WebAssembly)

ホストされた Blazor WebAssembly ログ

SignalR クライアントのログ (Blazor Server)

SignalR クライアントのログ (Blazor WebAssembly)

認証ログ (Blazor WebAssembly)

その他の技術情報

その他のリソース

その他のリソース

ログレベル

`Program.cs` でのログ (Blazor WebAssembly)

ログイベント ID (Blazor WebAssembly)

ログメッセージテンプレート (Blazor WebAssembly)

カスタムロガープロバイダー (Blazor WebAssembly)