Giải pháp ghi log frontend linh hoạt và mở rộng với awesome-logger

awesome-logger là một công cụ ghi log hiệu quả được thiết kế cho các nhà phát triển frontend, tập trung vào tính linh hoạt, khả năng mở rộng và trải nghiệm của nhà phát triển. Với các trường log chuẩn hóa tích hợp sẵn, kiến trúc dựa trên plugin và quản lý log đa chiều, nó giúp các nhà phát triển nhanh chóng thực hiện việc thu thập, báo cáo và phân tích log, từ đó cải thiện độ ổn định của ứng dụng và hiệu quả trong việc xử lý sự cố.

🎯 Trường hợp sử dụng

awesome-logger cung cấp các giải pháp chính xác cho nhiều nhu cầu phát triển, phù hợp với các tình huống sau:

1. Xác định nhanh chóng vấn đề của người dùng

   • Lợi thế cốt lõi: Các trường tích hợp như os, device và ua tự động thu thập ngữ cảnh đầy đủ.
   • Tình huống điển hình: Khi người dùng báo cáo sự cố, log có thể được lọc theo thời gian thực (ví dụ: Alibaba Cloud SLS) để xác định thiết bị, đường đi hoạt động và các thông tin khác chỉ trong vài giây.

2. Giám sát sức khỏe ứng dụng

   • Lợi thế cốt lõi: Hỗ trợ các mức log như info, warn và error, hỗ trợ xây dựng bảng điều khiển độ ổn định.
   • Tình huống điển hình: Giám sát tỷ lệ lỗi API, rò rỉ bộ nhớ, v.v. để nhanh chóng xác định các rủi ro tiềm ẩn của ứng dụng.

3. Báo cáo đồng nhất đến nhiều hệ thống log

   • Lợi thế cốt lõi: Kiến trúc dựa trên plugin hỗ trợ tích hợp đồng thời với nhiều dịch vụ như Alibaba Cloud SLS và Tencent Cloud CLS.
   • Tình huống điển hình: Các dự án triển khai đa đám mây hoặc chuyển đổi giữa các hệ thống ghi log cũ và mới, cho phép báo cáo một lần đến nhiều nền tảng.

4. Mở rộng log tùy chỉnh

   • Lợi thế cốt lõi: Tùy chỉnh logic báo cáo thông qua giao diện LogPlugin (ví dụ: hệ thống riêng, mã hóa dữ liệu).
   • Tình huống điển hình: Triển khai riêng cho doanh nghiệp hoặc xử lý dữ liệu nhạy cảm (tình huống tài chính/y tế).

5. Phát triển hiệu quả và chuẩn hóa

   • Lợi thế cốt lõi: Các plugin chính thống có sẵn cho SLS/CLS cho phép khởi tạo chỉ trong 10 dòng mã.
   • Tình huống điển hình: Các startup hoặc nhóm phát triển linh hoạt giảm thiểu phát triển hạ tầng dư thừa.

Thông qua thiết kế nhẹ và mở rộng linh hoạt, awesome-logger giúp các nhà phát triển cân bằng giữa hiệu suất, độ ổn định và khả năng quan sát.

🌟 Lợi ích chính

1. Các trường log chuẩn hóa tích hợp sẵn cho việc xử lý sự cố hiệu quả
   Các trường môi trường khóa được định nghĩa trước như os (hệ điều hành), device (mô hình thiết bị), và ua (user agent) cho phép thu thập ngữ cảnh toàn diện mà không cần phát triển thêm, giúp các nhà phát triển nhanh chóng xác định nguyên nhân gốc rễ của các vấn đề.

2. Cấu hình linh hoạt các trường cơ bản, hỗ trợ truy vấn và phân tích theo thời gian thực
   Người dùng có thể tùy chỉnh các trường cơ bản (ví dụ: uid, env), được tự động thêm vào mỗi log. Kết hợp với các dịch vụ như Alibaba Cloud SLS, điều này cho phép lọc và truy vấn log theo thời gian thực, xác định chính xác các tình huống phản hồi của người dùng.

3. Quản lý log đa cấp cho việc giám sát sức khỏe ứng dụng
   Hỗ trợ nhiều mức log như info, warn, và error, giúp các nhà phát triển xây dựng bảng điều khiển ổn định và theo dõi sức khỏe ứng dụng theo thời gian thực. Phân loại log theo mức độ cho phép xác định nhanh chóng các rủi ro và bất thường tiềm ẩn.

4. Kiến trúc dựa trên plugin cho tích hợp liền mạch với bất kỳ dịch vụ ghi log nào
   Với cơ chế plugin, các nhà phát triển có thể tự do mở rộng khả năng ghi log. Hỗ trợ tích hợp cho các dịch vụ ghi log lớn như Alibaba Cloud SLS và Tencent Cloud CLS được cung cấp, cùng với khả năng tạo các plugin tùy chỉnh cho các hệ thống ghi log riêng hoặc các dịch vụ bên thứ ba.

📦 Thiết kế kiến trúc

awesome-logger áp dụng một kiến trúc phân lớp để đảm bảo tính tách biệt chức năng và khả năng mở rộng:

1. Lớp lõi (@awesome-logger/core)

   • Lớp Logger: Quản lý việc tạo log, kiểm soát mức độ và đăng ký plugin. Cung cấp các phương thức như info, warn, và error, hỗ trợ cấu hình các trường cơ bản.
   • Lớp trừu tượng LogPlugin: Định nghĩa các thông số phát triển plugin. Tất cả các plugin phải triển khai phương thức sendLog để gửi dữ liệu log đến dịch vụ mục tiêu.

2. Lớp plugin (@awesome-logger/plugin-*)
   Cung cấp các triển khai cho các dịch vụ ghi log cụ thể. Ví dụ:

   • @awesome-logger/plugin-sls: Tích hợp với dịch vụ ghi log Alibaba Cloud SLS. Các nhà phát triển có thể tùy chỉnh các plugin theo thông số kỹ thuật để mở rộng khả năng ghi log.

3. Lớp sử dụng (@awesome-logger/client)

   • Lớp Client: Đóng gói các chức năng cốt lõi để đơn giản hóa việc tích hợp cho người dùng. Hỗ trợ đăng ký plugin thông qua usePlugin và cung cấp một giao diện ghi log thống nhất.

🚀 Bắt đầu nhanh

1. Cài đặt phụ thuộc

npm install @awesome-logger/client @awesome-logger/core @awesome-logger/plugin-sls

2. Khởi tạo và cấu hình

import Client from '@awesome-logger/client';
import { Logger } from '@awesome-logger/core';
import { SLSLogPlugin } from '@awesome-logger/plugin-sls';

// tạo logger 
const logger = new Logger({
  uid: 'test_user_1',
  release: '1.0.0',
  env: 'production',
});

// bạn cũng có thể sử dụng hàm logger.setBaseField cho một số tình huống bất đồng bộ
logger.setBaseField({ uid: 'user_001' });

// Cấu hình các trường cơ bản
const client = new Client(logger);

// Đăng ký plugin Alibaba Cloud SLS
const slsPlugin = new SLSLogPlugin({
  host: 'your-sls-endpoint', // Công khai tên miền
  project: 'your-project',
  logstore: 'your-logstore',
  count: 20, // Ngưỡng số lượng gửi
  time: 3, // Ngưỡng thời gian gửi
});
client.usePlugin(slsPlugin);

3. Báo cáo log

// Báo cáo log thông tin
client.info('enter_home_page', { page: 'home' });

// Báo cáo log cảnh báo
client.warn('api_timeout', { latency: 500 });

// Báo cáo log lỗi
client.error('api_fail', { errorCode: 500, endpoint: '/api/data' });

4. Ghi log đến Alibaba Cloud SLS

Chức năng hoạt động như hình dưới đây:

Lưu ý

1. Trước khi sử dụng plugin-sls, bạn cần tạo một tài khoản Alibaba Cloud.
2. Kích hoạt dịch vụ ghi log SLS, cung cấp dùng thử miễn phí trong một tháng với 50GB dung lượng lưu trữ.
3. Tạo một dự án log.
4. Sau đó tạo một logstore (đối với báo cáo frontend, nhớ bật tùy chọn theo dõi web).
5. Sau khi báo cáo một số log, bạn có thể tạo một chỉ mục.
6. Các chỉ mục hỗ trợ thiết lập, bổ sung và ghi đè.

🛠️ Phát triển plugin tùy chỉnh

awesome-logger hỗ trợ phát triển plugin tùy chỉnh, cho phép tích hợp liền mạch với các hệ thống ghi log riêng hoặc các dịch vụ khác:

1. Tạo lớp Plugin

import { LogPlugin } from '@awesome-logger/core';

class CustomLogPlugin extends LogPlugin {
  sendLog(logData: Record<string, any>) {
    // Logic báo cáo log tùy chỉnh
    console.log('Báo cáo dịch vụ log tùy chỉnh:', logData);
    // Ví dụ: Gửi đến một hệ thống ghi log tự phát triển
    fetch('https://your-log-service.com', {
      method: 'POST',
      body: JSON.stringify(logData)
    });
  }
}

export default CustomLogPlugin;

2. Sử dụng plugin tùy chỉnh

import Client from '@awesome-logger/client';
import CustomLogPlugin from './CustomLogPlugin';

const client = new Client();
const customPlugin = new CustomLogPlugin({ /* Cấu hình tùy chỉnh */ });
client.usePlugin(customPlugin);

client.info('click', { message: 'click button' });

Các trường log tích hợp sẵn

Với awesome-logger, bạn có thể dễ dàng đạt được việc ghi log frontend chuẩn hóa, có thể quan sát và linh hoạt, khiến cho các log trở thành một công cụ mạnh mẽ hỗ trợ độ ổn định của ứng dụng của bạn!