Cầu nối Sentry, Bugsnag & Datadog RUM

Tăng tốc quy trình kỹ thuật và QA bằng cách liên kết ngoại lệ JavaScript phía giao diện trực tiếp với bản ghi video phiên MousePlayer.

1. Vấn đề: dấu vết ngăn xếp không cho thấy bối cảnh người dùng

Khi ngoại lệ JavaScript chưa được xử lý hoặc lỗi mạng xảy ra trên trang, công cụ giám sát lỗi như Sentry cung cấp dấu vết ngăn xếp khô khan và chuỗi user-agent trình duyệt. Tuy nhiên kỹ sư vẫn tự hỏi: “Người dùng đã nhấp nút nào ngay trước khi lỗi xảy ra?” hoặc “Dữ liệu nào được nhập vào biểu mẫu?”

Cầu nối theo dõi lỗi MousePlayer tự giải quyết bằng cách đưa URL phát lại trực quan vào báo cáo lỗi. Khi có ngoại lệ, kỹ sư có thể nhấp một liên kết trong bảng điều khiển Sentry hoặc Bugsnag để xem bản ghi video màn hình người dùng đến đúng mili giây xảy ra lỗi.

Tích hợp không tăng tải: Cầu nối chạy âm thầm như trình theo dõi nền bên trong mp.js. Nó tự nhận diện SDK theo dõi lỗi mà không tăng tải đo được hoặc ảnh hưởng Core Web Vitals.

2. Kích hoạt & ánh xạ nhà cung cấp

Bạn có thể bật cầu nối theo dõi lỗi qua giao diện bảng điều khiển hoặc bằng mã qua đối tượng cấu hình SDK.

Cách A: kích hoạt qua bảng điều khiển (không cần mã)

  1. Đăng nhập không gian làm việc MousePlayer và mở Các thuộc tính của bạn.
  2. Nhấp nút Cài đặt / Tích hợp cạnh trang web cần thiết lập.
  3. Trong cửa sổ Tích hợp, chuyển Cầu nối Sentry, Bugsnag & Datadog RUM sang ON.
  4. Chọn nhà cung cấp (sentry, bugsnag hoặc datadog) và nhấp Lưu thay đổi.

Cách B: cấu hình tập lệnh thủ công

Nếu muốn đặt cấu hình trực tiếp trong mã, hãy truyền error_bridge_active: true trong đối tượng window.mp_config của bạn:

<!-- MousePlayer SDK with Error Tracking Bridge Enabled --> <script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', or 'datadog' }; </script>

3. Bảng thực thi SDK kỹ thuật

Tùy nhà cung cấp đã chọn, MousePlayer tự thực thi các phương thức gắn thẻ JavaScript SDK chính thức:

Nhà cung cấp Phương thức JavaScript được thực thi Khóa siêu dữ liệu được chèn
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. Nơi tìm bản phát lại trong báo cáo lỗi

Khi hoạt động, URL phát lại xuất hiện ngay trong bảng điều khiển giám sát lỗi mỗi khi lỗi phía giao diện được ghi nhận.

Chi tiết vấn đề Sentry

Mở bất kỳ vấn đề nào trong dự án Sentry và cuộn xuống phần Thẻ. Bạn sẽ thấy thẻ có tên mouseplayer_session_url. Bạn cũng có thể lọc vấn đề Sentry bằng thanh tìm kiếm truy vấn: mouseplayer_session_url:*.

Thẻ siêu dữ liệu Bugsnag

Trong báo cáo lỗi Bugsnag, kiểm tra các thẻ điều hướng phía dưới. Một thẻ tùy chỉnh mới tên MousePlayer sẽ xuất hiện, chứa siêu liên kết nhấp được session_url.

Trình khám phá lỗi Datadog RUM

Trong Datadog RUM, đến bất kỳ phiên lỗi đã ghi nào và kiểm tra cây JSON Ngữ cảnh toàn cục / Thuộc tính. URL được lập chỉ mục tại @mouseplayer_session_url.

Mọi nhãn hiệu nêu ở đây thuộc chủ sở hữu tương ứng. MousePlayer không có quan hệ kinh doanh với các nhà cung cấp này.