Day 20 纪录Log

在开发系统时，纪录是一件很重要的事，前面都没有提到，笔者在最近才想到这点，所以就来实作吧！

由於笔者用的是 Blazor Server，官方文件提供的只有 Blazor WebAssembly 的做法，所以先来试试看後者。

首先打开之前建立的 BlazorWasm 专案，在Counter.razor加入@using Microsoft.Extensions.Logging;及注入服务@inject ILogger<Counter> logger;，接着在原本的IncrementCount()内加入要提示的讯息，这边用的是LogWarning()，除此之外还有LogCritical、LogDebug、LogError等等可以使用。

@page "/counter"
@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("有人点击我了！");

        currentCount++;
    }
}

接着将启动专案改成 BlazorWasm 专案，启动後前往 Counter 页面，点击按钮後，按下 F12 切换到 Console 页签，可以看到显示了我们定义的讯息。

在 Blazor WebAssembly 这麽简单，那在 Blazor Server 也是一样吗？

可惜的是 Blazor Server 并不支援这样的作法，目前只能用IJSRuntime的方式呼叫浏览器的console.log提示讯息，想要有不同层级的讯息也必须自己客制化。

我们切回 Blazor Server 专案，在JsInteropClasses加入ConsoleLog()方法，里面做的事情就只有呼叫console.log()

        public async Task ConsoleLog(string message)
        {
            await js.InvokeVoidAsync("console.log", message);
        }

接着在Blog.razor.cs覆写OnAfterRenderAsync()，在里面呼叫ConsoleLog()。

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await jsClass.ConsoleLog("这是Blazor Server的console.log讯息");
        }

之所以不写在OnInitializedAsync()是因为我们采用预先渲染(pre-render)的方式，此时的 JavaScript 还没准备好，如果在OnInitializedAsync()呼叫，会发生下图的错误。

要是一定要在OnInitializedAsync()呼叫的话，可以去_Host.cshtml将<component>的render-mode属性从ServerPrerendered改为Server。

Server 的render-mode分为三种：Static、Server及ServerPrerendered，第一种速度最快，将全部 Component都转变为静态 HTML 档案；第二种最慢，会先将一种标记传出，等到使用者启动该 Component 後才会真的渲染成 HTML 档案；第三种是折衷方案，先把 Component 变成静态 HTML 档案但没有互动功能，等到使用者启动该 Component 後才会通知 Server 将功能补上。

这也是为什麽render-mode改成Server才有效的原因，因为此时的ConsoleLog()还没转成 JavaScript 档案。

Ref:ASP.NET Core Blazor logging

Ref:LoggerExtensions Class

Ref:How can I write into the browser´s console via Blazor WebAssembly?

Ref:Blazor Server

Ref:What's the difference between RenderMode.Server and RenderMode.ServerPrerendered in blazor?

Ref:RenderMode Enum