Sentry Error Tracking là gì? Cách theo dõi và cảnh báo lỗi JavaScript theo thời gian thực

Khách hàng đang lướt web trên điện thoại và bấm nút Thanh toán nhưng không thấy phản ứng gì do một lỗi JavaScript ngầm, họ lặng lẽ thoát khỏi trang web mà bạn KHÔNG HỀ HAY BIẾT! Sentry Error Tracking (Hệ thống giám sát lỗi ứng dụng) giúp bạn **phát hiện và nhận cảnh báo lỗi tức thì về Telegram/Email** ngay khi lỗi vừa xuất hiện ở máy khách hàng!

1. Sentry Error Tracking hoạt động thế nào?

Sentry là một SDK giám sát mã nguồn. Khi có bất kỳ ngoại lệ (Exception) hay lỗi không bắt được (Unhandled Rejection) xuất hiện ở cả phía Client Browser lẫn Node.js Server, Sentry tự động thu thập:

• Stack Trace chi tiết: Chỉ rõ tên file và đúng dòng code bị lỗi.
• Thông tin thiết bị: Trình duyệt, Hệ điều hành, Kích thước màn hình của khách hàng.
• Breadcrumbs (Vết chân thao tác): Danh sách các nút bấm mà khách hàng đã nhấp vào trước khi xảy ra lỗi.

2. 3 Bước tích hợp Sentry vào Next.js App Router

Bước 1: Chạy lệnh tự động cài đặt SDK

Chạy lệnh CLI chính thức của Sentry trong thư mục dự án:

npx @sentry/wizard@latest -i nextjs

Bước 2: Cấu hình file sentry.server.config.js & sentry.client.config.js

CLI sẽ tự động tạo các file cấu hình chứa mã DSN của dự án Sentry.

Bước 3: Bật tính năng Source Maps để xem dòng code gốc

Sentry tự động tải file Source Maps lên máy chủ Sentry trong lúc pnpm build giúp giải mã các đoạn code đã bị nén (Minified) thành dòng code gốc rõ ràng.

3. Tích hợp thông báo cảnh báo lỗi về Telegram Bot

Trong Sentry Dashboard → Alerts → Integrations → Kết nối với Telegram Bot. Mỗi khi có một lỗi mới xuất hiện ở phía khách hàng, Telegram sẽ tít tít báo về điện thoại của bạn ngay lập tức!

Kết luận

Sentry là trợ lý giám sát 24/7 giúp sản phẩm web của bạn luôn duy trì chất lượng ổn định cao nhất. Uwmee Software tích hợp sẵn hệ thống theo dõi lỗi Sentry cho mọi dự án Web App. Đọc thêm bài viết Monitoring Website với OpenTelemetry.