[ New ][ User ][ Logging ] 1 Số Cách Tối Ưu Hóa Quản Lý Lỗi và Logging nhanh cho bạn

Chúng tôi sẽ xây dựng một BaseService có các tính năng Logging quản lý lỗi và ghi log để cung cấp một mẫu code hoàn chỉnh cho “BaseService trong JavaScript: Tối ưu hóa Quản lý Lỗi và Ghi Log.” Đây là một ví dụ toàn diện:

Để làm ghi log trên website của chúng ta nên tạo trước một API chuyên xử lý log trên server qua bài này: xxx

via GIPHY

Đây

Cấu trúc log khi nhận request từ client

BaseService với Quản Lý Lỗi và Logging

Bạn hãy tạo BaseService như ở bài trước đó và bổ sung thêm logError dùng gửi log lên server

class BaseService {
    constructor(baseURL) {
        this.baseURL = baseURL;
    }

    async request(endpoint, method = 'GET', body = null) {
        const url = `${this.baseURL}${endpoint}`;
        const options = {
            method,
            headers: {
                'Content-Type': 'application/json'
            }
        };

        if (body) {
            options.body = JSON.stringify(body);
        }

        try {
            const response = await fetch(url, options);
            if (!response.ok) {
                const errorData = await response.json();
                this.handleError(errorData.message || 'Unknown error occurred');
                return null;
            }
            return await response.json();
        } catch (error) {
            this.handleError(error.message || 'Network error');
            return null;
        }
    }

    handleError(errorMessage) {
        console.error('API Error:', errorMessage);
        this.showErrorNotification(errorMessage);
        this.logError(errorMessage);
    }

    showErrorNotification(errorMessage) {
        const errorContainer = document.getElementById('error-container');
        if (errorContainer) {
            errorContainer.innerText = errorMessage;
            errorContainer.style.display = 'block';
        } else {
            alert(errorMessage);
        }
    }

    logError(errorMessage) {
        // Here you can implement logging to a server or an external service
        console.log('Logging error:', errorMessage);

        // Example of logging to a server
        fetch('/log', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: errorMessage, timestamp: new Date() })
        }).catch(logError => console.error('Logging failed:', logError));
    }
}

Khi đó chúng ta sẽ gửi lên message lỗi và timestamp lúc xảy ra lỗi gửi lên server.

Cấu trúc này cho phép quản lý và mở rộng nhiều dịch vụ cũng như xử lý lỗi và ghi log lỗi một cách có hệ thống và tự động khi request bất kỳ yêu cầu nào lên server khi kế thừa từ BaseServices

Tạo các dịch vụ cụ thể kế thừa từ `BaseService`

class UserService extends BaseService {
    constructor(baseURL) {
        super(baseURL);
    }

    createUser(data) {
        return this.request('/users', 'POST', data);
    }

    getUser(userId) {
        return this.request(`/users/${userId}`);
    }
}

// Example usage:
const userService = new UserService('http://localhost:5000/api');

Mỗi khi ta gọi đến createUser khi request nó sẽ tự ghi log lên server bạn có thể lưu lại vào bảng log hoặc ghi ra file sẽ được hướng dẫn ở bài sau

Bạn có thể xem kết quả được gửi lên server sẽ ra dạng file thế này

Sử dụng dịch vụ trong giao diện người dùng

document.addEventListener('DOMContentLoaded', function () {
    const userService = new UserService('http://localhost:5000/api');

    document.getElementById('createUserForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;

        const userData = {
            username,
            email,
            password_hash: password
        };

        const result = await userService.createUser(userData);
        if (result) {
            console.log('User created:', result);
            // Handle success (e.g., display a message or redirect)
        }
    });
});

Giao diện người dùng

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eCommerce</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>eCommerce Site</h1>
    <div id="error-container" style="display:none; color: red;"></div>
    <form id="createUserForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Create User</button>
    </form>

    <script src="js/baseService.js"></script>
    <script src="js/userService.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

– Phương thức yêu cầu: Đáp ứng các yêu cầu HTTP và xử lý các lỗi. Nếu phản hồi không thành công. Được, nó sẽ xử lý lỗi bằng cách gọi handleError.
– Phương thức handleError: hiển thị lỗi trên console, gọi showErrorNotification để hiển thị thông báo lỗi cho người dùng và gọi logError để ghi log lỗi.
– Phương thức trình bày thông báo lỗi: Cập nhật container lỗi hoặc sử dụng thông báo nếu không có container lỗi để hiển thị thông báo lỗi cho người dùng.
– Phương thức logError: ghi lại lỗi.

Cấu trúc này cho phép quản lý và mở rộng nhiều dịch vụ cũng như xử lý lỗi hiệu quả và ghi log lỗi.

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Chúc các bạn thành công!