Основы Blazor: Введение в логирование с использованием Serilog в приложениях Blazor

В этой статье мы рассмотрим основы интеграции Serilog в веб-приложение Blazor.

Serilog — это популярный и высоко оцененный библиотечный фреймворк с открытым исходным кодом для логирования на платформе .NET.

Вы можете найти код для Blazor Server и код для Blazor WebAssembly на GitHub.

Почему логирование так важно

Вы можете задаться вопросом, почему интеграция логирования в веб-приложение имеет такое значение.

Прежде всего, не имеет особого значения, какое приложение вы создаете. В какой-то момент вы столкнетесь с тем, что что-то сломается, и будете гадать почему.

Логирование позволяет отслеживать действия пользователей и делать ошибки более прозрачными и воспроизводимыми.

Для веб-приложений все обстоит точно так же. Вы размещаете приложение на сервере, и (в идеале) множество пользователей будут посещать его и выполнять различные действия.

Происходит входящий и исходящий HTTP-трафик, а также вы можете использовать сторонние API. Рано или поздно ваша система станет сложнее, чем вы думаете.

Правильно настроенная система логирования позволит быстро оценить серьезность ошибки. Вы сразу узнаете, сколько пользователей затронуто (какие группы пользователей) и насколько вероятно, что другие пользователи столкнутся с тем же ограничением в вашей системе.

Что такое Serilog?

Serilog — это библиотека .NET с открытым исходным кодом, которая обеспечивает диагностическое логирование в файлы, консоль и множество других приемников.

Его можно использовать как для классических приложений .NET Framework, так и для современных приложений на базе .NET 10+, включая веб-приложения Blazor.

Я использую Serilog в приложениях самых разных форм и размеров уже более десяти лет. Я применял его для бэкенд-API на базе ASP.NET Core и десктопных приложений.

Производительность никогда не была проблемой, а интеграция всегда оставалась простой.

Давайте интегрируем Serilog в веб-приложение Blazor.

Как работает Serilog?

Serilog предоставляет базовый пакет и несколько интеграций с фреймворками. Поскольку мы работаем с Blazor и ASP.NET Core, в этой статье мы будем использовать NuGet-пакет, специфичный для данного фреймворка.

Пакеты, специфичные для фреймворков, помогают настроить логирование приложения.

Еще одна важная концепция — это приемник (sink). Приемники позволяют указать, где и как хранить информацию журналов. Например, приемники Console и File являются распространенными целями для логирования.

Однако существуют и более продвинутые и специализированные приемники, например, для сохранения файлов логов в хранилище BLOB-объектов в учетной записи хранения Azure.

Подсказка: на момент написания статьи существуют over 80 sinks listed in the official Serilog repository.

Подсказка: на момент написания статьи существуют .

Интеграция Serilog в веб-приложения Blazor Server

Прежде всего, мы устанавливаем NuGet-пакет Serilog.AspNetCore в проект веб-приложения Blazor Server.

Пакет Serilog.AspNetCore имеет несколько зависимостей от наиболее часто используемых приемников, таких как Console и File.

Затем мы настраиваем Serilog в файле Program.cs:

Мы используем метод расширения AddSerilog для типа IServiceCollection для настройки Serilog.

Мы устанавливаем минимальный уровень логирования в Information и используем свойство WriteTo для настройки Console и File в качестве целей логирования (приемников).

Мы настраиваем файл лога так, чтобы его имя содержало текущий день. Это помогает автоматически разделять файлы логов по дням, чтобы поддерживать их размер на управляемом уровне.

Подсказка: узнайте больше о доступных уровнях логирования в документации Serilog.

Подсказка: узнайте больше о доступных уровнях логирования в документации Serilog.

Затем мы хотим записать сообщение в лог из компонента Blazor.

Мы открываем файл Counter.razor (созданный из файлов примеров с использованием шаблона проекта веб-приложения Blazor по умолчанию в .NET 10):

Мы используем директиву @inject для внедрения экземпляра типа ILogger и передаем тип компонента в качестве аргумента универсального типа.

В разделе кода мы используем внедренное свойство Logger и его метод LogInformation для записи сообщения в лог.

В этом случае мы хотим логировать текущее значение счетчика каждый раз, когда пользователь нажимает кнопку его увеличения.

Теперь мы можем запустить приложение и нажать кнопку для увеличения значения счетчика. Мы должны увидеть сообщения лога в консоли.

Если мы откроем папку проекта на жестком диске, мы также сможем найти и открыть файл лога.

Вместо статической настройки Serilog в файле Program.cs вы также можете настроить его в appsettings.json.

Это позволяет изменять уровень логирования и настраивать активные приемники во время выполнения, а не во время компиляции приложения.

Например, вы можете выбрать логирование в консоль и файл во время разработки и в учетную запись хранения Azure в продакшене без изменения исходного кода приложения.

Вы можете найти код для Blazor Server и код для Blazor WebAssembly на GitHub.

Интеграция Serilog в веб-приложения Blazor WebAssembly

Интеграция Serilog для Blazor WebAssembly выглядит иначе.

Если задуматься об архитектуре Blazor WebAssembly, становится очевидно, что мы не можем интегрировать Serilog в клиентский (WebAssembly) проект. И вот почему: пакет Serilog.AspNetCore зависит от общей среды выполнения ASP.NET Core и поэтому несовместим со средой выполнения веб-ассемблера в браузере.

У нас есть в основном два варианта, когда речь заходит о логировании в клиентских проектах WebAssembly:

• Запись логов в консоль браузера
• Запись логов в удаленный сервис (серверное логирование через API)

Давайте рассмотрим оба варианта более подробно.

Логирование в консоль браузера

Самый простой способ начать — настроить консоль браузера в качестве цели (приемника) для сообщений логов в клиентском проекте WebAssembly.

Мы начинаем с установки следующих трех NuGet-пакетов:

Затем в файле Program.cs мы создаем конфигурацию логгера и добавляем ее в список зарегистрированных провайдеров логирования. Сначала мы очищаем существующие провайдеры и добавляем провайдер Serilog в качестве единственного провайдера логирования.

По аналогии с настройкой Blazor Server, теперь мы внедряем экземпляр типа ILogger в компонент Counter:

И мы записываем сообщение в лог каждый раз, когда пользователь нажимает кнопку для увеличения счетчика.

При запуске приложения и увеличении значения на странице Counter путем нажатия кнопки Click Me мы видим появление сообщения лога в окне консоли инструментов разработчика браузера.

Логи браузера полезны для воспроизведения сообщенных ошибок в локальной среде разработки.

Вы можете найти код для Blazor Server и код для Blazor WebAssembly на GitHub.

Логирование в удаленный сервис (API)

Хотя логи браузера полезны для сбора информации в контролируемой среде, нам нужна другая стратегия для получения логов от реальных пользователей в продакшн-приложении.

Поскольку у нас нет доступа к компьютерам пользователей, нам нужно убедиться, что они отправляют необходимую информацию с клиента на сервер.

Есть два основных варианта.

• Мы можем реализовать собственный эндпоинт с помощью бэкенд-сервиса ASP.NET Core и использовать HTTP-приемник Serilog.
• Мы можем использовать удаленный сервис логирования, такой как Seq, и применить специализированный приемник Seq для Serilog.

Какой бы путь мы ни выбрали, рабочий процесс остается прежним.

Мы решаем, где хотим хранить и как хотим передавать сообщения журналов от клиента на (удаленный) сервер.

Дополнительные возможности Serilog

В этой статье для начинающих я не затронул некоторые дополнительные расширенные функции, которые полезны в продакшн-сценариях:

• Вы можете обогатить Serilog дополнительной информацией, такой как UserId, Username, SessionsId или web RequestID.
• Вы можете настроить формат вывода с помощью заполнителей и настроить вывод в формате JSON вместо обычного текста.
• Вы можете использовать структурированное логирование.

Заключение

Интеграция Serilog в ваше веб-приложение Blazor может значительно улучшить ваши возможности по мониторингу, диагностике и поддержке программного обеспечения.

Независимо от того, работаете ли вы с Blazor Server или Blazor WebAssembly, Serilog предлагает гибкую конфигурацию и широкий спектр приемников (sinks). Это позволяет собирать информацию во время разработки, при воспроизведении ошибок и для мониторинга систем в продакшене.

Помните об архитектурных различиях между Blazor Server и Blazor WebAssembly и понимайте их последствия. В приложениях Blazor Server мы можем напрямую логировать действия пользователя на сервере.

Однако в Blazor WebAssembly мы ограничены клиентским логированием через консоль браузера и вызовом удаленных API для отправки записей журналов в централизованную систему.

Если вы хотите узнать больше о разработке на Blazor, посмотрите мой бесплатный экспресс-курс по Blazor на YouTube. И следите за обновлениями в блоге Telerik, чтобы узнать больше об основах Blazor.