Quay lại danh sách case study
Xử lý sự cố rò rỉ bộ nhớ nghiêm trọng trên dashboard phân tích dữ liệu
Phát hiện và khắc phục triệt để hiện tượng treo trình duyệt khi người dùng mở tab lâu.
Bối cảnh
Khách hàng doanh nghiệp phàn nàn rằng sau khi mở tab báo cáo phân tích khoảng 2 tiếng, máy tính của họ bị đơ và trình duyệt báo lỗi Out of Memory.
Vấn đề cần xử lý
Biểu đồ thư viện bên thứ ba (Chart.js) không được hủy bỏ instance khi component unmount, kết hợp với các interval ngầm vẫn chạy liên tục.
Hướng xử lý đề xuất
Sử dụng Chrome DevTools Heap Snapshot để so sánh bộ nhớ trước và sau khi chuyển trang, từ đó bổ sung hàm cleanup trong useEffect để hủy biểu đồ và clear timer.
Câu trả lời mẫu khi phỏng vấn
Khi nhận được phản hồi từ khách hàng, tôi đã yêu cầu cung cấp một phiên bản đo đạc bằng Heap Snapshot. Qua phân tích, tôi phát hiện các instance của biểu đồ và event listener không được giải phóng khi người dùng chuyển trang. Tôi đã bổ sung ngay hàm cleanup cho các useEffect và chuẩn hóa lại quy trình kiểm tra memory leak cho toàn team.
Trade-off
Mất một ngày làm việc để rà soát toàn bộ các component hiển thị biểu đồ phức tạp trong hệ thống.
Kết quả kỳ vọng
Khắc phục hoàn toàn lỗi tràn bộ nhớ, ứng dụng có thể chạy liên tục nhiều ngày mà không tiêu tốn thêm tài nguyên thừa.
Bài học khi trả lời phỏng vấn
Luôn luôn viết hàm cleanup cho mọi side-effect trong ứng dụng Frontend là nguyên tắc không được phép bỏ quên.