Giám sát lỗi cho ứng dụng web: Công cụ và giải pháp hiệu quả
Giới thiệu 🔍
Bạn đã bao giờ nhận được phản hồi về lỗi từ người dùng ứng dụng web của mình mà cảm thấy khó khăn trong việc truy tìm hoặc tái tạo lỗi trong môi trường của bạn chưa? Hay bạn tự hỏi liệu người dùng của mình có đang hài lòng với tính năng mới mà bạn vừa phát hành hay không?
Việc thêm một giải pháp giám sát lỗi hoặc giám sát người dùng thực tế (RUM) vào ứng dụng của bạn có thể giúp bạn kiểm soát những điều này (và nhiều hơn nữa)! Trong bài viết này, chúng ta sẽ giới thiệu một số công cụ giúp bạn làm điều đó.
Giám sát lỗi là gì? 🤔
Tại đây, chúng ta sẽ thảo luận về hai thuật ngữ khác nhau: giám sát lỗi và giám sát người dùng thực tế (RUM). Vậy chúng là gì?
Giám sát lỗi
Các hệ thống giám sát lỗi giúp bạn thu thập thông tin về các sự cố không mong muốn và ngoại lệ xảy ra trong ứng dụng. Chúng cũng cung cấp cách để xử lý các ngoại lệ một cách thủ công trong mã và báo cáo chúng đến hệ thống giám sát lỗi. Thông thường, các hệ thống này đi kèm với một giao diện nơi bạn có thể kiểm tra nhật ký lỗi cùng với các chi tiết cụ thể hơn như hệ điều hành, trình duyệt, phiên bản ứng dụng, sourcemap, v.v.
Giám sát người dùng thực tế (RUM)
RUM là một giải pháp toàn diện hơn không chỉ theo dõi các ngoại lệ và sự cố mà còn giúp bạn phân tích cách mà người dùng thực tế tương tác với ứng dụng của bạn và tìm hiểu những gì ảnh hưởng đến trải nghiệm của họ. Các giải pháp RUM khác nhau có thể cung cấp các chỉ số và loại dữ liệu khác nhau.
Hầu hết các nhà cung cấp giải pháp giám sát lỗi/RUM đều có một phần blog nơi bạn có thể tìm hiểu thêm về các thuật ngữ này một cách chi tiết.
Tại sao chúng ta cần điều này? 🧐
Có nhiều tình huống mà chúng ta có thể muốn dựa vào các giải pháp này để có báo cáo chính xác nhất từ trải nghiệm của người dùng với ứng dụng của chúng ta.
Một ứng dụng web có số lượng người dùng lớn và nhiều loại phần cứng/phần mềm khác nhau có thể là một ví dụ lý tưởng. Gần như luôn luôn là không thể có trải nghiệm giống như người dùng đang gặp vấn đề với phần cứng và phần mềm của họ.
Ví dụ, một người dùng với trình duyệt Brave gặp phải một vấn đề mà không xảy ra trong Chrome. Điều này có thể do một API trình duyệt không được hỗ trợ hoặc một thuộc tính CSS. Biết được thiết bị, trình duyệt và phiên bản trình duyệt của người dùng có thể giúp chúng ta giải quyết vấn đề này nhanh chóng hơn. (Một số công cụ thậm chí có thể chỉ ra mã chính xác nơi vấn đề tồn tại.)
Luôn luôn tuyệt vời khi để người dùng liên hệ trực tiếp với chúng ta về bất kỳ phản hồi nào, nhưng chúng ta không thể hoàn toàn dựa vào điều đó vì người dùng có thể bị nhầm lẫn, có thể không có thời gian để báo cáo, có thể là người dùng lần đầu, và có thể đơn giản quyết định không báo cáo và tránh tính năng hoặc ứng dụng đó hoàn toàn.
Giải pháp 🔨
Dưới đây là một số công cụ mà tôi đã quen thuộc và sử dụng trong các dự án frontend.
Trước khi chúng ta bị nhầm lẫn giữa các công cụ có giao diện và chức năng tương tự mà tất cả đều tuyên bố là tốt nhất, có lẽ tốt hơn là biết những gì chúng ta nên tìm kiếm. Dưới đây là danh sách một số kiểm tra cơ bản:
- Dễ sử dụng (bảng điều khiển thân thiện với người dùng, điều hướng qua các nhật ký, tìm kiếm chi tiết bạn đang tìm kiếm)
- Hỗ trợ cho ứng dụng của bạn (frontend, backend)
- Theo dõi lỗi
- Báo cáo và thông tin chi tiết
- Giá cả
Sentry
Sentry là một trong những nền tảng phổ biến và mã nguồn mở nhất. Nó có hỗ trợ tốt cho hầu hết các loại ngăn xếp ứng dụng. Ngoài việc giám sát lỗi, Sentry cũng nhấn mạnh vào việc giám sát hiệu suất và một số tính năng gỡ lỗi tốt nhất.
Ưu điểm
- Hỗ trợ cộng đồng mã nguồn mở tích cực
- Dễ tích hợp
- Kế hoạch miễn phí dễ sử dụng nhất
- Nhiều nội dung học tập miễn phí (blog, youtube)
- Phản hồi từ người dùng
- Độ phủ mã, theo dõi lỗi trong mã nguồn
- Hỗ trợ trên nhiều nền tảng và tất cả các framework frontend chính
Bugsnag
Bugsnag đã có mặt từ năm 2013 và thực sự đơn giản và thân thiện với người dùng. Nó cũng có hỗ trợ tốt cho các ứng dụng di động.
Thông tin thú vị - Bugsnag hiện đã được Smartbear mua lại, công ty cung cấp một hệ sinh thái các công cụ kiểm thử phần mềm bao gồm Cucumber (cũng đã được mua lại).
Ưu điểm
- Đơn giản và dễ sử dụng
- Chỉ cung cấp thông tin cần thiết
- Hỗ trợ tốt trên nhiều nền tảng
Datadog
Datadog là một giải pháp tất cả trong một cho một loạt các sản phẩm giám sát và bảo mật. Nó tập trung nhiều hơn vào việc giám sát mạng, đám mây và tất cả các vấn đề liên quan đến backend.
Trong số tất cả các tùy chọn khác có sẵn, Datadog có thể nằm ở cuối danh sách khi nói đến tính dễ sử dụng và thân thiện với người dùng.
Ưu điểm
- Giải pháp tất cả trong một cho một thuê bao
- Hỗ trợ tuyệt vời cho backend
- Hỗ trợ cộng đồng khá tốt
Honeybadger
Được biết đến với khả năng theo dõi lỗi và giám sát thời gian hoạt động, Honeybadger có hỗ trợ tốt cho tất cả các loại ứng dụng backend và hỗ trợ JavaScript tối thiểu. Nó đã có mặt từ lâu và tôi đã thấy các đồng nghiệp của mình (các lập trình viên backend) dựa vào nó cho bất kỳ vấn đề/sự báo động nào trong sản xuất, điều này khiến nó xứng đáng được đề cập.
Ưu điểm
- Dễ dàng và đáng tin cậy
- Tích hợp với Slack, GitHub, v.v.
Bắt đầu với kế hoạch miễn phí 🍻
Để bắt đầu, hãy thử một vài công cụ này trước khi kết nối chúng với ứng dụng sản xuất của bạn. Dưới đây là một so sánh nhanh về các kế hoạch miễn phí mà các công cụ phần mềm này cung cấp.
| Tính năng | Bugsnag | Sentry | Datadog | Honeybadger |
|---|---|---|---|---|
| Người dùng | 1 | 1 | Không giới hạn | 1 |
| Giám sát lỗi | Có | Có | Có | Có |
| Cảnh báo | Hàng tuần | Không | Không | Có |
| Thời gian lưu trữ/Hiển thị dữ liệu | 30 Ngày | 30 Ngày | 1 Ngày | 15 Ngày |
| Giới hạn lỗi | 7.5k | 50k | Không giới hạn | 5k |
Kết luận
Chúng ta đã điểm qua một cách ngắn gọn về giám sát lỗi cho các ứng dụng web. Mỗi phần mềm/dịch vụ này đều có những ưu điểm và nhược điểm riêng, và chúng ta có thể chọn cái phù hợp nhất cho ứng dụng cụ thể của mình.
Cảm ơn bạn đã đọc! 👋
