Quay lại danh sách case study
Giải quyết Sự cố Rò rỉ Bộ nhớ trong Ứng dụng Single Page App Chạy Dài Ngày
Phát hiện và khắc phục lỗi memory leak khiến tab trình duyệt của người dùng bị crash sau vài giờ sử dụng.
Bối cảnh
Hệ thống quảnOperation center của khách hàng mở liên tục 24/7. Sau khoảng 4-6 tiếng, tab trình duyệt tự động crash do tràn bộ nhớ heap.
Vấn đề cần xử lý
Sau khi điều tra bằng Heap Snapshot trong Chrome DevTools, chúng tôi phát hiện các đối tượng component cũ vẫn nằm trong bộ nhớ do chưa hủy bỏ các subscription từ RxJS observables và event listener trên window.
Hướng xử lý đề xuất
Thực hiện rà soát toàn bộ các useEffect và class component lifecycle, đảm bảo luôn gọi hàm unsubscribe và removeEventListener trong cleanup function.
Câu trả lời mẫu khi phỏng vấn
Khi phân tích Heap Snapshot, tôi thấy các instance của component trang chủ vẫn tồn tại dù người dùng đã chuyển trang. Nguyên nhân là do các RxJS subscription không được unsubscribe khi unmount. Tôi đã bổ sung cleanup logic cho toàn bộ các hook bất đồng bộ và kiểm tra lại bằng tự động hóa kiểm thử.
Trade-off
Cần tốn thời gian rà soát lại toàn bộ codebase cũ, nhưng đây là việc bắt buộc để đảm bảo sự ổn định của hệ thống enterprise.
Kết quả kỳ vọng
Ứng dụng hoạt động ổn định liên tục trong nhiều ngày mà không có dấu hiệu tăng trưởng bất thường của dung lượng bộ nhớ.
Bài học khi trả lời phỏng vấn
Luôn luôn viết cleanup function đi kèm với mọi tác vụ đăng ký sự kiện hoặc kết nối bất đồng bộ trong component.