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
Đây
Cấu trúc log khi nhận request từ client
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
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
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) } }); });
<!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!
Leave A Comment