Posted inMonitoring

Grafana Faro: ‘Mắt thần’ giám sát trải nghiệm người dùng (RUM) cho ứng dụng Web

Monitoring tutorial - IT technology blog
Monitoring tutorial - IT technology blog

Khi Dashboard ‘xanh mướt’ nhưng khách hàng vẫn rời bỏ website

2 giờ sáng, điện thoại rung bần bật. Dashboard Prometheus báo CPU chỉ 15%, RAM dư dả, Nginx log trả về toàn 200 OK. Mọi thứ trông có vẻ hoàn hảo. Tuy nhiên, khách hàng lại đang phàn nàn trên Fanpage rằng nút ‘Thanh toán’ bấm hoài không ăn.

Các công cụ monitoring truyền thống như Prometheus hay Zabbix thường chỉ nhìn thấy bề nổi tại Server. Chúng hoàn toàn “mù tịt” trước những gì diễn ra trong trình duyệt của người dùng. Có thể một file JS bị lỗi, mạng khách hàng chập chập chờn, hoặc một file CSS nặng 5MB đang chặn đứng quá trình render trang web.

Grafana Faro chính là mảnh ghép cuối cùng để giải quyết bài toán này. Đây là giải pháp Real User Monitoring (RUM) giúp bạn soi rõ từng hành vi nhỏ nhất phía Client. Nếu bạn đã dùng Loki cho log và Tempo cho trace, Faro sẽ giúp bạn đạt được trạng thái Full-stack Observability thực thụ.

Thiết lập Backend: Cấu hình trạm thu phát dữ liệu

Dữ liệu từ trình duyệt không đẩy trực tiếp vào Database. Chúng cần đi qua một bộ thu thập trung gian. Trước đây chúng ta dùng Grafana Agent, nhưng hiện tại Grafana Alloy là lựa chọn tối ưu và linh hoạt hơn hẳn.

Bước 1: Cấu hình Grafana Alloy

Hãy tạo file config.alloy trên server. Bạn cần mở một endpoint để Faro SDK từ phía trình duyệt có thể gửi dữ liệu về.

faro.receiver "default" {
  server {
    listen_address = "0.0.0.0"
    listen_port = 12347
    cors_allowed_origins = ["https://yourdomain.com"] 
  }

  output {
    logs   = [loki.write.local.receiver]
    traces = [otelcol.exporter.otlp.tempo.receiver]
  }
}

Lưu ý quan trọng: Đừng bao giờ để cors_allowed_origins = ["*"] khi chạy production. Mình từng chứng kiến một hệ thống bị ‘ngập’ 10GB log rác mỗi ngày chỉ vì các domain lạ hoắc đẩy dữ liệu về, gây tốn kém chi phí lưu trữ vô ích.

Bước 2: Kết nối với Loki

Tiếp theo, hãy định nghĩa nơi lưu trữ log. Nếu bạn tự host Loki, hãy điền chính xác địa chỉ IP server vào cấu hình bên dưới:

loki.write "local" {
  endpoint {
    url = "http://loki-server:3100/loki/api/v1/push"
  }
}

Tích hợp Faro SDK vào ứng dụng Frontend

Sau khi ‘trạm thu phát’ đã sẵn sàng, chúng ta sẽ gắn các cảm biến vào ứng dụng Web. Faro hỗ trợ cực tốt cho React, Vue, Angular và cả Javascript thuần.

Cài đặt thư viện

Sử dụng npm để thêm SDK vào dự án của bạn:

npm install @grafana/faro-web-sdk

Khởi tạo Faro trong mã nguồn

Hãy đặt đoạn code khởi tạo tại file chạy đầu tiên của ứng dụng, ví dụ index.js hoặc main.ts. Điều này đảm bảo bạn không bỏ lỡ bất kỳ lỗi nào ngay từ khi ứng dụng bắt đầu load.

import { initializeFaro } from '@grafana/faro-web-sdk';

initializeFaro({
  url: 'https://telemetry.yourcompany.com/collect',
  app: {
    name: 'ecommerce-frontend',
    version: '1.2.0',
    environment: 'production',
  },
  instrumentations: [
    ...getWebInstrumentations(),
    new TracingInstrumentation(),
  ],
});

Mẹo nhỏ tránh nhiễu tin: Đừng log mọi thứ. Mình từng mắc sai lầm khi bắt cả console.log thông thường. Kết quả là các lỗi nghiêm trọng bị chìm nghỉm giữa hàng ngàn dòng log vô thưởng vô phạt của đội phát triển. Hãy chỉ tập trung vào uncaught exceptions và error logs.

Khai thác dữ liệu: Biến con số thành hành động

Khi dữ liệu bắt đầu đổ về Grafana, bạn sẽ thấy những thông tin mà trước đây chỉ có thể… đoán.

1. Chỉ số Web Vitals thực tế

Faro cung cấp các chỉ số sống còn giúp đánh giá trải nghiệm người dùng:

  • LCP (Largest Contentful Paint): Nếu con số này > 2.5s, hãy tối ưu lại ảnh. Một tấm ảnh banner 5MB có thể là thủ phạm khiến khách hàng thoát trang sớm.
  • CLS (Cumulative Layout Shift): Đo độ giật lag của giao diện. Không ai thích một trang web mà các nút bấm cứ nhảy lung tung khi đang load.

2. Truy vết lỗi Javascript

Trong mục Explore của Grafana, bạn có thể xem chi tiết stack trace của từng lỗi. Faro cung cấp sẵn thông tin về trình duyệt, hệ điều hành và thậm chí là độ phân giải màn hình. Điều này giúp team QA tái hiện lỗi cực nhanh thay vì phải hỏi khách hàng: “Anh/chị dùng máy gì, bấm vào đâu?”.

3. Độ trễ mạng (Network Latency)

Có những trường hợp Server báo xử lý chỉ mất 50ms, nhưng Faro báo người dùng phải chờ tới 2s. Sự chênh lệch này giúp bạn nhận ra vấn đề nằm ở đường truyền mạng hoặc do Payload API quá nặng khiến trình duyệt xử lý chậm chạp.

Lời kết từ thực tế triển khai

Triển khai Faro không khó, nhưng biết cách lọc dữ liệu mới là chìa khóa. Hãy bắt đầu với việc theo dõi lỗi JS và Web Vitals trước khi mở rộng sang Distributed Tracing.

Từ khi có Faro, những cuộc gọi khẩn cấp lúc nửa đêm của mình giảm hẳn. Thay vì ngồi đoán mò, mình chỉ cần mở Dashboard và chỉ rõ: “Khách hàng ở khu vực X đang gặp lỗi trên Chrome phiên bản Y”. Đó mới là cách chúng ta làm chủ hệ thống một cách chuyên nghiệp.

Share:
Tags: