Monitoring & Logging: Sentry Integration

Trên localhost, bạn thấy lỗi đỏ lòm trong Terminal. Trên Production, user thấy màn hình trắng và bỏ đi. Bạn không biết gì cả. Bạn cần Sentry.

1. Tại sao cần Sentry?

• Real-time Alert: Nhận email ngay khi có lỗi mới.
• Context: Biết lỗi xảy ra trên trình duyệt nào, OS nào, User ID nào.
• Breadcrumbs: Hành trình của user trước khi lỗi (Click nút A -> Nhập form B -> LỖI).
• Source Maps: Dịch code minify loằng ngoằng (at a.b (xc.js:1:2)) về đúng dòng code gốc (App.tsx:25).

2. Setup Sentry cho Next.js

npx @sentry/wizard@latest -i nextjs

Lệnh này tự động cấu hình next.config.js và tạo các file khởi tạo sentry.client.config.ts, sentry.server.config.ts.

3. Capture Error thủ công

Đôi khi Sentry không tự bắt được (ví dụ lỗi trong try/catch mà bạn lỡ nuốt mất). Hãy báo cáo thủ công:

import * as Sentry from "@sentry/nextjs";

try {
  await paymentProcess();
} catch (error) {
  // Capture lỗi kèm thêm thông tin
  Sentry.captureException(error, {
    extra: {
      cartId: '123',
      amount: 50000
    },
    user: {
      email: user.email
    }
  });

  // Sau đó hiện UI lỗi cho user
  showErrorToast();
}

4. Performance Monitoring

Sentry cũng đo được Core Web Vitals và Backend Transaction Time. Bạn sẽ biết API /api/users chậm là do SQL Query lâu hay do Next.js render lâu.

Kết luận

"Không có log = Không có lỗi" là tư duy sai lầm. "Có log = Có cơ hội sửa trước khi khách hàng phàn nàn" mới là tư duy chuyên nghiệp.