Cuộc sống Kỹ sư Phần mềm: Cách tôi sửa lỗi NPM và Cứu dự án
Gần đây, chúng tôi đã gặp một khó khăn lớn trong một trong những dự án của mình. Nếu bạn đã từng làm việc với việc tạo PDF/doc phía khách hàng, bạn sẽ hiểu nỗi đau này 👀.
Với bản cập nhật Chrome mới nhất, một số thay đổi về kiểu dáng và cách hiển thị đã diễn ra. Nghe có vẻ tốt cho trình duyệt… nhưng đối với chúng tôi thì sao? 💥 Boom — tất cả các tính năng tạo PDF phía khách hàng của chúng tôi từ vài giây ⏱️ đã trở thành một trải nghiệm đáng sợ 10–15 phút. Ứng dụng bị đông cứng, người dùng cảm thấy thất vọng, và tính năng tài liệu của chúng tôi gần như không thể sử dụng.
Nguyên nhân chính: Thư viện html2pdf.js
Thư viện đáng tin cậy nhưng đã cũ của chúng tôi html2pdf.js, phụ thuộc vào html2canvas để chuyển đổi HTML thành canvas và sau đó nhét vào PDF. Nghe có vẻ hấp dẫn, nhưng không còn thú vị khi Chrome gặp sự cố.
👉 Lưu ý quan trọng: Tạo tài liệu phía khách hàng chưa bao giờ là lý tưởng. Tạo tài liệu phía máy chủ luôn là lựa chọn an toàn hơn. Nhưng vì dự án đã được xây dựng theo cách này, chúng tôi phải chấp nhận nó.
Thử nghiệm và tìm kiếm giải pháp
Giờ đây, đây là nơi mọi thứ trở nên thú vị:
- Thử tạo tài liệu phía máy chủ với Puppeteer + mẫu — hoạt động với tài liệu đơn giản ✅, nhưng hỏng với tài liệu phức tạp ❌.
- Tìm kiếm qua các vấn đề trên GitHub như một thám tử 🕵️♂️.
- Cuối cùng tìm thấy một viên ngọc 💎: một thư viện tên là Snapdom, có thể thay thế cho html2canvas.
Tôi đã xắn tay áo, tải mã nguồn HTML2PDF, và sau nhiều giờ “mò mẫm”, tôi đã tìm thấy “con quái vật ẩn nấp” 🐉 — một hàm duy nhất nơi html2canvas đang thực hiện công việc nặng nhọc. Tôi đã thay thế nó bằng Snapdom, điều chỉnh một số tham số, gói lại vào Angular, và… VOILÀ 🎉.
⚡ Với những thay đổi tối thiểu đối với mã hiện có của chúng tôi, tài liệu đã trở lại tải xuống chỉ trong vài giây. Sửa lỗi này mất một ngày làm việc tập trung — tốt hơn rất nhiều so với việc lùng sục với các trình duyệt không đầu.
Những bài học rút ra
- Luôn chú ý đến các cảnh báo NPM ⚠️ — phớt lờ chúng giống như một con đà điểu chôn đầu trong cát.
- Trước khi lao đầu vào mã, hãy nghiên cứu 🧑💻. Có thể ai đó đã gặp (và giải quyết) vấn đề tương tự.
- Các sửa lỗi tạm thời là tốt — chúng mua cho bạn thời gian để làm việc trên giải pháp dài hạn thực sự.
Kết luận
Cuối cùng, đôi khi cách nhanh nhất để tiến lên không phải là viết lại mọi thứ, mà là điều chỉnh chỉ những mảnh ghép đúng trong bức tranh 🧩.
💡 Bạn đã bao giờ sửa chữa một phụ thuộc nào đó để cứu một dự án chưa? Tôi rất muốn nghe câu chuyện của bạn!
FAQs
1. Tôi có thể tìm thư viện thay thế nào cho html2canvas không?
Có nhiều thư viện như Snapdom, có thể thay thế html2canvas và cải thiện hiệu suất.
2. Sửa lỗi tạm thời có ảnh hưởng đến chất lượng sản phẩm không?
Có, nhưng nó sẽ giúp bạn có thời gian để tìm ra giải pháp lâu dài hơn mà không làm gián đoạn công việc hiện tại.
Tài nguyên tham khảo
Lời khuyên về hiệu suất
- Kiểm tra hiệu suất của ứng dụng thường xuyên để phát hiện sớm các vấn đề có thể xảy ra.
- Xem xét việc sử dụng các công cụ phân tích để tối ưu hóa quy trình làm việc của bạn.
Các cạm bẫy thường gặp
- Bỏ qua các cảnh báo từ các thư viện bên ngoài có thể dẫn đến các lỗi lớn trong ứng dụng của bạn.
- Thiếu kiểm tra mã sau khi cập nhật có thể gây ra sự cố không mong muốn trong sản phẩm.
Mẹo khắc phục sự cố
- Luôn sao lưu mã nguồn của bạn trước khi thực hiện bất kỳ thay đổi nào.
- Sử dụng phiên bản ổn định của các thư viện để giảm thiểu rủi ro.
Hy vọng rằng câu chuyện của tôi sẽ hữu ích cho các bạn trong việc giải quyết các vấn đề tương tự trong tương lai!
