SDK JavaScript của Sentry cung cấp một bộ công cụ mạnh mẽ để giám sát lỗi và hiệu năng trong ứng dụng web. Việc cấu hình đúng cách không chỉ giúp giảm nhiễu dữ liệu mà còn tối ưu hóa khả năng phân tích sự cố thực tế.

Cấu hình khởi tạo cơ bản

Dưới đây là ví dụ về cách khởi tạo SDK với các tùy chọn quan trọng được thiết lập theo chuẩn thực tiễn:

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://examplePublicKey@o123456.ingest.sentry.io/123456',
  environment: 'production',
  release: 'my-app@2.4.1',
  enabled: process.env.NODE_ENV === 'production',
  debug: false,

  // Lọc lỗi theo nội dung hoặc loại ngoại lệ
  ignoreErrors: [
    /ResizeObserver loop limit exceeded/,
    'Non-Error exception captured',
    'Script error.'
  ],

  // Loại trừ lỗi phát sinh từ các miền hoặc tài nguyên bên ngoài
  denyUrls: [
    /cdn\.third-party\.com/,
    /analytics\.js/
  ],

  // Chỉ thu thập lỗi từ các nguồn đáng tin cậy
  allowUrls: [
    /^https?:\/\/(app|dashboard)\.mycompany\.com/,
    /localhost:3000/
  ],

  // Tích hợp bổ sung (ví dụ: Performance Monitoring)
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV6Instrumentation(
        useEffect,
        useLocation,
        useParams
      ),
      tracePropagationTargets: ['localhost', /^https:\/\/api\.mycompany\.com/]
    }),
    new Sentry.Replay()
  ],

  // Xử lý sự kiện trước khi gửi
  beforeSend: async (event, hint) => {
    const error = hint.originalException;
    
    // Bổ sung thông tin ngữ cảnh nếu là lỗi tùy chỉnh
    if (error && error.constructor.name === 'ApiNetworkError') {
      event.contexts = {
        ...event.contexts,
        api: {
          url: error.url,
          status: error.status,
          durationMs: error.duration
        }
      };
    }

    // Loại bỏ thông tin nhạy cảm
    if (event.request?.data) {
      event.request.data = '[REDACTED]';
    }

    return event;
  },

  // Điều chỉnh breadcrumb theo hành vi người dùng
  beforeBreadcrumb: (breadcrumb, hint) => {
    // Bỏ qua các thao tác không liên quan đến trải nghiệm người dùng
    if (breadcrumb.category === 'console' && breadcrumb.level === 'log') {
      return null;
    }

    // Gắn nhãn rõ ràng cho các tương tác UI
    if (breadcrumb.category === 'ui.click' && hint?.event?.target) {
      const target = hint.event.target;
      const label = target.getAttribute('data-track-label') || target.textContent?.trim();
      if (label) {
        breadcrumb.message = `Click: ${label}`;
      }
    }

    return breadcrumb;
  }
});

Chạy thử nghiệm cục bộ

Để kiểm tra nhanh các mẫu cấu hình, bạn có thể sử dụng máy chủ HTTP đơn giản:

# Vào thư mục ví dụ trình duyệt
cd packages/browser/examples

# Khởi chạy máy chủ trên cổng 8000
npx http-server -p 8000 -c-1
# Hoặc với Python 3
python3 -m http.server 8000

Sau đó truy cập http://localhost:8000 để xem các ví dụ minh họa trực tiếp như bắt lỗi đồng bộ, xử lý promise rejection, ghi breadcrumb tương tác, và kiểm soát mức độ mẫu (sampling) cho transaction.

Lưu ý triển khai

• Luôn đặt enabled: false trong môi trường phát triển để tránh gửi dữ liệu sai lệch.
• Sử dụng allowUrls kết hợp với denyUrls để kiểm soát chính xác nguồn lỗi.
• Hạn chế truyền dữ liệu nhạy cảm qua beforeSend, đặc biệt là trong event.extra hoặc event.request.data.
• Với ứng dụng SPA, nên tích hợp BrowserTracing kèm công cụ định tuyến phù hợp (React Router, Vue Router…).