ReactJS Bài 7: Dùng logging để ghi lại thông tin, giúp gỡ rối hiệu quả

Trong bài này, bạn sẽ học cách sử dụng logging trong ReactJS. Logging là một công cụ quan trọng để giám sát và gỡ lỗi ứng dụng của bạn.

Bài trước: ReactJS Bài 6: Dùng table với dữ liệu động

Logging giúp bạn ghi lại thông tin quan trọng và lỗi từ ứng dụng. Từ đó, bạn có thể dễ dàng theo dõi và hiểu cách ứng dụng của bạn hoạt động và từ đó dò ra nơi gây lỗi.

Bước 1: Cài đặt một thư viện logging

Trước tiên, bạn cần cài đặt một thư viện logging.

Một thư viện phổ biến trong JavaScript là loglevel. Để cài đặt loglevel, bạn có thể chạy lệnh sau trong thư mục gốc của dự án React:

npm install loglevel

Bước 2: Tạo một module logging riêng

Sau khi cài đặt loglevel, bạn có thể tạo một module logging riêng biệt để quản lý các thông điệp log trong ứng dụng của mình.

Tạo một tệp mới với tên logger.js và thêm mã sau:

import log from 'loglevel';

// Thiết lập mức log mặc định
log.setLevel(process.env.LOG_LEVEL || 'info');

// Export logger
export default log;

Trong module logging này, chúng ta sử dụng loglevel để tạo một instance logger và thiết lập mức log (log level) mặc định thành info.

Bạn cũng có thể đặt mức log theo môi trường hoặc cấu hình của bạn bằng cách sử dụng process.env.LOG_LEVEL.

Giá trị của process.env.LOG_LEVEL được lưu trong file .env hoặc .env.local. Đây là các file môi trường được sử dụng để định nghĩa các biến môi trường cho ứng dụng.

Bạn có thể tạo một file .env hoặc .env.local trong thư mục gốc của dự án và định nghĩa biến môi trường như sau:

LOG_LEVEL=debug

Bước 3: Sử dụng logger trong ứng dụng React

Bây giờ bạn đã có một module logging riêng, bạn có thể sử dụng logger này trong các component của ứng dụng.

Dưới đây là ví dụ về cách sử dụng logger trong một component:

import React, { useEffect } from 'react';
import logger from './logger';

const MyComponent = () => {
  useEffect(() => {
    logger.debug('Component mounted'); // Ghi log mức debug

     // Một số xử lý logic khác...

    logger.info('Component updated'); // Ghi log mức info
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

Trong ví dụ trên, chúng ta sử dụng logger để ghi log ở mức debug và info. Bạn có thể sử dụng các mức log khác như warn, error, hoặc trace tùy thuộc vào nhu cầu của bạn.

Đọc thêm các log level của loglevel tại đây.

Bước 4: Xem kết quả log

Cuối cùng, để xem kết quả log của ứng dụng của bạn, bạn có thể mở công cụ Developer Console trong trình duyệt và xem các thông điệp log được hiển thị. Tùy thuộc vào mức log hiện tại, bạn có thể chỉ hiển thị các thông điệp log từ mức log đó trở lên.

Trên đây là một ví dụ cơ bản về cách sử dụng logging trong ReactJS. Hãy khám phá các tính năng khác của loglevel và tùy chỉnh nó để phù hợp với nhu cầu của bạn.

Bài tiếp theo

ReactJS Bài 8: Kiểm tra dữ liệu đầu vào với Yup và Formik