Logging with Serilog, Sentry, ASP.NET Core and ReactJs

Khi phát triển dự án, chúng ta luôn mong muốn sản phẩm làm ra chạy thật ngon, không lỗi, không phàn nàn từ khách hàng.

Tuy nhiên đời không như mơ, đôi khi sự cố vẫn xảy ra. Chính vì vậy logging là việc cần thiết, và cũng có nhiều công cụ hỗ trợ cho việc đó. Trong phạm vi bài viết này, các bạn sẽ được biết thêm một công cụ log ngon lành đơn giản dành cho .NET Core & ReactJs. Đó là https://serilog.net, http://sentry.io. Nếu bạn quan tâm thêm thì có thể tìm hiểu về log4net, nlog…. Có bài viết so sánh tại https://stackify.com/nlog-vs-log4net-vs-serilog/

Bản thân mình đánh giá thằng serilog ngon, mạnh mẽ, dễ áp dụng vào dự án. Nó hỗ trợ rất nhiều loại log: file, console, sentry, elasticsearch…

Sentry.io hiểu đơn giản như một database lưu trữ & cung cấp theo dõi tất cả log của chúng ta. Có bản free, gửi email khi có issue. Đánh giá ngon. Muốn ngon hơn nữa thì dùng bản trả phí. Tuy nhiên bản miễn phí cũng đủ dùng cho dự án nhỏ rồi.

Việc áp dụng khá đơn giản, chúng ta sẽ bắt đầu với dự án ASP.NET Core trước.

Việc đăng ký tạo project trên nó khá đơn giản. Sau khi đăng ký nó sẽ cho bạn một đoạn mã DNS để thêm vào project. Đăng ký tài khoản sentry & tạo project.

Cấu hình sentry vào project. File Program.cs

public class Program
{
	public static void Main(string[] args)
	{
		using (SentrySdk.Init("__DNS__"))
		{
		// App code
		CreateWebHostBuilder(args).Build().Run();
		}
	}

	public static IWebHostBuilder CreateWebHostBuilder(string[] args) 
	{
		WebHost.CreateDefaultBuilder(args)
		.UseKestrel()
		.UseIISIntegration()
		.UseStartup();
	}
}

Cấu hình Serilog File Startup.cs

 		
public Startup(IConfiguration configuration, IHostingEnvironment hostingEnvironment)
{
	Configuration = configuration;

	var builder = new ConfigurationBuilder()
		.SetBasePath(hostingEnvironment.ContentRootPath)
		.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
		.AddJsonFile($"appsettings.{hostingEnvironment.EnvironmentName}.json", reloadOnChange: true, optional: true)
		.AddEnvironmentVariables();

	Configuration = builder.Build();            

	Log.Logger = new LoggerConfiguration()
		.Enrich.FromLogContext()
		.Enrich.WithExceptionDetails()                
		.WriteTo.Sentry(o => o.Dsn = new Dsn("__DNS__"))
	.CreateLogger();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{   
	// TODO
	loggerFactory.AddSerilog();
}

Nếu bạn muốn log trong từng controller thì Serilog cũng hỗ trợ ngon luôn.

using Microsoft.Extensions.Logging;

private readonly ILogger _logger;
public IdentityController(ILogger logger)
{
	_logger = logger;
}

   
public async Task Login(string username, string password)
{
	_logger.LogInformation("Log here");
}

Như vậy xong phần cấu hình cho project .NET Core. Tiếp theo đăng ký sentry project reactjs.

Cài đặt thư viện sentry cho reactjs

npm i @sentry/browser

Thêm đoạn code vào App.js hoặc chỗ nào bạn muốn log.

import * as Sentry from '@sentry/browser'
Sentry.init({
  dsn: '__DNS__'
})
class App extends Component {
  componentDidCatch (error, errorInfo) {
    this.setState({ error })
    Sentry.withScope(scope => {
      scope.setExtras(errorInfo)
      const eventId = Sentry.captureException(error)
      this.setState({ eventId })
    })
  }

Như vậy là xong. Bây giờ chúng ta sẽ vào Sentry.io để xem log của dự án.

Happy coding. Chúc các bạn thành công & làm ra sản phẩm không bug, không issue, không phàn nàn từ khách hàng.